diff --git a/packages/block-editor/src/components/colors/README.md b/packages/block-editor/src/components/colors/README.md
index a722cab38daacb..ad91bfa710b807 100644
--- a/packages/block-editor/src/components/colors/README.md
+++ b/packages/block-editor/src/components/colors/README.md
@@ -35,42 +35,6 @@ export default compose(
MyColorfulComponent
);
```
-
-## `useColors` hook
-
-Provides the functionality of `withColors` as a React hook, see [React's hook overview](https://reactjs.org/docs/hooks-overview.html) for additional details on using hooks.
-
-It takes an array of color configuration objects for its first parameter. The second parameter is an optional hooks dependency array for cases where you have closures in your configuration objects, and the third is an optional string to overwrite the default panel title, `__( 'Color Settings' )`.
-
-### Usage
-
-```jsx
-import { __experimentalUseColors } from '@wordpress/block-editor';
-
-function MyColorfulComponent() {
- const { TextColor } = __experimentalUseColors(
- [ { name: 'textColor', property: 'color' } ],
- {
- contrastCheckers: [
- {
- textColor: true,
- },
- ],
- }
- );
-
- return (
- <>
- { /* Colorful content */ }
- >
- );
-}
-```
-
-### Note on sunsetting.
-
-The functionality provided by the `useColors` hook is also available in the form of a—[also currently experimental](https://github.com/WordPress/gutenberg/pull/21021)—support key, `__experimentalColor`. It's expected that the support key version of this feature sunsets the hook.
-
## Related components.
- [`PanelColorSettings`](https://github.com/WordPress/gutenberg/blob/bb00ad891db9937862b16867dcebd2a4d830ea86/packages/block-editor/src/components/panel-color-settings/index.js).
diff --git a/packages/block-editor/src/components/colors/index.js b/packages/block-editor/src/components/colors/index.js
index 91cbb9beca7261..2172d3e13be655 100644
--- a/packages/block-editor/src/components/colors/index.js
+++ b/packages/block-editor/src/components/colors/index.js
@@ -4,4 +4,3 @@ export {
getColorObjectByColorValue,
} from './utils';
export { createCustomColorsHOC, default as withColors } from './with-colors';
-export { default as __experimentalUseColors } from './use-colors';
diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
deleted file mode 100644
index bec2f7ff83c7e4..00000000000000
--- a/packages/block-editor/src/components/colors/use-colors.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-import classnames from 'classnames';
-import { kebabCase, camelCase, castArray, startCase, isFunction } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
- useCallback,
- useMemo,
- useEffect,
- Children,
- cloneElement,
- useState,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import InspectorControls from '../inspector-controls';
-import { useBlockEditContext } from '../block-edit';
-import ColorPanel from './color-panel';
-import useSetting from '../use-setting';
-import { store as blockEditorStore } from '../../store';
-
-function getComputedStyle( node ) {
- return node.ownerDocument.defaultView.getComputedStyle( node );
-}
-
-const DEFAULT_COLORS = [];
-
-const COMMON_COLOR_LABELS = {
- textColor: __( 'Text color' ),
- backgroundColor: __( 'Background color' ),
-};
-
-const InspectorControlsColorPanel = ( props ) => (
-
-
-
-);
-
-export default function __experimentalUseColors(
- colorConfigs,
- {
- panelTitle = __( 'Color' ),
- colorPanelProps,
- contrastCheckers,
- panelChildren,
- colorDetector: {
- targetRef,
- backgroundColorTargetRef = targetRef,
- textColorTargetRef = targetRef,
- } = {},
- } = {
- panelTitle: __( 'Color' ),
- },
- deps = []
-) {
- const { clientId } = useBlockEditContext();
- const settingsColors = useSetting( 'color.palette' ) || DEFAULT_COLORS;
- const { attributes } = useSelect(
- ( select ) => {
- const { getBlockAttributes } = select( blockEditorStore );
- return {
- attributes: getBlockAttributes( clientId ),
- };
- },
- [ clientId ]
- );
- const { updateBlockAttributes } = useDispatch( blockEditorStore );
- const setAttributes = useCallback(
- ( newAttributes ) => updateBlockAttributes( clientId, newAttributes ),
- [ updateBlockAttributes, clientId ]
- );
-
- const createComponent = useMemo(
- () =>
- memoize(
- (
- name,
- property,
- className,
- color,
- colorValue,
- customColor
- ) => ( {
- children,
- className: componentClassName = '',
- style: componentStyle = {},
- } ) => {
- let colorStyle = {};
- if ( color ) {
- colorStyle = { [ property ]: colorValue };
- } else if ( customColor ) {
- colorStyle = { [ property ]: customColor };
- }
- const extraProps = {
- className: classnames( componentClassName, {
- [ `has-${ kebabCase( color ) }-${ kebabCase(
- property
- ) }` ]: color,
- [ className || `has-${ kebabCase( name ) }` ]:
- color || customColor,
- } ),
- style: {
- ...colorStyle,
- ...componentStyle,
- },
- };
-
- if ( isFunction( children ) ) {
- return children( extraProps );
- }
-
- return (
- // Clone children, setting the style property from the color configuration,
- // if not already set explicitly through props.
- Children.map( children, ( child ) => {
- return cloneElement( child, {
- className: classnames(
- child.props.className,
- extraProps.className
- ),
- style: {
- ...extraProps.style,
- ...( child.props.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 ]
- );
-
- const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
- const [ detectedColor, setDetectedColor ] = useState();
-
- useEffect( () => {
- if ( ! contrastCheckers ) {
- return undefined;
- }
- let needsBackgroundColor = false;
- let needsColor = false;
- for ( const { backgroundColor, textColor } of castArray(
- contrastCheckers
- ) ) {
- if ( ! needsBackgroundColor ) {
- needsBackgroundColor = backgroundColor === true;
- }
- if ( ! needsColor ) {
- needsColor = textColor === true;
- }
- if ( needsBackgroundColor && needsColor ) {
- break;
- }
- }
-
- if ( needsColor ) {
- setDetectedColor(
- getComputedStyle( textColorTargetRef.current ).color
- );
- }
-
- if ( needsBackgroundColor ) {
- let backgroundColorNode = backgroundColorTargetRef.current;
- let backgroundColor = getComputedStyle( backgroundColorNode )
- .backgroundColor;
- while (
- backgroundColor === 'rgba(0, 0, 0, 0)' &&
- backgroundColorNode.parentNode &&
- backgroundColorNode.parentNode.nodeType ===
- backgroundColorNode.parentNode.ELEMENT_NODE
- ) {
- backgroundColorNode = backgroundColorNode.parentNode;
- backgroundColor = getComputedStyle( backgroundColorNode )
- .backgroundColor;
- }
-
- setDetectedBackgroundColor( backgroundColor );
- }
- }, [
- colorConfigs.reduce(
- ( acc, colorConfig ) =>
- `${ acc } | ${ attributes[ colorConfig.name ] } | ${
- attributes[ camelCase( `custom ${ colorConfig.name }` ) ]
- }`,
- ''
- ),
- ...deps,
- ] );
-
- return useMemo( () => {
- const colorSettings = {};
-
- const components = colorConfigs.reduce( ( acc, colorConfig ) => {
- if ( typeof colorConfig === 'string' ) {
- colorConfig = { name: colorConfig };
- }
- const {
- name, // E.g. 'backgroundColor'.
- property = name, // E.g. 'backgroundColor'.
- className,
-
- panelLabel = colorConfig.label ||
- COMMON_COLOR_LABELS[ name ] ||
- startCase( name ), // E.g. 'Background color'.
- componentName = startCase( name ).replace( /\s/g, '' ), // E.g. 'BackgroundColor'.
-
- color = colorConfig.color,
- colors = settingsColors,
- } = {
- ...colorConfig,
- color: attributes[ colorConfig.name ],
- };
-
- const customColor = attributes[ camelCase( `custom ${ name }` ) ];
- // We memoize the non-primitives to avoid unnecessary updates
- // when they are used as props for other components.
- const _color = customColor
- ? undefined
- : colors.find( ( __color ) => __color.slug === color );
- acc[ componentName ] = createComponent(
- name,
- property,
- className,
- color,
- _color && _color.color,
- customColor
- );
- acc[ componentName ].displayName = componentName;
- acc[ componentName ].color = customColor
- ? customColor
- : _color && _color.color;
- acc[ componentName ].slug = color;
- acc[ componentName ].setColor = createSetColor( name, colors );
-
- colorSettings[ componentName ] = {
- value: _color
- ? _color.color
- : attributes[ camelCase( `custom ${ name }` ) ],
- onChange: acc[ componentName ].setColor,
- label: panelLabel,
- colors,
- };
- // 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[ componentName ].colors;
- }
-
- return acc;
- }, {} );
-
- const wrappedColorPanelProps = {
- title: panelTitle,
- initialOpen: false,
- colorSettings,
- colorPanelProps,
- contrastCheckers,
- detectedBackgroundColor,
- detectedColor,
- panelChildren,
- };
- return {
- ...components,
- ColorPanel: ,
- InspectorControlsColorPanel: (
-
- ),
- };
- }, [
- attributes,
- setAttributes,
- detectedColor,
- detectedBackgroundColor,
- ...deps,
- ] );
-}