Как создать собственный блок Гутенберг в WordPress

Редактор Гутенберг — это современный способ создания контента в WordPress, основанный на блоках. Создание собственного блока позволяет добавить уникальный функционал и улучшить пользовательский опыт сайта. В этой статье мы подробно рассмотрим, как создать собственный блок Гутенберг с помощью JavaScript и PHP, а также приведём примеры кода, которые помогут вам реализовать этот процесс с нуля.

Что такое блок Гутенберг и зачем создавать свой?

Гутенберг — это редактор контента на основе блоков, который заменил классический редактор WordPress. Каждый элемент контента представлен отдельным блоком (текст, изображение, видео и др.). Создавая собственный блок, вы можете добавить функционал, который не поддерживается стандартными блоками, например, специфические формы, интерактивные элементы, кастомные выводы данных.

Это особенно полезно для разработчиков, которые создают сайты с уникальными требованиями или продают кастомные решения клиентам.

Для разработки блока требуется знание JavaScript (React), PHP и понимание структуры WordPress.

Подготовка к созданию блока: инструменты и плагины

Для удобства разработки блоков рекомендуется использовать официальный пакет @wordpress/create-block, который генерирует шаблон плагина с блоком.

Команда для создания шаблона:

npx @wordpress/create-block wpdemo-custom-block

Этот плагин создаст структуру с настройками, необходимыми для быстрого старта разработки.

Также для расширения функционала блоков можно использовать плагины, например:

• Advanced Custom Fields (ACF) Pro — позволяет создавать блоки с помощью интерфейса без глубоких знаний JS.
• Lazy Blocks — визуальный конструктор блоков.

Структура собственного блока Гутенберг

Типичный блок состоит из двух частей:

1. JavaScript часть — отвечает за интерфейс и логику в редакторе.
2. PHP часть — регистрирует блок и рендерит его на фронтенде.

Рассмотрим создание простого блока, который выводит приветствие с настраиваемым текстом.

Регистрация блока в PHP

В файле wpdemo-custom-block.php добавим регистрацию блока:

<?php
function wpdemo_register_custom_block() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'wpdemo_register_custom_block' );

Эта функция подключит скомпилированный JS и CSS блок.

Код блока на JavaScript

В файле src/index.js создадим блок с настраиваемым полем:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType( 'wpdemo/custom-greeting', {
    title: 'Приветствие WPDemo',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            <RichText
                tagName="p"
                value={ attributes.content }
                onChange={ (content) => setAttributes({ content }) }
                placeholder="Введите текст приветствия"
            />
        );
    },
    save({ attributes }) {
        return <RichText.Content tagName="p" value={ attributes.content } />;
    },
} );

Этот блок позволяет в редакторе вводить произвольный текст, который отобразится на сайте.

Расширение функционала: добавление настроек и стилей

Добавление дополнительных настроек

Для более сложных блоков можно добавить настройки цвета, размера, выравнивания и другие параметры.

Пример добавления выбора цвета фона:

import { PanelBody, ColorPalette } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';

edit({ attributes, setAttributes }) {
    return (
        <>
            <InspectorControls>
                <PanelBody title="Цвет фона" initialOpen={ true }>
                    <ColorPalette
                        value={ attributes.backgroundColor }
                        onChange={ (backgroundColor) => setAttributes({ backgroundColor }) }
                    />
                </PanelBody>
            </InspectorControls>
            <RichText
                tagName="p"
                value={ attributes.content }
                onChange={ (content) => setAttributes({ content }) }
                placeholder="Введите текст приветствия"
                style={{ backgroundColor: attributes.backgroundColor }}
            />
        </>
    );
}

Добавление стилей

Для оформления блока создайте CSS файлы в папке src и подключите их в сборке. Стиль может быть адаптивным и содержать анимации.

Примеры полезных блоков для сайтов на WordPress

Создание собственных блоков востребовано для задач:

• Вывод отзывов пользователей с кастомным дизайном.
• Интерактивные FAQ с поиском и сворачиванием.
• Блоки с динамическими данными, получаемыми через REST API.

Также можно интегрировать с плагином WPRemark для добавления отзывов прямо в блок.

Отладка и тестирование блоков

Для проверки блока используйте локальную среду разработки (например, LocalWP), консоль браузера и инструменты разработчика WordPress.

Рекомендуется проверять совместимость с темами, особенно с теми, которые используют нестандартные стили, например, темы Reboot или JournalX.

Заключение

Создание собственного блока в Гутенберге — мощный инструмент расширения функционала WordPress. Освоив базовые принципы, вы сможете создавать уникальные решения для любых проектов. Используйте официальные инструменты разработки, тестируйте и не забывайте о совместимости с темами и плагинами.