Wp Block default background color don't work

Question

I've found this really wierd bug where if I set the block.json to have a default background color, like this:

"attributes": {
        "backgroundColor": {
            "type": "string",
            "default": "rose-red"
        }
}

( "rose-red" is the slug for the color I have set in the theme.json color palette.)

The block will not have the normal "has-background has-rose-red-background-color"-class in front-end. If I remove the default attribute and just select the color in the back end or just select a different color other than the default, the classes works fine.

How do I make wp use a default color on the block AND use the normal color classes in front end?

Answer 1

Check the block.json has enabled support for background color then define a style object to set your preset default color, eg:

block.json

...
"supports": {
    "color": {
        "background": true
    }
},
"attributes": {
    "style": {
        "type": "object",
        "default": {
            "color": {
                "background": "var(--wp--color--rose-red)"
            }
        }
    }
}
...

The block markup produced includes the applied class names like:

<!-- wp:gutenberg/test-block {"backgroundColor":"rose-red"} -->
<p class="wp-block-gutenberg-test-block has-background-color has-rose-red-background-color">Hello World</p>
<!-- /wp:gutenberg/test-block -->

Note: This applies to static blocks - if you are working on a dynamic block, see Gutenberg Block Supports: How to set a default background color?