Как добавить полную настройку в настраиваемый блок Gutenberg WordPress?

Я пишу свой собственный блок wordpress. В редакторе это выглядит так: снимок экрана редактора

После сохранения он выглядит так: снимок экрана страницы

Проблема в том, что я использую RichText компонент wordpress для текста в правой части блока, но я не могу добавить в него некоторые списки, кнопки или другие средства массовой информации. Как добавить эту функциональность в свой настраиваемый блок?


person Dmytro Sokolovskyi    schedule 09.10.2020    source источник


Ответы (1)


Используйте внутренние блоки для создания контейнерный блок для нескольких различных компонентов. В вашем примере скриншота вместо использования элемента управления RichText блок core / paragraph имеет элементы управления форматированием, а также при необходимости может преобразовывать абзац в список.

Если ваш дизайн блока имеет «фиксированный» макет, где всегда будет текст / список / кнопка, вы можете определить шаблон того, какие блоки разрешены в InnerBlocks, а затем заблокировать шаблон, чтобы новые блоки не могли быть добавлены, например:

const MY_TEMPLATE = [
    ['core/paragraph'],
    ['core/list'],
    ['core/buttons'],
];

// ...
edit: () => {
    return (
        <InnerBlocks
            templateLock="all" // optional
            template={MY_TEMPLATE}
        />
    );
},

В приведенном выше примере создается макет блока в редакторе, например:  Редактор WordPress Gutenberg

Полный обзор и пример реализации InnerBlocks см. В документации разработчика WordPress: https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-блоки/

person S.Walsh    schedule 24.10.2020
comment
Это именно то, что я искал. Большое тебе спасибо! - person Dmytro Sokolovskyi; 25.10.2020