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.

  • what's the purpose of the new attribute? There are other and better ways to do these things such as block styles, variations, etc etc. The article you linked to makes no mention of 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 install npm on wp hosting.
    – Tom J Nowell
    Jan 27, 2023 at 15:18
  • @TomJNowell Thank you for your reply. Some headings blocks must contain curly braces, such as {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.
    – Artem
    Jan 27, 2023 at 15:38
  • you can do that by adding a class in the advanced section, or if you want to automate that in a clickable UI with previews/names/descriptions, block styles and block variants are how you do that. Adding brand new block attributes is unnecessary.
    – Tom J Nowell
    Jan 27, 2023 at 21:42

1 Answer 1


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.


For example with this:

wp.blocks.registerBlockVariation( 'core/heading', {
    name: 'bracketed-heading',
    title: 'Bracketed Heading',
    attributes: { className: 'heading-with-brackets' },
} );

I got this:

enter image description here

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:

enter image description here

  • Got it, I think that's the most useful solution. Thank you.
    – Artem
    Jan 30, 2023 at 14:44
  • there is also something called block styles, which could be used for this, but variants is the more flexible option
    – Tom J Nowell
    Jan 30, 2023 at 14:54
  • Actually, as Tom commented, block styles are better use-case for this, because that is what they do - add certain class to block. Block variants are overkill, they are used when you have to set attributes values to certain pre-determined set.
    – Lovor
    Jan 30, 2023 at 17:44
  • block styles put a UI in the sidebar but aren't accessible from the inserter, and don't have customisable icons/previews/etc. You also can only have 1 style at a time whereas with a variant you could have styles on your variant
    – Tom J Nowell
    Jan 30, 2023 at 17:49
  • Can I change the default settings of these variations? Such as color, font size, etc. I added a variation of the core/buttons. But for some reason the color and radius of the buttons do not change. Only the class works. What am I doing wrong? innerBlocks: [ ['core/button'], ['core/button', {className: "is-style-outline", textColor: "blue",border: {radius: "0px"},},],]
    – Artem
    Jan 31, 2023 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.