From e8d7e84a1c73ea18feff4f770882cbd35c75e389 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Fri, 29 May 2020 17:53:11 +0100
Subject: [PATCH] Update: Make global styles shape consistent with local styles
 shape. (#22744)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andrés <nosolosw@users.noreply.github.com> (+1 squashed commit)
---
 .../developers/themes/theme-json.md           | 32 ++++++++++++-----
 lib/global-styles.php                         | 34 ++++++++++++++++++-
 lib/load.php                                  |  1 +
 lib/utils.php                                 | 27 +++++++++++++++
 4 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 lib/utils.php

diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
index 89c86b73cd50e6..987acc0b866ae2 100644
--- a/docs/designers-developers/developers/themes/theme-json.md
+++ b/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>
+      }
     }
   },
 }
diff --git a/lib/global-styles.php b/lib/global-styles.php
index da30437989b3ea..c2f9eb250646fc 100644
--- a/lib/global-styles.php
+++ b/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;
diff --git a/lib/load.php b/lib/load.php
index 176cecd147c278..1c849138cbff9a 100644
--- a/lib/load.php
+++ b/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';
diff --git a/lib/utils.php b/lib/utils.php
new file mode 100644
index 00000000000000..f6a503234d0a13
--- /dev/null
+++ b/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;
+}