From dca45e81505550d806970f0e72727c80b46a12d4 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 15 Mar 2022 17:17:32 +1100
Subject: [PATCH] Move style definitions to theme.json

---
 lib/block-supports/layout.php           | 107 ++++--------------------
 lib/class-wp-style-engine-gutenberg.php |   2 +-
 lib/compat/wordpress-5.9/theme.json     |  58 ++++++++++++-
 3 files changed, 73 insertions(+), 94 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 305e41858b67c..3c74b9c39d98b 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -25,106 +25,31 @@ function gutenberg_register_layout_support( $block_type ) {
 	}
 }
 
-function gutenberg_generate_common_flow_layout_styles() {
-	$style_engine = WP_Style_Engine_Gutenberg::get_instance();
-
-	$style_engine->add_style(
-		'wp-layout-flow',
-		array(
-			'selector' => '.alignleft',
-			'rules'    => array(
-				'float'        => 'left',
-				'margin-right' => '2em',
-				'margin-left'  => '0',
-			),
-		)
-	);
-
-	$style_engine->add_style(
-		'wp-layout-flow',
-		array(
-			'selector' => '.alignright',
-			'rules'    => array(
-				'float'        => 'right',
-				'margin-left'  => '2em',
-				'margin-right' => '0',
-			),
-		)
-	);
-
-	$style_engine->add_style(
-		'wp-layout-flow',
-		array(
-			'selector' => '> .alignfull',
-			'rules'    => array(
-				'max-width' => 'none',
-			),
-		)
-	);
-
-	$style_engine->add_style(
-		'wp-layout-flow--global-gap',
-		array(
-			'selector' => '> *',
-			'rules'    => array(
-				'margin-top'    => '0',
-				'margin-bottom' => '0',
-			),
-		)
-	);
-
-	$style_engine->add_style(
-		'wp-layout-flow--global-gap',
-		array(
-			'selector' => '> * + *',
-			'rules'    => array(
-				'margin-top'    => 'var( --wp--style--block-gap )',
-				'margin-bottom' => '0',
-			),
-		)
-	);
-}
-
-function gutenberg_generate_common_flex_layout_styles() {
-	$style_engine = WP_Style_Engine_Gutenberg::get_instance();
-
-	$style_engine->add_style(
-		'wp-layout-flex',
-		array(
-			'rules' => array(
-				'display' => 'flex',
-				'gap'     => '0.5em',
-			),
-		)
-	);
-
-	$style_engine->add_style(
-		'wp-layout-flex',
-		array(
-			'selector' => '> *',
-			'rules'    => array(
-				'margin' => '0',
-			),
-		)
-	);
-}
-
 function gutenberg_get_layout_preset_styles( $preset_metadata, $presets_by_origin ) {
-	WP_Style_Engine_Gutenberg::get_instance()->reset();
+	$style_engine = WP_Style_Engine_Gutenberg::get_instance();
+	$style_engine->reset();
 
 	$presets = end( $presets_by_origin );
 
 	foreach ( $presets as $preset ) {
-		if ( isset( $preset['type'] ) ) {
-			if ( 'flow' === $preset['type'] ) {
-				$output_styles = gutenberg_generate_common_flow_layout_styles();
-			} else if ( 'flex' === $preset['type'] ) {
-				$output_styles = gutenberg_generate_common_flex_layout_styles();
+		if ( ! empty( $preset['type'] ) && ! empty( $preset['styles'] ) ) {
+			$slug       = ! empty( $preset['slug'] ) ? $preset['slug'] : $preset['type'];
+			$base_class = 'wp-layout-' . sanitize_title( $slug );
+
+			foreach ( $preset['styles'] as $style ) {
+				if ( ! empty( $style['rules'] ) && is_array( $style['rules'] ) ) {
+					$options = array(
+						'selector' => ! empty( $style['selector'] ) ? $style['selector'] : null,
+						'suffix'   => ! empty( $style['suffix'] ) ? sanitize_title( $style['suffix'] ) : null,
+						'rules'    => $style['rules'],
+					);
+					$style_engine->add_style( $base_class, $options );
+				}
 			}
 		}
 	}
 
-	return WP_Style_Engine_Gutenberg::get_instance()->get_generated_styles();
+	return $style_engine->get_generated_styles();
 }
 
 /**
diff --git a/lib/class-wp-style-engine-gutenberg.php b/lib/class-wp-style-engine-gutenberg.php
index 998a7b54fe60d..783220385c11b 100644
--- a/lib/class-wp-style-engine-gutenberg.php
+++ b/lib/class-wp-style-engine-gutenberg.php
@@ -91,7 +91,7 @@ public function get_generated_styles() {
 	 * @return string The class name for the added style.
 	 */
 	public function add_style( $key, $options ) {
-		$class    = ! empty( $options['suffix'] ) ? $key . '-' . sanitize_title( $options['suffix'] ) : $key;
+		$class    = ! empty( $options['suffix'] ) ? $key . '--' . sanitize_title( $options['suffix'] ) : $key;
 		$selector = ! empty( $options['selector'] ) ? ' ' . trim( $options['selector'] ) : '';
 		$rules    = ! empty( $options['rules'] ) ? $options['rules'] : array();
 		$prefix   = ! empty( $options['prefix'] ) ? $options['prefix'] : '.';
diff --git a/lib/compat/wordpress-5.9/theme.json b/lib/compat/wordpress-5.9/theme.json
index b1c0b706a6088..fdbcbe148ba2d 100644
--- a/lib/compat/wordpress-5.9/theme.json
+++ b/lib/compat/wordpress-5.9/theme.json
@@ -189,11 +189,65 @@
 			"types": [
 				{
 					"slug": "flow",
-					"type": "flow"
+					"type": "flow",
+					"styles": [
+						{
+							"selector": ".alignleft",
+							"rules": {
+								"float": "left",
+								"margin-right": "2em",
+								"margin-left": "0"
+							}
+						},
+						{
+							"selector": ".alignright",
+							"rules": {
+								"float": "right",
+								"margin-left": "2em",
+								"margin-right": "0"
+							}
+						},
+						{
+							"selector": "> .alignfull",
+							"rules": {
+								"max-width": "none"
+							}
+						},
+						{
+							"suffix": "global-gap",
+							"selector": "> *",
+							"rules": {
+								"margin-top": "0",
+								"margin-bottom": "0"
+							}
+						},
+						{
+							"suffix": "global-gap",
+							"selector": "> * + *",
+							"rules": {
+								"margin-top": "var( --wp--style--block-gap )",
+								"margin-bottom": 0
+							}
+						}
+					]
 				},
 				{
 					"slug": "flex",
-					"type": "flex"
+					"type": "flex",
+					"styles": [
+						{
+							"rules": {
+								"display": "flex",
+								"gap": "0.5em"
+							}
+						},
+						{
+							"selector": "> *",
+							"rules": {
+								"margin": "0"
+							}
+						}
+					]
 				}
 			]
 		},