Automatically generate required preset classes (#25768)

Co-authored-by: Dave Smith <getdavemail@gmail.com>

lib/global-styles.php

@@ -500,9 +500,6 @@ function gutenberg_experimental_global_styles_get_block_data() {
 		}
 
 		$supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports );
-		if ( empty( $supports ) ) {
-			continue;
-		}
 
 		/*
 		 * Assign the selector for the block.
@@ -577,6 +574,77 @@ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) {
 
 }
 
+/**
+ * Given a selector for a block, and the settings of the block, returns a string
+ * with the stylesheet of the preset classes required for that block.
+ *
+ * @param string $selector  String with the CSS selector for the block.
+ * @param array  $settings  Array containing the settings of the block.
+ *
+ * @return string Stylesheet with the preset classes.
+ */
+function gutenberg_experimental_global_styles_get_preset_classes( $selector, $settings ) {
+	if ( empty( $settings ) || empty( $selector ) ) {
+		return '';
+	}
+
+	$stylesheet        = '';
+	$class_prefix      = 'has';
+	$classes_structure = array(
+		'color'               => array(
+			'path'     => array( 'color', 'palette' ),
+			'key'      => 'color',
+			'property' => 'color',
+		),
+		'background-color'    => array(
+			'path'     => array( 'color', 'palette' ),
+			'key'      => 'color',
+			'property' => 'background-color',
+		),
+		'gradient-background' => array(
+			'path'     => array( 'color', 'gradients' ),
+			'key'      => 'gradient',
+			'property' => 'background',
+		),
+		'font-size'           => array(
+			'path'     => array( 'typography', 'fontSizes' ),
+			'key'      => 'size',
+			'property' => 'font-size',
+		),
+	);
+
+	foreach ( $classes_structure as $class_suffix => $preset_structure ) {
+		$path    = $preset_structure['path'];
+		$presets = gutenberg_experimental_get( $settings, $path );
+
+		if ( empty( $presets ) ) {
+			continue;
+		}
+
+		$key      = $preset_structure['key'];
+		$property = $preset_structure['property'];
+
+		foreach ( $presets as $preset ) {
+			$slug  = $preset['slug'];
+			$value = $preset[ $key ];
+
+			$class_to_use    = ".$class_prefix-$slug-$class_suffix";
+			$selector_to_use = '';
+			if ( ':root' === $selector ) {
+				$selector_to_use = $class_to_use;
+			} else {
+				$selector_to_use = "$selector$class_to_use";
+			}
+			if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+				$stylesheet .= "$selector_to_use {\n\t$property: $value;\n}\n";
+			} else {
+				$stylesheet .= $selector_to_use . '{' . "$property:$value;}\n";
+			}
+		}
+	}
+	return $stylesheet;
+}
+
 /**
  * Takes a tree adhering to the theme.json schema and generates
  * the corresponding stylesheet.
@@ -633,6 +701,8 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree ) {
 				$theme_variables
 			)
 		);
+
+		$stylesheet .= gutenberg_experimental_global_styles_get_preset_classes( $block_data[ $block_name ]['selector'], $tree[ $block_name ]['settings'] );
 	}
 
 	if ( gutenberg_experimental_global_styles_has_theme_json_support() ) {

packages/block-library/src/button/block.json

@@ -58,6 +58,7 @@
 		"anchor": true,
 		"align": true,
 		"alignWide": false,
-		"reusable": false
+		"reusable": false,
+		"__experimentalSelector": ".wp-block-button > a"
 	}
 }

packages/block-library/src/table/block.json

@@ -123,6 +123,7 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalSelector": ".wp-block-button > table"
 	}
 }