Opened 8 weeks ago
Last modified 8 weeks ago
#64695 new defect (bug)
Global Styles: Support css feature selector for block custom CSS
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 7.1 | Priority: | normal |
| Severity: | normal | Version: | trunk |
| Component: | Editor | Keywords: | has-patch has-unit-tests |
| Focuses: | Cc: |
Description
This ticket tracks the backport of PHP changes from the following Gutenberg PR:
https://github.com/WordPress/gutenberg/pull/75799
When a block type defines a css feature selector in its selectors config, Global Styles custom CSS output (the per-block "Additional CSS" field) should honor that selector rather than always using the block's root selector.
Currently, the Global Styles system respects feature-specific selectors for standard style properties like border, color, and typography, but custom CSS always falls back to the root selector. This change brings custom CSS in line with the existing behavior for other style features.
The PHP changes cover two methods in WP_Theme_JSON:
get_styles_for_block()— When processing custom CSS rules, check for acssfeature selector before falling back to the block's root selector.get_feature_declarations_for_node()— Skip thecsskey when iterating over feature selectors to prevent it being consumed as a regular style property.
Change History (1)
This ticket was mentioned in PR #11000 on WordPress/wordpress-develop by @aaronrobertshaw.
8 weeks ago
#1
- Keywords has-patch has-unit-tests added
This backports the PHP changes from Gutenberg PR https://github.com/WordPress/gutenberg/pull/75799 to support the
cssfeature selector for block custom CSS in Global Styles.Changes:
get_styles_for_block()— When processing custom CSS rules, use the block'scssfeature selector if defined, falling back to the root selector.get_feature_declarations_for_node()— Skip thecsskey when iterating over feature selectors to prevent it being consumed as a regular style property.## Testing Instructions
This is an internal API change. No blocks currently define a
selectors.cssproperty, so there is no user-facing change. The new unit tests verify the behavior:All three tests should pass:
test_get_styles_for_block_custom_css_uses_css_feature_selector— Custom CSS uses thecssfeature selector when defined as a string.test_get_styles_for_block_custom_css_falls_back_to_root_selector— Custom CSS falls back to the root selector when nocssfeature selector is defined.test_get_styles_for_block_custom_css_uses_css_feature_selector_object_form— Custom CSS uses thecssfeature selector when defined as an object with arootsubkey.