#64598 closed enhancement (fixed)
Block Supports: Define CSS vars for blocks based on feature selectors
| Reported by: | aaronrobertshaw | Owned by: | ramonopoly |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Editor | Version: | |
| Severity: | normal | Keywords: | gutenberg-merge has-patch has-unit-tests |
| Cc: | Focuses: |
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 (8)
This ticket was mentioned in PR #10869 on WordPress/wordpress-develop by @aaronrobertshaw.
8 months ago
#1
- Keywords has-patch has-unit-tests added
#3
@
5 months ago
Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.
#4
@
5 months ago
- Version trunk
Since this is an enhancement, there's no first version of WordPress the issue can be reproduced in.
@wildworks commented on PR #10869:
3 months ago
#5
I would appreciate it if you could proceed with this PR and commit it in time for the 7.1 Beta1 release on July 15.
@ramonopoly commented on PR #10869:
3 months ago
#6
@aaronrobertshaw This was prepped before 7.0 and probably punted by default.
I've rebased and prepped things, but would like to know if it's okay to commit.
@ramonopoly commented on PR #10869:
3 months ago
#8
Committed in r62731 / 4816134ec6d84c0986508a283bac3405fc7ef572
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
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.