Block Library: Swap usage of the colors HOC with the colors hook in t…

…he heading edit component.
WordPress · Jul 26, 2019 · aaf3e64 · aaf3e64
1 parent caccee0
commit aaf3e64
Showing 1 changed file with 31 additions and 62 deletions.
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
@@ -13,48 +13,24 @@ import HeadingToolbar from './heading-toolbar';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import {
 	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
 	RichText,
-	withColors,
-	PanelColorSettings,
+	useColors,
 } from '@wordpress/block-editor';
-import { memo } from '@wordpress/element';
-
-const HeadingColorUI = memo(
-	function( {
-		textColorValue,
-		setTextColor,
-	} ) {
-		return (
-			<PanelColorSettings
-				title={ __( 'Color Settings' ) }
-				initialOpen={ false }
-				colorSettings={ [
-					{
-						value: textColorValue,
-						onChange: setTextColor,
-						label: __( 'Text Color' ),
-					},
-				] }
-			/>
-		);
-	}
-);
 
 function HeadingEdit( {
 	attributes,
 	setAttributes,
 	mergeBlocks,
 	onReplace,
 	className,
-	textColor,
-	setTextColor,
 } ) {
+	const { TextColor, InspectorControlsColorPanel } = useColors( [ { name: 'textColor', attribute: 'color' } ], [] );
+
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 
@@ -76,44 +52,37 @@ function HeadingEdit( {
 						} }
 					/>
 				</PanelBody>
-				<HeadingColorUI
-					setTextColor={ setTextColor }
-					textColorValue={ textColor.color }
-				/>
 			</InspectorControls>
-			<RichText
-				identifier="content"
-				wrapperClassName="wp-block-heading"
-				tagName={ tagName }
-				value={ content }
-				onChange={ ( value ) => setAttributes( { content: value } ) }
-				onMerge={ mergeBlocks }
-				onSplit={ ( value ) => {
-					if ( ! value ) {
-						return createBlock( 'core/paragraph' );
-					}
+			{ InspectorControlsColorPanel }
+			<TextColor>
+				<RichText
+					identifier="content"
+					wrapperClassName="wp-block-heading"
+					tagName={ tagName }
+					value={ content }
+					onChange={ ( value ) => setAttributes( { content: value } ) }
+					onMerge={ mergeBlocks }
+					onSplit={ ( value ) => {
+						if ( ! value ) {
+							return createBlock( 'core/paragraph' );
+						}
 
-					return createBlock( 'core/heading', {
-						...attributes,
-						content: value,
-					} );
-				} }
-				onReplace={ onReplace }
-				onRemove={ () => onReplace( [] ) }
-				className={ classnames( className, {
-					[ `has-text-align-${ align }` ]: align,
-					'has-text-color': textColor.color,
-					[ textColor.class ]: textColor.class,
-				} ) }
-				placeholder={ placeholder || __( 'Write heading…' ) }
-				style={ {
-					color: textColor.color,
-				} }
-			/>
+						return createBlock( 'core/heading', {
+							...attributes,
+							content: value,
+						} );
+					} }
+					onReplace={ onReplace }
+					onRemove={ () => onReplace( [] ) }
+					className={ classnames( className, {
+						[ `has-text-align-${ align }` ]: align,
+						'has-text-color': TextColor.color,
+					} ) }
+					placeholder={ placeholder || __( 'Write heading…' ) }
+				/>
+			</TextColor>
 		</>
 	);
 }
 
-export default compose( [
-	withColors( 'backgroundColor', { textColor: 'color' } ),
-] )( HeadingEdit );
+export default HeadingEdit;