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

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

Что такое настройки блоков Gutenberg и зачем их расширять

Блоки в Gutenberg состоят из интерфейса для редактирования и набора атрибутов, которые определяют содержимое и внешний вид блока. Стандартные настройки доступны в боковой панели (Inspector Controls) или непосредственно в блоке. Расширение настроек позволяет добавить новые поля, переключатели, селекты и другие элементы управления, которые будут сохраняться вместе с блоком и использоваться при его выводе.

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

Основные способы добавления настроек в блоки Gutenberg

1. Создание собственного блока с расширенными настройками

Если вы создаёте собственный блок с помощью @wordpress/create-block или вручную, то добавление настроек происходит через определение атрибутов блока и компонентов интерфейса в файлах JavaScript.

Пример простого блока с дополнительным текстовым полем настройки:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl } = wp.components;

registerBlockType('wpboot/custom-block', {
    title: __('Custom Block', 'wpboot'),
    icon: 'smiley',
    category: 'common',
    attributes: {
        customText: {
            type: 'string',
            default: ''
        }
    },
    edit: (props) => {
        const { attributes: { customText }, setAttributes } = props;
        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Настройки блока', 'wpboot')}>
                        <TextControl
                            label={__('Пользовательский текст', 'wpboot')}
                            value={customText}
                            onChange={(value) => setAttributes({ customText: value })}
                        />
                    </PanelBody>
                </InspectorControls>
                <div>{customText ? customText : __('Введите текст в настройках блока', 'wpboot')}</div>
            </>
        );
    },
    save: (props) => {
        const { attributes: { customText } } = props;
        return <div>{customText}</div>;
    }
});

В этом примере в боковой панели блока появляется поле для ввода текста, который отображается в содержимом блока.

2. Расширение стандартных блоков с помощью filter и JavaScript

Если нужно добавить настройки в уже существующие стандартные блоки (например, «Параграф», «Изображение»), можно использовать фильтры JavaScript, предоставляемые WordPress.

Пример добавления переключателя в настройки блока «Параграф»:

const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, ToggleControl } = wp.components;

const wpbootAddCustomAttribute = (settings) => {
    if (settings.name !== 'core/paragraph') {
        return settings;
    }
    settings.attributes = {
        ...settings.attributes,
        wpbootCustomToggle: {
            type: 'boolean',
            default: false,
        },
    };
    return settings;
};

addFilter('blocks.registerBlockType', 'wpboot/add-custom-attribute', wpbootAddCustomAttribute);

const wpbootWithInspectorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        if (props.name !== 'core/paragraph') {
            return <BlockEdit {...props} />;
        }
        const { attributes: { wpbootCustomToggle }, setAttributes } = props;
        return (
            <>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody title="Дополнительные настройки WPBoot">
                        <ToggleControl
                            label="Включить специальный стиль"
                            checked={wpbootCustomToggle}
                            onChange={(value) => setAttributes({ wpbootCustomToggle: value })}
                        />
                    </PanelBody>
                </InspectorControls>
            </>
        );
    };
}, 'wpbootWithInspectorControl');

addFilter('editor.BlockEdit', 'wpboot/with-inspector-control', wpbootWithInspectorControl);

const wpbootSaveExtraProps = (extraProps, blockType, attributes) => {
    if (blockType.name === 'core/paragraph' && attributes.wpbootCustomToggle) {
        extraProps.className = (extraProps.className || '') + ' wpboot-special-style';
    }
    return extraProps;
};

addFilter('blocks.getSaveContent.extraProps', 'wpboot/save-extra-props', wpbootSaveExtraProps);

Этот код добавляет в блок «Параграф» переключатель, который при включении добавляет CSS класс wpboot-special-style. Для стилизации блока нужно добавить CSS в тему или плагин.

Добавление PHP поддержки для новых атрибутов и сохранение данных

С точки зрения PHP, новые атрибуты блоков обычно не требуют дополнительной обработки, если они сохраняются в JSON в содержимом записи. Однако, если вы хотите обрабатывать данные на сервере (например, для динамических блоков), необходимо расширить функцию рендера.

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

function wpboot_register_dynamic_block() {
    register_block_type('wpboot/dynamic-block', [
        'attributes' => [
            'customText' => [
                'type' => 'string',
                'default' => '',
            ],
        ],
        'render_callback' => 'wpboot_render_dynamic_block',
    ]);
}
add_action('init', 'wpboot_register_dynamic_block');

function wpboot_render_dynamic_block($attributes) {
    $text = isset($attributes['customText']) ? esc_html($attributes['customText']) : '';
    return '<div class="wpboot-dynamic-block">' . $text . '</div>';
}

Такой подход позволяет контролировать вывод блока через PHP, использовать данные для дополнительных запросов и более гибкой логики.

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

Если вы хотите упростить процесс расширения блоков, рекомендуем обратить внимание на следующие плагины:

• Clearfy Pro – содержит инструменты для оптимизации и расширения редактора Gutenberg.
• Expert Review – позволяет создавать интерактивные блоки с дополнительными настройками и отзывами.
• WPStories – расширяет возможности создания визуальных историй с уникальными настройками.

Использование этих плагинов позволяет избежать ручного написания кода и получить готовый функционал для расширения блоков.

Рекомендации и практические советы

При добавлении настроек в блоки Gutenberg важно учитывать следующие моменты:

• Не перегружайте интерфейс – добавляйте только необходимые поля и контролы, чтобы не усложнять работу редактора.
• Используйте уникальные префиксы для своих атрибутов и функций, чтобы избежать конфликтов с другими плагинами и темами. В нашем случае это префикс wpboot.
• Тестируйте совместимость с разными версиями WordPress и плагинами, особенно если расширяете стандартные блоки.
• Оптимизируйте производительность – не добавляйте тяжелые вычисления в редактор, лучше выполнять их на сервере при сохранении или выводе.

Выводы

Добавление пользовательских настроек в блоки Gutenberg позволяет создавать гибкие и удобные интерфейсы для контент-менеджеров и повышать качество сайтов на WordPress. С помощью JavaScript и PHP вы можете расширять как свои собственные блоки, так и стандартные, используя фильтры и хуки редактора.

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

Экспериментируйте и доводите блоки до нужного уровня функциональности, чтобы сделать работу с WordPress максимально эффективной!