Современный редактор WordPress — Gutenberg — основан на блоках, которые позволяют создавать сложные макеты и интерактивный контент. Если вы разрабатываете собственный плагин, интеграция с Gutenberg даст пользователям удобный и мощный инструмент для работы с вашим функционалом. В этой статье подробно разберём, как добавить поддержку Gutenberg блоков в собственный плагин WordPress, рассмотрим примеры кода и полезные советы.
Что такое Gutenberg блоки и зачем их поддерживать в плагине
Gutenberg блоки — это элементы контента, которые пользователь может добавлять, настраивать и комбинировать внутри редактора. Они заменили классический визуальный редактор и значительно расширили возможности создания страниц и записей.
Добавляя поддержку блоков, вы облегчаете пользователям работу с вашим плагином, например, выводите специальные виджеты, формы, галереи, таблицы или другие интерактивные компоненты. Вместо сложного копирования шорткодов или HTML можно просто выбрать блок и настроить его параметры.
Поддержка блоков — это не только удобство, но и повышение востребованности вашего плагина за счёт интеграции с современными инструментами WordPress.
Основные шаги для создания Gutenberg блока в плагине
Чтобы добавить блоки в собственный плагин, нужно выполнить несколько важных шагов:
- Регистрировать блоки в PHP через функцию
register_block_type— это связывает блок с его JavaScript и PHP логикой. - Создать JavaScript-часть блока с использованием React и WordPress-библиотек (@wordpress/blocks, @wordpress/editor и т.д.).
- Добавить стили для редактора и фронтенда, чтобы блок выглядел корректно.
- Опционально реализовать серверный рендеринг блока на PHP для динамического контента.
Рассмотрим эти шаги подробнее с примерами.
Регистрация блока в PHP
В файле вашего плагина подключите регистрацию блока через хук init:
add_action('init', 'wpsolution_register_custom_block');
function wpsolution_register_custom_block() {
// Регистрируем скрипты и стили для блока
wp_register_script(
'wpsolution-block-script',
plugins_url('build/block.js', __FILE__),
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(plugin_dir_path(__FILE__) . 'build/block.js')
);
wp_register_style(
'wpsolution-block-style',
plugins_url('build/style.css', __FILE__),
array(),
filemtime(plugin_dir_path(__FILE__) . 'build/style.css')
);
// Регистрируем блок
register_block_type('wpsolution/custom-block', array(
'editor_script' => 'wpsolution-block-script',
'style' => 'wpsolution-block-style',
'render_callback' => 'wpsolution_render_custom_block', // Функция для PHP рендеринга
));
}
function wpsolution_render_custom_block($attributes) {
// Пример динамической генерации HTML
$content = '<div class="wpsolution-block">';
$content .= '<h3>' . esc_html($attributes['title']) . '</h3>';
$content .= '<p>' . esc_html($attributes['content']) . '</p>';
$content .= '</div>';
return $content;
}
Этот код регистрирует блок с названием wpsolution/custom-block, указывая скрипты и стили для редактора и фронтенда. Опция render_callback позволяет динамически формировать HTML на PHP.
Написание JavaScript кода блока
Для блока нужен JS-файл, в котором описывается его внешний вид и поведение. Используем стандартные пакеты WordPress для блоков.
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
registerBlockType('wpsolution/custom-block', {
title: 'Пользовательский блок WPSolution',
icon: 'smiley',
category: 'widgets',
attributes: {
title: {
type: 'string',
source: 'html',
selector: 'h3',
},
content: {
type: 'string',
source: 'html',
selector: 'p',
},
},
edit({ attributes, setAttributes }) {
const { title, content } = attributes;
return (
<div className="wpsolution-block">
<RichText
tagName="h3"
value={title}
onChange={(value) => setAttributes({ title: value })}
placeholder="Введите заголовок..."
/>
<RichText
tagName="p"
value={content}
onChange={(value) => setAttributes({ content: value })}
placeholder="Введите текст..."
/>
</div>
);
},
save() {
return null; // Используем серверный рендеринг
},
});
В этом примере блок позволяет редактировать заголовок и текст, а сохранение делегируется PHP функции, что удобно для динамического контента.
Добавление стилей для блока
Для корректного отображения блока на сайте и в редакторе создайте CSS-файлы:
style.css— для фронтендаeditor.css— для редактора
Пример простых стилей:
.wpsolution-block {
border: 2px solid #0073aa;
padding: 15px;
background: #f0f7ff;
border-radius: 5px;
}
.wpsolution-block h3 {
color: #005177;
}
Подключайте эти стили аналогично скриптам через wp_register_style и передавайте в register_block_type.
Использование плагинов для упрощения разработки Gutenberg блоков
Если вы хотите ускорить процесс, можно использовать плагины и инструменты, например:
- Clearfy Pro — оптимизация и расширение возможностей WordPress, в том числе совместимость с блоками.
- WPRemark — для анализа качества контента, помогает при работе с блоками.
Эти инструменты полезны, когда блоки включают сложный функционал и требуют оптимизации.
Советы и рекомендации по разработке Gutenberg блоков
Разрабатывая блоки, учитывайте:
- Избегайте излишней нагрузки на фронтенд — минимизируйте CSS и JS.
- Используйте серверный рендеринг для динамического контента, чтобы обновления отображались сразу.
- Тестируйте блоки на разных устройствах и в разных браузерах.
- Поддерживайте совместимость с популярными темами и плагинами.
- Документируйте атрибуты и логику блока, чтобы упростить поддержку.
Следуя этим советам, вы создадите качественный блок, который оценят пользователи и другие разработчики.
Заключение
Добавление поддержки Gutenberg блоков в собственный плагин — важный шаг к современному и удобному функционалу. Это позволяет расширить возможности вашего плагина, улучшить UX и интегрироваться с новой архитектурой WordPress. В статье мы подробно разобрали, как регистрировать блоки, писать их логику на JavaScript, подключать стили и использовать серверный рендеринг на PHP. Практические примеры кода помогут вам быстро начать разработку.
Для дальнейшего развития советуем изучать официальную документацию WordPress по блокам и использовать инструменты сборки, такие как @wordpress/scripts, для удобной разработки и тестирования.