4

Is it possible to add custom HTML attributes (such as data attributes) to the markup of core blocks (or any blocks, really) that are used inside an <InnerBlocks /> template?

At the moment my Edit function contains something along the lines of:

<InnerBlocks
    allowedBlocks={['core/media-text']}
    template={[
        ['core/media-text', {}, [
            ['core/heading', {
                placeholder: 'Title',
                level: 3,
            }],
            ['core/paragraph', {
                placeholder: 'Description',
            }],
            ['core/buttons', {}, [
                ['core/button', {
                    text: 'View',
                    className: 'modal__open',
                    url: '#',
                }],
            ]]
        ]]
    ]}
    templateLock="all"
/>

And I want to add a data attribute to the button. I was hoping I could do something simple such as:

['core/buttons', {}, [
    ['core/button', {
        text: 'View',
        className: 'modal__open',
        url: '#',
        attributes: {
            'data-a11y-dialog-show': attributes.modalId,
        },
]]

But everything I'm finding seems to be saying that's not possible and to try various things like block filters and such. I'm open to that if that's what's necessary, but how would I do it so that it only applies to the button inside my custom block's <InnerBlocks />?

For further info, I'm developing my first plugin created with @wordpress/create-block and if I do need to use a block filter, it would be helpful if you could include where to put that function/hook. If it matters, this is a dynamic block and the only thing in my save function is the <InnerBlocks.Content />, which is all working great so far. I'm generating the modalId value by using setAttributes to set it higher up in the Edit() function, and I need that value to be the value of the data attribute in the final markup, like:

<a class="wp-block-button" href="#" data-a11y-dialog-show="modal-3">View</a>

1 Answer 1

2

Yes, it is possible to add custom HTML attributes (such as data attributes) to the markup of core blocks or any blocks that are used inside an <InnerBlocks /> template.

To do this, you can use the getSaveContent.extraProps filter hook in the WordPress block editor. This filter allows you to add additional properties to the element that is saved for a block.

Here is an example of how you can use the getSaveContent.extraProps filter hook to add a custom data attribute to the a element that is saved for the core/button block:

function myPluginAddExtraProps(extraProps, blockType, attributes) {
    if (blockType.name === 'core/button') {
        return {
            ...extraProps,
            'data-a11y-dialog-show': attributes.modalId,
        };
    }

    return extraProps;
}
addFilter('blocks.getSaveContent.extraProps', 'my-plugin/add-extra-props', myPluginAddExtraProps);

In this code, the myPluginAddExtraProps function is used as the callback for the getSaveContent.extraProps filter. The function checks if the block type is core/button, and if it is, it adds the data-a11y-dialog-show attribute to the extraProps object. The value of the attribute is set to the modalId attribute of the core/button block.

To use this code, you can add it to your custom block's JavaScript file. You can then use the <InnerBlocks /> template as shown in your example above, and the data-a11y-dialog-show attribute will be added to the a element that is saved for the core/button block.

This will allow you to add the custom data attribute to the markup of the core/button block when it is used inside your template.

3
  • I can't seem to get this to work... can you please clarify where it goes? Do I add it to the edit function?
    – Shoelaced
    Dec 4, 2022 at 21:18
  • You can add this code to your plugin's JavaScript file, or to a separate file and include it in your plugin using the wp_enqueue_script function. Let me know if that still doesn't work.
    – Nate Allen
    Dec 4, 2022 at 21:33
  • Thanks -- I tried adding it right above my registerBlockType() function and of course replaced 'my-plugin/add-extra-props' with my own plugin's 'namespace/block-slug'. Is there something else I'm missing? Do I need to import something?
    – Shoelaced
    Dec 4, 2022 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.