Do not enqueue block styles if theme does not have theme.json

WordPress · Aug 26, 2021 · a59775a · a59775a
1 parent f7a1387
commit a59775a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/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 );
 		}
 	}
 

diff --git a/lib/global-styles.php b/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.
  */
@@ -51,7 +51,11 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
 	$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;
 	}