Как создать custom block для Gutenberg в WordPress

Редактор Gutenberg в WordPress полностью изменил подход к созданию контента, позволив разработчикам создавать собственные блоки для более гибкой и удобной работы. В этой статье мы подробно разберём, как создать свой custom block для Gutenberg, используя современные инструменты и лучшие практики.

Что такое Gutenberg и custom block в WordPress

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

Custom block — это пользовательский блок, который вы разрабатываете самостоятельно, чтобы добавить специфическую функциональность, отсутствующую в стандартном наборе блоков.

Необходимые инструменты для разработки custom block

Для создания блока нам понадобятся следующие инструменты:

• Node.js и npm — для управления пакетами и сборки;
• WP-CLI — для удобного создания плагина;
• Плагин WordPress, в котором будет размещён блок;
• JavaScript, React (JSX) — для написания логики блока;
• Webpack или @wordpress/scripts — для сборки и транспиляции кода;
• PHP — для регистрации блока в WordPress.

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

Шаг 1. Создание плагина для блока

Запустите в терминале команду:

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

Это создаст базовую структуру плагина с необходимыми файлами. Перейдите в папку wpblock-custom-block и запустите сборку:

npm start

Плагин автоматически зарегистрирует блок и будет готов к редактированию.

Шаг 2. Структура блока и файлы

В каталоге плагина вы увидите ключевые файлы:

• src/index.js — главный JavaScript-файл, где описывается блок;
• block.json — метаданные блока;
• style.scss и editor.scss — стили для фронтенда и редактора;
• plugin.php — основной PHP-файл плагина.

В файле src/index.js используется React-подобный синтаксис (JSX) для описания интерфейса блока.

Шаг 3. Регистрация и описание блока в index.js

Вот пример базового блока с заголовком и текстом:

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

registerBlockType( 'wpblock/custom-block', {
    title: 'WPBlock: Простой блок',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },

    edit: ( { attributes, setAttributes } ) => {
        const onChangeContent = ( content ) => {
            setAttributes( { content } );
        };

        return (
            <RichText
                tagName="p"
                onChange={ onChangeContent }
                value={ attributes.content }
                placeholder="Введите текст..."
            />
        );
    },

    save: ( { attributes } ) => {
        return <RichText.Content tagName="p" value={ attributes.content } />;
    },
} );

В этом коде мы регистрируем блок с идентификатором wpblock/custom-block, задаём атрибуты, редактируемое поле и сохранение.

Шаг 4. Добавление стилей для блока

Используйте SCSS для стилизации. В файле src/style.scss можно написать стили для вывода на сайте, например:

.wpblock-custom-block {
    background-color: #f0f8ff;
    padding: 15px;
    border-radius: 5px;
}

Для редактора стили пишутся в src/editor.scss. Это позволит сделать интерфейс блока удобным и приятным.

Шаг 5. Расширение блока: добавим атрибуты и настройки

Давайте добавим возможность выбора цвета текста через панель настроек блока.

Для этого импортируем InspectorControls и PanelColorSettings из @wordpress/block-editor:

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

registerBlockType('wpblock/custom-block', {
    // ...
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        textColor: {
            type: 'string',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const { content, textColor } = attributes;

        return (
            <>
                <InspectorControls>
                    <PanelColorSettings
                        title="Цвет текста"
                        initialOpen={ true }
                        colorSettings={[
                            {
                                value: textColor,
                                onChange: ( colorValue ) => setAttributes( { textColor: colorValue } ),
                                label: 'Цвет текста',
                            },
                        ]}
                    />
                </InspectorControls>
                <RichText
                    tagName="p"
                    value={ content }
                    onChange={ ( value ) => setAttributes( { content: value } ) }
                    style={{ color: textColor }}
                    placeholder="Введите текст..."
                />
            </>
        );
    },
    save: ({ attributes }) => {
        const { content, textColor } = attributes;
        return (
            <RichText.Content tagName="p" value={ content } style={{ color: textColor }} />
        );
    },
});

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

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

В файле plugin.php регистрируйте блок так:

function wpblock_register_custom_block() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'wpblock_register_custom_block' );

Это обеспечит загрузку скомпилированных файлов блока в WordPress.

Полезные советы и рекомендации

При создании блоков следуйте этим рекомендациям:

• Используйте @wordpress/scripts для упрощения сборки и поддержки современных стандартов.
• Старайтесь делать блоки доступными: добавляйте атрибуты aria, поддерживайте навигацию с клавиатуры.
• Тестируйте блоки на разных устройствах и версиях WordPress.
• Документируйте код и комментируйте сложные участки.

Заключение

Создание custom block для Gutenberg — мощный способ расширить возможности вашего WordPress-сайта. В статье мы рассмотрели базовый пример блока с текстом и настройками цвета, а также необходимые инструменты и практические советы. Используйте этот фундамент и развивайте свои блоки дальше, добавляя новые атрибуты, интеграции и визуальные элементы.