Sunday, December 4, 2022
HomeWordPress Developmentplugin growth - Add customized data-attribute to core Gutenberg block inside an...

plugin growth – Add customized data-attribute to core Gutenberg block inside an template


Is it potential so as to add customized HTML attributes (reminiscent of knowledge attributes) to the markup of core blocks (or any blocks, actually) which can be used inside an <InnerBlocks /> template?

In the mean time my Edit perform incorporates one thing alongside the strains 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 need to add a knowledge attribute to the button. I hoped I may do one thing easy reminiscent of:

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

However every little thing I am discovering appears to be saying that is not potential and to strive numerous issues like block filters and such. I am open to that if that is what’s vital, however how would I do it in order that it solely applies to the button inside my customized block’s <InnerBlocks />?

For additional information, I am growing my first plugin created with @wordpress/create-block and if I do want to make use of a block filter, it could be useful in case you may embrace the place to place that perform/hook. If it issues, this can be a dynamic block and the one factor in my save perform is the <InnerBlocks.Content material />, which is all working nice to date. I am producing the modalId worth through the use of setAttributes to set it increased up within the Edit() perform, and I would like that worth to be the worth of the information attribute within the last markup, like:

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments