Гутенберг: простой блок рендеринга в бэк-энде - PullRequest
Новая
       9

Гутенберг: простой блок рендеринга в бэк-энде

0 голосов
/ 26 января 2019

Я построил простой div блок с блоком guten.

Все делает то, что должно, но если я даю div пользовательский класс, то он не отображается в бэкэнде.

Как я могу это изменить? 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

/**
 * BLOCK: bootstrap-blocks
 *
 * Registering a bootstrap container
 */

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;

registerBlockType( 'div-block/main', {
  title: 'div',
  icon: 'index-card',
  category: 'bootstrap-blocks',
    edit( { attributes, className, setAttributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks />
            </div>
        );
    },
    save( { attributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

1 Ответ

0 голосов
/ 26 января 2019

Область редактора WP Admin оформлена с использованием файла editor-style.css вашей темы - details .

Редактор администратора, использующий Гутенбург, использует тот же файл с некоторыми небольшими оговорками. А именно, он автоматически преобразует body в CSS в .editor-styles-wrapper, потому что область редактора больше не загружается в iframe (классический редактор загружен / был загружен в iframe) - details .

Итак, прямо к сути, добавьте add_theme_support('editor-styles'); в ваш файл functions.php, а затем добавьте стили вашего блока в файл editor-style.css вашей темы.

...