Как ограничить выбор блока первого уровня в редакторе Gutenberg

Содержание

Вопрос или проблема
Ответ или решение
Создание кастомного блока
Ограничение выбора блоков
Пример полного кода
Настройка шаблона поста (опционально)
Заключение

Вопрос или проблема

У меня есть собственный пользовательский блок с компонентом InnerBlock, который является своего рода контейнером для содержимого каждого раздела в документе.

Весь процесс добавления контента всегда начинается с добавления этого блока. Поэтому я хотел бы ограничить выбор блоков первого уровня только этим одним блоком.

Как только пользователь добавляет этот блок, он может добавлять другие блоки внутрь.

Это вопрос без примера кода, так как я не знаю, с чего начать. Я видел идеи вроде шаблонов, но это неуместно в данном случае.

Цель, которую необходимо достичь (простыми словами):

пользователь создает новый пост
может выбрать только один конкретный блок
только в этом блоке он может выбирать другие доступные блоки
это может происходить несколько раз в одном посте

Создайте новый пользовательский блок, давайте назовем его CustomSecondary, который содержит экземпляр InnerBlocks.

При регистрации этого блока установите его свойство parent на ваш основной пользовательский блок и

registerBlockType(
    'custom-secondary',
    {
        parent: ['your-main-block'],
        edit: () => ( <InnerBlocks />)
        { .. ваши другие свойства }
    });

Это сделает так, что этот блок можно будет вставить только в ваш основной блок.

В свойстве edit вашего основного блока добавьте allowedBlocks в ваш экземпляр InnerBlocks и разрешите только ваш custom-secondary блок.

<InnerBlocks allowedBlocks={[ 'custom-secondary' ]} />

Теперь при вставке у вас будет только этот вариант, и в custom-secondary могут быть любые блоки, которые вы хотите.

Чтобы контролировать шаблон самого поста, вы можете добавить следующий фильтр:

function myplugin_register_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
    );
}
add_action( 'init', 'myplugin_register_template' );

Вам может понадобиться рассмотреть использование заблокированного шаблона с одним блоком, в который можно вставлять элементы.

Ответ или решение

Для ограничения выбора блоков первого уровня в редакторе Gutenberg и предоставления пользователю возможности добавления только одного конкретного блока, который может содержать внутренние блоки (InnerBlocks), вам потребуется выполнить следующие шаги:

Создание кастомного блока

Регистрация основного блока: Вам нужно создать кастомный блок, который будет служить контейнером для других блоков. Давайте назовем его CustomMain. В этом блоке вы будете использовать InnerBlocks для вложенных блоков.
```
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType('custom/main', {
   title: 'Custom Main Block',
   category: 'common',
   edit: () => (
       <InnerBlocks allowedBlocks={['custom/secondary']} />
   ),
   save: () => (
       <InnerBlocks.Content />
   ),
});
```
Создание вложенного блока: Теперь создайте второй блок, который будет вложен в первый и будет называться CustomSecondary. Этот блок также будет использовать InnerBlocks, чтобы позволить добавление других блоков внутри него.
```
registerBlockType('custom/secondary', {
   title: 'Custom Secondary Block',
   parent: ['custom/main'], // Ограничиваем родительский блок
   edit: () => (
       <InnerBlocks />
   ),
   save: () => (
       <InnerBlocks.Content />
   ),
});
```

Ограничение выбора блоков

В основном блоке вы уже указали allowedBlocks, что позволяет добавлять только блок CustomSecondary. Таким образом, пользователь сможет создать новый пост и добавить только ваш основной блок.

Пример полного кода

Вот пример, как это будет выглядеть в коде:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

// Регистрация основного блока
registerBlockType('custom/main', {
    title: 'Custom Main Block',
    category: 'common',
    edit: () => (
        <InnerBlocks allowedBlocks={['custom/secondary']} />
    ),
    save: () => (
        <InnerBlocks.Content />
    ),
});

// Регистрация вложенного блока
registerBlockType('custom/secondary', {
    title: 'Custom Secondary Block',
    parent: ['custom/main'],
    edit: () => (
        <InnerBlocks />
    ),
    save: () => (
        <InnerBlocks.Content />
    ),
});

Настройка шаблона поста (опционально)

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

function myplugin_register_template() {
    $post_type_object = get_post_type_object('post');
    $post_type_object->template = array(
        array('custom/main'),
    );
}
add_action('init', 'myplugin_register_template');

Заключение

С помощью этих шагов вы сможете создать кастомные блоки в редакторе Gutenberg, ограничить выбор первого уровня только определенным блоком и позволить пользователю добавлять другие блоки внутри него. Это даст вам гибкость при создании терминала для редактирования контента, который будет соответствовать вашим потребностям.