Make WordPress Core

Opened 5 weeks ago

Closed 5 weeks ago

#65646 closed defect (bug) (fixed)

Register `wp-theme` design tokens stylesheet

Reported by: 0mirka00 Owned by: 0mirka00
Priority: high Milestone: 7.1
Component: Administration Version:
Severity: normal Keywords: has-patch has-unit-tests
Cc: Focuses:

Description

The wp-theme JS package is registered in Core, but the accompanying design tokens stylesheet is only registered in the Gutenberg plugin. Without the stylesheet, token-consuming styles may see that their values are undefined.

Although all first-party usage of the design tokens have fallback values injected in them at build time, the correct intended behavior is that the design tokens stylesheet is actually loaded where design tokens are used.

Proposed solution

Register wp-theme in wp_default_styles() at /wp-includes/css/dist/theme/design-tokens$suffix.css, largely mirroring the Gutenberg plugin setup.

Change History (4)

#1 @0mirka00
5 weeks ago

  • Owner set to 0mirka00

This ticket was mentioned in PR #12560 on WordPress/wordpress-develop by @0mirka00.


5 weeks ago
#2

  • Keywords has-patch has-unit-tests added

Register the wp-theme design tokens stylesheet in Core so --wpds-* custom properties are available without the Gutenberg plugin.

## Changes

  • Register wp-theme in wp_default_styles() at /wp-includes/css/dist/theme/design-tokens$suffix.css.
  • Add wp-theme first in $wp_edit_blocks_dependencies for the editor iframe.
  • Add wp-theme as a dependency of wp-components and wp-block-directory.
  • Add wp-theme to the RTL styles list.
  • Add PHPUnit coverage for registration and dependency wiring.

wp-base-styles intentionally does not depend on wp-theme. The CSS asset itself is synced from Gutenberg builds via the existing Grunt workflow and is not part of this diff.

## Test plan

  • [x] PHPUnit: test_wp_theme_style_is_registered, test_wp_components_depends_on_wp_theme, test_wp_block_directory_depends_on_wp_theme, test_wp_edit_blocks_depends_on_wp_theme_first
  • [x] Local admin and block editor without Gutenberg plugin: --wpds-* present on :root
  • [x] Verified with SCRIPT_DEBUG on and off

## Use of AI Tools

AI assistance: Yes
Tool(s): Cursor
Used for: Implementation exploration, dependency analysis, test scaffolding, and PR description drafting; changes were reviewed and tested locally by me.

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


5 weeks ago
#3

## Trac ticket

Fixes https://core.trac.wordpress.org/ticket/65646

## Summary

The wp-theme JS package is registered in Core, but its accompanying design tokens stylesheet was only registered in the Gutenberg plugin. Without the stylesheet, token-consuming styles may see undefined values. Although first-party usage injects fallback values at build time, the intended behaviour is that the design tokens stylesheet is actually loaded wherever design tokens are used.

## Changes

In wp_default_styles():

  • Register a theme package style pointing to /wp-includes/css/dist/theme/design-tokens$suffix.css (special-cased like base-styles, since the filename is not the default style.css).
  • Add wp-theme as a dependency of wp-components so token values are defined before the consuming styles reference them.
  • Load wp-theme first among the editor (wp-edit-blocks) dependencies, and add it to the RTL styles list for consistency with the other package styles.

This mirrors the Gutenberg plugin setup.

Unit tests were added to tests/phpunit/tests/dependencies/styles.php covering registration of the handle/src, the wp-components dependency, and the editor style ordering.

## Note for reviewers

The registered file css/dist/theme/design-tokens.css is synced from the Gutenberg build (like all other css/dist/* assets), so a Gutenberg version bump that outputs the theme/ styles directory must precede or accompany this change. Until then the handle resolves to a file that is not yet present in Core.

## Testing instructions

  1. Run the dependency tests: phpunit tests/phpunit/tests/dependencies/styles.php.
  2. Confirm the wp-theme handle is registered and that wp-components and wp-edit-blocks depend on it.

#4 @0mirka00
5 weeks ago

  • Resolutionfixed
  • Status assignedclosed

In 62767:

Script Loader: Register wp-theme design tokens stylesheet.

Register the wp-theme stylesheet in the script loader so design tokens
are available to wp-components and the block editor dependency chain.

Developed in: https://github.com/WordPress/wordpress-develop/pull/12560
Reviewed by aduth, ciampo, mukesh27.
Fixes #65646.

Note: See TracTickets for help on using tickets.