Добавим возможность устанавливать data-title атрибут для ссылок кнопок стандартных блоков Gutenberg.
1. Добавим фильтр:
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 в редакторе кода.
Для вывода сожержимого во фронт добавим код в 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 );