Opened 5 weeks ago
Last modified 3 weeks ago
#64598 new enhancement
Block Supports: Define CSS vars for blocks based on feature selectors
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 7.1 | Priority: | normal |
| Severity: | normal | Version: | trunk |
| Component: | Editor | Keywords: | gutenberg-merge has-patch has-unit-tests |
| Focuses: | Cc: |
Description
This ticket tracks the backport of PHP files for the following Gutenberg update:
https://github.com/WordPress/gutenberg/pull/75226
These updates add support for generating preset CSS custom properties (vars) on feature-specific selectors rather than only a block's root selector.
Some blocks define their root selector as an inner element (e.g. the Button block uses .wp-block-button .wp-block-button__link). Preset CSS vars (like dimension sizes) need to be applied on the outer block wrapper instead. This change enables that by allowing blocks to define feature-level selectors that are used when outputting preset CSS variables.
This is required for the Button block's adoption of width block support. See https://github.com/WordPress/gutenberg/pull/74242 for further context.
Change History (2)
This ticket was mentioned in PR #10869 on WordPress/wordpress-develop by @aaronrobertshaw.
4 weeks ago
#1
- Keywords has-patch has-unit-tests added
Trac ticket: https://core.trac.wordpress.org/ticket/64598
This PR brings the changes from the following Gutenberg PR to core:
WordPress/gutenberg#75226
## Description
Updates the global styles engine and theme JSON processing to generate preset CSS custom properties (vars) for blocks based on their feature-specific selectors rather than only the block's root selector. This enables blocks whose root selector targets an inner element to have preset CSS vars output on the appropriate outer wrapper selector.
See: WordPress/gutenberg#74242
## Testing
phpunit --filter=WP_Theme_JSON_Testtest_get_stylesheet_preset_css_vars_use_feature_selectortest.dimensions.rootselector different from the block's root selector), definedimensionSizespresets for that block in theme.json, and confirm the CSS vars are output on the feature selector rather than the block's root selector.