Fix CSS Custom Properties for presets in the site editor (#36851)

WordPress · Dec 7, 2021 · bd81e9c · bd81e9c
1 parent cdedab2
commit bd81e9c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 40 deletions.
diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -71,34 +71,22 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		}
 
 		$new_global_styles = array();
-		$new_presets       = array(
-			array(
-				'css'                     => 'variables',
-				'__unstableType'          => 'presets',
-				'__experimentalNoWrapper' => true,
-			),
-			array(
-				'css'            => 'presets',
+
+		$style_css = wp_get_global_stylesheet( array( 'presets' ) );
+		if ( '' !== $style_css ) {
+			$new_global_styles[] = array(
+				'css'            => $style_css,
 				'__unstableType' => 'presets',
-			),
-		);
-		foreach ( $new_presets as $new_style ) {
-			$style_css = wp_get_global_stylesheet( array( $new_style['css'] ) );
-			if ( '' !== $style_css ) {
-				$new_style['css']    = $style_css;
-				$new_global_styles[] = $new_style;
-			}
+			);
 		}
 
-		$new_block_classes = array(
-			'css'            => 'styles',
-			'__unstableType' => 'theme',
-		);
 		if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
-			$style_css = wp_get_global_stylesheet( array( $new_block_classes['css'] ) );
+			$style_css = wp_get_global_stylesheet( array( 'styles' ) );
 			if ( '' !== $style_css ) {
-				$new_block_classes['css'] = $style_css;
-				$new_global_styles[]      = $new_block_classes;
+				$new_global_styles[] = array(
+					'css'            => $style_css,
+					'__unstableType' => 'theme',
+				);
 			}
 		}
 
@@ -288,6 +276,16 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
 	return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) );
 }
 
+/**
+ * Function to enqueue the CSS Custom Properties
+ * coming from theme.json.
+ */
+function gutenberg_load_css_custom_properties() {
+	wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true );
+	wp_add_inline_style( 'global-styles-css-custom-properties', wp_get_global_stylesheet( array( 'variables' ) ) );
+	wp_enqueue_style( 'global-styles-css-custom-properties' );
+}
+
 // The else clause can be removed when plugin support requires WordPress 5.8.0+.
 if ( function_exists( 'get_block_editor_settings' ) ) {
 	add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
@@ -304,3 +302,5 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
 add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 );
 add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 );
 // This filter needs to be executed last.
+
+add_filter( 'enqueue_block_editor_assets', 'gutenberg_load_css_custom_properties' );
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
@@ -23,23 +23,20 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	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 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 css;
+	} );
 };
 
 export default transformStyles;
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -378,7 +378,6 @@ export function useGlobalStylesOutput() {
 			{
 				css: customProperties,
 				isGlobalStyles: true,
-				__experimentalNoWrapper: true,
 			},
 			{
 				css: globalStyles,