Block Editor: Implement new colors hook.

packages/block-editor/README.md

@@ -446,6 +446,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-popover/README.md>
 
+<a name="useBlockEditContext" href="#useBlockEditContext">#</a> **useBlockEditContext**
+
+Undocumented declaration.
+
 <a name="Warning" href="#Warning">#</a> **Warning**
 
 Undocumented declaration.

packages/block-editor/src/components/block-edit/context.js

@@ -6,18 +6,22 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext, useContext } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
-const { Consumer, Provider } = createContext( {
+const Context = createContext( {
 	name: '',
 	isSelected: false,
 	focusedElement: null,
 	setFocusedElement: noop,
 	clientId: null,
 } );
+const { Provider, Consumer } = Context;
 
 export { Provider as BlockEditContextProvider };
+export function useBlockEditContext() {
+	return useContext( Context );
+}
 
 /**
  * A Higher Order Component used to inject BlockEdit context to the

packages/block-editor/src/components/block-edit/index.js

@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider } from './context';
+import { BlockEditContextProvider, useBlockEditContext } from './context';
 
 class BlockEdit extends Component {
 	constructor() {
@@ -44,3 +44,4 @@ class BlockEdit extends Component {
 }
 
 export default BlockEdit;
+export { useBlockEditContext };

packages/block-editor/src/components/colors/index.js

@@ -7,3 +7,4 @@ export {
 	createCustomColorsHOC,
 	default as withColors,
 } from './with-colors';
+export { default as __experimentalUseColors } from './use-colors';

packages/block-editor/src/components/colors/use-colors.js

@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+import { kebabCase, camelCase, startCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useCallback,
+	useMemo,
+	Children,
+	cloneElement,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorSettings from '../panel-color-settings';
+import ContrastChecker from '../contrast-checker';
+import InspectorControls from '../inspector-controls';
+import { useBlockEditContext } from '../block-edit';
+
+const ColorPanel = ( {
+	title,
+	colorSettings,
+	colorPanelProps,
+	contrastCheckerProps,
+	components,
+	panelChildren,
+} ) => (
+	<PanelColorSettings
+		title={ title }
+		initialOpen={ false }
+		colorSettings={ colorSettings }
+		{ ...colorPanelProps }
+	>
+		{ contrastCheckerProps &&
+			components.map( ( Component ) => (
+				<ContrastChecker
+					key={ Component.displayName }
+					textColor={ Component.color }
+					{ ...contrastCheckerProps }
+				/>
+			) ) }
+		{ typeof panelChildren === 'function' ?
+			panelChildren( components ) :
+			panelChildren }
+	</PanelColorSettings>
+);
+const InspectorControlsColorPanel = ( props ) => (
+	<InspectorControls>
+		<ColorPanel { ...props } />
+	</InspectorControls>
+);
+
+export default function __experimentalUseColors(
+	colorConfigs,
+	{
+		panelTitle = __( 'Color Settings' ),
+		colorPanelProps,
+		contrastCheckerProps,
+		panelChildren,
+	} = {
+		panelTitle: __( 'Color Settings' ),
+	},
+	deps = []
+) {
+	const { clientId } = useBlockEditContext();
+	const { attributes, settingsColors } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } = select( 'core/block-editor' );
+			return {
+				attributes: getBlockAttributes( clientId ),
+				settingsColors: getSettings().colors,
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+	const setAttributes = useCallback(
+		( newAttributes ) => updateBlockAttributes( clientId, newAttributes ),
+		[ updateBlockAttributes, clientId ]
+	);
+
+	const createComponent = useMemo(
+		() =>
+			memoize(
+				( attribute, color, colorValue, customColor ) => ( { children } ) =>
+					// Clone children, setting the style attribute from the color configuration,
+					// if not already set explicitly through props.
+					Children.map( children, ( child ) => {
+						let className = child.props.className;
+						let style = child.props.style;
+						if ( color ) {
+							className = `${ child.props.className } has-${ kebabCase(
+								color
+							) }-${ kebabCase( attribute ) }`;
+							style = { [ attribute ]: colorValue, ...child.props.style };
+						} else if ( customColor ) {
+							className = `${ child.props.className } has-${ kebabCase( attribute ) }`;
+							style = { [ attribute ]: customColor, ...child.props.style };
+						}
+						return cloneElement( child, {
+							className,
+							style,
+						} );
+					} ),
+				{ maxSize: colorConfigs.length }
+			),
+		[ colorConfigs.length ]
+	);
+	const createSetColor = useMemo(
+		() =>
+			memoize(
+				( name, colors ) => ( newColor ) => {
+					const color = colors.find( ( _color ) => _color.color === newColor );
+					setAttributes( {
+						[ color ? camelCase( `custom ${ name }` ) : name ]: undefined,
+					} );
+					setAttributes( {
+						[ color ? name : camelCase( `custom ${ name }` ) ]: color ?
+							color.slug :
+							newColor,
+					} );
+				},
+				{
+					maxSize: colorConfigs.length,
+				}
+			),
+		[ setAttributes, colorConfigs.length ]
+	);
+
+	return useMemo( () => {
+		const colorSettings = [];
+
+		const components = colorConfigs.reduce( ( acc, colorConfig ) => {
+			if ( typeof colorConfig === 'string' ) {
+				colorConfig = { name: colorConfig };
+			}
+			const {
+				name, // E.g. 'backgroundColor'.
+				attribute = name, // E.g. 'backgroundColor'.
+
+				panelLabel = startCase( name ), // E.g. 'Background Color'.
+				componentName = panelLabel.replace( /\s/g, '' ), // E.g. 'BackgroundColor'.
+
+				color = colorConfig.color,
+				colors = settingsColors,
+			} = {
+				...colorConfig,
+				color: attributes[ colorConfig.name ],
+			};
+
+			// We memoize the non-primitives to avoid unnecessary updates
+			// when they are used as props for other components.
+			const _color = colors.find( ( __color ) => __color.slug === color );
+			acc[ componentName ] = createComponent(
+				attribute,
+				color,
+				_color && _color.color,
+				attributes[ camelCase( `custom ${ name }` ) ]
+			);
+			acc[ componentName ].displayName = componentName;
+			acc[ componentName ].color = color;
+			acc[ componentName ].setColor = createSetColor( name, colors );
+
+			const newSettingIndex =
+				colorSettings.push( {
+					value: color,
+					onChange: acc[ componentName ].setColor,
+					label: panelLabel,
+					colors,
+				} ) - 1;
+			// These settings will be spread over the `colors` in
+			// `colorPanelProps`, so we need to unset the key here,
+			// if not set to an actual value, to avoid overwriting
+			// an actual value in `colorPanelProps`.
+			if ( ! colors ) {
+				delete colorSettings[ newSettingIndex ].colors;
+			}
+
+			return acc;
+		}, {} );
+
+		const wrappedColorPanelProps = {
+			title: panelTitle,
+			colorSettings,
+			colorPanelProps,
+			contrastCheckerProps,
+			components: Object.values( components ),
+			panelChildren,
+		};
+		return {
+			...components,
+			ColorPanel: <ColorPanel { ...wrappedColorPanelProps } />,
+			InspectorControlsColorPanel: (
+				<InspectorControlsColorPanel { ...wrappedColorPanelProps } />
+			),
+		};
+	}, [ attributes, setAttributes, ...deps ] );
+}

packages/block-editor/src/components/index.js

@@ -8,7 +8,7 @@ export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
-export { default as BlockEdit } from './block-edit';
+export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';

packages/block-library/src/heading/edit.js

@@ -13,48 +13,30 @@ 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,
+	__experimentalUseColors,
 } 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 } = __experimentalUseColors(
+		[ { name: 'textColor', attribute: 'color' } ],
+		{
+			contrastCheckerProps: { backgroundColor: 'white', isLargeText: true },
+		},
+		[]
+	);
+
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 
@@ -71,43 +53,35 @@ function HeadingEdit( {
 					<p>{ __( 'Level' ) }</p>
 					<HeadingToolbar isCollapsed={ false } minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 				</PanelBody>
-				<HeadingColorUI
-					setTextColor={ setTextColor }
-					textColorValue={ textColor.color }
-				/>
 			</InspectorControls>
-			<RichText
-				identifier="content"
-				tagName={ tagName }
-				value={ content }
-				onChange={ ( value ) => setAttributes( { content: value } ) }
-				onMerge={ mergeBlocks }
-				onSplit={ ( value ) => {
-					if ( ! value ) {
-						return createBlock( 'core/paragraph' );
-					}
+			{ InspectorControlsColorPanel }
+			<TextColor>
+				<RichText
+					identifier="content"
+					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,
+					} ) }
+					placeholder={ placeholder || __( 'Write heading…' ) }
+				/>
+			</TextColor>
 		</>
 	);
 }
 
-export default compose( [
-	withColors( 'backgroundColor', { textColor: 'color' } ),
-] )( HeadingEdit );
+export default HeadingEdit;