Switch color block support to use ToolsPanel

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

@@ -67,6 +67,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
 				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="color"
+					label={ __( 'Color' ) }
+				/>
 				<InspectorControls.Slot
 					__experimentalGroup="typography"
 					label={ __( 'Typography' ) }
@@ -139,6 +143,11 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				__experimentalGroup="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="typography"
 				label={ __( 'Typography' ) }

packages/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from './control';
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+
+export default function ToolsPanelColorDropdown( {
+	settings,
+	enableAlpha,
+	...otherProps
+} ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const controlSettings = {
+		...colorGradientSettings,
+		clearable: false,
+		enableAlpha,
+		label: settings.label,
+		onColorChange: settings.onColorChange,
+		onGradientChange: settings.onGradientChange,
+		colorValue: settings.colorValue,
+		gradientValue: settings.gradientValue,
+	};
+	const selectedColor = settings.gradientValue ?? settings.colorValue;
+
+	return (
+		<ToolsPanelItem
+			hasValue={ settings.hasValue }
+			label={ settings.label }
+			onDeselect={ settings.onDeselect }
+			isShownByDefault={ settings.isShownByDefault }
+			resetAllFilter={ settings.resetAllFilter }
+			{ ...otherProps }
+			className="block-editor-tools-panel-color-gradient-settings__item"
+		>
+			<Dropdown
+				className="block-editor-tools-panel-color-dropdown"
+				contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						className={ classnames(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						) }
+					>
+						<HStack justify="flex-start">
+							<ColorIndicator
+								className="block-editor-panel-color-gradient-settings__color-indicator"
+								colorValue={ selectedColor }
+							/>
+							<FlexItem>{ settings.label }</FlexItem>
+						</HStack>
+					</Button>
+				) }
+				renderContent={ () => (
+					<ColorGradientControl
+						showTitle={ false }
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
+						enableAlpha
+						{ ...controlSettings }
+					/>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}

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

@@ -51,6 +51,7 @@ export { default as __experimentalTextTransformControl } from './text-transform-
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
+export { default as __experimentalToolsPanelColorDropdown } from './colors-gradients/tools-panel-color-dropdown';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,

packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js

@@ -70,6 +70,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/inspector-controls/groups.js

@@ -6,6 +6,7 @@ import { createSlotFill } from '@wordpress/components';
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
+const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -17,6 +18,7 @@ const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
+	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

packages/block-editor/src/hooks/border-color.js

@@ -68,7 +68,7 @@ export function BorderColorEdit( props ) {
 
 	// Detect changes in the color attributes and update the colorValue to keep the
 	// UI in sync. This is necessary for situations when border controls interact with
-	// eachother: eg, setting the border width to zero causes the color and style
+	// each other: eg, setting the border width to zero causes the color and style
 	// selections to be cleared.
 	useEffect( () => {
 		setColorValue(

packages/block-editor/src/hooks/color-panel.js

@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
+import ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';
 import InspectorControls from '../components/inspector-controls';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
@@ -21,7 +20,6 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
-	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -55,24 +53,22 @@ export default function ColorPanel( {
 	} );
 
 	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
-				showTitle={ showTitle }
-				enableAlpha={ enableAlpha }
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-						enableAlphaChecker={ enableAlpha }
-					/>
-				) }
-			</PanelColorGradientSettings>
+		<InspectorControls __experimentalGroup="color">
+			{ settings.map( ( setting, index ) => (
+				<ToolsPanelColorDropdown
+					key={ index }
+					settings={ setting }
+					panelId={ clientId }
+					enableAlpha={ enableAlpha }
+				/>
+			) ) }
+			{ enableContrastChecking && (
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+					enableAlphaChecker={ enableAlpha }
+				/>
+			) }
 		</InspectorControls>
 	);
 }