Fix: Preset controls need the preset CSS variables in scope (#27119)

lib/class-wp-theme-json.php

@@ -790,6 +790,9 @@ private static function compute_theme_vars( &$declarations, $context ) {
 	 * @return string CSS ruleset.
 	 */
 	private static function to_ruleset( $selector, $declarations ) {
+		if ( empty( $declarations ) ) {
+			return '';
+		}
 		$ruleset = '';
 
 		if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
@@ -816,17 +819,49 @@ function ( $carry, $element ) {
 	/**
 	 * Converts each context into a list of rulesets
 	 * to be appended to the stylesheet.
+	 * These rulesets contain all the css variables (custom variables and preset variables).
 	 *
 	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
 	 *
 	 * For each context this creates a new ruleset such as:
 	 *
 	 *   context-selector {
-	 *     style-property-one: value;
 	 *     --wp--preset--category--slug: value;
 	 *     --wp--custom--variable: value;
 	 *   }
 	 *
+	 * @param string $stylesheet Stylesheet to append new rules to.
+	 * @param array  $context Context to be processed.
+	 *
+	 * @return string The new stylesheet.
+	 */
+	private static function to_css_variables( $stylesheet, $context ) {
+		if ( empty( $context['selector'] ) ) {
+			return $stylesheet;
+		}
+
+		$declarations = array();
+		self::compute_preset_vars( $declarations, $context );
+		self::compute_theme_vars( $declarations, $context );
+
+		// Attach the ruleset for style and custom properties.
+		$stylesheet .= self::to_ruleset( $context['selector'], $declarations );
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Converts each context into a list of rulesets
+	 * containing the block styles to be appended to the stylesheet.
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each context this creates a new ruleset such as:
+	 *
+	 *   context-selector {
+	 *     style-property-one: value;
+	 *   }
+	 *
 	 * Additionally, it'll also create new rulesets
 	 * as classes for each preset value such as:
 	 *
@@ -846,29 +881,23 @@ function ( $carry, $element ) {
 	 *     background: value;
 	 *   }
 	 *
+	 *   p.has-value-gradient-background {
+	 *     background: value;
+	 *   }
+	 *
 	 * @param string $stylesheet Stylesheet to append new rules to.
 	 * @param array  $context Context to be processed.
 	 *
 	 * @return string The new stylesheet.
 	 */
-	private static function to_stylesheet( $stylesheet, $context ) {
+	private static function to_block_styles( $stylesheet, $context ) {
 		if ( empty( $context['selector'] ) ) {
-			return '';
+			return $stylesheet;
 		}
 
 		$declarations = array();
 		self::compute_style_properties( $declarations, $context );
-		self::compute_preset_vars( $declarations, $context );
-		self::compute_theme_vars( $declarations, $context );
 
-		// If there are no declarations at this point,
-		// it won't have any preset classes either,
-		// so bail out earlier.
-		if ( empty( $declarations ) ) {
-			return '';
-		}
-
-		// Attach the ruleset for style and custom properties.
 		$stylesheet .= self::to_ruleset( $context['selector'], $declarations );
 
 		// Attach the rulesets for the classes.
@@ -910,10 +939,18 @@ function ( $element ) {
 	 * Returns the stylesheet that results of processing
 	 * the theme.json structure this object represents.
 	 *
+	 * @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
 	 * @return string Stylesheet.
 	 */
-	public function get_stylesheet() {
-		return array_reduce( $this->contexts, array( $this, 'to_stylesheet' ), '' );
+	public function get_stylesheet( $type = 'all' ) {
+		switch ( $type ) {
+			case 'block_styles':
+				return array_reduce( $this->contexts, array( $this, 'to_block_styles' ), '' );
+			case 'css_variables':
+				return array_reduce( $this->contexts, array( $this, 'to_css_variables' ), '' );
+			default:
+				return array_reduce( $this->contexts, array( $this, 'to_css_variables' ), '' ) . array_reduce( $this->contexts, array( $this, 'to_block_styles' ), '' );
+		}
 	}
 
 	/**

lib/global-styles.php

@@ -115,12 +115,14 @@ function gutenberg_experimental_global_styles_get_theme_support_settings( $setti
  * the corresponding stylesheet.
  *
  * @param WP_Theme_JSON $tree Input tree.
+ * @param string        $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
  *
  * @return string Stylesheet.
  */
-function gutenberg_experimental_global_styles_get_stylesheet( $tree ) {
+function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'all' ) {
 	// Check if we can use cached.
 	$can_use_cached = (
+		( 'all' === $type ) &&
 		( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
 		( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
 		( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
@@ -135,9 +137,9 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree ) {
 		}
 	}
 
-	$stylesheet = $tree->get_stylesheet();
+	$stylesheet = $tree->get_stylesheet( $type );
 
-	if ( gutenberg_experimental_global_styles_has_theme_json_support() ) {
+	if ( ( 'all' === $type || 'block_styles' === $type ) && gutenberg_experimental_global_styles_has_theme_json_support() ) {
 		// To support all themes, we added in the block-library stylesheet
 		// a style rule such as .has-link-color a { color: var(--wp--style--color--link, #00e); }
 		// so that existing link colors themes used didn't break.
@@ -221,7 +223,13 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		// we need to add the styles via the settings. This is because
 		// we want them processed as if they were added via add_editor_styles,
 		// which adds the editor wrapper class.
-		$settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $all ) );
+		$settings['styles'][] = array(
+			'css'                     => gutenberg_experimental_global_styles_get_stylesheet( $all, 'css_variables' ),
+			'__experimentalNoWrapper' => true,
+		);
+		$settings['styles'][] = array(
+			'css' => gutenberg_experimental_global_styles_get_stylesheet( $all, 'block_styles' ),
+		);
 	}
 
 	return $settings;

packages/block-editor/src/utils/transform-styles/index.js

@@ -23,20 +23,23 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map( styles, ( { css, baseURL } ) => {
-		const transforms = [];
-		if ( wrapperClassName ) {
-			transforms.push( wrap( wrapperClassName ) );
-		}
-		if ( baseURL ) {
-			transforms.push( urlRewrite( baseURL ) );
-		}
-		if ( transforms.length ) {
-			return traverse( css, compose( transforms ) );
-		}
+	return map(
+		styles,
+		( { css, baseURL, __experimentalNoWrapper = false } ) => {
+			const transforms = [];
+			if ( wrapperClassName && ! __experimentalNoWrapper ) {
+				transforms.push( wrap( wrapperClassName ) );
+			}
+			if ( baseURL ) {
+				transforms.push( urlRewrite( baseURL ) );
+			}
+			if ( transforms.length ) {
+				return traverse( css, compose( transforms ) );
+			}
 
-		return css;
-	} );
+			return css;
+		}
+	);
 };
 
 export default transformStyles;

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -20,12 +20,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { default as getGlobalStyles } from './global-styles-renderer';
 import {
 	GLOBAL_CONTEXT,
 	getValueFromVariable,
 	getPresetVariable,
 } from './utils';
+import getGlobalStyles from './global-styles-renderer';
 
 const EMPTY_CONTENT = '{}';
 
@@ -200,7 +200,18 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 					css: getGlobalStyles(
 						contexts,
 						mergedStyles,
-						STYLE_PROPERTY
+						STYLE_PROPERTY,
+						'cssVariables'
+					),
+					isGlobalStyles: true,
+					__experimentalNoWrapper: true,
+				},
+				{
+					css: getGlobalStyles(
+						contexts,
+						mergedStyles,
+						STYLE_PROPERTY,
+						'blockStyles'
 					),
 					isGlobalStyles: true,
 				},