Как создать плагин для добавления атрибута data в Gutenberg блок WordPress

В этой статье разберём, как создать простой плагин для WordPress, который расширит стандартный Gutenberg блок, добавив в него пользовательский атрибут data-. Это позволит внедрять дополнительные данные в HTML разметку блока, что удобно для интеграций, кастомных скриптов и аналитики.

Почему стоит добавлять атрибуты data в Gutenberg блоки

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

Например, вы можете добавить data-category для блока с цитатой, чтобы на фронтенде выделять цитаты из определённых категорий отдельным стилем или скриптом.

Создание плагина wpblock-add-data-attribute: структура и подключение

Сначала создадим папку плагина wpblock-add-data-attribute в директории wp-content/plugins. Внутри создадим основной файл wpblock-add-data-attribute.php с заголовком плагина и регистрацией скриптов.

<?php
/**
 * Plugin Name: WPBlock Add Data Attribute
 * Description: Плагин для добавления атрибута data в Gutenberg блок
 * Version: 1.0
 * Author: WPBlock Team
 */

// Регистрируем и подключаем скрипты для редактора Gutenberg
function wpblock_enqueue_data_attribute_block() {
    wp_enqueue_script(
        'wpblock-data-attribute-block',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n'),
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );
}
add_action('enqueue_block_editor_assets', 'wpblock_enqueue_data_attribute_block');

Этот код подключает JavaScript с логикой расширения блоков в редакторе.

Добавление атрибута data в блок через JavaScript

Создадим файл block.js в папке плагина. В нём мы расширим стандартный блок core/paragraph, добавив новый атрибут data-custom, который можно будет редактировать в сайдбаре блока.

const { createHigherOrderComponent } = wp.compose;
const { InspectorControls } = wp.blockEditor || wp.editor;
const { PanelBody, TextControl } = wp.components;
const { Fragment } = wp.element;

// Добавляем новый атрибут data-custom
wp.blocks.registerBlockType('core/paragraph', {
    attributes: {
        ...wp.blocks.getBlockType('core/paragraph').attributes,
        dataCustom: {
            type: 'string',
            default: ''
        },
    },
});

// ХОК для расширения редактора блока
const withInspectorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        if (props.name !== 'core/paragraph') {
            return <BlockEdit {...props} />;
        }
        const { attributes, setAttributes } = props;
        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody title="Дополнительные атрибуты" initialOpen={true}>
                        <TextControl
                            label="data-custom"
                            value={attributes.dataCustom}
                            onChange={(value) => props.setAttributes({ dataCustom: value })}
                            help="Добавьте значение для атрибута data-custom"
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withInspectorControl');

wp.plugins.registerPlugin('wpblock-data-attribute-inspector', {
    render: () => null,
    icon: null,
});

wp.hooks.addFilter(
    'editor.BlockEdit',
    'wpblock/with-inspector-control',
    withInspectorControl
);

// Фильтр для добавления атрибута data в сохранённый HTML
function wpblock_addDataAttributeSave(extraProps, blockType, attributes) {
    if (blockType.name !== 'core/paragraph') {
        return extraProps;
    }
    if (attributes.dataCustom) {
        extraProps['data-custom'] = attributes.dataCustom;
    }
    return extraProps;
}
wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'wpblock/add-data-attribute-save',
    wpblock_addDataAttributeSave
);

Здесь мы используем хуки Gutenberg для расширения интерфейса блока и добавления нового атрибута в конечный HTML.

Тестирование и использование плагина

После активации плагина в админке WordPress, откройте редактор Gutenberg и выберите блок «Параграф». В панели настроек блока появится новая секция с полем data-custom. Введите туда любое значение — например, promo-123.

После сохранения и просмотра страницы в браузере, откройте HTML-код блока, и увидите, что у абзаца появился атрибут data-custom="promo-123". Это значит, что плагин работает корректно.

Расширение: добавление нескольких атрибутов data и совместимость с другими блоками

Чтобы добавить несколько атрибутов, можно расширить объект атрибутов и добавить несколько TextControl в сайдбар, а в функции сохранения добавить все эти атрибуты в extraProps. Кроме того, можно аналогичным образом расширять другие блоки, меняя проверку blockType.name.

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

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

• Clearfy Pro — отличный инструмент для оптимизации и добавления различных улучшений в WordPress, включая работу с блоками.
• WPGPT — плагин с ИИ-поддержкой, который может помочь автоматизировать создание и настройку блоков.