Блоки для Gutenberg разрабатывают на React.
Это несколько нетрадиционно для WordPress, зато вполне традиционно для современной веб-разработки.
Разработчикам под WordPress, привыкшим к php, может быть весьма непривычно. Попробую немного прояснить ситуацию.
Все, что мы делаем на php — это прописываем местоположение файла с нашим компонентом React.
function add_gutenberg_blocks_scripts() {
wp_enqueue_script( 'section/component',get_template_directory_uri() . '/assets/js/blocks/component.js',
array('wp-blocks','wp-editor'),
true);
}
add_action('enqueue_block_editor_assets', 'add_gutenberg_blocks_scripts');
Далее, в файле «assets/js/blocks/component.js» на js регистрируем блок:
wp.blocks.registerBlockType('section/component', {
title: 'My Component Title',
icon: 'smiley',
category: 'layout',
attributes: { /* * Тут могут быть и другие переменные для хранения переменных состояния компонента. * Все типы можно посмотреть тут: https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/ **/ content: {type: 'string',
},
},
edit: (props) => (
<MyComponent {props} />
),
save: (props) => (
<MyComponentFrontend {props} />
),
});
Теперь нам нужно разработать компоненты:
MyComponent — компонент, который управляет отображением на бэкэнде, в редакторе. Этот компонент управляет исходными данными для управления внешним видом блока.
Полезная функция для обновления состояния компонента:
props.setAttributes({ content: value })
const MyComponent = (props) => (
<input type="text"
value={ props.attributes.content }
onChange={(event) => { props.setAttributes({ content: event.target.value }) }}
/>);
MyComponentFrontend — компонент, который управляет отображением на фронтэнде.
Тут выводим всю нужную нам разметку.
const MyComponentFrontend = (props) => (
<div className="h1">
{props.attributes.content}</div>
);
Если нужно внутри нашего компонента создать контейнер для других компонентов, нужно использовать компонент wp.blockEditor.InnerBlocks:
const MyComponent = (props) => (
<wp.blockEditor.InnerBlocks />
);
const MyComponentFrontend = (props) => (
<div className="bg-primary">
<wp.blockEditor.InnerBlocks.Content />
</div>
);