Как добавить полную настройку в пользовательский блок wordpress gutenberg?

#wordpress #wordpress-theming #wordpress-gutenberg

#wordpress #wordpress-тематизация #wordpress-gutenberg

Вопрос:

я пишу свой собственный пользовательский блок WordPress. В редакторе это выглядит так: скриншот edtor

И после того, как он будет сохранен, он выглядит так: скриншот страницы

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

Ответ №1:

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

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

 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-blocks /

Комментарии:

1. Это именно то, что я искал. Большое вам спасибо!