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: WordPress#12560
Reviewed by aduth, ciampo, mukesh27.
Fixes #65646.

git-svn-id: https://develop.svn.wordpress.org/trunk@62767 602fd350-edb4-49c9-b593-d223f7449a82

Author: mirka

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',

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