I need to add a new attribute with color selector to a core paragraph/heading block. What would be braces-color="#5a6a81" for example. I've been googling all day and only found examples with npm installation. But I can't install it on wp hosting.
I saw the article https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/ but it doesn't help without the npm.
You don't need block attributes to do that! Core has an alternative that provides a superior experience, block variants.
Block variants let you reuse an existing block, but declare a variant which has predefined block attributes that match your use case.
For example, all embeds are variants of the embed block, even though they have different names titles icons and descriptions.
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
For example with this:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'bracketed-heading',
title: 'Bracketed Heading',
attributes: { className: 'heading-with-brackets' },
} );
I got this:
I can add new descriptions, titles, icons, previews, and HTML classes to style the heading differently ( with brackets ). No PHP needed.
The only difference between this and a normal heading, what makes it a bracketed heading is this:
innerBlocks: [ ['core/button'], ['core/button', {className: "is-style-outline", textColor: "blue",border: {radius: "0px"},},],]
npm, and it's assumed that you would be doing this locally on a local copy of your site, not live in production on a web host 😬. Note that the examples in that article are impossible to use without some sort of build step, which is unavoidable, but you would never installnpmon wp hosting.{Example Title}. Because of this I want to add a switcher or button to the core block paragraph and heading that would add a class to the element. And also, an attribute with color for these braces.