Компонент InnerBlocks позволяет создавать блоки, содержащие другие блоки. Это мощный инструмент для создания таких комплексных структур, как блоки колонок, социальных ссылок и другие, где требуется наличие дочерних блоков. В данном руководстве мы рассмотрим, как использовать InnerBlocks, а также пропсы, которые помогают управлять вложенностью, типами вложенных блоков, ориентацией, шаблонами и многим другим.
Базовое использование InnerBlocks
Для начала создадим простой пример использования InnerBlocks.
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
registerBlockType('gutenberg-examples/example-06', {
edit: () => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<InnerBlocks />
</div>
);
},
save: () => {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
},
});
В этом примере InnerBlocks позволяет добавлять вложенные блоки в наш основной блок, предоставляя гибкость для его пользователей.
Ограничение типов вложенных блоков с помощью allowedBlocks
Свойство allowedBlocks ограничивает типы блоков, которые могут быть добавлены как дочерние к данному блоку. Например:
<InnerBlocks allowedBlocks={['core/paragraph', 'core/image']} />
Это свойство полезно для точного контроля над типами блоков, которые могут быть добавлены.
Ориентация вложенных блоков
По умолчанию, InnerBlocks отображает блоки вертикально. Для горизонтального расположения можно использовать проп orientation="horizontal":
<InnerBlocks orientation="horizontal" />
Это особенно удобно для визуально последовательных блоков, таких как элементы навигации или социальных ссылок.
Установка блока по умолчанию
При необходимости можно настроить блок по умолчанию, который будет добавляться при первом клике на кнопку добавления блока. Это достигается с помощью свойства defaultBlock:
<InnerBlocks defaultBlock={['core/paragraph', {placeholder: "Введите текст..."}]} directInsert />
Здесь directInsert позволяет вставлять блок по умолчанию без отображения меню выбора.
Шаблоны блоков
Чтобы упростить работу с часто используемыми структурами блоков, можно использовать шаблоны:
const TEMPLATE = [
['core/image', {}],
['core/heading', {placeholder: 'Название книги'}],
['core/paragraph', {placeholder: 'Описание'}],
];
<InnerBlocks template={TEMPLATE} templateLock="all" />
Свойство templateLock ограничивает возможности редактирования шаблона. Используя all, мы блокируем возможность добавления новых блоков и удаления существующих.
Шаблоны для постов
Для создания определенной структуры в записях можно использовать пост-шаблоны. Это шаблоны, применимые ко всему содержимому поста.
add_action('init', function() {
$post_type_object = get_post_type_object('post');
$post_type_object->template = [
['core/image'],
['core/heading']
];
});
Отношения родительских и дочерних блоков
Чтобы создавать гибкие структуры блоков, в которых дочерние блоки могут добавляться только внутри родительских, в WordPress предусмотрены три типа отношений: parent, ancestor и allowedBlocks.
- Родительский блок (
parent): Позволяет дочернему блоку отображаться только внутри указанного родителя. - Предковый блок (
ancestor): Позволяет дочернему блоку отображаться на любом уровне вложенности внутри предка. - Разрешенные блоки (
allowedBlocks): Ограничивает типы блоков, которые можно добавлять в дочерние блоки.
Пример настройки родительского блока:
{
"title": "Column",
"name": "core/column",
"parent": ["core/columns"]
}
Использование хука useInnerBlocksProps
Хук useInnerBlocksProps предоставляет более гибкий способ работы с вложенными блоками. Этот подход позволяет использовать объекты для передачи свойств и работает аналогично useBlockProps.
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
registerBlockType('gutenberg-examples/example-06', {
edit: () => {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps(blockProps);
return (
<div {...innerBlocksProps} />
);
},
save: () => {
const blockProps = useBlockProps.save();
const innerBlocksProps = useInnerBlocksProps.save(blockProps);
return (
<div {...innerBlocksProps} />
);
},
});
Использование InnerBlocks в блоках WordPress
InnerBlocks предоставляет удобные компоненты, позволяющие создавать вложенные блоки в структуре блочного редактора. Это может быть полезно, например, для блоков, таких как Columns, которые включают в себя другие блоки.
Основы использования
Компоненты InnerBlocks можно добавить в функцию редактирования (edit) и сохранения (save) вашего блока. Вот базовый пример, показывающий, как внедрить InnerBlocks в свой блок.
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
registerBlockType( 'my-plugin/my-block', {
// ...
edit() {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<InnerBlocks />
</div>
);
},
save() {
const blockProps = useBlockProps.save();
return (
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
);
},
} );
Свойства InnerBlocks
- allowedBlocks – определяет допустимые типы блоков, которые можно добавлять. Пример:
const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
- orientation – определяет ориентацию блоков (горизонтальная или вертикальная).
- template – задаёт шаблон для начального состояния
InnerBlocks. Пример:
const TEMPLATE = [
[ 'core/columns', {}, [
[ 'core/column', {}, [ [ 'core/image' ] ] ],
[ 'core/column', {}, [ [ 'core/paragraph', { placeholder: 'Введите текст...' } ] ] ]
] ]
];
<InnerBlocks template={ TEMPLATE } />
- templateLock – позволяет блокировать редактирование шаблона. Значения:
'all','insert', илиfalse. - renderAppender – компонент, отображающий кнопку добавления блока. Вы можете задать стандартный компонент добавления или использовать собственный. Пример:
<InnerBlocks renderAppender={ InnerBlocks.ButtonBlockAppender } />
Заключение
Компонент InnerBlocks и хук useInnerBlocksProps открывают широкие возможности для создания сложных блоков в WordPress. Выбор между InnerBlocks и useInnerBlocksProps зависит от задач, но оба способа позволяют добавлять, ограничивать и управлять вложенными блоками.