From 55841177d607092abd8796b7a24490db881ae510 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 8 Apr 2020 20:21:27 +0100
Subject: [PATCH 1/2] Add color reference mechanism

---
 packages/block-editor/src/hooks/color.js      | 73 ++++++-------------
 .../block-library/src/columns/deprecated.js   | 28 ++++++-
 .../block-library/src/group/deprecated.js     | 28 ++++++-
 .../block-library/src/heading/deprecated.js   | 12 ++-
 .../src/media-text/deprecated.js              | 14 +++-
 .../block-library/src/paragraph/deprecated.js | 32 +++++++-
 .../fixtures/blocks/core__columns.html        |  7 +-
 .../fixtures/blocks/core__columns.json        | 12 ++-
 .../fixtures/blocks/core__columns.parsed.json | 20 +++--
 .../blocks/core__columns.serialized.html      |  4 +-
 .../fixtures/blocks/core__group.html          |  7 +-
 .../fixtures/blocks/core__group.json          |  8 +-
 .../fixtures/blocks/core__group.parsed.json   | 12 ++-
 .../blocks/core__group.serialized.html        |  4 +-
 .../blocks/core__group__deprecated-2.json     |  4 +-
 .../core__group__deprecated-2.serialized.html |  4 +-
 .../blocks/core__group__deprecated.json       |  8 +-
 .../core__group__deprecated.serialized.html   |  4 +-
 .../blocks/core__heading__deprecated-2.json   |  2 +-
 ...ore__heading__deprecated-2.serialized.html |  4 +-
 .../blocks/core__heading__h2-color.html       |  5 +-
 .../blocks/core__heading__h2-color.json       |  8 +-
 .../core__heading__h2-color.parsed.json       | 14 ++--
 .../core__heading__h2-color.serialized.html   |  4 +-
 .../blocks/__snapshots__/heading.test.js.snap |  4 +-
 25 files changed, 209 insertions(+), 113 deletions(-)

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index c4f80ff9c02ef0..19ed470c771d1a 100644
--- 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
index 34b3076904a63f..696df9e57bed43 100644
--- 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
index 3e6d394197ffd6..033ffd9e4a9e10 100644
--- 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
index 7a43fc9d5b8689..05c6218f1186ab 100644
--- 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
index cd06840df83df6..c509d89de3b1ed 100644
--- 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
index 24896a034207d0..3590dd3efdee6e 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -55,6 +55,8 @@ const blockAttributes = {
 
 const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	if (
+		! attributes.textColor &&
+		! attributes.backgroundColor &&
 		! attributes.customTextColor &&
 		! attributes.customBackgroundColor &&
 		! attributes.customFontSize
@@ -62,12 +64,23 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 		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,
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.html b/packages/e2e-tests/fixtures/blocks/core__columns.html
index 89383b93f3ad15..3572ed4bddc02f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.html
@@ -1,20 +1,23 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-background has-secondary-background-color">
+<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
 		<p>Column One, Paragraph One</p>
 		<!-- /wp:paragraph -->
+
 		<!-- wp:paragraph -->
 		<p>Column One, Paragraph Two</p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:column -->
+
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
 		<p>Column Two, Paragraph One</p>
 		<!-- /wp:paragraph -->
+
 		<!-- wp:paragraph -->
 		<p>Column Three, Paragraph One</p>
 		<!-- /wp:paragraph -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json
index 9741c4ee472aa1..355ea63438e383 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.json
@@ -4,7 +4,11 @@
         "name": "core/columns",
         "isValid": true,
         "attributes": {
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -36,7 +40,7 @@
                         "originalContent": "<p>Column One, Paragraph Two</p>"
                     }
                 ],
-                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
             },
             {
                 "clientId": "_clientId_1",
@@ -67,9 +71,9 @@
                         "originalContent": "<p>Column Three, Paragraph One</p>"
                     }
                 ],
-                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
+        "originalContent": "<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
index dec57c6e19e396..e79cccb23d257d 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
@@ -2,7 +2,11 @@
     {
         "blockName": "core/columns",
         "attrs": {
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -28,11 +32,11 @@
                         ]
                     }
                 ],
-                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
                 "innerContent": [
                     "\n\t<div class=\"wp-block-column\">\n\t\t",
                     null,
-                    "\n\t\t",
+                    "\n\n\t\t",
                     null,
                     "\n\t</div>\n\t"
                 ]
@@ -60,21 +64,21 @@
                         ]
                     }
                 ],
-                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
                 "innerContent": [
                     "\n\t<div class=\"wp-block-column\">\n\t\t",
                     null,
-                    "\n\t\t",
+                    "\n\n\t\t",
                     null,
                     "\n\t</div>\n\t"
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
+            "\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t",
             null,
-            "\n\t",
+            "\n\n\t",
             null,
             "\n</div>\n"
         ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
index 2b95373d1a7b83..2f5f2ed39e1309 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
+<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
 <p>Column One, Paragraph One</p>
 <!-- /wp:paragraph -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.html b/packages/e2e-tests/fixtures/blocks/core__group.html
index e5df0f2fce926a..0e09be9baf6bbe 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
-<div class="wp-block-group alignfull has-secondary-background-color has-background">
+<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)">
 	<div class="wp-block-group__inner-container">
 		<!-- wp:paragraph -->
 		<p>This is a group block.</p>
@@ -7,6 +7,7 @@
 
 		<!-- wp:paragraph -->
 		<p>Group block content.</p>
-		<!-- /wp:paragraph --></div>
+		<!-- /wp:paragraph -->
 	</div>
+</div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.json b/packages/e2e-tests/fixtures/blocks/core__group.json
index 526a8d70fbcdfa..5d6961dab3f8d2 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.json
@@ -6,7 +6,11 @@
         "attributes": {
             "tagName": "div",
             "align": "full",
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -32,6 +36,6 @@
                 "originalContent": "<p>Group block content.</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>"
+        "originalContent": "<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
index ba86ac5a02d6bd..801d207fa08855 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
@@ -3,7 +3,11 @@
         "blockName": "core/group",
         "attrs": {
             "align": "full",
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -25,13 +29,13 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
+            "\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
             null,
             "\n\n\t\t",
             null,
-            "</div>\n\t</div>\n"
+            "\n\t</div>\n</div>\n"
         ]
     },
     {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
index 8ac236255f9f61..fd196a7e180785 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
-<div class="wp-block-group alignfull has-secondary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>This is a group block.</p>
 <!-- /wp:paragraph -->
 
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
index 7bfd9dafac7069..7a729f8554e6b7 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
@@ -4,8 +4,8 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
-            "textColor": "accent",
-            "tagName": "div"
+            "tagName": "div",
+            "className": "has-text-color"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
index cf7ebe4f5a05ec..4b705631322654 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"textColor":"accent"} -->
-<div class="wp-block-group has-accent-color has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"className":"has-text-color"} -->
+<div class="wp-block-group has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>My paragraph</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
index 7f1f51c3644e40..ed7eae35f0032f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
@@ -4,10 +4,14 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
-            "backgroundColor": "lighter-blue",
             "align": "full",
             "anchor": "test-id",
-            "tagName": "div"
+            "tagName": "div",
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--lighter-blue)"
+                }
+            }
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
index b9f1dc3ba37e12..2ac6b79311bd27 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","backgroundColor":"lighter-blue"} -->
-<div class="wp-block-group alignfull has-lighter-blue-background-color has-background" id="test-id"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dlighter-blue)"}}} -->
+<div class="wp-block-group alignfull has-background" id="test-id" style="background-color:var(--wp--colors--lighter-blue)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>test</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
index ce277ddce36e74..59c8a35752e0ac 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
@@ -6,7 +6,7 @@
         "attributes": {
             "content": "text",
             "level": 2,
-            "textColor": "accent"
+            "className": "has-accent-color"
         },
         "innerBlocks": [],
         "originalContent": "<h2 class=\"has-accent-color\">text</h2>"
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
index 1dbaea2593eb91..4762f9c1175c0f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">text</h2>
+<!-- wp:heading {"className":"has-accent-color"} -->
+<h2 class="has-accent-color">text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
index 23c39f701c7651..ac1ded6315b316 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
@@ -1,4 +1,3 @@
-<!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
-
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
index 6924638cf64666..f2dd74e7cce244 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
@@ -6,9 +6,13 @@
         "attributes": {
             "content": "Text",
             "level": 2,
-            "textColor": "accent"
+            "style": {
+                "color": {
+                    "text": "var(--wp--colors--accent)"
+                }
+            }
         },
         "innerBlocks": [],
-        "originalContent": "<h2 class=\"has-accent-color has-text-color\">Text</h2>"
+        "originalContent": "<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
index 42bb5549b7cf72..d68e52290c3715 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
@@ -2,21 +2,25 @@
     {
         "blockName": "core/heading",
         "attrs": {
-            "textColor": "accent"
+            "style": {
+                "color": {
+                    "text": "var(--wp--colors--accent)"
+                }
+            }
         },
         "innerBlocks": [],
-        "innerHTML": "\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n",
+        "innerHTML": "\n<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>\n",
         "innerContent": [
-            "\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n"
+            "\n<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>\n"
         ]
     },
     {
         "blockName": null,
         "attrs": {},
         "innerBlocks": [],
-        "innerHTML": "\n\n",
+        "innerHTML": "\n",
         "innerContent": [
-            "\n\n"
+            "\n"
         ]
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
index 862a62b2d79751..ac1ded6315b316 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
index c8edb2f56cf352..ec6e5091856e9a 100644
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
@@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = `
 `;
 
 exports[`Heading it should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
+"<!-- wp:heading {\\"style\\":{\\"color\\":{\\"text\\":\\"var(\\\\u002d\\\\u002dwp\\\\u002d\\\\u002dcolors\\\\u002d\\\\u002dluminous-vivid-orange)\\"}}} -->
+<h2 class=\\"has-text-color\\" style=\\"color:var(--wp--colors--luminous-vivid-orange)\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 

From fddbf02d975b8da748c422b293854c81f3e4892a Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 9 Apr 2020 21:32:22 +0100
Subject: [PATCH 2/2] Only use new references when global styles are used.
 Implement global styles reference mechanism.

---
 .../block-editor/src/hooks/color-panel.js     |  2 +
 packages/block-editor/src/hooks/color.js      | 86 +++++++++++++++----
 packages/block-editor/src/hooks/style.js      | 20 ++++-
 .../block-library/src/columns/deprecated.js   | 28 +-----
 .../block-library/src/group/deprecated.js     | 28 +-----
 .../block-library/src/heading/deprecated.js   | 12 +--
 .../src/media-text/deprecated.js              | 14 +--
 .../block-library/src/paragraph/deprecated.js | 32 +------
 .../blocks/core__group__deprecated-2.json     |  4 +-
 .../core__group__deprecated-2.serialized.html |  4 +-
 .../blocks/core__group__deprecated.json       |  8 +-
 .../core__group__deprecated.serialized.html   |  4 +-
 .../blocks/core__heading__deprecated-2.json   |  2 +-
 ...ore__heading__deprecated-2.serialized.html |  4 +-
 .../blocks/core__heading__h2-color.html       |  2 +-
 .../blocks/core__heading__h2-color.json       |  2 +-
 .../core__heading__h2-color.parsed.json       |  2 +-
 .../core__heading__h2-color.serialized.html   |  2 +-
 .../blocks/__snapshots__/heading.test.js.snap |  4 +-
 19 files changed, 118 insertions(+), 142 deletions(-)

diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 553a59eca0c3e2..605f7cbb4a6404 100644
--- 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
index 19ed470c771d1a..73202e2d195977 100644
--- 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
index f23a5c2612e2bc..da109980d187b1 100644
--- 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
index 696df9e57bed43..34b3076904a63f 100644
--- 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
index 033ffd9e4a9e10..3e6d394197ffd6 100644
--- 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
index 05c6218f1186ab..7a43fc9d5b8689 100644
--- 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,
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index c509d89de3b1ed..cd06840df83df6 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -17,18 +17,16 @@ import { imageFillStyles } from './media-container';
 const DEFAULT_MEDIA_WIDTH = 50;
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.backgroundColor && ! attributes.customBackgroundColor ) {
+	if ( ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			background: attributes.backgroundColor
-				? `var(--wp--colors--${ attributes.backgroundColor })`
-				: attributes.customBackgroundColor,
+			background: attributes.customBackgroundColor,
 		},
 	};
 	return {
-		...omit( attributes, [ 'backgroundColor', 'customBackgroundColor' ] ),
+		...omit( attributes, [ 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -72,9 +70,6 @@ export default [
 	{
 		attributes: {
 			...baseAttributes,
-			backgroundColor: {
-				type: 'string',
-			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -119,9 +114,6 @@ 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
index 3590dd3efdee6e..24896a034207d0 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -55,8 +55,6 @@ const blockAttributes = {
 
 const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
 		! attributes.customTextColor &&
 		! attributes.customBackgroundColor &&
 		! attributes.customFontSize
@@ -64,23 +62,12 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 		return attributes;
 	}
 	const style = {};
-	if (
-		attributes.textColor ||
-		attributes.backgroundColor ||
-		attributes.customTextColor ||
-		attributes.customBackgroundColor
-	) {
+	if ( 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;
 	}
@@ -89,8 +76,6 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	}
 	return {
 		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
 			'customTextColor',
 			'customBackgroundColor',
 			'customFontSize',
@@ -104,15 +89,9 @@ const deprecated = [
 		supports,
 		attributes: {
 			...omit( blockAttributes, [ 'style' ] ),
-			textColor: {
-				type: 'string',
-			},
 			customTextColor: {
 				type: 'string',
 			},
-			backgroundColor: {
-				type: 'string',
-			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -121,15 +100,6 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColorsAndFontSizes,
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor ||
-				attribute.customFontSize
-			);
-		},
 		save( { attributes } ) {
 			const {
 				align,
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
index 7a729f8554e6b7..7bfd9dafac7069 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
@@ -4,8 +4,8 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
-            "tagName": "div",
-            "className": "has-text-color"
+            "textColor": "accent",
+            "tagName": "div"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
index 4b705631322654..cf7ebe4f5a05ec 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"className":"has-text-color"} -->
-<div class="wp-block-group has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"textColor":"accent"} -->
+<div class="wp-block-group has-accent-color has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>My paragraph</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
index ed7eae35f0032f..7f1f51c3644e40 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
@@ -4,14 +4,10 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
+            "backgroundColor": "lighter-blue",
             "align": "full",
             "anchor": "test-id",
-            "tagName": "div",
-            "style": {
-                "color": {
-                    "background": "var(--wp--colors--lighter-blue)"
-                }
-            }
+            "tagName": "div"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
index 2ac6b79311bd27..b9f1dc3ba37e12 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dlighter-blue)"}}} -->
-<div class="wp-block-group alignfull has-background" id="test-id" style="background-color:var(--wp--colors--lighter-blue)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"align":"full","backgroundColor":"lighter-blue"} -->
+<div class="wp-block-group alignfull has-lighter-blue-background-color has-background" id="test-id"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>test</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
index 59c8a35752e0ac..ce277ddce36e74 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
@@ -6,7 +6,7 @@
         "attributes": {
             "content": "text",
             "level": 2,
-            "className": "has-accent-color"
+            "textColor": "accent"
         },
         "innerBlocks": [],
         "originalContent": "<h2 class=\"has-accent-color\">text</h2>"
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
index 4762f9c1175c0f..1dbaea2593eb91 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"className":"has-accent-color"} -->
-<h2 class="has-accent-color">text</h2>
+<!-- wp:heading {"textColor":"accent"} -->
+<h2 class="has-accent-color has-text-color">text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
index ac1ded6315b316..79413d0a2fec60 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
 <h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
index f2dd74e7cce244..5315e15e759426 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
@@ -8,7 +8,7 @@
             "level": 2,
             "style": {
                 "color": {
-                    "text": "var(--wp--colors--accent)"
+                    "text": "var:colors|accent"
                 }
             }
         },
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
index d68e52290c3715..6a8cc0735323ce 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
@@ -4,7 +4,7 @@
         "attrs": {
             "style": {
                 "color": {
-                    "text": "var(--wp--colors--accent)"
+                    "text": "var:colors|accent"
                 }
             }
         },
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
index ac1ded6315b316..79413d0a2fec60 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
 <h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
index ec6e5091856e9a..c8edb2f56cf352 100644
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
@@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = `
 `;
 
 exports[`Heading it should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"style\\":{\\"color\\":{\\"text\\":\\"var(\\\\u002d\\\\u002dwp\\\\u002d\\\\u002dcolors\\\\u002d\\\\u002dluminous-vivid-orange)\\"}}} -->
-<h2 class=\\"has-text-color\\" style=\\"color:var(--wp--colors--luminous-vivid-orange)\\">Heading</h2>
+"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
+<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;