Global Styles: update metadata and add support for padding (#27099)

WordPress · Nov 20, 2020 · 0d59823 · 0d59823
1 parent 1862c62
commit 0d59823
Show file tree

Hide file tree

Showing 13 changed files with 291 additions and 139 deletions.
diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
@@ -244,6 +244,14 @@ Each block declares which style properties it exposes. This has been coined as "
         "link": "value",
         "text": "value"
       },
+      "spacing": {
+        "padding": {
+          "top": "value",
+          "right": "value",
+          "bottom": "value",
+          "left": "value",
+        },
+      },
       "typography": {
         "fontFamily": "value",
         "fontSize": "value",

diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php
@@ -28,38 +28,36 @@ class WP_Theme_JSON {
 	private static $blocks_metadata = null;
 
 	/**
-	 * The CSS selector for the global context.
+	 * The name of the global context.
 	 *
 	 * @var string
 	 */
-	const GLOBAL_SELECTOR = ':root';
+	const GLOBAL_NAME = 'global';
 
 	/**
-	 * The block type and name for the global context.
+	 * The CSS selector for the global context.
 	 *
 	 * @var string
 	 */
-	const GLOBAL_TYPE = 'global';
+	const GLOBAL_SELECTOR = ':root';
 
 	/**
-	 * The block arguments for the global context.
+	 * The supported properties of the global context.
 	 *
 	 * @var array
 	 */
-	const GLOBAL_ARGS = array(
-		'supports' => array(
-			'__experimentalFontAppearance' => true,
-			'__experimentalFontFamily'     => true,
-			'__experimentalSelector'       => self::GLOBAL_SELECTOR,
-			'__experimentalTextDecoration' => true,
-			'__experimentalTextTransform'  => true,
-			'color'                        => array(
-				'gradients' => true,
-				'link'      => true,
-			),
-			'fontSize'                     => true,
-			'lineHeight'                   => true,
-		),
+	const GLOBAL_SUPPORTS = array(
+		'--wp--style--color--link',
+		'background',
+		'backgroundColor',
+		'color',
+		'fontFamily',
+		'fontSize',
+		'fontStyle',
+		'fontWeight',
+		'lineHeight',
+		'textDecoration',
+		'textTransform',
 	);
 
 	/**
@@ -99,6 +97,14 @@ class WP_Theme_JSON {
 				'link'       => null,
 				'text'       => null,
 			),
+			'spacing'    => array(
+				'padding' => array(
+					'top'    => null,
+					'right'  => null,
+					'bottom' => null,
+					'left'   => null,
+				),
+			),
 			'typography' => array(
 				'fontFamily'     => null,
 				'fontSize'       => null,
@@ -262,53 +268,71 @@ class WP_Theme_JSON {
 	/**
 	 * Metadata for style properties.
 	 *
-	 * - 'theme_json' => where the property value is stored
-	 * - 'block_json' => whether the block has declared support for it
+	 * Each property declares:
+	 *
+	 * - 'value': path to the value in theme.json and block attributes.
+	 * - 'support': path to the block support in block.json.
 	 */
 	const PROPERTIES_METADATA = array(
 		'--wp--style--color--link' => array(
-			'theme_json' => array( 'color', 'link' ),
-			'block_json' => array( 'color', 'link' ),
+			'value'   => array( 'color', 'link' ),
+			'support' => array( 'color', 'link' ),
 		),
 		'background'               => array(
-			'theme_json' => array( 'color', 'gradient' ),
-			'block_json' => array( 'color', 'gradients' ),
+			'value'   => array( 'color', 'gradient' ),
+			'support' => array( 'color', 'gradients' ),
 		),
 		'backgroundColor'          => array(
-			'theme_json' => array( 'color', 'background' ),
-			'block_json' => array( 'color' ),
+			'value'   => array( 'color', 'background' ),
+			'support' => array( 'color' ),
 		),
 		'color'                    => array(
-			'theme_json' => array( 'color', 'text' ),
-			'block_json' => array( 'color' ),
+			'value'   => array( 'color', 'text' ),
+			'support' => array( 'color' ),
 		),
 		'fontFamily'               => array(
-			'theme_json' => array( 'typography', 'fontFamily' ),
-			'block_json' => array( '__experimentalFontFamily' ),
+			'value'   => array( 'typography', 'fontFamily' ),
+			'support' => array( '__experimentalFontFamily' ),
 		),
 		'fontSize'                 => array(
-			'theme_json' => array( 'typography', 'fontSize' ),
-			'block_json' => array( 'fontSize' ),
+			'value'   => array( 'typography', 'fontSize' ),
+			'support' => array( 'fontSize' ),
 		),
 		'fontStyle'                => array(
-			'theme_json' => array( 'typography', 'fontStyle' ),
-			'block_json' => array( '__experimentalFontAppearance' ),
+			'value'   => array( 'typography', 'fontStyle' ),
+			'support' => array( '__experimentalFontAppearance' ),
 		),
 		'fontWeight'               => array(
-			'theme_json' => array( 'typography', 'fontWeight' ),
-			'block_json' => array( '__experimentalFontAppearance' ),
+			'value'   => array( 'typography', 'fontWeight' ),
+			'support' => array( '__experimentalFontAppearance' ),
 		),
 		'lineHeight'               => array(
-			'theme_json' => array( 'typography', 'lineHeight' ),
-			'block_json' => array( 'lineHeight' ),
+			'value'   => array( 'typography', 'lineHeight' ),
+			'support' => array( 'lineHeight' ),
+		),
+		'paddingBottom'            => array(
+			'value'   => array( 'spacing', 'padding', 'bottom' ),
+			'support' => array( 'spacing', 'padding' ),
+		),
+		'paddingLeft'              => array(
+			'value'   => array( 'spacing', 'padding', 'left' ),
+			'support' => array( 'spacing', 'padding' ),
+		),
+		'paddingRight'             => array(
+			'value'   => array( 'spacing', 'padding', 'right' ),
+			'support' => array( 'spacing', 'padding' ),
+		),
+		'paddingTop'               => array(
+			'value'   => array( 'spacing', 'padding', 'top' ),
+			'support' => array( 'spacing', 'padding' ),
 		),
 		'textDecoration'           => array(
-			'theme_json' => array( 'typography', 'textDecoration' ),
-			'block_json' => array( '__experimentalTextDecoration' ),
+			'value'   => array( 'typography', 'textDecoration' ),
+			'support' => array( '__experimentalTextDecoration' ),
 		),
 		'textTransform'            => array(
-			'theme_json' => array( 'typography', 'textTransform' ),
-			'block_json' => array( '__experimentalTextTransform' ),
+			'value'   => array( 'typography', 'textTransform' ),
+			'support' => array( '__experimentalTextTransform' ),
 		),
 	);
 
@@ -377,49 +401,59 @@ public function __construct( $contexts = array() ) {
 	 *   'global': {
 	 *     'selector': ':root'
 	 *     'supports': [ 'fontSize', 'backgroundColor' ],
-	 *     'blockName': 'global',
 	 *   },
 	 *   'core/heading/h1': {
 	 *     'selector': 'h1'
 	 *     'supports': [ 'fontSize', 'backgroundColor' ],
-	 *     'blockName': 'core/heading',
 	 *   }
 	 * }
 	 *
 	 * @return array Block metadata.
 	 */
-	public static function get_blocks_metadata() {
+	private static function get_blocks_metadata() {
 		if ( null !== self::$blocks_metadata ) {
 			return self::$blocks_metadata;
 		}
 
-		self::$blocks_metadata = array();
+		self::$blocks_metadata = array(
+			self::GLOBAL_NAME => array(
+				'selector' => self::GLOBAL_SELECTOR,
+				'supports' => self::GLOBAL_SUPPORTS,
+			),
+		);
 
 		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = array_merge(
-			$registry->get_all_registered(),
-			array( self::GLOBAL_TYPE => new WP_Block_Type( self::GLOBAL_TYPE, self::GLOBAL_ARGS ) )
-		);
+		$blocks   = $registry->get_all_registered();
 		foreach ( $blocks as $block_name => $block_type ) {
+			/*
+			 * Skips blocks that don't declare support,
+			 * they don't generate styles.
+			 */
 			if (
 				! property_exists( $block_type, 'supports' ) ||
-				empty( $block_type->supports ) ||
-				! is_array( $block_type->supports ) ) {
-
-				// Skips blocks that don't declare support.
-				//
-				// TODO: what if there are blocks that don't support
-				// any style but still need the settings passed down?
+				! is_array( $block_type->supports ) ||
+				empty( $block_type->supports )
+			) {
 				continue;
 			}
 
+			/*
+			 * Extract block support keys that are related to the style properties.
+			 */
 			$block_supports = array();
 			foreach ( self::PROPERTIES_METADATA as $key => $metadata ) {
-				if ( gutenberg_experimental_get( $block_type->supports, $metadata['block_json'] ) ) {
+				if ( gutenberg_experimental_get( $block_type->supports, $metadata['support'] ) ) {
 					$block_supports[] = $key;
 				}
 			}
 
+			/*
+			 * Skip blocks that don't support anything related to styles.
+			 */
+			if ( empty( $block_supports ) ) {
+				continue;
+			}
+
 			/*
 			 * Assign the selector for the block.
 			 *
@@ -444,36 +478,27 @@ public static function get_blocks_metadata() {
 				is_string( $block_type->supports['__experimentalSelector'] )
 			) {
 				self::$blocks_metadata[ $block_name ] = array(
-					'selector'  => $block_type->supports['__experimentalSelector'],
-					'supports'  => $block_supports,
-					'blockName' => $block_name,
+					'selector' => $block_type->supports['__experimentalSelector'],
+					'supports' => $block_supports,
 				);
 			} elseif (
 				isset( $block_type->supports['__experimentalSelector'] ) &&
 				is_array( $block_type->supports['__experimentalSelector'] )
 			) {
 				foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector_metadata ) {
-					if (
-						! isset( $selector_metadata['selector'] ) ||
-						! isset( $selector_metadata['attributes'] ) ||
-						! isset( $selector_metadata['title'] )
-					) {
+					if ( ! isset( $selector_metadata['selector'] ) ) {
 						continue;
 					}
 
 					self::$blocks_metadata[ $key ] = array(
-						'selector'   => $selector_metadata['selector'],
-						'title'      => $selector_metadata['title'],
-						'supports'   => $block_supports,
-						'blockName'  => $block_name,
-						'attributes' => $selector_metadata['attributes'],
+						'selector' => $selector_metadata['selector'],
+						'supports' => $block_supports,
 					);
 				}
 			} else {
 				self::$blocks_metadata[ $block_name ] = array(
-					'selector'  => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ),
-					'supports'  => $block_supports,
-					'blockName' => $block_name,
+					'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ),
+					'supports' => $block_supports,
 				);
 			}
 		}
@@ -649,7 +674,7 @@ private static function compute_style_properties( &$declarations, $context ) {
 				continue;
 			}
 
-			$value = self::get_property_value( $context['styles'], $metadata['theme_json'] );
+			$value = self::get_property_value( $context['styles'], $metadata['value'] );
 			if ( ! empty( $value ) ) {
 				$kebabcased_name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $name ) );
 				$declarations[]  = array(

diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -455,7 +455,6 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		gutenberg_experimental_global_styles_has_theme_json_support()
 	) {
 		$settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id();
-		$settings['__experimentalGlobalStylesContexts']     = $base->get_blocks_metadata();
 		$settings['__experimentalGlobalStylesBaseStyles']   = $base->get_raw_data();
 	} else {
 		// STEP 3 - OTHERWISE, ADD STYLES

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { has, get, startsWith } from 'lodash';
+import { has, get, startsWith, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -52,7 +52,8 @@ function compileStyleValue( uncompiledValue ) {
  */
 export function getInlineStyles( styles = {} ) {
 	const output = {};
-	Object.entries( STYLE_PROPERTY ).forEach(
+	const styleProperties = mapValues( STYLE_PROPERTY, ( prop ) => prop.value );
+	Object.entries( styleProperties ).forEach(
 		( [ styleKey, ...otherObjectKeys ] ) => {
 			const [ objectKeys ] = otherObjectKeys;