-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Part of: #57537
Note: This is a blocker for the extended block style variations feature and section styling.
Problem
To support applying block style variations in a nested fashion, the specificity of block style variation selectors needs to be 0-0-0
.
The Button block's stylesheet includes some default styles for the Outline block style variation to make its background transparent. If the selector for the Outline style's transparent background is reduced to zero it gets overridden by any button element or Button block styles in global styles.
This is due to the current style load order which is:
- block library styles including defaults for block style variations,
- global styles,
- and finally in #57908 stylesheets for the application of block style variations.
Additional context can be found in #61032 (comment).
Potential Solutions
The ideal order of styles here would be:
- Block library styles
- Global Styles
- Defaults for block style variations e.g. Button Outline's transparent background
- Block style variation styles
To achieve this, adding support for a new stylesheet for blocks would be beneficial. Perhaps something like variations.scss
for block library blocks which can then be collected and enqueued in the appropriate order.
Alternative Option
One long term alternative could be to extend the styles
property within the block.json API to allow them to define styles for block style variations. This would allow for dynamically generating these default styles for variations and outputting them when and if they make sense.
This dynamic approach however might not be a silver bullet solution given the potential for style variations to need styling that theme.json does not yet support. It would also need extra work to ensure compatibility across classic and block themes.