Block Editor: Implement new colors hook.

packages/block-editor/README.md

@@ -419,6 +419,14 @@ _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="useColors" href="#useColors">#</a> **useColors**
+
+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() {
@@ -27,13 +27,13 @@ class BlockEdit extends Component {
 		);
 	}
 
-	propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange ) {
-		return { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange };
+	propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes ) {
+		return { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes };
 	}
 
 	render() {
-		const { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange } = this.props;
-		const value = this.propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange );
+		const { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes } = this.props;
+		const value = this.propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes );
 
 		return (
 			<BlockEditContextProvider value={ value }>
@@ -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 useColors } from './use-colors';

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+import { startCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../inspector-controls';
+import PanelColorSettings from '../panel-color-settings';
+import { useBlockEditContext } from '../block-edit';
+
+const createComponent = memoize( ( attribute, color ) => ( { children } ) =>
+	// Clone children, setting the style attribute from the color configuration,
+	// if not already set explicitly through props.
+	Children.map( children, ( child ) =>
+		cloneElement( child, {
+			style: { [ attribute ]: color, ...child.props.style },
+		} )
+	)
+);
+
+const createSetColor = memoize( ( setAttributes, name ) => ( newColor ) =>
+	setAttributes( { [ name ]: newColor } )
+);
+
+const InspectorControlsColorPanel = ( { title, colorSettings } ) => (
+	<InspectorControls>
+		<PanelColorSettings
+			title={ title }
+			initialOpen={ false }
+			colorSettings={ colorSettings }
+		/>
+	</InspectorControls>
+);
+
+export default function useColors(
+	colorConfigs,
+	deps = [],
+	panelTitle = __( 'Color Settings' )
+) {
+	const { attributes, setAttributes } = useBlockEditContext();
+
+	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,
+			} = {
+				...colorConfig,
+				color: attributes[ colorConfig.name ],
+			};
+
+			// We memoize the non-primitives to avoid unnecessary updates
+			// when they are used as props for other components.
+			acc[ componentName ] = createComponent( attribute, color );
+			acc[ componentName ].color = color;
+			acc[ componentName ].setColor = createSetColor( setAttributes, name );
+
+			colorSettings.push( {
+				value: color,
+				onChange: acc[ componentName ].setColor,
+				label: panelLabel,
+			} );
+
+			return acc;
+		}, {} );
+
+		return {
+			...components,
+			InspectorControlsColorPanel: (
+				<InspectorControlsColorPanel
+					title={ panelTitle }
+					colorSettings={ colorSettings }
+				/>
+			),
+		};
+	}, [ 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';