Theme.json: Make it possible to style more than one block using the same styles

[carolinan]

What problem does this address?

In theme.json, I am adding the same style to multiple blocks, but I have to repeat the styles for each block. In the example, I am only using one style, and it is not such a big problem, but I also have blocks that repeat 18 lines of code. At that point, I no longer see the benefit of using the .json over the style.css file?

What is your proposed solution?

Instead of repeating the styles:

            "core/post-date": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--extra-small)"
                }
            },
            "core/post-terms": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--extra-small)"
                }
            },

I'd like to be able to do something like:

"core/post-date, core/post-terms": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--extra-small)"
            }
        },

[sagarnasit]

@carolinan This is great for multiple block styling. We still need to repeat styles for HTML elements. It would be great if we can combine styles for both elements and blocks in one place.

Currently, I need to duplicate the styles for HTML button element and Gutenberg button block.

    "styles": {
        "elements": {
            "button": {
                "color": {
                    "background": "var(--wp--preset--color--red)",
                    "text": "var(--wp--preset--color--white)"
                }
            }
        },
        "blocks": {
            "core/button": {
                "color": {
                    "background": "var(--wp--preset--color--red)",
                    "text": "var(--wp--preset--color--white)"
                }
            }
        }
    }

Instead, extend styles to HTML button element as well as core/button block without repeating.

    "styles": {
        "extends" : {
            "my-button-styles": {
                "color": {
                     "background": "var(--wp--preset--color--red)",
                     "text": "var(--wp--preset--color--white)"
                },
                "elements": [ "button" ],
                "blocks": [ "core/button" ]
            }
        }
    }

[carolinan]

Hi Does this example work for you? Because according to the documentation, elements is limited to headings and link: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#element-styles

[sagarnasit]

Does this example work for you?

This is not working for me!

Any plans to extend support for more elements? Some block equivalent elements like button, hr, blockquote... would be nice to have on the list.

For Example, Currently, we can style blocks like core/button, core/separator, core/quote from theme.json but have to add separate styles for their equivalents HTML tags like button, hr, blockquote.

[carolinan]

@aristath I wanted to check in if you still want to be assigned to this issue and if there is any progress.

[carolinan]

@oandregal Do you think this is a candidate for 5.9? It is also a performance issue since the resulting CSS is repeated.

[oandregal]

Personally, I see this as an enhancement to do after other things are shipped (UI, etc). We also may want to do this differently, like not introducing a new notation but by inspecting the values ourselves.

[carolinan]

Is this something we want to do or shall I close the issue?

When both the post date and terms are placed, the output of the first example is

.wp-block-post-date {
    font-size: var(--wp--preset--font-size--extra-small);
}
.wp-block-post-terms {
    font-size: var(--wp--preset--font-size-extra-small);
}

Instead of just

.wp-block-post-date,
.wp-block-post-terms  {
    font-size: var(--wp--preset--font-size--extra-small);
}

[carolinan]

It is now possible to register custom style variations for multiple blocks, but not default styles for multiple blocks.