Iterate on absorbing block styles as part of the global styles mechanism #45198
Description
Follow-up to #33977
Part of #45171, #41232, and #41236.
What
Finalize the work that was started at #34180 to absorb block's CSS as part of the global styles' mechanism.
Why
By absorbing the block's CSS, WordPress will be able to reduce the CSS loaded in the page, themes and users will have a reliable (no specificity issues) and fine-grained mechanism to override styles from lower-level sources.
Note that the global styles' mechanism takes the CSS needs that different sources declare, and creates a single stylesheet that merges them all. The current sources are:
- default (WordPress bundled
theme.json) - blocks (
__experimentalStylefromblock.json) - theme (the own theme's
theme.json - user (the styles provided via the global styles sidebar)
If block's CSS is not fully absorbed, the goal is not complete.
How
The current experimental implementation uses a __experimentalStyle key in the block.json of the block.
We could explore other alternatives when/if the current experiment becomes insufficient or ergonomically inconvenient. For example, it was suggested that blocks could also have a separate styles.json that could help address the style variations issues (see).
Current status
Blocks
- Button
- Pullquote
- Added partial support in #43195
- Navigation
- Added partial support in #41898
- Table
- File
- Audio
- Embed
- Image
- Video
Issues
- Themes without
theme.jsondon't have these styles in the post editor Styles coming from__experimentalStylesare not enqueued in the post editor for themes withouttheme.json#46818 - Style variations and
theme.jsonstyles. They are different mechanisms that don't understand each other. See "block styles variations" and "style variations for blocks". As a result, the current mechanism cannot absorb the following CSS:
.wp-block-button { border-radius: 9999px; }
.wp-block-button.is-style-squared { border-radius: 0; }