Add color reference mechanism

WordPress · May 27, 2020 · 5584117 · 5584117
1 parent b9df45d
commit 5584117
Show file tree

Hide file tree

Showing 25 changed files with 209 additions and 113 deletions.
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -17,7 +17,6 @@ import { useRef, useEffect, Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import {
-	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
@@ -56,22 +55,6 @@ function addAttributes( settings ) {
 		return settings;
 	}
 
-	// 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: {
@@ -99,30 +82,15 @@ export function addSaveProps( props, blockType, attributes ) {
 	const hasGradient = hasGradientSupport( blockType );
 
 	// I'd have prefered to avoid the "style" attribute usage here
-	const { backgroundColor, textColor, gradient, style } = attributes;
+	const { gradient, style } = attributes;
 
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
 	const gradientClass = __experimentalGetGradientClass( 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 ) ),
-		}
-	);
+	const newClassName = classnames( props.className, gradientClass, {
+		'has-text-color': style?.color?.text,
+		'has-background':
+			style?.color?.background ||
+			( hasGradient && ( gradient || style?.color?.gradient ) ),
+	} );
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -151,6 +119,14 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
+const getColorFromAttributeValue = ( colors, attributeValue ) => {
+	const attributeParsed = /var\(--wp--colors--(.*)\)/.exec( attributeValue );
+	return getColorObjectByAttributeValues(
+		colors,
+		attributeParsed && attributeParsed[ 1 ],
+		attributeValue
+	).color;
+};
 /**
  * Inspector control panel containing the color related configuration
  *
@@ -178,7 +154,7 @@ export function ColorEdit( props ) {
 
 	const hasGradient = hasGradientSupport( blockName );
 
-	const { style, textColor, backgroundColor, gradient } = attributes;
+	const { style, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradient && gradient ) {
 		gradientValue = getGradientValueBySlug( gradients, gradient );
@@ -188,19 +164,18 @@ 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 ? undefined : value,
+				[ name ]: colorObject?.slug
+					? `var(--wp--colors--${ colorObject?.slug })`
+					: value,
 			},
 		};
 
-		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 		const newAttributes = {
 			style: cleanEmptyObject( newStyle ),
-			[ attributeName ]: newNamedColor,
 		};
 
 		props.setAttributes( newAttributes );
@@ -256,20 +231,18 @@ export function ColorEdit( props ) {
 				{
 					label: __( 'Text Color' ),
 					onColorChange: onChangeColor( 'text' ),
-					colorValue: getColorObjectByAttributeValues(
+					colorValue: getColorFromAttributeValue(
 						colors,
-						textColor,
 						style?.color?.text
-					).color,
+					),
 				},
 				{
 					label: __( 'Background Color' ),
 					onColorChange: onChangeColor( 'background' ),
-					colorValue: getColorObjectByAttributeValues(
+					colorValue: getColorFromAttributeValue(
 						colors,
-						backgroundColor,
 						style?.color?.background
-					).color,
+					),
 					gradientValue,
 					onGradientChange: hasGradient
 						? onChangeGradient

diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
@@ -39,18 +39,34 @@ function getDeprecatedLayoutColumn( originalContent ) {
 }
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
+	if (
+		! attributes.textColor &&
+		! attributes.backgroundColor &&
+		! 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, [ 'customTextColor', 'customBackgroundColor' ] ),
+		...omit( attributes, [
+			'textColor',
+			'backgroundColor',
+			'customTextColor',
+			'customBackgroundColor',
+		] ),
 		style,
 	};
 };
@@ -75,6 +91,14 @@ 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,18 +17,34 @@ const migrateAttributes = ( attributes ) => {
 		};
 	}
 
-	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
+	if (
+		! attributes.textColor &&
+		! attributes.backgroundColor &&
+		! 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, [ 'customTextColor', 'customBackgroundColor' ] ),
+		...omit( attributes, [
+			'textColor',
+			'backgroundColor',
+			'customTextColor',
+			'customBackgroundColor',
+		] ),
 		style,
 	};
 };
@@ -55,6 +71,14 @@ 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,16 +34,19 @@ const blockAttributes = {
 };
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.customTextColor ) {
+	if ( ! attributes.textColor && ! attributes.customTextColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			text: attributes.customTextColor,
+			text: attributes.textColor
+				? `var(--wp--colors--${ attributes.textColor })`
+				: attributes.customTextColor,
 		},
 	};
+
 	return {
-		...omit( attributes, [ 'customTextColor' ] ),
+		...omit( attributes, [ 'textColor', 'customTextColor' ] ),
 		style,
 	};
 };
@@ -61,6 +64,9 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColors,
+		isEligible( attribute ) {
+			return attribute.textColor || attribute.customTextColor;
+		},
 		save( { attributes } ) {
 			const {
 				align,

diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
@@ -17,16 +17,18 @@ import { imageFillStyles } from './media-container';
 const DEFAULT_MEDIA_WIDTH = 50;
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.customBackgroundColor ) {
+	if ( ! attributes.backgroundColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			background: attributes.customBackgroundColor,
+			background: attributes.backgroundColor
+				? `var(--wp--colors--${ attributes.backgroundColor })`
+				: attributes.customBackgroundColor,
 		},
 	};
 	return {
-		...omit( attributes, [ 'customBackgroundColor' ] ),
+		...omit( attributes, [ 'backgroundColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -70,6 +72,9 @@ export default [
 	{
 		attributes: {
 			...baseAttributes,
+			backgroundColor: {
+				type: 'string',
+			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -114,6 +119,9 @@ export default [
 			},
 		},
 		migrate: migrateCustomColors,
+		isEligible( attribute ) {
+			return attribute.backgroundColor || attribute.customBackgroundColor;
+		},
 		save( { attributes } ) {
 			const {
 				backgroundColor,

diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
@@ -55,19 +55,32 @@ const blockAttributes = {
 
 const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	if (
+		! attributes.textColor &&
+		! attributes.backgroundColor &&
 		! attributes.customTextColor &&
 		! attributes.customBackgroundColor &&
 		! attributes.customFontSize
 	) {
 		return attributes;
 	}
 	const style = {};
-	if ( attributes.customTextColor || attributes.customBackgroundColor ) {
+	if (
+		attributes.textColor ||
+		attributes.backgroundColor ||
+		attributes.customTextColor ||
+		attributes.customBackgroundColor
+	) {
 		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;
 	}
@@ -76,6 +89,8 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	}
 	return {
 		...omit( attributes, [
+			'textColor',
+			'backgroundColor',
 			'customTextColor',
 			'customBackgroundColor',
 			'customFontSize',
@@ -89,9 +104,15 @@ const deprecated = [
 		supports,
 		attributes: {
 			...omit( blockAttributes, [ 'style' ] ),
+			textColor: {
+				type: 'string',
+			},
 			customTextColor: {
 				type: 'string',
 			},
+			backgroundColor: {
+				type: 'string',
+			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -100,6 +121,15 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColorsAndFontSizes,
+		isEligible( attribute ) {
+			return (
+				attribute.textColor ||
+				attribute.customTextColor ||
+				attribute.backgroundColor ||
+				attribute.customBackgroundColor ||
+				attribute.customFontSize
+			);
+		},
 		save( { attributes } ) {
 			const {
 				align,