Gutenberg: Adding custom attributes to Gutenberg core blocks?

[ericmurphyxyz]

I’m trying to add a dropdown to WordPress core blocks to select a data attribute that will be added to the front-end (e.g. data-attr=”value-from-dropdown”).

I think the solution is to add a custom attribute to the core blocks, set it in the back-end and pass it to the front-end. Seems pretty trivial to add this to a new block, but I can’t for the life of me figure out how to add a new attribute to a core block.

Is this possible, or is the functionality just not there yet?

[ajitbohra]

You can extend blocks using extensibility API https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/

Check this hooks:
https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#editor-blockedit
https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#blocks-getsavecontent-extraprops
https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#editor-blocklistblock

[kokers]

@ajitbohra unfortunately those links doesn't work anymore and it seems like whole "extensibility" section has been removed. As well as other sections like "Block API". Is there some other place, where we can find out more about extensibility?

[ajitbohra]

Handbook was recently reorganized you can find all the docs under
Designer & Developer Handbook

https://wordpress.org/gutenberg/handbook/designers-developers/

[joshcoast]

Another lost link. :( ^ Maybe delete this page, it's kinda useless to a person trying to find out how to extend core blocks.

[tophr]

Here's some current working links on extending core blocks:
https://developer.wordpress.org/block-editor/developers/filters/block-filters/
https://developer.wordpress.org/block-editor/tutorials/javascript/extending-the-block-editor/

And some blogs:
https://www.liip.ch/en/blog/how-to-extend-existing-gutenberg-blocks-in-wordpress
https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/

But more basic code examples in the docs would be great.

[vanilium]

It's not working, or I nothing understand
I'm add
`const { addFilter } = wp.hooks;

function addAttributes( settings, name ) {
if(name !== 'core/group') {
return settings;
}
//check if object exists for old Gutenberg version compatibility
if( typeof settings.attributes !== 'undefined' ){

    settings.attributes = Object.assign( settings.attributes, {
        dataAos:{
            type: 'string',
            default: 'fade-up',
        },
        dataAosDuration:{
            type: 'string',
            default: '1500',
        }
    });
}

return settings;

}

addFilter(
'blocks.registerBlockType',
'editorskit/custom-attributes',
addAttributes
);`

and nothing happened, no add any attributes.

Anywhere have a simple tutorial to add data-* attribute to core block? Without any controls, just add by default

[vanilium]

Resolve this throw blocks.getSaveContent.extraProps filter
`function addAttributes( extraProps, blockType, attributes ) {
if(blockType.name !== 'core/group') {
return extraProps;
}
extraProps['data-aos'] = 'fade-up';
extraProps['data-aos-duration'] = '1500';

return extraProps;

}

addFilter(
'blocks.getSaveContent.extraProps',
'test/applyAOSClasses',
addAttributes
);`

[drzraf]

See https://github.com/WordPress/gutenberg/issues/16164