Add custom data-attribute to core Gutenberg block within an template

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.