Try centralised output of styles linked to classnames

WordPress · Aug 3, 2022 · d68095a · d68095a
1 parent abfc3b0
commit d68095a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 8 deletions.
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -1354,14 +1354,15 @@ protected function get_layout_styles( $block_metadata ) {
 			}
 		}
 
-		// Output base styles.
+		// Output base styles and attribute styles.
 		if (
 			static::ROOT_BLOCK_SELECTOR === $selector
 		) {
 			$valid_display_modes = array( 'block', 'flex', 'grid' );
 			foreach ( $layout_definitions as $layout_definition ) {
 				$class_name       = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
 				$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
+				$attribute_styles = _wp_array_get( $layout_definition, array( 'attributeStyles' ), array() );
 
 				if (
 					! empty( $class_name ) &&
@@ -1389,6 +1390,7 @@ protected function get_layout_styles( $block_metadata ) {
 						);
 					}
 
+					// Output base styles.
 					foreach ( $base_style_rules as $base_style_rule ) {
 						$declarations = array();
 
@@ -1415,9 +1417,64 @@ protected function get_layout_styles( $block_metadata ) {
 							$block_rules    .= static::to_ruleset( $layout_selector, $declarations );
 						}
 					}
+
+					// Output attribute-based styles.
+
+					if ( ! empty( $attribute_styles ) ) {
+						foreach ( $attribute_styles as $attribute_key => $styles_for_attribute_key ) {
+							foreach ( $styles_for_attribute_key as $attribute_style ) {
+								foreach ( $attribute_style['values'] as $value_key => $value_value ) {
+									$declarations = array();
+
+									if ( ! empty( $attribute_style['rules'] ) ) {
+										foreach ( $attribute_style['rules'] as $css_property => $css_value ) {
+											if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
+												$declarations[] = array(
+													'name'  => $css_property,
+													'value' => $css_value,
+												);
+											}
+										}
+									}
+
+									if ( ! empty( $attribute_style['property'] ) ) {
+										if ( static::is_safe_css_declaration( $attribute_style['property'], $value_value ) ) {
+											$declarations[] = array(
+												'name'  => $attribute_style['property'],
+												'value' => $value_value,
+											);
+										}
+									}
+
+									// TODO: Improve the interpolation here in a safer way.
+									$attribute_selector = strtr(
+										$attribute_style['selector'],
+										array( '$slug' => $value_key )
+									);
+
+									$layout_selector = sprintf(
+										'%s .%s%s',
+										$selector,
+										$class_name,
+										$attribute_selector
+									);
+
+									if ( ! empty( $declarations ) ) {
+										// TODO: Remove line breaks before merge.
+										$block_rules .= "\n";
+										$block_rules .= static::to_ruleset( $layout_selector, $declarations );
+									}
+								}
+							}
+						}
+					}
 				}
 			}
 		}
+
+		// TODO: Remove line breaks before merge.
+		$block_rules .= "\n";
+
 		return $block_rules;
 	}
 }
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
@@ -306,7 +306,8 @@
 								"values": {
 									"left": "flex-start",
 									"right": "flex-end",
-									"center": "center"
+									"center": "center",
+									"space-between": "space-between"
 								}
 							},
 							{
@@ -316,12 +317,7 @@
 									"orientation": [ "vertical" ]
 								},
 								"property": "justify-content",
-								"validValues": [
-									"left",
-									"right",
-									"center",
-									"space-between"
-								],
+								"validValues": [ "left", "right", "center" ],
 								"values": {
 									"left": "flex-start",
 									"right": "flex-end",