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

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

Почему стоит создавать визуальный редактор блоков Gutenberg

Стандартные блоки часто ограничены набором настроек в боковой панели и простым редактированием содержимого. Если ваша задача — предоставить пользователю более интуитивный и визуально понятный интерфейс, создание собственного визуального редактора — правильное решение.

Визуальный редактор позволяет:

• Отобразить в редакторе точное представление конечного вида блока.
• Использовать сложные элементы управления, например, цветовые палитры, списки с возможностью перетаскивания, иконки.
• Добавить интерактивность, чтобы пользователь сразу видел изменения.

Для реализации такого подхода нам потребуется использовать React и API редактора Gutenberg.

Основы создания блока с визуальным редактором

Начнем с регистрации блока с помощью функции registerBlockType. Важна реализация функции edit, которая отвечает за отображение интерфейса редактирования в админке, и save, которая сохраняет HTML на фронтенде.

Пример базовой структуры блока:

wpblock.registerBlockType('wpblock/custom-visual-editor', {
    title: 'WPBlock Визуальный редактор',
    icon: 'edit',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'div.wpblock-content'
        }
    },
    edit: (props) => {
        const {attributes, setAttributes} = props;
        function onChangeContent(newContent) {
            setAttributes({content: newContent});
        }
        return (
            <div className="wpblock-editor-wrapper">
                <RichText
                    tagName="div"
                    className="wpblock-content"
                    onChange={onChangeContent}
                    value={attributes.content}
                    placeholder="Введите содержимое..."
                />
            </div>
        );
    },
    save: (props) => {
        return <RichText.Content tagName="div" className="wpblock-content" value={props.attributes.content} />;
    }
});

В данном примере мы используем компонент RichText из пакета @wordpress/block-editor, который предоставляет полноценный визуальный редактор текста с форматированием.

Расширяем функциональность: добавляем кастомные панели настроек

Для более гибкого управления блоком добавим панель с дополнительными настройками. Например, цвет фона и размер шрифта. Для этого используем компоненты InspectorControls и PanelBody.

const {InspectorControls, RichText} = wp.blockEditor;
const {PanelBody, ColorPalette, RangeControl} = wp.components;

wpblock.registerBlockType('wpblock/custom-visual-editor', {
    // ...
    attributes: {
        content: { type: 'string', source: 'html', selector: 'div.wpblock-content' },
        backgroundColor: { type: 'string', default: '#ffffff' },
        fontSize: { type: 'number', default: 16 }
    },
    edit: (props) => {
        const {attributes, setAttributes} = props;
        return (
            <>
            <InspectorControls>
                <PanelBody title="Настройки блока" initialOpen={true}>
                    <label>Цвет фона</label>
                    <ColorPalette
                        value={attributes.backgroundColor}
                        onChange={(color) => setAttributes({backgroundColor: color})}
                    />
                    <RangeControl
                        label="Размер шрифта"
                        value={attributes.fontSize}
                        onChange={(size) => setAttributes({fontSize: size})}
                        min={10}
                        max={50}
                    />
                </PanelBody>
            </InspectorControls>
            <div className="wpblock-editor-wrapper" style={{backgroundColor: attributes.backgroundColor, fontSize: attributes.fontSize + 'px'}}>
                <RichText
                    tagName="div"
                    className="wpblock-content"
                    onChange={(content) => setAttributes({content})}
                    value={attributes.content}
                    placeholder="Введите содержимое..."
                />
            </div>
            </>
        );
    },
    save: (props) => {
        const {attributes} = props;
        return (
            <div className="wpblock-content" style={{backgroundColor: attributes.backgroundColor, fontSize: attributes.fontSize + 'px'}}>
                <RichText.Content value={attributes.content} />
            </div>
        );
    }
});

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

Создание сложных визуальных компонентов внутри блока

Если вам необходимо создать более сложную структуру с несколькими редактируемыми частями, например, блок с заголовком, списком и кнопкой, стоит разбивать интерфейс на отдельные компоненты React внутри функции edit.

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

const {useState} = wp.element;
const {RichText, InspectorControls} = wp.blockEditor;
const {PanelBody, Button} = wp.components;

wpblock.registerBlockType('wpblock/custom-list-block', {
    title: 'WPBlock Кастомный список',
    icon: 'list-view',
    category: 'common',
    attributes: {
        title: { type: 'string', source: 'html', selector: 'h3' },
        items: { type: 'array', default: [], source: 'query', selector: 'li', query: { text: { type: 'string', source: 'html' } } }
    },
    edit: (props) => {
        const {attributes, setAttributes} = props;

        function onChangeTitle(newTitle) {
            setAttributes({title: newTitle});
        }

        function onChangeItem(value, index) {
            const newItems = [...attributes.items];
            newItems[index].text = value;
            setAttributes({items: newItems});
        }

        function addItem() {
            setAttributes({items: [...attributes.items, {text: ''}]});
        }

        function removeItem(index) {
            const newItems = attributes.items.filter((item, i) => i !== index);
            setAttributes({items: newItems});
        }

        return (
            <div className="wpblock-list-block">
                <RichText
                    tagName="h3"
                    placeholder="Заголовок списка"
                    value={attributes.title}
                    onChange={onChangeTitle}
                />
                <ul>
                    {attributes.items.map((item, index) => (
                        <li key={index}>
                            <RichText
                                placeholder="Текст пункта"
                                value={item.text}
                                onChange={(value) => onChangeItem(value, index)}
                            />
                            <Button isDestructive onClick={() => removeItem(index)}>Удалить</Button>
                        </li>
                    ))}
                </ul>
                <Button isPrimary onClick={addItem}>Добавить пункт</Button>
            </div>
        );
    },
    save: (props) => {
        const {attributes} = props;
        return (
            <div className="wpblock-list-block">
                <h3><RichText.Content value={attributes.title} /></h3>
                <ul>
                    {attributes.items.map((item, index) => (
                        <li key={index}><RichText.Content value={item.text} /></li>
                    ))}
                </ul>
            </div>
        );
    }
});

Такой подход позволяет создавать динамические и интерактивные блоки с множеством элементов управления.

Советы по оптимизации и отладке визуальных редакторов

При создании сложных визуальных редакторов важно держать код организованным и отделять логику от отображения. Используйте хуки React, такие как useState, useEffect, чтобы управлять состоянием внутри блока.

Для отладки удобно использовать консоль браузера и React DevTools. Также рекомендуется писать чистый и понятный код с комментариями.

Не забывайте тестировать блоки на разных устройствах и в разных браузерах, чтобы избежать проблем с отображением.

Вывод

Создание собственных визуальных редакторов для блоков Gutenberg позволяет создавать уникальные и удобные интерфейсы для пользователей WordPress. Использование React-компонентов, хуков и API редактора открывает широкие возможности для кастомизации.

На сайте wpblock.ru вы можете найти дополнительные примеры и подробные руководства по разработке блоков Gutenberg и работе с WordPress API.