Make WordPress Core

Opened 6 months ago

Closed 4 weeks ago

Last modified 4 weeks ago

#64695 closed defect (bug) (fixed)

Global Styles: Support css feature selector for block custom CSS

Reported by: aaronrobertshaw Owned by: ramonopoly
Priority: normal Milestone: 7.1
Component: Editor Version: 7.0
Severity: normal Keywords: has-patch has-unit-tests gutenberg-merge
Cc: Focuses:

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 (7)

This ticket was mentioned in PR #11000 on WordPress/wordpress-develop by @aaronrobertshaw.


6 months 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.

#2 @audrasjb
3 months ago

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

#3 @wildworks
6 weeks ago

  • Keywords gutenberg-merge added

@wildworks commented on PR #11000:


5 weeks ago
#4

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.

#5 @ramonopoly
4 weeks ago

  • Owner set to ramonopoly
  • Resolutionfixed
  • Status newclosed

In 62722:

Custom CSS: Fix custom css feature selector

This commit makes the following 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.


Context:

When a block type defines a css feature selector in its block.json selectors config, the Global Styles custom CSS output should honor that selector instead of always using the block's root selector.

Props aaronrobertshaw, ramonopoly, wildworks.

Fixes #64695.

@ramonopoly commented on PR #11000:


4 weeks ago
#6

Committed in r62722 / eadae6007395771971571427b781367ac0511849

@aaronrobertshaw commented on PR #11000:


4 weeks ago
#7

Thanks for committing this one 👍

Note: See TracTickets for help on using tickets.