Make WordPress Core

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

  1. Run the PHP unit tests: phpunit --filter=WP_Theme_JSON_Test
  2. Verify all existing tests continue to pass, including the new test_get_stylesheet_preset_css_vars_use_feature_selector test.
  3. For manual testing, register a block that defines a feature-level selector (e.g. a dimensions.root selector different from the block's root selector), define dimensionSizes presets for that block in theme.json, and confirm the CSS vars are output on the feature selector rather than the block's root selector.

#2 @aaronrobertshaw
3 weeks ago

  • Milestone changed from 7.0 to 7.1
Note: See TracTickets for help on using tickets.