Only use new references when global styles are used. Implement global…

… styles reference mechanism.
WordPress · May 27, 2020 · fddbf02 · fddbf02
1 parent 5584117
commit fddbf02
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 142 deletions.
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
@@ -16,6 +16,7 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
+	...props
 } ) {
 	const { getComputedStyle, Node } = window;
 
@@ -55,6 +56,7 @@ export default function ColorPanel( {
 				title={ __( 'Color settings' ) }
 				initialOpen={ false }
 				settings={ settings }
+				{ ...props }
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -17,6 +17,7 @@ import { useRef, useEffect, Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import {
+	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
@@ -55,6 +56,24 @@ function addAttributes( settings ) {
 		return settings;
 	}
 
+	// Todo: Color attributes are added so we can support themes that use color classes.
+	// If later we remove support for color classes the attributes should be removed.
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( ! settings.attributes.backgroundColor ) {
+		Object.assign( settings.attributes, {
+			backgroundColor: {
+				type: 'string',
+			},
+		} );
+	}
+	if ( ! settings.attributes.textColor ) {
+		Object.assign( settings.attributes, {
+			textColor: {
+				type: 'string',
+			},
+		} );
+	}
+
 	if ( hasGradientSupport( settings ) && ! settings.attributes.gradient ) {
 		Object.assign( settings.attributes, {
 			gradient: {
@@ -82,15 +101,30 @@ export function addSaveProps( props, blockType, attributes ) {
 	const hasGradient = hasGradientSupport( blockType );
 
 	// I'd have prefered to avoid the "style" attribute usage here
-	const { gradient, style } = attributes;
+	const { backgroundColor, textColor, gradient, style } = attributes;
 
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
 	const gradientClass = __experimentalGetGradientClass( gradient );
-	const newClassName = classnames( props.className, gradientClass, {
-		'has-text-color': style?.color?.text,
-		'has-background':
-			style?.color?.background ||
-			( hasGradient && ( gradient || style?.color?.gradient ) ),
-	} );
+	const textClass = getColorClassName( 'color', textColor );
+	const newClassName = classnames(
+		props.className,
+		textClass,
+		gradientClass,
+		{
+			// Don't apply the background class if there's a custom gradient
+			[ backgroundClass ]:
+				( ! hasGradient || ! style?.color?.gradient ) &&
+				!! backgroundClass,
+			'has-text-color': textColor || style?.color?.text,
+			'has-background':
+				backgroundColor ||
+				style?.color?.background ||
+				( hasGradient && ( gradient || style?.color?.gradient ) ),
+		}
+	);
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -119,12 +153,16 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const getColorFromAttributeValue = ( colors, attributeValue ) => {
-	const attributeParsed = /var\(--wp--colors--(.*)\)/.exec( attributeValue );
+const getColorFromAttributeValue = (
+	colors,
+	namedAttributeValue,
+	styleAttributeValue
+) => {
+	const attributeParsed = /var:colors\|(.+)/.exec( styleAttributeValue );
 	return getColorObjectByAttributeValues(
 		colors,
-		attributeParsed && attributeParsed[ 1 ],
-		attributeValue
+		namedAttributeValue || ( attributeParsed && attributeParsed[ 1 ] ),
+		styleAttributeValue
 	).color;
 };
 /**
@@ -136,9 +174,19 @@ const getColorFromAttributeValue = ( colors, attributeValue ) => {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const { colors, gradients } = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings();
-	}, [] );
+	const { colorsSetting, colorsGlobalStyles, gradients } = useSelect(
+		( select ) => {
+			const settings = select( 'core/block-editor' ).getSettings();
+			return {
+				colorsSetting: settings.colors,
+				colorsGlobalStyles:
+					settings.__experimentalGlobalStylesBase?.colors,
+				gradients: settings.gradients,
+			};
+		},
+		[]
+	);
+	const colors = colorsGlobalStyles || colorsSetting;
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
 	// synchronously causing our two callbacks to override changes
@@ -154,7 +202,7 @@ export function ColorEdit( props ) {
 
 	const hasGradient = hasGradientSupport( blockName );
 
-	const { style, gradient } = attributes;
+	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradient && gradient ) {
 		gradientValue = getGradientValueBySlug( gradients, gradient );
@@ -164,18 +212,21 @@ export function ColorEdit( props ) {
 
 	const onChangeColor = ( name ) => ( value ) => {
 		const colorObject = getColorObjectByColorValue( colors, value );
+		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
 			color: {
 				...localAttributes.current?.style?.color,
 				[ name ]: colorObject?.slug
-					? `var(--wp--colors--${ colorObject?.slug })`
+					? colorsGlobalStyles && `var:colors|${ colorObject?.slug }`
 					: value,
 			},
 		};
 
+		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 		const newAttributes = {
 			style: cleanEmptyObject( newStyle ),
+			[ attributeName ]: colorsGlobalStyles ? undefined : newNamedColor,
 		};
 
 		props.setAttributes( newAttributes );
@@ -227,12 +278,14 @@ export function ColorEdit( props ) {
 				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
 			}
 			clientId={ props.clientId }
+			colors={ colors }
 			settings={ [
 				{
 					label: __( 'Text Color' ),
 					onColorChange: onChangeColor( 'text' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						textColor,
 						style?.color?.text
 					),
 				},
@@ -241,6 +294,7 @@ export function ColorEdit( props ) {
 					onColorChange: onChangeColor( 'background' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						backgroundColor,
 						style?.color?.background
 					),
 					gradientValue,

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 } from 'lodash';
+import { has, get, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,6 +35,22 @@ const typographySupportKeys = [
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
+const VARIABLE_REFERENCE_PREFIX = 'var:';
+const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+function compileStyleValue( uncompiledValue ) {
+	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+		const variable = uncompiledValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.replace(
+				VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+				VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
+			);
+		return `var(--wp--${ variable })`;
+	}
+	return uncompiledValue;
+}
+
 /**
  * Returns the inline styles to add depending on the style object
  *
@@ -53,7 +69,7 @@ export function getInlineStyles( styles = {} ) {
 	const output = {};
 	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
 		if ( has( styles, objectKey ) ) {
-			output[ styleKey ] = get( styles, objectKey );
+			output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
 		}
 	} );
 

diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
@@ -39,34 +39,18 @@ function getDeprecatedLayoutColumn( originalContent ) {
 }
 
 const migrateCustomColors = ( attributes ) => {
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -91,14 +75,6 @@ export default [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		save( { attributes } ) {
 			const {
 				verticalAlignment,

diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
@@ -17,34 +17,18 @@ const migrateAttributes = ( attributes ) => {
 		};
 	}
 
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -71,14 +55,6 @@ const deprecated = [
 			anchor: true,
 			html: false,
 		},
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		migrate: migrateAttributes,
 		save( { attributes } ) {
 			const {

diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
@@ -34,19 +34,16 @@ const blockAttributes = {
 };
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.textColor && ! attributes.customTextColor ) {
+	if ( ! attributes.customTextColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			text: attributes.textColor
-				? `var(--wp--colors--${ attributes.textColor })`
-				: attributes.customTextColor,
+			text: attributes.customTextColor,
 		},
 	};
-
 	return {
-		...omit( attributes, [ 'textColor', 'customTextColor' ] ),
+		...omit( attributes, [ 'customTextColor' ] ),
 		style,
 	};
 };
@@ -64,9 +61,6 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return attribute.textColor || attribute.customTextColor;
-		},
 		save( { attributes } ) {
 			const {
 				align,