Update the heading block to use the colors hook

WordPress · Mar 24, 2020 · 43ef782 · 43ef782
1 parent 192bcf4
commit 43ef782
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 54 deletions.
diff --git 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
@@ -19,22 +19,10 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalUseColors,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { useRef } 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;
 
@@ -70,35 +58,29 @@ 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…' ) }
-				/>
-			</TextColor>
+					return createBlock( 'core/heading', {
+						...attributes,
+						content: value,
+					} );
+				} }
+				onReplace={ onReplace }
+				onRemove={ () => onReplace( [] ) }
+				className={ classnames( {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+				placeholder={ placeholder || __( 'Write heading…' ) }
+			/>
 		</>
 	);
 }

diff --git 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
@@ -6,27 +6,20 @@ 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,
 	} );
 
 	return (
 		<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
@@ -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
@@ -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";