Make WordPress Core

Opened 8 months ago

Closed 3 months ago

Last modified 3 months ago

#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

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
8 months ago

  • Milestone 7.0 → 7.1

#3 @audrasjb
5 months ago

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

#4 @desrosj
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.

#7 @ramonopoly
3 months ago

  • Owner set to ramonopoly
  • Resolution → fixed
  • Status new → closed

In 62731:

Theme JSON: Define preset CSS vars for blocks based on feature selectors

Updated 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.

Props aaronrobertshaw, ramonopoly, westonruter, wildworks.

Fixes #64598.

​@ramonopoly commented on ​PR #10869:


3 months ago
#8

Committed in r62731 / 4816134ec6d84c0986508a283bac3405fc7ef572

Note: See TracTickets for help on using tickets.