Centralize style mappings (#25185)

lib/global-styles.php

@@ -262,26 +262,50 @@ function gutenberg_experimental_global_styles_get_theme() {
 }
 
 /**
- * Returns the style features a particular block supports.
+ * Return how the style property is structured.
  *
- * @param array $supports The block supports array.
+ * @return array Style property structure.
+ */
+function gutenberg_experimental_global_styles_get_style_property() {
+	return array(
+		'line-height'              => array( 'typography', 'lineHeight' ),
+		'font-size'                => array( 'typography', 'fontSize' ),
+		'background'               => array( 'color', 'gradient' ),
+		'background-color'         => array( 'color', 'background' ),
+		'color'                    => array( 'color', 'text' ),
+		'--wp--style--color--link' => array( 'color', 'link' ),
+	);
+}
+
+/**
+ * Return how the support keys are structured.
  *
- * @return array Style features supported by the block.
+ * @return array Support keys structure.
  */
-function gutenberg_experimental_global_styles_get_supported_styles( $supports ) {
-	$style_features = array(
+function gutenberg_experimental_global_styles_get_support_keys() {
+	return array(
 		'--wp--style--color--link' => array( '__experimentalColor', 'linkColor' ),
-		'background-color'         => array( '__experimentalColor' ),
+		'backgroundColor'          => array( '__experimentalColor' ),
 		'background'               => array( '__experimentalColor', 'gradients' ),
 		'color'                    => array( '__experimentalColor' ),
-		'font-size'                => array( '__experimentalFontSize' ),
-		'line-height'              => array( '__experimentalLineHeight' ),
+		'fontSize'                 => array( '__experimentalFontSize' ),
+		'lineHeight'               => array( '__experimentalLineHeight' ),
 	);
+}
 
+/**
+ * Returns the style features a particular block supports.
+ *
+ * @param array $supports The block supports array.
+ *
+ * @return array Style features supported by the block.
+ */
+function gutenberg_experimental_global_styles_get_supported_styles( $supports ) {
+	$support_keys       = gutenberg_experimental_global_styles_get_support_keys();
 	$supported_features = array();
-	foreach ( $style_features as $style_feature => $path ) {
+	foreach ( $support_keys as $key => $path ) {
 		if ( gutenberg_experimental_get( $supports, $path ) ) {
-			$supported_features[] = $style_feature;
+			$supported_features[] = $key;
 		}
 	}
 
@@ -385,17 +409,9 @@ function gutenberg_experimental_global_styles_get_block_data() {
  * @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' ),
-		'--wp--style--color--link' => array( 'color', 'link' ),
-	);
+	$mappings = gutenberg_experimental_global_styles_get_style_property();
 
 	$result = array();
-
 	foreach ( $mappings as $key => $path ) {
 		$value = gutenberg_experimental_get( $styles, $path, null );
 		if ( null !== $value ) {

packages/block-editor/src/hooks/style.js

@@ -7,7 +7,10 @@ import { has, get, startsWith } from 'lodash';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+} from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -17,7 +20,6 @@ import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
 import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding';
 import SpacingPanelControl from '../components/spacing-panel-control';
-import { STYLE_MAPPINGS } from './utils';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -50,7 +52,7 @@ function compileStyleValue( uncompiledValue ) {
  */
 export function getInlineStyles( styles = {} ) {
 	const output = {};
-	Object.entries( STYLE_MAPPINGS ).forEach(
+	Object.entries( STYLE_PROPERTY ).forEach(
 		( [ styleKey, ...otherObjectKeys ] ) => {
 			const [ objectKeys ] = otherObjectKeys;
 

packages/block-editor/src/hooks/utils.js

@@ -21,16 +21,3 @@ export const cleanEmptyObject = ( object ) => {
 		? undefined
 		: cleanedNestedObjects;
 };
-
-export const STYLE_MAPPINGS = {
-	lineHeight: [ 'typography', 'lineHeight' ],
-	fontSize: [ 'typography', 'fontSize' ],
-	background: [ 'color', 'gradient' ],
-	backgroundColor: [ 'color', 'background' ],
-	color: [ 'color', 'text' ],
-	'--wp--style--color--link': [ 'color', 'link' ],
-	paddingTop: [ 'spacing', 'padding', 'top' ],
-	paddingRight: [ 'spacing', 'padding', 'right' ],
-	paddingBottom: [ 'spacing', 'padding', 'bottom' ],
-	paddingLeft: [ 'spacing', 'padding', 'left' ],
-};

packages/block-editor/src/index.js

@@ -16,4 +16,3 @@ export * from './components';
 export * from './utils';
 export { storeConfig } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
-export { STYLE_MAPPINGS as __EXPERIMENTAL_STYLE_MAPPINGS } from './hooks/utils';

packages/blocks/src/api/constants.js

@@ -10,3 +10,16 @@ export const DEPRECATED_ENTRY_KEYS = [
 	'migrate',
 	'isEligible',
 ];
+
+export const __EXPERIMENTAL_STYLE_PROPERTY = {
+	'--wp--style--color--link': [ 'color', 'link' ],
+	background: [ 'color', 'gradient' ],
+	backgroundColor: [ 'color', 'background' ],
+	color: [ 'color', 'text' ],
+	fontSize: [ 'typography', 'fontSize' ],
+	lineHeight: [ 'typography', 'lineHeight' ],
+	paddingBottom: [ 'spacing', 'padding', 'bottom' ],
+	paddingLeft: [ 'spacing', 'padding', 'left' ],
+	paddingRight: [ 'spacing', 'padding', 'right' ],
+	paddingTop: [ 'spacing', 'padding', 'top' ],
+};

packages/blocks/src/api/index.js

@@ -67,3 +67,4 @@ export {
 } from './templates';
 export { default as children } from './children';
 export { default as node } from './node';
+export { __EXPERIMENTAL_STYLE_PROPERTY } from './constants';

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -13,6 +13,7 @@ import {
 	useMemo,
 } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -21,8 +22,8 @@ import getGlobalStyles from './global-styles-renderer';
 
 const GlobalStylesContext = createContext( {
 	/* eslint-disable no-unused-vars */
-	getProperty: ( context, path ) => {},
-	setProperty: ( context, path, newValue ) => {},
+	getStyleProperty: ( context, propertyName ) => {},
+	setStyleProperty: ( context, propertyName, newValue ) => {},
 	globalContext: {},
 	/* eslint-enable no-unused-vars */
 } );
@@ -44,16 +45,19 @@ export default ( { children, baseStyles, contexts } ) => {
 	const nextValue = useMemo(
 		() => ( {
 			contexts,
-			getProperty: ( context, path ) =>
-				get( userStyles?.[ context ]?.styles, path ),
-			setProperty: ( context, path, newValue ) => {
+			getStyleProperty: ( context, propertyName ) =>
+				get(
+					userStyles?.[ context ]?.styles,
+					STYLE_PROPERTY[ propertyName ]
+				),
+			setStyleProperty: ( context, propertyName, newValue ) => {
 				const newContent = { ...userStyles };
 				let contextStyles = newContent?.[ context ]?.styles;
 				if ( ! contextStyles ) {
 					contextStyles = {};
 					set( newContent, [ context, 'styles' ], contextStyles );
 				}
-				set( contextStyles, path, newValue );
+				set( contextStyles, STYLE_PROPERTY[ propertyName ], newValue );
 				setContent( JSON.stringify( newContent ) );
 			},
 		} ),

packages/edit-site/src/components/editor/global-styles-renderer.js

@@ -1,16 +1,17 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import { get, kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import {
-	STYLE_PROPS,
-	PRESET_CATEGORIES,
-	LINK_COLOR_DECLARATION,
-} from './utils';
+import { PRESET_CATEGORIES, LINK_COLOR_DECLARATION } from './utils';
 
 const mergeTrees = ( baseData, userData ) => {
 	// Deep clone from base data.
@@ -56,13 +57,17 @@ export default ( blockData, baseTree, userTree ) => {
 	 */
 	const getBlockStylesDeclarations = ( blockSupports, blockStyles ) => {
 		const declarations = [];
-		Object.keys( STYLE_PROPS ).forEach( ( key ) => {
+		Object.keys( STYLE_PROPERTY ).forEach( ( key ) => {
+			const cssProperty = key.startsWith( '--' ) ? key : kebabCase( key );
 			if (
 				blockSupports.includes( key ) &&
-				get( blockStyles, STYLE_PROPS[ key ], false )
+				get( blockStyles, STYLE_PROPERTY[ key ], false )
 			) {
 				declarations.push(
-					`${ key }: ${ get( blockStyles, STYLE_PROPS[ key ] ) }`
+					`${ cssProperty }: ${ get(
+						blockStyles,
+						STYLE_PROPERTY[ key ]
+					) }`
 				);
 			}
 		} );

packages/edit-site/src/components/editor/utils.js

@@ -1,22 +1,7 @@
-/* CSS properties */
-export const FONT_SIZE = 'font-size';
-export const LINK_COLOR = '--wp--style--color--link';
-export const BACKGROUND_COLOR = 'background-color';
-export const GRADIENT_COLOR = 'background';
-export const TEXT_COLOR = 'color';
-export const LINE_HEIGHT = 'line-height';
-
 /* Supporting data */
 export const GLOBAL_CONTEXT = 'global';
 export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ];
-export const STYLE_PROPS = {
-	[ FONT_SIZE ]: 'typography.fontSize',
-	[ LINE_HEIGHT ]: 'typography.lineHeight',
-	[ TEXT_COLOR ]: 'color.text',
-	[ BACKGROUND_COLOR ]: 'color.background',
-	[ GRADIENT_COLOR ]: 'color.gradient',
-	[ LINK_COLOR ]: 'color.link',
-};
+export const LINK_COLOR = '--wp--style--color--link';
 export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;
 
 /* Helpers for unit processing */

packages/edit-site/src/components/sidebar/color-panel.js

@@ -7,59 +7,54 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	BACKGROUND_COLOR,
-	GRADIENT_COLOR,
-	LINK_COLOR,
-	TEXT_COLOR,
-} from '../editor/utils';
+import { LINK_COLOR } from '../editor/utils';
 
 export default ( {
 	context: { supports, name },
-	getProperty,
-	setProperty,
+	getStyleProperty,
+	setStyleProperty,
 } ) => {
 	if (
-		! supports.includes( TEXT_COLOR ) &&
-		! supports.includes( BACKGROUND_COLOR ) &&
-		! supports.includes( GRADIENT_COLOR ) &&
+		! supports.includes( 'color' ) &&
+		! supports.includes( 'backgrounColor' ) &&
+		! supports.includes( 'background' ) &&
 		! supports.includes( LINK_COLOR )
 	) {
 		return null;
 	}
 
 	const settings = [];
 
-	if ( supports.includes( TEXT_COLOR ) ) {
+	if ( supports.includes( 'color' ) ) {
 		settings.push( {
-			colorValue: getProperty( name, [ 'color', 'text' ] ),
+			colorValue: getStyleProperty( name, 'color' ),
 			onColorChange: ( value ) =>
-				setProperty( name, [ 'color', 'text' ], value ),
+				setStyleProperty( name, 'color', value ),
 			label: __( 'Text color' ),
 		} );
 	}
 
 	let backgroundSettings = {};
-	if ( supports.includes( BACKGROUND_COLOR ) ) {
+	if ( supports.includes( 'backgroundColor' ) ) {
 		backgroundSettings = {
-			colorValue: getProperty( name, [ 'color', 'background' ] ),
+			colorValue: getStyleProperty( name, 'backgroundColor' ),
 			onColorChange: ( value ) =>
-				setProperty( name, [ 'color', 'background' ], value ),
+				setStyleProperty( name, 'backgroundColor', value ),
 		};
 	}
 
 	let gradientSettings = {};
-	if ( supports.includes( GRADIENT_COLOR ) ) {
+	if ( supports.includes( 'background' ) ) {
 		gradientSettings = {
-			gradientValue: getProperty( name, [ 'color', 'gradient' ] ),
+			gradientValue: getStyleProperty( name, 'background' ),
 			onGradientChange: ( value ) =>
-				setProperty( name, [ 'color', 'gradient' ], value ),
+				setStyleProperty( name, 'background', value ),
 		};
 	}
 
 	if (
-		supports.includes( GRADIENT_COLOR ) ||
-		supports.includes( BACKGROUND_COLOR )
+		supports.includes( 'background' ) ||
+		supports.includes( 'backgroundColor' )
 	) {
 		settings.push( {
 			...backgroundSettings,
@@ -70,9 +65,9 @@ export default ( {
 
 	if ( supports.includes( LINK_COLOR ) ) {
 		settings.push( {
-			colorValue: getProperty( name, [ 'color', 'link' ] ),
+			colorValue: getStyleProperty( name, LINK_COLOR ),
 			onColorChange: ( value ) =>
-				setProperty( name, [ 'color', 'link' ], value ),
+				setStyleProperty( name, LINK_COLOR, value ),
 			label: __( 'Link color' ),
 		} );
 	}