Make WordPress Core

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: aaronrobertshaw's profile aaronrobertshaw 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:

  1. get_styles_for_block() — When processing custom CSS rules, check for a css feature selector before falling back to the block's root selector.
  2. get_feature_declarations_for_node() — Skip the css key 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 css feature selector for block custom CSS in Global Styles.

Changes:

  1. get_styles_for_block() — When processing custom CSS rules, use the block's css feature selector if defined, falling back to the root selector.
  2. get_feature_declarations_for_node() — Skip the css key when iterating over feature selectors to prevent it being consumed as a regular style property.
  3. Three new tests covering the string selector, object-form selector, and fallback behavior.

## Testing Instructions

This is an internal API change. No blocks currently define a selectors.css property, 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 the css feature 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 no css feature selector is defined.
  • test_get_styles_for_block_custom_css_uses_css_feature_selector_object_form — Custom CSS uses the css feature selector when defined as an object with a root subkey.
Note: See TracTickets for help on using tickets.