Changeset 62767

Timestamp:

07/17/2026 09:08:42 AM (4 weeks ago)

Author:

0mirka00

Message:

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.

Location:

trunk

Files:

• src/wp-includes/script-loader.php (modified) (4 diffs)
• tests/phpunit/tests/dependencies/styles.php (modified) (1 diff)

trunk/src/wp-includes/script-loader.php

@@ -1722 +1722 @@
         // Only add CONTENT styles here that should be enqueued in the iframe!
         $wp_edit_blocks_dependencies = array(
+                'wp-theme',
                 'wp-base-styles',
                 'wp-components',
@@ -1762 +1763 @@
                 'block-library'        => array(),
                 'block-directory'      => array(),
+                'theme'                => array(),
                 'base-styles'          => array(),
-                'components'           => array(),
+                'components'           => array( 'wp-theme' ),
                 'commands'             => array( 'wp-components' ),
                 'edit-post'            => array(
@@ -1830 +1832 @@
                 }
 
+                if ( 'theme' === $package ) {
+                        $path = "/wp-includes/css/dist/theme/design-tokens$suffix.css";
+                }
+
                 $styles->add( $handle, $path, $dependencies );
                 $styles->add_data( $handle, 'path', ABSPATH . $path );
@@ -1873 +1879 @@
                 'wp-editor-classic-layout-styles',
                 'wp-block-library-theme',
+                'wp-theme',
                 'wp-edit-blocks',
                 'wp-block-editor',

trunk/tests/phpunit/tests/dependencies/styles.php

@@ -556 +556 @@
                         $GLOBALS['wp_styles']->registered['wp-block-library']->src
                 );
+        }
+
+        /**
+         * Tests that the design tokens stylesheet is registered in core.
+         *
+         * @ticket 65646
+         *
+         * @covers ::wp_default_styles
+         */
+        public function test_wp_theme_style_is_registered() {
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $this->assertArrayHasKey( 'wp-theme', $GLOBALS['wp_styles']->registered );
+                $this->assertSame(
+                        '/' . WPINC . '/css/dist/theme/design-tokens.css',
+                        $GLOBALS['wp_styles']->registered['wp-theme']->src
+                );
+        }
+
+        /**
+         * Tests that wp-components depends on wp-theme so tokens load before component styles.
+         *
+         * @ticket 65646
+         *
+         * @covers ::wp_default_styles
+         */
+        public function test_wp_components_depends_on_wp_theme() {
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $this->assertContains(
+                        'wp-theme',
+                        $GLOBALS['wp_styles']->registered['wp-components']->deps
+                );
+        }
+
+        /**
+         * Tests that wp-edit-blocks loads design tokens before other editor styles.
+         *
+         * @ticket 65646
+         *
+         * @covers ::wp_default_styles
+         */
+        public function test_wp_edit_blocks_depends_on_wp_theme_first() {
+                wp_default_styles( $GLOBALS['wp_styles'] );
+
+                $deps = $GLOBALS['wp_styles']->registered['wp-edit-blocks']->deps;
+
+                $this->assertContains( 'wp-theme', $deps );
+                $this->assertSame( 0, array_search( 'wp-theme', $deps, true ) );
         }