Make global styles available to all themes (#34334)

They just differ on what data they have:

1. Without theme.json and no experimental-link-color support either:
   the stylesheet contains the core presets & styles.

2. Without theme.json but experimental-link-color support:
   the stylesheet contains the core and theme presets,
   plus the core styles if any.

3. With theme.json:
   the stylesheet contains the core and theme presets,
   plus the result of merging core & theme styles.

Author: oandregal

lib/class-wp-theme-json-gutenberg.php

@@ -799,8 +799,33 @@ private function get_css_variables( $nodes ) {
 	 *     style-property-one: value;
 	 *   }
 	 *
-	 * Additionally, it'll also create new rulesets
-	 * as classes for each preset value such as:
+	 * @param array $style_nodes Nodes with styles.
+	 *
+	 * @return string The new stylesheet.
+	 */
+	private function get_block_classes( $style_nodes ) {
+		$block_rules = '';
+
+		foreach ( $style_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$selector     = $metadata['selector'];
+			$declarations = self::compute_style_properties( $node );
+			$block_rules .= self::to_ruleset( $selector, $declarations );
+
+			if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
+				$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
+			}
+		}
+
+		return $block_rules;
+	}
+
+	/**
+	 * Creates new rulesets as classes for each preset value such as:
 	 *
 	 *   .has-value-color {
 	 *     color: value;
@@ -821,30 +846,14 @@ private function get_css_variables( $nodes ) {
 	 *   p.has-value-gradient-background {
 	 *     background: value;
 	 *   }
-	 *
-	 * @param array $style_nodes Nodes with styles.
+
 	 * @param array $setting_nodes Nodes with settings.
 	 *
 	 * @return string The new stylesheet.
 	 */
-	private function get_block_styles( $style_nodes, $setting_nodes ) {
-		$block_rules = '';
-		foreach ( $style_nodes as $metadata ) {
-			if ( null === $metadata['selector'] ) {
-				continue;
-			}
-
-			$node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
-			$selector     = $metadata['selector'];
-			$declarations = self::compute_style_properties( $node );
-			$block_rules .= self::to_ruleset( $selector, $declarations );
-
-			if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
-				$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
-			}
-		}
-
+	private function get_preset_classes( $setting_nodes ) {
 		$preset_rules = '';
+
 		foreach ( $setting_nodes as $metadata ) {
 			if ( null === $metadata['selector'] ) {
 				continue;
@@ -855,7 +864,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) {
 			$preset_rules .= self::compute_preset_classes( $node, $selector );
 		}
 
-		return $block_rules . $preset_rules;
+		return $preset_rules;
 	}
 
 	/**
@@ -1053,7 +1062,11 @@ private static function get_setting_nodes( $theme_json, $selectors = array() ) {
 	 * 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'.
+	 * @param string $type Type of stylesheet. It accepts:
+	 *                     'all': css variables, block classes, preset classes. The default.
+	 *                     'block_styles': only block & preset classes.
+	 *                     'css_variables': only css variables.
+	 *                     'presets': only css variables and preset classes.
 	 * @return string Stylesheet.
 	 */
 	public function get_stylesheet( $type = 'all' ) {
@@ -1063,11 +1076,13 @@ public function get_stylesheet( $type = 'all' ) {
 
 		switch ( $type ) {
 			case 'block_styles':
-				return $this->get_block_styles( $style_nodes, $setting_nodes );
+				return $this->get_block_classes( $style_nodes ) . $this->get_preset_classes( $setting_nodes );
 			case 'css_variables':
 				return $this->get_css_variables( $setting_nodes );
+			case 'presets':
+				return $this->get_css_variables( $setting_nodes ) . $this->get_preset_classes( $setting_nodes );
 			default:
-				return $this->get_css_variables( $setting_nodes ) . $this->get_block_styles( $style_nodes, $setting_nodes );
+				return $this->get_css_variables( $setting_nodes ) . $this->get_block_classes( $style_nodes ) . $this->get_preset_classes( $setting_nodes );
 		}
 	}
 

lib/class-wp-theme-json-resolver-gutenberg.php

@@ -407,10 +407,17 @@ public static function get_user_data() {
 	 * @return WP_Theme_JSON_Gutenberg
 	 */
 	public static function get_merged_data( $settings = array(), $origin = 'user' ) {
-		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings );
-
 		$result = new WP_Theme_JSON_Gutenberg();
 		$result->merge( self::get_core_data() );
+
+		if (
+			! get_theme_support( 'experimental-link-color' ) && // link color support needs the presets CSS variables regardless of the presence of theme.json file.
+			! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support()
+		) {
+			return $result;
+		}
+
+		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings );
 		$result->merge( self::get_theme_data( $theme_support_data ) );
 
 		if ( 'user' === $origin ) {

lib/global-styles.php

@@ -10,7 +10,7 @@
  * the corresponding stylesheet.
  *
  * @param WP_Theme_JSON_Gutenberg $tree Input tree.
- * @param string                  $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
+ * @param string                  $type Type of stylesheet we want accepts 'all', 'block_styles', 'css_variables', and 'presets'.
  *
  * @return string Stylesheet.
  */
@@ -48,16 +48,14 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'al
  * and enqueues the resulting stylesheet.
  */
 function gutenberg_experimental_global_styles_enqueue_assets() {
-	if (
-		! get_theme_support( 'experimental-link-color' ) && // link color support needs the presets CSS variables regardless of the presence of theme.json file.
-		! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
-		return;
-	}
-
 	$settings = gutenberg_get_default_block_editor_settings();
 	$all      = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings );
 
-	$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all );
+	$type = 'all';
+	if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+		$type = 'presets';
+	}
+	$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all, $type );
 	if ( empty( $stylesheet ) ) {
 		return;
 	}