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 (
__experimentalStyle from block.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
Issues
.wp-block-button { border-radius: 9999px; }
.wp-block-button.is-style-squared { border-radius: 0; }
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:
theme.json)__experimentalStylefromblock.json)theme.jsonIf block's CSS is not fully absorbed, the goal is not complete.
How
The current experimental implementation uses a
__experimentalStylekey in theblock.jsonof 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.jsonthat could help address the style variations issues (see).Current status
Blocks
Issues
theme.jsondon't have these styles in the post editor Styles coming from__experimentalStylesare not enqueued in the post editor for themes withouttheme.json#46818theme.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: