Move style definitions to theme.json

WordPress · Mar 15, 2022 · dec7bd8 · dec7bd8
1 parent 3285d88
commit dec7bd8
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 94 deletions.
diff --git 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
@@ -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
@@ -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"
+							}
+						}
+					]
 				}
 			]
 		},