Редактор блоков Gutenberg в WordPress открывает широкие возможности для кастомизации контента. Одним из самых мощных инструментов в разработке современных сайтов на WordPress является создание собственных блоков, которые позволяют добавлять уникальные элементы и функционал на сайт. В этой статье мы подробно разберем, как создать собственный визуальный редактор блоков Gutenberg, который будет удобен и функционален.
Почему стоит создавать собственные блоки Gutenberg
Стандартные блоки WordPress подходят для большинства задач, но часто требуется добавить уникальные элементы интерфейса или специфический контент. Создание собственных блоков позволяет:
- Контролировать внешний вид и функциональность контента;
- Упростить работу редакторов сайта благодаря удобному визуальному интерфейсу;
- Интегрировать сложную логику отображения прямо в редактор;
- Повысить производительность за счет оптимального кода.
Кроме того, собственные блоки легко распространять и использовать повторно на разных сайтах.
Основы создания блока Gutenberg: структура и файлы
Каждый блок Gutenberg представляет собой набор JavaScript, PHP и CSS файлов. Основные этапы создания блока:
- Регистрация блока с помощью функции
registerBlockTypeиз @wordpress/blocks; - Создание компонента редактора на React для отображения интерфейса блока в админке;
- Определение сохраненного контента, который выводится на фронтенде;
- Подключение стилей для редактора и фронтенда;
- Регистрация блока через PHP-хук
init.
Для удобства разработки рекомендуется использовать @wordpress/scripts, который настроит сборку проекта с помощью webpack и Babel.
Пример минимального блока Gutenberg
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
registerBlockType('adminwpstuff/custom-block', {
title: 'Custom Text Block',
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} />;
},
});Этот код создаёт простой блок с текстом, который можно редактировать прямо в редакторе.
Добавление визуальных настроек и кастомных контролов
Чтобы сделать блок более удобным, добавим в него визуальные настройки, например, выбор цвета фона и шрифта. Для этого используется компонент InspectorControls, который выводит настройки блока в сайдбар редактора.
Добавим выбор цвета с помощью компонента PanelColorSettings из @wordpress/block-editor. Вот пример расширения предыдущего блока:
import {
registerBlockType
} from '@wordpress/blocks';
import {
RichText,
InspectorControls,
PanelColorSettings
} from '@wordpress/block-editor';
import {
PanelBody
} from '@wordpress/components';
import { useState } from '@wordpress/element';
registerBlockType('adminwpstuff/custom-block', {
title: 'Custom Text Block',
icon: 'edit',
category: 'common',
attributes: {
content: { type: 'string', source: 'html', selector: 'p' },
backgroundColor: { type: 'string', default: '#ffffff' },
textColor: { type: 'string', default: '#000000' },
},
edit: ({ attributes, setAttributes }) => {
const { content, backgroundColor, textColor } = attributes;
return (
<>
<InspectorControls>
<PanelColorSettings
title="Цвета блока"
initialOpen={true}
colorSettings={[
{
value: backgroundColor,
onChange: (color) => setAttributes({ backgroundColor: color }),
label: 'Цвет фона',
},
{
value: textColor,
onChange: (color) => setAttributes({ textColor: color }),
label: 'Цвет текста',
},
]}
/>
</InspectorControls>
<RichText
tagName="p"
value={content}
onChange={(content) => setAttributes({ content })}
placeholder="Введите текст..."
style={{ backgroundColor, color: textColor, padding: '10px', borderRadius: '5px' }}
/>
</>
);
},
save: ({ attributes }) => {
const { content, backgroundColor, textColor } = attributes;
return (
<RichText.Content
tagName="p"
value={content}
style={{ backgroundColor, color: textColor, padding: '10px', borderRadius: '5px' }}
/>
);
},
});Такой блок позволит на лету менять цвета в редакторе, делая контент более выразительным.
Интеграция с плагином Clearfy Pro для оптимизации блоков
Если вы используете плагин Clearfy Pro, то он поможет избавиться от лишних блоков и скриптов, оптимизируя загрузку сайта. Создавая собственные блоки, стоит учитывать производительность и использовать возможности Clearfy для отключения ненужных стилей и скриптов, чтобы блоки загружались только там, где это нужно.
Например, для условной загрузки скриптов блока можно использовать хук adminwpstuff_enqueue_block_assets в PHP:
function adminwpstuff_enqueue_block_assets() {
if ( is_admin() ) {
wp_enqueue_script(
'adminwpstuff-custom-block',
plugins_url( 'block.js', __FILE__ ),
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
true
);
}
}
add_action( 'enqueue_block_editor_assets', 'adminwpstuff_enqueue_block_assets' );Продвинутые примеры: блок с динамическим выводом данных из REST API
Иногда требуется не просто статический контент, а динамический, например, вывод последних постов, товаров или данных из внешнего API. В Gutenberg это можно сделать, используя React-хуки, например, useEffect, для загрузки данных.
Пример блока, который загружает последние 5 постов сайта:
import { registerBlockType } from '@wordpress/blocks';
import { useState, useEffect } from '@wordpress/element';
registerBlockType('adminwpstuff/latest-posts', {
title: 'Последние посты',
icon: 'list-view',
category: 'widgets',
edit: () => {
const [ posts, setPosts ] = useState([]);
useEffect(() => {
fetch(window.wpApiSettings.root + 'wp/v2/posts?per_page=5')
.then(response => response.json())
.then(data => setPosts(data));
}, []);
if(!posts.length) {
return <p>Загрузка...</p>;
}
return (
<ul>
{posts.map(post => <li key={post.id}><a href={post.link}>{post.title.rendered}</a></li>)}
</ul>
);
},
save: () => {
return null; // динамический блок, контент рендерится PHP
},
});Для динамического отображения на фронтенде нужно зарегистрировать блок как серверный и реализовать коллбек в PHP, который выведет актуальные данные по запросу.
Заключение по созданию визуальных блоков Gutenberg
Создание собственных визуальных блоков Gutenberg — мощный инструмент, который позволяет расширить возможности WordPress и сделать интерфейс редактирования более удобным и функциональным. В статье мы рассмотрели базовую структуру блока, добавление пользовательских настроек и динамических данных, а также интеграцию с инструментами оптимизации, например, Clearfy Pro.
Для более глубокого изучения рекомендую ознакомиться с официальной документацией WordPress и попробовать создавать собственные блоки с помощью @wordpress/scripts. Также можно использовать популярные сборщики и шаблоны, которые ускорят процесс.