Update: Make global styles shape consistent with local styles shape. (#…

…22744)

Co-authored-by: Andrés <[email protected]> (+1 squashed commit)

docs/designers-developers/developers/themes/theme-json.md

@@ -191,32 +191,46 @@ This is being implemented, so it's not currently available.
   },
   core/paragraph: {
     styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+      typography: { 
+        lineHeight: <value>,
+        fontSize: <value>
+      },
+      color: {
+        text: <value>
+      }
     }
   },
   /* core/heading/h1, core/heading/h2, etc */
   core/heading/h*: {
     styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+      typography: { 
+        lineHeight: <value>,
+        fontSize: <value>
+      },
+      color: {
+        text: <value>
+      }
     }
   },
   core/columns: {
     styles: {
-        color: <value>,
+      color: {
+        text: <value>
+      }
     }
   },
   core/group: {
     styles: {
-        color: <value>,
+      color: {
+        text: <value>
+      }
     }
   },
   core/media-text: {
     styles: {
-        color: <value>,
+      color: {
+        text: <value>
+      }
     }
   },
 }

lib/global-styles.php

@@ -314,6 +314,35 @@ function gutenberg_experimental_global_styles_get_block_data() {
 	return $block_data;
 }
 
+/**
+ * Given an array contain the styles shape returns the css for this styles.
+ * A similar function exists on the client at /packages/block-editor/src/hooks/style.js.
+ *
+ * @param array $styles  Array containing the styles shape from global styles.
+ *
+ * @return array Containing a set of css rules.
+ */
+function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) {
+	$mappings = array(
+		'line-height'      => array( 'typography', 'lineHeight' ),
+		'font-size'        => array( 'typography', 'fontSize' ),
+		'background'       => array( 'color', 'gradient' ),
+		'background-color' => array( 'color', 'background' ),
+		'color'            => array( 'color', 'text' ),
+	);
+
+	$result = array();
+
+	foreach ( $mappings as $key => $path ) {
+		$value = gutenberg_experimental_get( $styles, $path );
+		if ( null !== $value ) {
+			$result[ $key ] = $value;
+		}
+	}
+	return $result;
+
+}
+
 /**
  * Takes a tree adhering to the theme.json schema and generates
  * the corresponding stylesheet.
@@ -352,7 +381,10 @@ function gutenberg_experimental_global_styles_resolver( $tree ) {
 		$stylesheet .= gutenberg_experimental_global_styles_resolver_styles(
 			$block_data[ $block_name ]['selector'],
 			$block_data[ $block_name ]['supports'],
-			array_merge( $tree[ $block_name ]['styles'], $css_variables )
+			array_merge(
+				gutenberg_experimental_global_styles_flatten_styles_tree( $tree[ $block_name ]['styles'] ),
+				$css_variables
+			)
 		);
 	}
 	return $stylesheet;

lib/load.php

@@ -82,6 +82,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 }
 
 require dirname( __FILE__ ) . '/compat.php';
+require dirname( __FILE__ ) . '/utils.php';
 
 require dirname( __FILE__ ) . '/blocks.php';
 require dirname( __FILE__ ) . '/templates.php';

lib/utils.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * General utilities.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * This function allows to easily access a part from a php array.
+ * It is equivalent to want lodash get provides for JavaScript and is useful to have something similar
+ * in php so functions that do the same thing on the client and sever can have identical code.
+ *
+ * @param array $array  An array from where we want to retrieve some information from.
+ * @param array $path   An array containing the path we want to retrieve.
+ *
+ * @return array Containing a set of css rules.
+ */
+function gutenberg_experimental_get( $array, $path ) {
+	$path_length = count( $path );
+	for ( $i = 0; $i < $path_length; ++$i ) {
+		if ( empty( $array[ $path[ $i ] ] ) ) {
+			return null;
+		}
+		$array = $array[ $path[ $i ] ];
+	}
+	return $array;
+}