From a10584de1e4c0879f608a67f9a841027db9188f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <nosolosw@users.noreply.github.com>
Date: Wed, 26 May 2021 12:17:20 +0200
Subject: [PATCH] Fix generation of presets classes per block (#32190)

---
 lib/class-wp-theme-json-gutenberg.php | 24 +++++++++++++++++++++++-
 phpunit/class-wp-theme-json-test.php  | 27 +++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 5a7765ef62bedb..f883bbe2e128eb 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -619,6 +619,28 @@ private static function compute_style_properties( $styles ) {
 		return $declarations;
 	}
 
+	/**
+	 * Function that appends a sub-selector to a existing one.
+	 *
+	 * Given the compounded $selector "h1, h2, h3"
+	 * and the $to_append selector ".some-class" the result will be
+	 * "h1.some-class, h2.some-class, h3.some-class".
+	 *
+	 * @param string $selector Original selector.
+	 * @param string $to_append Selector to append.
+	 *
+	 * @return string
+	 */
+	private static function append_to_selector( $selector, $to_append ) {
+		$new_selectors = array();
+		$selectors     = explode( ',', $selector );
+		foreach ( $selectors as $sel ) {
+			$new_selectors[] = $sel . $to_append;
+		}
+
+		return implode( ',', $new_selectors );
+	}
+
 	/**
 	 * Given a settings array, it returns the generated rulesets
 	 * for the preset classes.
@@ -641,7 +663,7 @@ private static function compute_preset_classes( $settings, $selector ) {
 			foreach ( $values as $value ) {
 				foreach ( $preset['classes'] as $class ) {
 					$stylesheet .= self::to_ruleset(
-						$selector . '.has-' . $value['slug'] . '-' . $class['class_suffix'],
+						self::append_to_selector( $selector, '.has-' . $value['slug'] . '-' . $class['class_suffix'] ),
 						array(
 							array(
 								'name'  => $class['property_name'],
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 58260c4b9045a9..fa3a4931a561b2 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -174,6 +174,33 @@ function test_get_stylesheet() {
 		);
 	}
 
+	function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'blocks' => array(
+						'core/heading' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'white',
+										'color' => '#fff',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$this->assertEquals(
+			'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: #fff !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: #fff !important;}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: #fff !important;}',
+			$theme_json->get_stylesheet( 'block_styles' )
+		);
+	}
+
 	function test_get_stylesheet_preset_rules_come_after_block_rules() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(