From e57a189d0df04698fdb8572f0293ae4285737fbf Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 7 Jul 2022 10:48:36 +0300
Subject: [PATCH 01/19] Add a CSS_Rule object

---
 lib/load.php                                  |   3 +
 .../class-wp-style-engine-css-rule.php        | 107 ++++++++++++++++++
 tools/webpack/packages.js                     |   1 +
 3 files changed, 111 insertions(+)
 create mode 100644 packages/style-engine/class-wp-style-engine-css-rule.php

diff --git a/lib/load.php b/lib/load.php
index b125ef04913a62..7c68df0a9803a5 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -116,7 +116,10 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php';
 }
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php';
 
+}
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
 require __DIR__ . '/block-supports/elements.php';
diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
new file mode 100644
index 00000000000000..70195382458468
--- /dev/null
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rule
+ *
+ * An object for CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rule {
+
+	/**
+	 * The selector.
+	 *
+	 * @var string
+	 */
+	protected $selector;
+
+	/**
+	 * The parent rule.
+	 *
+	 * @var WP_Style_Engine_CSS_Rule
+	 */
+	protected $parent;
+
+	/**
+	 * The selector declarations.
+	 *
+	 * Contains an array of WP_Style_Engine_CSS_Declarations objects.
+	 *
+	 * @var WP_Style_Engine_CSS_Declarations[]
+	 */
+	protected $declarations = array();
+
+	/**
+	 * Constructor
+	 *
+	 * @param string                             $selector     The CSS selector.
+	 * @param WP_Style_Engine_CSS_Rule|null      $parent       The parent rule.
+	 * @param WP_Style_Engine_CSS_Declarations[] $declarations An array of WP_Style_Engine_CSS_Declarations objects.
+	 */
+	public function __construct( $selector = '', $parent = null, $declarations = array() ) {
+		$this->set_selector( $selector );
+		$this->set_parent( $parent );
+		$this->set_declarations( $declarations );
+	}
+
+	/**
+	 * Set the selector.
+	 *
+	 * @param string $selector The CSS selector.
+	 */
+	public function set_selector( $selector ) {
+		$this->selector = $selector;
+	}
+
+	/**
+	 * Set the parent selector.
+	 *
+	 * @param WP_Style_Engine_CSS_Rule $parent The parent rule.
+	 */
+	public function set_parent( $parent ) {
+		$this->parent = $parent;
+	}
+
+	/**
+	 * Set the declarations.
+	 *
+	 * @param WP_Style_Engine_CSS_Declarations[] $declarations An array of WP_Style_Engine_CSS_Declarations objects.
+	 */
+	public function set_declarations( $declarations ) {
+		if ( $declarations instanceof WP_Style_Engine_CSS_Declarations ) {
+			$declarations = array( $declarations );
+		}
+		$this->declarations = array_merge( $this->$declarations, $declarations );
+	}
+
+	/**
+	 * Get the parent selector.
+	 *
+	 * @return string
+	 */
+	public function get_parent_selector() {
+		return $this->parent ? $this->parent->get_selector() : '';
+	}
+
+	/**
+	 * Get the full selector.
+	 *
+	 * @return string
+	 */
+	public function get_selector() {
+		if ( 0 === strpos( $this->selector, '&' ) ) {
+			return $this->get_parent_selector() . substr( $this->selector, 1 );
+		}
+		return $this->get_parent_selector() . ' ' . $this->selector;
+	}
+}
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index c13ceea5de9ecc..978333f880d43a 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -37,6 +37,7 @@ const bundledPackagesPhpConfig = [
 		to: 'build/style-engine/',
 		replaceClasses: [
 			'WP_Style_Engine_CSS_Declarations',
+			'WP_Style_Engine_CSS_Rule',
 			'WP_Style_Engine',
 		],
 	},

From 6931f73742f9941562b05b9937a384124e0794e7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 7 Jul 2022 11:26:35 +0300
Subject: [PATCH 02/19] Add a rules store

---
 lib/load.php                                  |   5 +-
 .../class-wp-style-engine-css-rules-store.php | 138 ++++++++++++++++++
 tools/webpack/packages.js                     |   1 +
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 packages/style-engine/class-wp-style-engine-css-rules-store.php

diff --git a/lib/load.php b/lib/load.php
index 7c68df0a9803a5..57f7993440f57a 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -118,8 +118,11 @@ function gutenberg_is_experiment_enabled( $name ) {
 }
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php';
-
 }
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';
+}
+
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
 require __DIR__ . '/block-supports/elements.php';
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
new file mode 100644
index 00000000000000..acdd3a560bfa13
--- /dev/null
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -0,0 +1,138 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rules_Store
+ *
+ * A store for WP_Style_Engine_CSS_Rule objects.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rules_Store {
+
+	/**
+	 * An array of CSS Rules objects.
+	 *
+	 * @static
+	 *
+	 * @var WP_Style_Engine_CSS_Rule[]
+	 */
+	protected static $rules = array();
+
+	/**
+	 * Get an array of all rules.
+	 *
+	 * @static
+	 *
+	 * @return WP_Style_Engine_CSS_Rule[]
+	 */
+	public static function get_all_rules() {
+		return static::$rules;
+	}
+
+	/**
+	 * Get a WP_Style_Engine_CSS_Rule object by its selector.
+	 *
+	 * @static
+	 *
+	 * @param string $selector The CSS selector.
+	 */
+	public static function get_rule( $selector ) {
+		if ( empty( $selector ) ) {
+			return;
+		}
+
+		$selector_parts = static::deconstruct_selector( $selector );
+		$full_selector  = '';
+		foreach ( $selector_parts as $key => $selector_part ) {
+			// Get the parent object if needed.
+			$parent = 0 === $key ? null : static::get_rule( $selector_parts[ $full_selector ] );
+			// Compile the full selector for the store.
+			$full_selector .= ( 0 === strpos( $selector_part, '&' ) ) ? substr( $selector_part, 1 ) : ' ' . $selector_part;
+			if ( 0 === $key ) {
+				$full_selector = ltrim( $full_selector );
+			}
+			// Create the rule if it doesn't exist.
+			if ( empty( static::$rules[ $full_selector ] ) ) {
+				static::$rules[ $full_selector ] = new WP_Style_Engine_CSS_Rule( $selector_part, $parent );
+			}
+		}
+
+		return static::$rules[ $selector ];
+	}
+
+	/**
+	 * Deconstruct a selector to its parts.
+	 *
+	 * @static
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return array An array of selector parts.
+	 */
+	public static function deconstruct_selector( $selector ) {
+		$selector = trim( $selector );
+
+		// Split selector parts on space characters.
+		$parts = explode( ' ', $selector );
+		$parts = array_map( 'trim', $parts );
+
+		// Remove empty parts.
+		$parts = array_filter( $parts );
+
+		// Split parts on ':' characters.
+		$parts = static::deconstruct_selector_array_on_character( $parts, ':' );
+
+		return $parts;
+	}
+
+	/**
+	 * Expands and re-structures an array based on a character.
+	 *
+	 * @static
+	 *
+	 * @param array  $array The array to expand.
+	 * @param string $character The character to expand on.
+	 *
+	 * @return array The expanded array.
+	 */
+	public static function deconstruct_selector_array_on_character( $array, $character ) {
+		$new_array = array();
+		foreach ( $array as $value ) {
+			if ( strpos( $value, $character ) === false ) {
+				$new_array[] = $value;
+				continue;
+			}
+
+			$value = str_replace( $character, "SPLIT_CHARACTER$character", $value );
+			if ( ':' === $character ) {
+				$value = str_replace( ':', '&:', $value );
+			}
+			$value     = explode( 'SPLIT_CHARACTER', $value );
+			$new_array = array_merge( $new_array, $value );
+		}
+		return $new_array;
+	}
+
+	/**
+	 * Inject an array inside an array at a specific index.
+	 *
+	 * @static
+	 *
+	 * @param array $array The array to inject into.
+	 * @param array $inject The array to inject.
+	 * @param int   $index The index to inject at.
+	 */
+	public static function inject_array_at_index( $array, $inject, $index ) {
+		$array = array_slice( $array, 0, $index, true ) + $inject + array_slice( $array, $index, count( $array ) - $index, true );
+		return $array;
+	}
+}
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 978333f880d43a..2f6720d579452f 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -37,6 +37,7 @@ const bundledPackagesPhpConfig = [
 		to: 'build/style-engine/',
 		replaceClasses: [
 			'WP_Style_Engine_CSS_Declarations',
+			'WP_Style_Engine_CSS_Rules_Store',
 			'WP_Style_Engine_CSS_Rule',
 			'WP_Style_Engine',
 		],

From e683fec8a247f2563819bd262e9184d8015e77af Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 7 Jul 2022 11:56:03 +0300
Subject: [PATCH 03/19] some inline docs & cleanup on the store

---
 .../class-wp-style-engine-css-rules-store.php | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index acdd3a560bfa13..8efe50eb9a70ee 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -46,10 +46,20 @@ public static function get_all_rules() {
 	 * @param string $selector The CSS selector.
 	 */
 	public static function get_rule( $selector ) {
+
+		// Bail early if there is no selector.
 		if ( empty( $selector ) ) {
 			return;
 		}
 
+		// If the selector is already stored, return it.
+		if ( isset( static::$rules[ $selector ] ) ) {
+			return static::$rules[ $selector ];
+		}
+
+		// Create the selector if it doesn't exist.
+		// To do that, first deconstruct the selector to its parts
+		// and build the hierarchy of selector objects prior to storing it.
 		$selector_parts = static::deconstruct_selector( $selector );
 		$full_selector  = '';
 		foreach ( $selector_parts as $key => $selector_part ) {
@@ -112,27 +122,17 @@ public static function deconstruct_selector_array_on_character( $array, $charact
 				continue;
 			}
 
+			// Use "SPLIT_CHARACTER" as a delimiter.
 			$value = str_replace( $character, "SPLIT_CHARACTER$character", $value );
+
+			// Pseudo-selectors are a special case.
 			if ( ':' === $character ) {
 				$value = str_replace( ':', '&:', $value );
 			}
+
 			$value     = explode( 'SPLIT_CHARACTER', $value );
 			$new_array = array_merge( $new_array, $value );
 		}
 		return $new_array;
 	}
-
-	/**
-	 * Inject an array inside an array at a specific index.
-	 *
-	 * @static
-	 *
-	 * @param array $array The array to inject into.
-	 * @param array $inject The array to inject.
-	 * @param int   $index The index to inject at.
-	 */
-	public static function inject_array_at_index( $array, $inject, $index ) {
-		$array = array_slice( $array, 0, $index, true ) + $inject + array_slice( $array, $index, count( $array ) - $index, true );
-		return $array;
-	}
 }

From b90e62d2c7d83905b463371502e6cda31e4d19c6 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 7 Jul 2022 13:03:26 +0300
Subject: [PATCH 04/19] typos & fixes

---
 .../class-wp-style-engine-css-rule.php        | 22 ++++++++++++++++++-
 .../class-wp-style-engine-css-rules-store.php |  4 +++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 70195382458468..106507e8ecce3f 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -60,6 +60,9 @@ public function __construct( $selector = '', $parent = null, $declarations = arr
 	 * @param string $selector The CSS selector.
 	 */
 	public function set_selector( $selector ) {
+		if ( empty( $selector ) ) {
+			return;
+		}
 		$this->selector = $selector;
 	}
 
@@ -69,6 +72,9 @@ public function set_selector( $selector ) {
 	 * @param WP_Style_Engine_CSS_Rule $parent The parent rule.
 	 */
 	public function set_parent( $parent ) {
+		if ( ! $parent instanceof WP_Style_Engine_CSS_Rule ) {
+			return;
+		}
 		$this->parent = $parent;
 	}
 
@@ -81,7 +87,7 @@ public function set_declarations( $declarations ) {
 		if ( $declarations instanceof WP_Style_Engine_CSS_Declarations ) {
 			$declarations = array( $declarations );
 		}
-		$this->declarations = array_merge( $this->$declarations, $declarations );
+		$this->declarations = array_merge( $this->declarations, $declarations );
 	}
 
 	/**
@@ -104,4 +110,18 @@ public function get_selector() {
 		}
 		return $this->get_parent_selector() . ' ' . $this->selector;
 	}
+
+	/**
+	 * Get the CSS.
+	 *
+	 * @return string
+	 */
+	public function get_css() {
+		$css = $this->get_selector() . ' {';
+		foreach ( $this->declarations as $declaration ) {
+			$css .= $declaration->get_declarations_string();
+		}
+		$css .= '}';
+		return $css;
+	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index 8efe50eb9a70ee..31f6603c7ddfcb 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -47,6 +47,8 @@ public static function get_all_rules() {
 	 */
 	public static function get_rule( $selector ) {
 
+		$selector = trim( $selector );
+
 		// Bail early if there is no selector.
 		if ( empty( $selector ) ) {
 			return;
@@ -64,7 +66,7 @@ public static function get_rule( $selector ) {
 		$full_selector  = '';
 		foreach ( $selector_parts as $key => $selector_part ) {
 			// Get the parent object if needed.
-			$parent = 0 === $key ? null : static::get_rule( $selector_parts[ $full_selector ] );
+			$parent = 0 === $key ? null : static::get_rule( $full_selector );
 			// Compile the full selector for the store.
 			$full_selector .= ( 0 === strpos( $selector_part, '&' ) ) ? substr( $selector_part, 1 ) : ' ' . $selector_part;
 			if ( 0 === $key ) {

From 745a6c12d4d69ae326fe0498d0cdeab66f09065e Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 13 Jul 2022 11:10:49 +0300
Subject: [PATCH 05/19] remove parent relations for rules

---
 .../class-wp-style-engine-css-rule.php        | 37 +--------
 .../class-wp-style-engine-css-rules-store.php | 82 +------------------
 2 files changed, 5 insertions(+), 114 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 106507e8ecce3f..53eb4594188f52 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -25,13 +25,6 @@ class WP_Style_Engine_CSS_Rule {
 	 */
 	protected $selector;
 
-	/**
-	 * The parent rule.
-	 *
-	 * @var WP_Style_Engine_CSS_Rule
-	 */
-	protected $parent;
-
 	/**
 	 * The selector declarations.
 	 *
@@ -45,12 +38,10 @@ class WP_Style_Engine_CSS_Rule {
 	 * Constructor
 	 *
 	 * @param string                             $selector     The CSS selector.
-	 * @param WP_Style_Engine_CSS_Rule|null      $parent       The parent rule.
 	 * @param WP_Style_Engine_CSS_Declarations[] $declarations An array of WP_Style_Engine_CSS_Declarations objects.
 	 */
-	public function __construct( $selector = '', $parent = null, $declarations = array() ) {
+	public function __construct( $selector = '', $declarations = array() ) {
 		$this->set_selector( $selector );
-		$this->set_parent( $parent );
 		$this->set_declarations( $declarations );
 	}
 
@@ -66,18 +57,6 @@ public function set_selector( $selector ) {
 		$this->selector = $selector;
 	}
 
-	/**
-	 * Set the parent selector.
-	 *
-	 * @param WP_Style_Engine_CSS_Rule $parent The parent rule.
-	 */
-	public function set_parent( $parent ) {
-		if ( ! $parent instanceof WP_Style_Engine_CSS_Rule ) {
-			return;
-		}
-		$this->parent = $parent;
-	}
-
 	/**
 	 * Set the declarations.
 	 *
@@ -90,25 +69,13 @@ public function set_declarations( $declarations ) {
 		$this->declarations = array_merge( $this->declarations, $declarations );
 	}
 
-	/**
-	 * Get the parent selector.
-	 *
-	 * @return string
-	 */
-	public function get_parent_selector() {
-		return $this->parent ? $this->parent->get_selector() : '';
-	}
-
 	/**
 	 * Get the full selector.
 	 *
 	 * @return string
 	 */
 	public function get_selector() {
-		if ( 0 === strpos( $this->selector, '&' ) ) {
-			return $this->get_parent_selector() . substr( $this->selector, 1 );
-		}
-		return $this->get_parent_selector() . ' ' . $this->selector;
+		return $this->selector;
 	}
 
 	/**
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index 31f6603c7ddfcb..d0a8b1a18873c9 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -54,87 +54,11 @@ public static function get_rule( $selector ) {
 			return;
 		}
 
-		// If the selector is already stored, return it.
-		if ( isset( static::$rules[ $selector ] ) ) {
-			return static::$rules[ $selector ];
-		}
-
-		// Create the selector if it doesn't exist.
-		// To do that, first deconstruct the selector to its parts
-		// and build the hierarchy of selector objects prior to storing it.
-		$selector_parts = static::deconstruct_selector( $selector );
-		$full_selector  = '';
-		foreach ( $selector_parts as $key => $selector_part ) {
-			// Get the parent object if needed.
-			$parent = 0 === $key ? null : static::get_rule( $full_selector );
-			// Compile the full selector for the store.
-			$full_selector .= ( 0 === strpos( $selector_part, '&' ) ) ? substr( $selector_part, 1 ) : ' ' . $selector_part;
-			if ( 0 === $key ) {
-				$full_selector = ltrim( $full_selector );
-			}
-			// Create the rule if it doesn't exist.
-			if ( empty( static::$rules[ $full_selector ] ) ) {
-				static::$rules[ $full_selector ] = new WP_Style_Engine_CSS_Rule( $selector_part, $parent );
-			}
+		// Create the rule if it doesn't exist.
+		if ( empty( static::$rules[ $selector ] ) ) {
+			static::$rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
 		}
 
 		return static::$rules[ $selector ];
 	}
-
-	/**
-	 * Deconstruct a selector to its parts.
-	 *
-	 * @static
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @return array An array of selector parts.
-	 */
-	public static function deconstruct_selector( $selector ) {
-		$selector = trim( $selector );
-
-		// Split selector parts on space characters.
-		$parts = explode( ' ', $selector );
-		$parts = array_map( 'trim', $parts );
-
-		// Remove empty parts.
-		$parts = array_filter( $parts );
-
-		// Split parts on ':' characters.
-		$parts = static::deconstruct_selector_array_on_character( $parts, ':' );
-
-		return $parts;
-	}
-
-	/**
-	 * Expands and re-structures an array based on a character.
-	 *
-	 * @static
-	 *
-	 * @param array  $array The array to expand.
-	 * @param string $character The character to expand on.
-	 *
-	 * @return array The expanded array.
-	 */
-	public static function deconstruct_selector_array_on_character( $array, $character ) {
-		$new_array = array();
-		foreach ( $array as $value ) {
-			if ( strpos( $value, $character ) === false ) {
-				$new_array[] = $value;
-				continue;
-			}
-
-			// Use "SPLIT_CHARACTER" as a delimiter.
-			$value = str_replace( $character, "SPLIT_CHARACTER$character", $value );
-
-			// Pseudo-selectors are a special case.
-			if ( ':' === $character ) {
-				$value = str_replace( ':', '&:', $value );
-			}
-
-			$value     = explode( 'SPLIT_CHARACTER', $value );
-			$new_array = array_merge( $new_array, $value );
-		}
-		return $new_array;
-	}
 }

From 06c5a948a99ba1decfa0d5114108798139d79264 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 13 Jul 2022 11:13:01 +0300
Subject: [PATCH 06/19] escape the selector

---
 packages/style-engine/class-wp-style-engine-css-rule.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 53eb4594188f52..902e7ac6a8dc3b 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -54,7 +54,7 @@ public function set_selector( $selector ) {
 		if ( empty( $selector ) ) {
 			return;
 		}
-		$this->selector = $selector;
+		$this->selector = esc_html( $selector );
 	}
 
 	/**

From 7494a28d31e5a33ad06293f9ad5a4090249b9b2f Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 13 Jul 2022 11:29:45 +0300
Subject: [PATCH 07/19] Allow for multiple named instances of the store

---
 .../class-wp-style-engine-css-rules-store.php | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index d0a8b1a18873c9..3ac4ef4648d787 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -19,33 +19,49 @@
 class WP_Style_Engine_CSS_Rules_Store {
 
 	/**
-	 * An array of CSS Rules objects.
+	 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
 	 *
 	 * @static
 	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store[]
+	 */
+	protected static $stores = array();
+
+	/**
+	 * An array of CSS Rules objects assigned to the store.
+	 *
 	 * @var WP_Style_Engine_CSS_Rule[]
 	 */
-	protected static $rules = array();
+	protected $rules = array();
 
 	/**
-	 * Get an array of all rules.
+	 * Get an instance of the store.
 	 *
-	 * @static
+	 * @param string $store_name The name of the store.
+	 *
+	 * @return WP_Style_Engine_CSS_Rules_Store
+	 */
+	public static function get_store( $store_name ) {
+		if ( ! isset( static::$stores[ $store_name ] ) ) {
+			static::$stores[ $store_name ] = new WP_Style_Engine_CSS_Rules_Store( $store_name );
+		}
+		return static::$stores[ $store_name ];
+	}
+	/**
+	 * Get an array of all rules.
 	 *
 	 * @return WP_Style_Engine_CSS_Rule[]
 	 */
-	public static function get_all_rules() {
-		return static::$rules;
+	public function get_all_rules() {
+		return $this->rules;
 	}
 
 	/**
 	 * Get a WP_Style_Engine_CSS_Rule object by its selector.
 	 *
-	 * @static
-	 *
 	 * @param string $selector The CSS selector.
 	 */
-	public static function get_rule( $selector ) {
+	public function get_rule( $selector ) {
 
 		$selector = trim( $selector );
 
@@ -55,10 +71,10 @@ public static function get_rule( $selector ) {
 		}
 
 		// Create the rule if it doesn't exist.
-		if ( empty( static::$rules[ $selector ] ) ) {
-			static::$rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+		if ( empty( $this->rules[ $selector ] ) ) {
+			$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
 		}
 
-		return static::$rules[ $selector ];
+		return $this->rules[ $selector ];
 	}
 }

From 6b024746a8ab15f65b33bf20f7b737feddf11d90 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 10:18:15 +0300
Subject: [PATCH 08/19] Use a single declarations object per rule

---
 .../class-wp-style-engine-css-rule.php        | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 902e7ac6a8dc3b..ad3a245df75654 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -28,17 +28,18 @@ class WP_Style_Engine_CSS_Rule {
 	/**
 	 * The selector declarations.
 	 *
-	 * Contains an array of WP_Style_Engine_CSS_Declarations objects.
+	 * Contains a WP_Style_Engine_CSS_Declarations object.
 	 *
-	 * @var WP_Style_Engine_CSS_Declarations[]
+	 * @var WP_Style_Engine_CSS_Declarations
 	 */
-	protected $declarations = array();
+	protected $declarations;
 
 	/**
 	 * Constructor
 	 *
-	 * @param string                             $selector     The CSS selector.
-	 * @param WP_Style_Engine_CSS_Declarations[] $declarations An array of WP_Style_Engine_CSS_Declarations objects.
+	 * @param string                                 $selector     The CSS selector.
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
 	 */
 	public function __construct( $selector = '', $declarations = array() ) {
 		$this->set_selector( $selector );
@@ -60,13 +61,28 @@ public function set_selector( $selector ) {
 	/**
 	 * Set the declarations.
 	 *
-	 * @param WP_Style_Engine_CSS_Declarations[] $declarations An array of WP_Style_Engine_CSS_Declarations objects.
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
 	 */
 	public function set_declarations( $declarations ) {
-		if ( $declarations instanceof WP_Style_Engine_CSS_Declarations ) {
-			$declarations = array( $declarations );
+		$is_declarations_object = ! is_array( $declarations );
+		$declarations_array     = $is_declarations_object ? $declarations->get_declarations() : $declarations;
+
+		if ( null === $this->declarations && $is_declarations_object ) {
+			$this->declarations = $declarations;
+		} elseif ( null === $this->declarations ) {
+			$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
 		}
-		$this->declarations = array_merge( $this->declarations, $declarations );
+		$this->declarations->add_declarations( $declarations_array );
+	}
+
+	/**
+	 * Get the declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Declarations
+	 */
+	public function get_declarations() {
+		return $this->declarations;
 	}
 
 	/**
@@ -84,11 +100,6 @@ public function get_selector() {
 	 * @return string
 	 */
 	public function get_css() {
-		$css = $this->get_selector() . ' {';
-		foreach ( $this->declarations as $declaration ) {
-			$css .= $declaration->get_declarations_string();
-		}
-		$css .= '}';
-		return $css;
+		return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
 	}
 }

From cf35a38d483129626dff0d35be083b9087934de1 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 10:20:25 +0300
Subject: [PATCH 09/19] Allow chaining methods

---
 packages/style-engine/class-wp-style-engine-css-rule.php | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index ad3a245df75654..93be7fceea2775 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -50,12 +50,16 @@ public function __construct( $selector = '', $declarations = array() ) {
 	 * Set the selector.
 	 *
 	 * @param string $selector The CSS selector.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
 	 */
 	public function set_selector( $selector ) {
 		if ( empty( $selector ) ) {
 			return;
 		}
 		$this->selector = esc_html( $selector );
+
+		return $this;
 	}
 
 	/**
@@ -63,6 +67,8 @@ public function set_selector( $selector ) {
 	 *
 	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
 	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
 	 */
 	public function set_declarations( $declarations ) {
 		$is_declarations_object = ! is_array( $declarations );
@@ -74,6 +80,8 @@ public function set_declarations( $declarations ) {
 			$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
 		}
 		$this->declarations->add_declarations( $declarations_array );
+
+		return $this;
 	}
 
 	/**

From 1fc0b8d8dc061a946b76802622cf6fb70c7cb95b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 10:28:46 +0300
Subject: [PATCH 10/19] Remove esc_html

---
 packages/style-engine/class-wp-style-engine-css-rule.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 93be7fceea2775..e10c07183d21ae 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -57,7 +57,7 @@ public function set_selector( $selector ) {
 		if ( empty( $selector ) ) {
 			return;
 		}
-		$this->selector = esc_html( $selector );
+		$this->selector = $selector;
 
 		return $this;
 	}

From fdaed21455dc9853415393ea6a90aa74b85f10dd Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 13:12:54 +0300
Subject: [PATCH 11/19] Add a default value for store_name

---
 packages/style-engine/class-wp-style-engine-css-rules-store.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index 3ac4ef4648d787..2d95fbaee161b2 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -41,7 +41,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	 *
 	 * @return WP_Style_Engine_CSS_Rules_Store
 	 */
-	public static function get_store( $store_name ) {
+	public static function get_store( $store_name = 'default' ) {
 		if ( ! isset( static::$stores[ $store_name ] ) ) {
 			static::$stores[ $store_name ] = new WP_Style_Engine_CSS_Rules_Store( $store_name );
 		}

From 240ae3b78032177e181294d4a7ae52468f2f7675 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 13:18:05 +0300
Subject: [PATCH 12/19] use static()

---
 packages/style-engine/class-wp-style-engine-css-rules-store.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index 2d95fbaee161b2..bfc7fba9ecd71f 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -43,7 +43,7 @@ class WP_Style_Engine_CSS_Rules_Store {
 	 */
 	public static function get_store( $store_name = 'default' ) {
 		if ( ! isset( static::$stores[ $store_name ] ) ) {
-			static::$stores[ $store_name ] = new WP_Style_Engine_CSS_Rules_Store( $store_name );
+			static::$stores[ $store_name ] = new static( $store_name );
 		}
 		return static::$stores[ $store_name ];
 	}

From 82127be407172a18e215263e9c4959b991dbc192 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 14 Jul 2022 12:53:08 +1000
Subject: [PATCH 13/19] Adding tests

---
 .../class-wp-style-engine-css-rule-test.php   | 115 ++++++++++++++++++
 ...s-wp-style-engine-css-rules-store-test.php | 115 ++++++++++++++++++
 2 files changed, 230 insertions(+)
 create mode 100644 packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
 create mode 100644 packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
new file mode 100644
index 00000000000000..5a4503895ce1a7
--- /dev/null
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Tests the Style Engine CSS Rule class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and generating CSS declarations.
+ */
+class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
+	/**
+	 * Should set declarations on instantiation.
+	 */
+	public function test_instantiate_with_selector_and_rules() {
+		$selector           = '.law-and-order';
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+
+		$this->assertSame( $selector, $css_rule->get_selector() );
+
+		$expected = "$selector {{$css_declarations->get_declarations_string()}}";
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Should set an array of declarations on instantiation.
+	 */
+	public function test_instantiate_with_selector_and_array_of_rules() {
+		$selector                = '#miami-vice';
+		$input_declarations      = array(
+			'font-size' => '2rem',
+		);
+		$more_input_declarations = array(
+			'margin-top' => '10px',
+		);
+		$css_declarations        = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$more_css_declarations   = new WP_Style_Engine_CSS_Declarations( $more_input_declarations );
+		$css_rule                = new WP_Style_Engine_CSS_Rule( $selector, array( $css_declarations, $more_css_declarations ) );
+
+		$expected = "$selector {{$css_declarations->get_declarations_string()}{$more_css_declarations->get_declarations_string()}}";
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Test dedupe declaration properties.
+	 */
+	public function test_dedupe_properties_in_rules() {
+		$selector                    = '.taggart';
+		$first_declaration           = array(
+			'font-size' => '2rem',
+		);
+		$overwrite_first_declaration = array(
+			'font-size' => '4px',
+		);
+		$css_declarations            = new WP_Style_Engine_CSS_Declarations( $first_declaration );
+		$more_css_declarations       = new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration );
+		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, array( $css_declarations, $more_css_declarations ) );
+
+		$expected = "$selector {{$more_css_declarations->get_declarations_string()}}";
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_set_declarations() {
+		$selector                   = '.hill-street-blues';
+		$some_css_declarations      = new WP_Style_Engine_CSS_Declarations( array( 'margin-top' => '10px' ) );
+		$some_more_css_declarations = new WP_Style_Engine_CSS_Declarations( array( 'font-size' => '1rem' ) );
+		$css_rule                   = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
+		$css_rule->set_declarations( $some_more_css_declarations );
+
+		$expected = "$selector {{$some_css_declarations->get_declarations_string()}{$some_more_css_declarations->get_declarations_string()}}";
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_set_selector() {
+		$selector = '.taggart';
+		$css_rule = new WP_Style_Engine_CSS_Rule( $selector );
+
+		$this->assertSame( $selector, $css_rule->get_selector() );
+
+		$css_rule->set_selector( '.law-and-order' );
+
+		$this->assertSame( '.law-and-order', $css_rule->get_selector() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_get_css() {
+		$selector           = '.chips';
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+		$expected           = "$selector {{$css_declarations->get_declarations_string()}}";
+
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+}
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
new file mode 100644
index 00000000000000..8b525a36500ce9
--- /dev/null
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Tests the Style Engine CSS Rules Store class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and retrieving CSS Rules.
+ */
+class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
+	/**
+	 * Should create a new store.
+	 */
+	public function test_create_new_store() {
+		$new_pancakes_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
+		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
+	}
+
+	/**
+	 * Should return previously created store when the same selector key is passed.
+	 */
+	// public function test_get_store() {
+	// $new_pancakes_store   = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
+	// $selector             = '.cream';
+	// $pancake_declarations = array(
+	// 'color' => 'white',
+	// );
+	// $new_pancakes_store->set_rule( $selector, $pancake_declarations );
+	// $the_same_pancakes_store   = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
+	// $this->assertEquals( $pancake_declarations, $the_same_pancakes_store->get_rule( $selector )->get_declarations_array() );
+	// }
+
+	/**
+	 * Should return a stored rule.
+	 */
+	public function test_get_rule() {
+		$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
+		$selector      = '.wp-block-sauce a:hover';
+		$store_rule    = $new_pie_store->get_rule( $selector );
+		$expected      = "$selector {}";
+		$this->assertEquals( $expected, $store_rule->get_css() );
+
+		$pie_declarations = array(
+			'color'         => 'brown',
+			'border-color'  => 'yellow',
+			'border-radius' => '10rem',
+		);
+		$css_declarations = new WP_Style_Engine_CSS_Declarations( $pie_declarations );
+		$store_rule->set_declarations( $css_declarations );
+
+		$store_rule = $new_pie_store->get_rule( $selector );
+		$expected   = "$selector {{$css_declarations->get_declarations_string()}}";
+		$this->assertEquals( $expected, $store_rule->get_css() );
+	}
+
+	/**
+	 * Should return all stored rules.
+	 */
+	public function test_get_all_rules() {
+		$new_pizza_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pizza-with-mozzarella' );
+		$selector        = '.wp-block-anchovies a:hover';
+		$store_rule      = $new_pizza_store->get_rule( $selector );
+		$expected        = array(
+			$selector => $store_rule,
+		);
+
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$pizza_declarations = array(
+			'color'         => 'red',
+			'border-color'  => 'yellow',
+			'border-radius' => '10rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $pizza_declarations );
+		$store_rule->set_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$new_pizza_declarations = array(
+			'color'        => 'red',
+			'border-color' => 'red',
+			'font-size'    => '10rem',
+		);
+		$css_declarations       = new WP_Style_Engine_CSS_Declarations( $new_pizza_declarations );
+		$store_rule->set_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$new_selector             = '.wp-block-mushroom a:hover';
+		$newer_pizza_declarations = array(
+			'padding' => '100px',
+		);
+		$new_store_rule           = $new_pizza_store->get_rule( $new_selector );
+		$css_declarations         = new WP_Style_Engine_CSS_Declarations( $newer_pizza_declarations );
+		$new_store_rule->set_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector     => $store_rule,
+			$new_selector => $new_store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+	}
+}

From 3c5d59f5e8457e92d91ff3f218f82b93a412ea7c Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 14 Jul 2022 17:10:02 +1000
Subject: [PATCH 14/19] Enqueue test

---
 lib/block-supports/elements.php               |   7 +-
 .../style-engine/class-wp-style-engine.php    | 117 +++++++++++++++---
 2 files changed, 102 insertions(+), 22 deletions(-)

diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 8b4de0be50b938..e29022c46a23e7 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -105,16 +105,13 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
 
 	if ( $link_block_styles ) {
-		$styles = gutenberg_style_engine_get_block_supports_styles(
+		gutenberg_style_engine_get_block_supports_styles(
 			$link_block_styles,
 			array(
 				'selector' => ".$class_name a",
+				'enqueue'  => true,
 			)
 		);
-
-		if ( ! empty( $styles['css'] ) ) {
-			gutenberg_enqueue_block_support_styles( $styles['css'] );
-		}
 	}
 
 	return null;
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index a140d9ba8c6b81..bd318db93006bf 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -30,6 +30,13 @@ class WP_Style_Engine {
 	 */
 	private static $instance = null;
 
+	/**
+	 * Instance of WP_Style_Engine_CSS_Rules_Store to hold block supports CSS rules.
+	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store|null
+	 */
+	private static $block_supports_store = null;
+
 	/**
 	 * Style definitions that contain the instructions to
 	 * parse/output valid Gutenberg styles from a block's attributes.
@@ -221,6 +228,14 @@ class WP_Style_Engine {
 		),
 	);
 
+	/**
+	 * Private constructor to prevent instantiation.
+	 */
+	private function __construct() {
+		static::$block_supports_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'block-supports' );
+		static::enqueue_registered_styles();
+	}
+
 	/**
 	 * Utility method to retrieve the main instance of the class.
 	 *
@@ -229,11 +244,11 @@ class WP_Style_Engine {
 	 * @return WP_Style_Engine The main instance.
 	 */
 	public static function get_instance() {
-		if ( null === self::$instance ) {
-			self::$instance = new self();
+		if ( null === static::$instance ) {
+			static::$instance = new static();
 		}
 
-		return self::$instance;
+		return static::$instance;
 	}
 
 	/**
@@ -247,30 +262,34 @@ public static function get_instance() {
 	protected static function get_slug_from_preset_value( $style_value, $property_key ) {
 		if ( is_string( $style_value ) && strpos( $style_value, "var:preset|{$property_key}|" ) !== false ) {
 			$index_to_splice = strrpos( $style_value, '|' ) + 1;
+
 			return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
 		}
+
 		return null;
 	}
 
 	/**
 	 * Generates a css var string, eg var(--wp--preset--color--background) from a preset string, eg. `var:preset|space|50`.
 	 *
-	 * @param string $style_value  A single css preset value.
+	 * @param string $style_value A single css preset value.
 	 * @param array  $css_vars The css var patterns used to generate the var string.
 	 *
 	 * @return string|null The css var, or null if no match for slug found.
 	 */
 	protected static function get_css_var_value( $style_value, $css_vars ) {
-		foreach ( $css_vars as  $property_key => $css_var_pattern ) {
+		foreach ( $css_vars as $property_key => $css_var_pattern ) {
 			$slug = static::get_slug_from_preset_value( $style_value, $property_key );
 			if ( $slug ) {
 				$var = strtr(
 					$css_var_pattern,
 					array( '$slug' => $slug )
 				);
+
 				return "var($var)";
 			}
 		}
+
 		return null;
 	}
 
@@ -296,7 +315,7 @@ protected static function is_valid_style_value( $style_value ) {
 	/**
 	 * Returns classnames, and generates classname(s) from a CSS preset property pattern, e.g., 'var:preset|color|heavenly-blue'.
 	 *
-	 * @param array         $style_value      A single raw style value or css preset property from the generate() $block_styles array.
+	 * @param array         $style_value A single raw style value or css preset property from the generate() $block_styles array.
 	 * @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
 	 * @return array        An array of CSS classnames.
@@ -332,8 +351,8 @@ protected static function get_classnames( $style_value, $style_definition ) {
 	/**
 	 * Returns an array of CSS declarations based on valid block style values.
 	 *
-	 * @param array         $style_value          A single raw style value from the generate() $block_styles array.
-	 * @param array<string> $style_definition     A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param array         $style_value A single raw style value from the generate() $block_styles array.
+	 * @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
 	 * @param boolean       $should_skip_css_vars Whether to skip compiling CSS var values.
 	 *
 	 * @return array        An array of CSS definitions, e.g., array( "$property" => "$value" ).
@@ -358,6 +377,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
 					$css_declarations[ $style_property_keys['default'] ] = $css_var;
 				}
 			}
+
 			return $css_declarations;
 		}
 
@@ -386,14 +406,16 @@ protected static function get_css_declarations( $style_value, $style_definition,
 	 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
 	 * @param array $block_styles Styles from a block's attributes object.
-	 * @param array $options      array(
+	 * @param array $options array(
 	 *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+	 *     'enqueue'                    => (boolean) Whether to enqueue a block support style to be batched and included in a stylesheet.
 	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
 	 * );.
 	 *
 	 * @return array|null array(
-	 *     'css'        => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag.  Default is a string of inline styles.
-	 *     'classnames' => (string) Classnames separated by a space.
+	 *     'css'          => (string) A compiled CSS rule or declarations block formatted to be placed in an HTML `style` attribute or tag.  Default is a string of inline styles.
+	 *     'classnames'   => (string) Classnames separated by a space.
+	 *     'declarations' => (string[]) An array of property => value pairs.
 	 * );
 	 */
 	public function get_block_supports_styles( $block_styles, $options ) {
@@ -423,20 +445,25 @@ public function get_block_supports_styles( $block_styles, $options ) {
 		}
 
 		// Build CSS rules output.
-		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = new WP_Style_Engine_CSS_Declarations( $css_declarations );
+		$css_selector        = isset( $options['selector'] ) ? $options['selector'] : null;
+		$should_enqueue      = isset( $options['enqueue'] ) && true === $options['enqueue'];
+		$wp_css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 
 		// The return object.
 		$styles_output = array();
-		$css           = $style_rules->get_declarations_string();
+		$css           = $wp_css_declarations->get_declarations_string();
 
 		// Return css, if any.
 		if ( ! empty( $css ) ) {
 			$styles_output['css']          = $css;
-			$styles_output['declarations'] = $style_rules->get_declarations();
+			$styles_output['declarations'] = $wp_css_declarations->get_declarations();
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
 				$styles_output['css'] = $css_selector . ' { ' . $css . ' }';
+				if ( $should_enqueue ) {
+					$current_css_rule = static::$block_supports_store->get_rule( $css_selector );
+					$current_css_rule->set_declarations( $wp_css_declarations );
+				}
 			}
 		}
 
@@ -455,9 +482,9 @@ public function get_block_supports_styles( $block_styles, $options ) {
 	 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
 	 * "border-image-{outset|source|width|repeat|slice}: {value};"
 	 *
-	 * @param array   $style_value                    A single raw Gutenberg style attributes value for a CSS property.
+	 * @param array   $style_value A single raw Gutenberg style attributes value for a CSS property.
 	 * @param array   $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean $should_skip_css_vars           Whether to skip compiling CSS var values.
+	 * @param boolean $should_skip_css_vars Whether to skip compiling CSS var values.
 	 *
 	 * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
@@ -492,8 +519,63 @@ protected static function get_individual_property_css_declarations( $style_value
 				$css_declarations[ $individual_css_property ] = $value;
 			}
 		}
+
 		return $css_declarations;
 	}
+
+	/**
+	 * Fetches, processes and compiles stored styles, then renders them to the page.
+	 */
+	public static function enqueue_rendered_styles() {
+		$registered_block_support_css_rules = static::$block_supports_store->get_all_rules();
+
+		if ( empty( $registered_block_support_css_rules ) ) {
+			return;
+		}
+
+		// The value of this var should a string, coming from a method that accepts an array of CSS rules,
+		// maybe processes them, then compiles into CSS rule strings, and concatenates them into a stylesheet.
+		// $styles_output = new WP_Style_Engine_Stylesheet( $registered_block_support_css_rules );.
+		$block_support_styles_output = '';
+
+		foreach ( $registered_block_support_css_rules as $selector => $css_rule ) {
+			$block_support_styles_output .= $css_rule->get_css();
+		}
+
+		if ( ! empty( $block_support_styles_output ) ) {
+			wp_register_style( 'block_supports', false, array(), true, true );
+			wp_add_inline_style( 'block_supports', $block_support_styles_output );
+			wp_enqueue_style( 'block_supports' );
+		}
+	}
+
+	/**
+	 * Taken from gutenberg_enqueue_block_support_styles()*
+	 *
+	 * This function takes care of adding inline styles*
+	 * in the proper place, depending on the theme in use.*
+	 *
+	 * For block themes, it’s loaded in the head.*
+	 * For classic ones, it’s loaded in the body*
+	 * because the wp_head action  happens before*
+	 * the render_block.
+	 *
+	 * @param int $priority To set the priority for the add_action.
+	 *
+	 * @see gutenberg_enqueue_block_support_styles()
+	 */
+	protected static function enqueue_registered_styles( $priority = 10 ) {
+		$action_hook_name = 'wp_footer';
+		if ( wp_is_block_theme() ) {
+			$action_hook_name = 'wp_head';
+		}
+		add_action( 'wp_enqueue_scripts', array( '__CLASS__', 'enqueue_rendered_styles' ) );
+		add_action(
+			$action_hook_name,
+			array( __CLASS__, 'enqueue_rendered_styles' ),
+			$priority
+		);
+	}
 }
 
 /**
@@ -522,3 +604,4 @@ function wp_style_engine_get_block_supports_styles( $block_styles, $options = ar
 	}
 	return null;
 }
+

From 3213dfe14e62f269bf62f048010f5c21b6a73ae1 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 10:58:47 +0300
Subject: [PATCH 15/19] Test using both an array and an object for declarations

---
 .../phpunit/class-wp-style-engine-css-rule-test.php      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
index 5a4503895ce1a7..de293b114a5034 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -73,13 +73,14 @@ public function test_dedupe_properties_in_rules() {
 	 * Should set selector and rules on instantiation.
 	 */
 	public function test_set_declarations() {
-		$selector                   = '.hill-street-blues';
-		$some_css_declarations      = new WP_Style_Engine_CSS_Declarations( array( 'margin-top' => '10px' ) );
-		$some_more_css_declarations = new WP_Style_Engine_CSS_Declarations( array( 'font-size' => '1rem' ) );
+		// Declarations using a WP_Style_Engine_CSS_Declarations object.
+		$some_css_declarations = new WP_Style_Engine_CSS_Declarations( array( 'margin-top' => '10px' ) );
+		// Declarations using a property => value array.
+		$some_more_css_declarations = array( 'font-size' => '1rem' );
 		$css_rule                   = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
 		$css_rule->set_declarations( $some_more_css_declarations );
 
-		$expected = "$selector {{$some_css_declarations->get_declarations_string()}{$some_more_css_declarations->get_declarations_string()}}";
+		$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 

From 8dd62019538b2df8d75d98a6566bf339e8925c90 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 11:11:49 +0300
Subject: [PATCH 16/19] Test no longer needed, the object no longer accepts an
 array of objects

---
 .../class-wp-style-engine-css-rule-test.php   | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
index de293b114a5034..4353fef7616953 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -31,25 +31,6 @@ public function test_instantiate_with_selector_and_rules() {
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
-	/**
-	 * Should set an array of declarations on instantiation.
-	 */
-	public function test_instantiate_with_selector_and_array_of_rules() {
-		$selector                = '#miami-vice';
-		$input_declarations      = array(
-			'font-size' => '2rem',
-		);
-		$more_input_declarations = array(
-			'margin-top' => '10px',
-		);
-		$css_declarations        = new WP_Style_Engine_CSS_Declarations( $input_declarations );
-		$more_css_declarations   = new WP_Style_Engine_CSS_Declarations( $more_input_declarations );
-		$css_rule                = new WP_Style_Engine_CSS_Rule( $selector, array( $css_declarations, $more_css_declarations ) );
-
-		$expected = "$selector {{$css_declarations->get_declarations_string()}{$more_css_declarations->get_declarations_string()}}";
-		$this->assertSame( $expected, $css_rule->get_css() );
-	}
-
 	/**
 	 * Test dedupe declaration properties.
 	 */

From 4bbd72b7b0df6d1030a7efc0d9446cb7ae062fa7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 12:17:41 +0300
Subject: [PATCH 17/19] Another test fix after the refactor

---
 .../phpunit/class-wp-style-engine-css-rule-test.php        | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
index 4353fef7616953..dc3020d42ce142 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -42,11 +42,10 @@ public function test_dedupe_properties_in_rules() {
 		$overwrite_first_declaration = array(
 			'font-size' => '4px',
 		);
-		$css_declarations            = new WP_Style_Engine_CSS_Declarations( $first_declaration );
-		$more_css_declarations       = new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration );
-		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, array( $css_declarations, $more_css_declarations ) );
+		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
+		$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );
 
-		$expected = "$selector {{$more_css_declarations->get_declarations_string()}}";
+		$expected = '.taggart {font-size: 4px;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 

From 5bb500efd76aafe06cdbaf98ccd7cd2ea6819185 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 14 Jul 2022 13:28:06 +0300
Subject: [PATCH 18/19] typo

---
 .../phpunit/class-wp-style-engine-css-rule-test.php             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
index dc3020d42ce142..9a42ade4acb16f 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -43,7 +43,7 @@ public function test_dedupe_properties_in_rules() {
 			'font-size' => '4px',
 		);
 		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
-		$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );
+		$css_rule->set_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );
 
 		$expected = '.taggart {font-size: 4px;}';
 		$this->assertSame( $expected, $css_rule->get_css() );

From 774399d47d5889bc61bd45efa0cd9738763d4f24 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 15 Jul 2022 11:05:36 +1000
Subject: [PATCH 19/19] reinstated test_get_store test

---
 ...s-wp-style-engine-css-rules-store-test.php | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
index 8b525a36500ce9..390700a9e5ac48 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
@@ -25,16 +25,16 @@ public function test_create_new_store() {
 	/**
 	 * Should return previously created store when the same selector key is passed.
 	 */
-	// public function test_get_store() {
-	// $new_pancakes_store   = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
-	// $selector             = '.cream';
-	// $pancake_declarations = array(
-	// 'color' => 'white',
-	// );
-	// $new_pancakes_store->set_rule( $selector, $pancake_declarations );
-	// $the_same_pancakes_store   = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
-	// $this->assertEquals( $pancake_declarations, $the_same_pancakes_store->get_rule( $selector )->get_declarations_array() );
-	// }
+	public function test_get_store() {
+		$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$selector       = '.haddock';
+
+		$new_fish_store->get_rule( $selector )->get_selector();
+		$this->assertEquals( $selector, $new_fish_store->get_rule( $selector )->get_selector() );
+
+		$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$this->assertEquals( $selector, $the_same_fish_store->get_rule( $selector )->get_selector() );
+	}
 
 	/**
 	 * Should return a stored rule.