В последние годы редактор Gutenberg стал стандартом для создания контента в WordPress. Если вы разрабатываете собственный плагин, добавление поддержки блоков Gutenberg позволит пользователям создавать и настраивать контент более гибко и удобно. В этой статье мы подробно разберем, как правильно интегрировать кастомные блоки в ваш WordPress плагин с примерами кода и рекомендациями по лучшим практикам.
Почему стоит добавить поддержку Gutenberg блоков в плагин
Gutenberg блоки предоставляют визуальный и структурированный способ создания контента. Добавив блоки, вы улучшаете UX, даете пользователям возможность настраивать элементы без знаний кода, а также повышаете совместимость с современными темами и плагинами. Более того, Gutenberg развивается, и поддержка блоков — это инвестиция в будущее вашего продукта.
Если ваш плагин добавляет кастомные функциональные элементы, например, отзывы, формы, слайдеры, таблицы или любые виджеты, интеграция блоков позволит легко вставлять эти элементы в контент через редактор, с настройками прямо в интерфейсе.
Основы создания Gutenberg блоков для вашего плагина
Для начала нужно понимать, что Gutenberg блоки — это React-компоненты, написанные на JavaScript (ES6+) с использованием @wordpress/scripts. В плагине вам нужно зарегистрировать блоки с помощью PHP и подключить соответствующие скрипты и стили.
Структура плагина с поддержкой блоков
Пример структуры файлов:
wpplugin-gutenberg-blocks.php— основной файл плагина/build/index.js— скомпилированный JS для блоков/src/block.js— исходный JS файл с кодом блоков/build/style.css— стили блоков
Для сборки и компиляции JS используется Webpack и Babel через @wordpress/scripts. Это упрощает интеграцию React и JSX.
Регистрация блока на стороне сервера (PHP)
В файле плагина нужно зарегистрировать блок, подключить скрипты и стили:
function wpplugin_register_gutenberg_block() {
// Регистрируем скрипт блока
wp_register_script(
'wpplugin-block-editor-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
// Регистрируем стили для блока
wp_register_style(
'wpplugin-block-style',
plugins_url( 'build/style.css', __FILE__ ),
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'build/style.css' )
);
// Регистрируем сам блок
register_block_type( 'wpplugin/custom-block', array(
'editor_script' => 'wpplugin-block-editor-script',
'style' => 'wpplugin-block-style',
) );
}
add_action( 'init', 'wpplugin_register_gutenberg_block' );Этот код подключит скрипты и стили только при редактировании и отображении блоков.
Пример простого Gutenberg блока на JavaScript
Создадим блок, который выводит на страницу кастомный текст с возможностью редактирования в редакторе.
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
registerBlockType('wpplugin/custom-block', {
title: 'WPPlugin: Кастомный текстовый блок',
icon: 'edit',
category: 'common',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
},
edit({ attributes, setAttributes }) {
const { content } = attributes;
return (
<RichText
tagName="p"
value={content}
onChange={(content) => setAttributes({ content })}
placeholder="Введите текст..."
/>
);
},
save({ attributes }) {
const { content } = attributes;
return <RichText.Content tagName="p" value={content} />;
},
});Этот код создает блок с редактируемым параграфом, который сохраняет введенный контент.
Использование популярных плагинов для помощи с блоками
Если вы хотите расширить функциональность и сэкономить время, можно использовать плагины, которые упрощают создание блоков и добавляют полезные компоненты:
- Clearfy Pro — оптимизация и управление функционалом сайта, включая интеграцию с Gutenberg
- WPRemark — отзывы и рейтинги с поддержкой блоков
Использование готовых компонентов и API этих плагинов поможет быстро создавать мощные блоки с минимальными усилиями.
Советы и лучшие практики при разработке Gutenberg блоков
Локализация и международная поддержка
Используйте функции WordPress для локализации, например, wp.i18n.__() в JS и __() в PHP, чтобы перевести текст блоков и интерфейса.
Оптимизация загрузки ресурсов
Подключайте скрипты и стили только тогда, когда блок действительно используется, чтобы не замедлять сайт. Для этого можно использовать динамическую регистрацию и условные загрузки.
Совместимость с темами
Тестируйте блоки в популярных темах, чтобы убедиться, что стили не конфликтуют и блоки отображаются корректно.
Расширенный пример: блок с настройками и динамическим выводом
Создадим блок, который позволяет выбрать цвет фона и выводит динамический текст.
import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody, ColorPalette } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
registerBlockType('wpplugin/dynamic-block', {
title: __('WPPlugin: Динамический блок', 'wpplugin'),
icon: 'admin-customizer',
category: 'widgets',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'div',
},
backgroundColor: {
type: 'string',
default: '#ffffff',
},
},
edit({ attributes, setAttributes }) {
const { content, backgroundColor } = attributes;
return (
<>
<InspectorControls>
<PanelBody title={__('Цвет фона', 'wpplugin')} initialOpen={true}>
<ColorPalette
value={backgroundColor}
onChange={(color) => setAttributes({ backgroundColor: color })}
/>
</PanelBody>
</InspectorControls>
<div style={{ backgroundColor, padding: '20px' }}>
<RichText
tagName="div"
value={content}
onChange={(content) => setAttributes({ content })}
placeholder={__('Введите текст...', 'wpplugin')}
/>
</div>
</>
);
},
save({ attributes }) {
const { content, backgroundColor } = attributes;
return (
<div style={{ backgroundColor, padding: '20px' }}>
<RichText.Content tagName="div" value={content} />
</div>
);
},
});В этом блоке пользователь может выбрать цвет фона через панель настроек, а также ввести произвольный текст. Такой подход расширяет возможности кастомизации.
Заключение
Добавление поддержки Gutenberg блоков в собственный WordPress плагин — это важный шаг для создания современного, удобного и гибкого продукта. Используйте приведенные примеры как основу, расширяйте функционал, учитывайте UX и совместимость. Если нужна помощь с оптимизацией или дополнительными возможностями, обратите внимание на плагины из WPSHOP.