По умолчанию, стандартные блоки Gutenberg WordPress, такие как core/button, не поддерживают дополнительные атрибуты, например, data-title. Этот атрибут может быть полезен для SEO, аналитики или кастомного JavaScript.

В этой статье мы рассмотрим, как добавить пользовательский атрибут data-title для кнопок Gutenberg с помощью фильтров и кастомного кода.

Основные шаги:

1. Настроим отображение data-title на фронтенде.
2. Добавим новый атрибут через фильтр blocks.registerBlockType.
3. Создадим интерфейс для редактирования атрибута в панели настроек.

1. Добавление атрибута в блок Gutenberg

Сначала используем фильтр blocks.registerBlockType, чтобы расширить настройки блока core/button и добавить к нему новый атрибут dataTitle.

import {addFilter} from "@wordpress/hooks";
import {createHigherOrderComponent} from "@wordpress/compose";
import {InspectorControls} from "@wordpress/block-editor";
import {
    TextControl,
    PanelBody,
} from "@wordpress/components";
import {__} from "@wordpress/i18n";

addFilter(
    "blocks.registerBlockType",
    "dds/buton-data-attribute",
    function (settings, name) {
        if (name !== "core/button") {
            return settings;
        }

        return {
            ...settings,
            attributes: {
                ...settings.attributes,
                dataTitle: {
                    type: "string",
                    default: "",
                }
            },
        };
    }
);

function Edit(props) {
    return (
        <InspectorControls>
            <PanelBody title={__("Data Title")}>
                <TextControl
                    label={__("Data Title")}
                    value={props.attributes.dataTitle}
                    onChange={(val) => props.setAttributes({dataTitle: val})}
                    help={__("Data Title")}
                />
            </PanelBody>
        </InspectorControls>
    );
}

addFilter(
    "editor.BlockEdit",
    "dds/buton-data-attribute",
    createHigherOrderComponent((BlockEdit) => {
        return (props) => {
            if (props.name !== "core/button") {
                return <BlockEdit {...props} />;
            }

            return (
                <>
                    <BlockEdit {...props} />
                    <Edit {...props} />
                </>
            );
        };
    })
);

Фильтры блоков работают примерно так же как и фильтры wordpress, то есть, в данном случае, при регистрации блока кнопки мы добавили к нему свою кастомную функцию, которая будет добавлять атрибут dataTitle в редакторе кода.

2. Вывод атрибута на фронтенде

Чтобы атрибут data-title отображался на сайте, добавим обработку рендеринга в functions.php:

function filter_button_block_render_block( $block_content, $block ) {
	if ( isset( $block['attrs']['dataTitle'] ) && $block['attrs']['dataTitle'] !== '' ) {
		$link = new WP_HTML_Tag_Processor( $block_content );
		if ( $link->next_tag( 'a' ) ) {
			$link->set_attribute( 'data-title', $block['attrs']['dataTitle'] );
		}
		$block_content = $link->get_updated_html();
	}
	return $block_content;
}

add_filter( 'render_block_core/button', 'filter_button_block_render_block', 10, 2 );

Теперь при создании кнопки в редакторе Gutenberg WordPress вы увидите дополнительное поле Data Title, а при выводе на сайт этот атрибут будет автоматически добавлен в HTML.