Add custom data-attribute to core Gutenberg block within an <InnerBlocks /> template

Question

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>

Answer 1

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.