diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 01ef8a348e5bc..d777ecccc4373 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1721,6 +1721,7 @@ function wp_default_styles( $styles ) { // Only add CONTENT styles here that should be enqueued in the iframe! $wp_edit_blocks_dependencies = array( + 'wp-theme', 'wp-base-styles', 'wp-components', /* @@ -1761,8 +1762,9 @@ function wp_default_styles( $styles ) { 'block-editor' => array( 'wp-components', 'wp-preferences' ), 'block-library' => array(), 'block-directory' => array(), + 'theme' => array(), 'base-styles' => array(), - 'components' => array(), + 'components' => array( 'wp-theme' ), 'commands' => array( 'wp-components' ), 'edit-post' => array( 'wp-components', @@ -1829,6 +1831,10 @@ function wp_default_styles( $styles ) { $path = "/wp-includes/css/dist/base-styles/admin-schemes$suffix.css"; } + 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 ); } @@ -1872,6 +1878,7 @@ function wp_default_styles( $styles ) { 'wp-reset-editor-styles', 'wp-editor-classic-layout-styles', 'wp-block-library-theme', + 'wp-theme', 'wp-edit-blocks', 'wp-block-editor', 'wp-block-library', diff --git a/tests/phpunit/tests/dependencies/styles.php b/tests/phpunit/tests/dependencies/styles.php index de6fefb94b5bb..90c4e59fccdee 100644 --- a/tests/phpunit/tests/dependencies/styles.php +++ b/tests/phpunit/tests/dependencies/styles.php @@ -557,6 +557,55 @@ public function test_block_styles_for_viewing_with_split_styles() { ); } + /** + * 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 ) ); + } + /** * @ticket 58394 * @ticket 63887