plugin development – Add custom data-attribute to core Gutenberg block within an 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 user/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>

0
Shoelaced 2 months 2022-12-03T17:35:52-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse