From 8d8050fa9bece8102c40ea931b1d17dadb14c015 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 20 Mar 2020 10:18:28 +0100
Subject: [PATCH 1/3] Update the heading block to use the colors hook

---
 packages/block-library/src/heading/block.json |  6 --
 packages/block-library/src/heading/edit.js    | 63 +++++++------------
 packages/block-library/src/heading/index.js   |  1 +
 packages/block-library/src/heading/save.js    | 11 +---
 packages/block-library/src/heading/style.scss | 13 ++++
 packages/block-library/src/style.scss         |  1 +
 6 files changed, 40 insertions(+), 55 deletions(-)
 create mode 100644 packages/block-library/src/heading/style.scss

diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 2c47b2c7096521..120bece3d39ae3 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -17,12 +17,6 @@
 		},
 		"placeholder": {
 			"type": "string"
-		},
-		"textColor": {
-			"type": "string"
-		},
-		"customTextColor": {
-			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index cc68a15f0d79b5..a9241cab5543e4 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -19,22 +19,11 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalUseColors,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { useRef, Platform } from '@wordpress/element';
+import { Platform } from '@wordpress/element';
 
 function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
-	const ref = useRef();
-	const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
-		[ { name: 'textColor', property: 'color' } ],
-		{
-			contrastCheckers: { backgroundColor: true, textColor: true },
-			colorDetector: { targetRef: ref },
-		},
-		[]
-	);
-
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 
@@ -72,36 +61,30 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			{ InspectorControlsColorPanel }
-			<TextColor>
-				<RichText
-					ref={ ref }
-					identifier="content"
-					tagName={ Block[ tagName ] }
-					value={ content }
-					onChange={ ( value ) =>
-						setAttributes( { content: value } )
+			<RichText
+				identifier="content"
+				tagName={ Block[ tagName ] }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				onMerge={ mergeBlocks }
+				onSplit={ ( value ) => {
+					if ( ! value ) {
+						return createBlock( 'core/paragraph' );
 					}
-					onMerge={ mergeBlocks }
-					onSplit={ ( value ) => {
-						if ( ! value ) {
-							return createBlock( 'core/paragraph' );
-						}
 
-						return createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} }
-					onReplace={ onReplace }
-					onRemove={ () => onReplace( [] ) }
-					className={ classnames( {
-						[ `has-text-align-${ align }` ]: align,
-					} ) }
-					placeholder={ placeholder || __( 'Write heading…' ) }
-					textAlign={ align }
-				/>
-			</TextColor>
+					return createBlock( 'core/heading', {
+						...attributes,
+						content: value,
+					} );
+				} }
+				onReplace={ onReplace }
+				onRemove={ () => onReplace( [] ) }
+				className={ classnames( {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+				placeholder={ placeholder || __( 'Write heading…' ) }
+				textAlign={ align }
+			/>
 		</>
 	);
 }
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index de82e618486222..05a44aac9e1a90 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -34,6 +34,7 @@ export const settings = {
 		anchor: true,
 		__unstablePasteTextInline: true,
 		lightBlockWrapper: true,
+		__experimentalColor: true,
 	},
 	example: {
 		attributes: {
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index 5b2adacec2a633..00ecf40e1c27ce 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -6,17 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, RichText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, content, customTextColor, level, textColor } = attributes;
+	const { align, content, level } = attributes;
 	const tagName = 'h' + level;
 
-	const textClass = getColorClassName( 'color', textColor );
-
 	const className = classnames( {
-		[ textClass ]: textClass,
-		'has-text-color': textColor || customTextColor,
 		[ `has-text-align-${ align }` ]: align,
 	} );
 
@@ -24,9 +20,6 @@ export default function save( { attributes } ) {
 		<RichText.Content
 			className={ className ? className : undefined }
 			tagName={ tagName }
-			style={ {
-				color: textClass ? undefined : customTextColor,
-			} }
 			value={ content }
 		/>
 	);
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss
new file mode 100644
index 00000000000000..8eb03551e9c675
--- /dev/null
+++ b/packages/block-library/src/heading/style.scss
@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	background-color: var(--wp--color--background);
+	color: var(--wp--color--text);
+
+	&.has-background {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index ab0c0e47ff22ea..99e738bf9fc5fd 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -14,6 +14,7 @@
 @import "./file/style.scss";
 @import "./gallery/style.scss";
 @import "./group/style.scss";
+@import "./heading/style.scss";
 @import "./image/style.scss";
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";

From f38d42b2c708cce55f0c3d79a7f80a8a2d17105b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 27 Mar 2020 11:03:26 +0100
Subject: [PATCH 2/3] Add deprecated version

---
 .../block-library/src/heading/deprecated.js   | 85 +++++++++++++++++--
 1 file changed, 77 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index fffa0f9b4e7976..6894ee300947a3 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -30,17 +30,77 @@ const blockAttributes = {
 	placeholder: {
 		type: 'string',
 	},
-	textColor: {
-		type: 'string',
-	},
-	customTextColor: {
-		type: 'string',
-	},
+};
+
+const migrateCustomColors = ( attributes ) => {
+	if ( ! attributes.customTextColor ) {
+		return attributes;
+	}
+	const style = {
+		color: {
+			text: attributes.customTextColor,
+		},
+	};
+	return {
+		...attributes,
+		style,
+	};
 };
 
 const deprecated = [
 	{
-		attributes: blockAttributes,
+		supports: blockSupports,
+		attributes: {
+			...blockAttributes,
+			customTextColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
+		save( { attributes } ) {
+			const {
+				align,
+				content,
+				customTextColor,
+				level,
+				textColor,
+			} = attributes;
+			const tagName = 'h' + level;
+
+			const textClass = getColorClassName( 'color', textColor );
+
+			const className = classnames( {
+				[ textClass ]: textClass,
+				'has-text-color': textColor || customTextColor,
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<RichText.Content
+					className={ className ? className : undefined }
+					tagName={ tagName }
+					style={ {
+						color: textClass ? undefined : customTextColor,
+					} }
+					value={ content }
+				/>
+			);
+		},
+	},
+	{
+		attributes: {
+			...blockAttributes,
+			customTextColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
 		save( { attributes } ) {
 			const {
 				align,
@@ -73,7 +133,16 @@ const deprecated = [
 	},
 	{
 		supports: blockSupports,
-		attributes: blockAttributes,
+		attributes: {
+			...blockAttributes,
+			customTextColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
 		save( { attributes } ) {
 			const {
 				align,

From 42707b4022de8f1a000152a859758c731289955d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 27 Mar 2020 11:29:20 +0100
Subject: [PATCH 3/3] Fix tests

---
 packages/block-library/src/columns/deprecated.js            | 2 +-
 packages/block-library/src/group/deprecated.js              | 3 ++-
 packages/block-library/src/heading/deprecated.js            | 3 ++-
 packages/block-library/src/paragraph/deprecated.js          | 2 +-
 .../fixtures/blocks/core__heading__deprecated-3.json        | 6 +++++-
 .../blocks/core__heading__deprecated-3.serialized.html      | 4 ++--
 .../specs/editor/blocks/__snapshots__/heading.test.js.snap  | 4 ++--
 7 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index 6f40583897dece..34b3076904a63f 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -50,7 +50,7 @@ const migrateCustomColors = ( attributes ) => {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...attributes,
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index e828b399d23a94..a335bc82a691bd 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,7 @@ const migrateCustomColors = ( attributes ) => {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...attributes,
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index 6894ee300947a3..7a43fc9d5b8689 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,7 +43,7 @@ const migrateCustomColors = ( attributes ) => {
 		},
 	};
 	return {
-		...attributes,
+		...omit( attributes, [ 'customTextColor' ] ),
 		style,
 	};
 };
diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
index 0e8b7df23093d0..923b2ed70a08c8 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -68,7 +68,7 @@ const migrateCustomColors = ( attributes ) => {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...attributes,
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.json
index ba5b3079e888c4..3ccb9339921ea7 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.json
@@ -6,7 +6,11 @@
         "attributes": {
             "content": "Text",
             "level": 2,
-            "customTextColor": "#268ebb"
+            "style": {
+				"color": {
+					"text": "#268ebb"
+				}
+			}
         },
         "innerBlocks": [],
         "originalContent": "<h2 style=\"color:#268ebb\">Text</h2>"
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html
index 7efa248386cefd..13bc6d11332bcc 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"customTextColor":"#268ebb"} -->
-<h2 class="has-text-color" style="color:#268ebb">Text</h2>
+<!-- wp:heading {"style":{"color":{"text":"#268ebb"}}} -->
+<h2 class="has-text-color" style="--wp--color--text:#268ebb">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 d36b3e658b5f84..97708efb2bea82 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
@@ -13,8 +13,8 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
 `;
 
 exports[`Heading it should correctly apply custom colors 1`] = `
-"<!-- wp:heading {\\"level\\":3,\\"customTextColor\\":\\"#7700ff\\"} -->
-<h3 class=\\"has-text-color\\" style=\\"color:#7700ff\\">Heading</h3>
+"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
+<h3 class=\\"has-text-color\\" style=\\"--wp--color--text:#7700ff\\">Heading</h3>
 <!-- /wp:heading -->"
 `;