From ecce34c6b0ad1d7ee7a7a22334b92f8f1f881fc5 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 29 Nov 2021 12:54:32 +0100
Subject: [PATCH 1/4] Refactor the colors UI in the inspector to use the
 navigator pattern

---
 .../block-editor/src/hooks/color-panel.js     |  33 +--
 packages/block-editor/src/hooks/color.js      | 275 ++++++++++++++----
 packages/block-editor/src/hooks/color.scss    |  14 +
 packages/block-editor/src/style.scss          |   1 +
 4 files changed, 248 insertions(+), 75 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/color.scss

diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 9c018f6c649c4..f4bac877f4599 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
  */
 import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
@@ -20,7 +19,6 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
-	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -54,22 +52,19 @@ export default function ColorPanel( {
 	} );
 
 	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
-				showTitle={ showTitle }
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-					/>
-				) }
-			</PanelColorGradientSettings>
-		</InspectorControls>
+		<PanelColorGradientSettings
+			title={ __( 'Color' ) }
+			settings={ settings }
+			showTitle={ false }
+			__experimentalHasMultipleOrigins
+			__experimentalIsRenderedInSidebar
+		>
+			{ enableContrastChecking && (
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+				/>
+			) }
+		</PanelColorGradientSettings>
 	);
 }
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 6dc0fe991a2c6..1b6487a3865ea 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -9,9 +9,25 @@ import { isObject, setWith, clone } from 'lodash';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalView as View,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	FlexItem,
+	ColorIndicator,
+	PanelBody,
+} from '@wordpress/components';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,6 +44,7 @@ import {
 } from '../components/gradients';
 import { cleanEmptyObject } from './utils';
 import ColorPanel from './color-panel';
+import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
@@ -207,6 +224,55 @@ function immutableSet( object, path, value ) {
 	return setWith( object ? clone( object ) : {}, path, value, clone );
 }
 
+function NavigationButton( {
+	path,
+	icon,
+	children,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+			{ icon && (
+				<HStack justify="flex-start">
+					<FlexItem>
+						<Icon icon={ icon } size={ 24 } />
+					</FlexItem>
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
+
+function ScreenHeader( { back, title } ) {
+	return (
+		<VStack spacing={ 2 }>
+			<HStack spacing={ 2 }>
+				<View>
+					<NavigationButton
+						path={ back }
+						icon={
+							<Icon
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								variant="muted"
+							/>
+						}
+						size="small"
+						isBack
+						aria-label={ __( 'Navigate to the previous view' ) }
+					/>
+				</View>
+				<Spacer>
+					<Heading level={ 5 }>{ title }</Heading>
+				</Spacer>
+			</HStack>
+		</VStack>
+	);
+}
+
 /**
  * Inspector control panel containing the color related configuration
  *
@@ -294,6 +360,24 @@ export function ColorEdit( props ) {
 	} else if ( hasGradientColor ) {
 		gradientValue = style?.color?.gradient;
 	}
+	const backgroundValue = hasBackgroundColor
+		? getColorObjectByAttributeValues(
+				allSolids,
+				backgroundColor,
+				style?.color?.background
+		  ).color
+		: undefined;
+	const textColorValue = getColorObjectByAttributeValues(
+		allSolids,
+		textColor,
+		style?.color?.text
+	).color;
+	const linkColorValue = hasLinkColor
+		? getLinkColorFromAttributeValue(
+				allSolids,
+				style?.elements?.link?.color?.text
+		  )
+		: undefined;
 
 	const onChangeColor = ( name ) => ( value ) => {
 		const colorObject = getColorObjectByColorValue( allSolids, value );
@@ -371,61 +455,140 @@ export function ColorEdit( props ) {
 	};
 
 	return (
-		<ColorPanel
-			enableContrastChecking={
-				// Turn on contrast checker for web only since it's not supported on mobile yet.
-				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
-			}
-			clientId={ props.clientId }
-			settings={ [
-				...( hasTextColor
-					? [
-							{
-								label: __( 'Text color' ),
-								onColorChange: onChangeColor( 'text' ),
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									textColor,
-									style?.color?.text
-								).color,
-							},
-					  ]
-					: [] ),
-				...( hasBackgroundColor || hasGradientColor
-					? [
-							{
-								label: __( 'Background color' ),
-								onColorChange: hasBackgroundColor
-									? onChangeColor( 'background' )
-									: undefined,
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									backgroundColor,
-									style?.color?.background
-								).color,
-								gradientValue,
-								onGradientChange: hasGradientColor
-									? onChangeGradient
-									: undefined,
-							},
-					  ]
-					: [] ),
-				...( hasLinkColor
-					? [
-							{
-								label: __( 'Link Color' ),
-								onColorChange: onChangeLinkColor,
-								colorValue: getLinkColorFromAttributeValue(
-									allSolids,
-									style?.elements?.link?.color?.text
-								),
-								clearable: !! style?.elements?.link?.color
-									?.text,
-							},
-					  ]
-					: [] ),
-			] }
-		/>
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Colors' ) }
+				className="block-editor__hooks-colors-panel"
+			>
+				<NavigatorProvider initialPath="/">
+					<NavigatorScreen path="/">
+						<ItemGroup isBordered isSeparated>
+							{ ( hasBackgroundColor || hasGradientColor ) && (
+								<NavigationButton path="/background">
+									<HStack justify="flex-start">
+										<FlexItem>
+											<ColorIndicator
+												colorValue={
+													gradientValue ??
+													backgroundValue
+												}
+											/>
+										</FlexItem>
+										<FlexItem>
+											{ __( 'Background' ) }
+										</FlexItem>
+									</HStack>
+								</NavigationButton>
+							) }
+							{ hasTextColor && (
+								<NavigationButton path="/text">
+									<HStack justify="flex-start">
+										<FlexItem>
+											<ColorIndicator
+												colorValue={ textColorValue }
+											/>
+										</FlexItem>
+										<FlexItem>{ __( 'Text' ) }</FlexItem>
+									</HStack>
+								</NavigationButton>
+							) }
+							{ hasLinkColor && (
+								<NavigationButton path="/link">
+									<HStack justify="flex-start">
+										<FlexItem>
+											<ColorIndicator
+												colorValue={ linkColorValue }
+											/>
+										</FlexItem>
+										<FlexItem>{ __( 'Links' ) }</FlexItem>
+									</HStack>
+								</NavigationButton>
+							) }
+						</ItemGroup>
+					</NavigatorScreen>
+
+					{ ( hasBackgroundColor || hasGradientColor ) && (
+						<NavigatorScreen path="/background">
+							<ScreenHeader
+								back="/"
+								title={ __( 'Background' ) }
+							/>
+							<ColorPanel
+								enableContrastChecking={
+									// Turn on contrast checker for web only since it's not supported on mobile yet.
+									Platform.OS === 'web' &&
+									! gradient &&
+									! style?.color?.gradient
+								}
+								clientId={ props.clientId }
+								settings={ [
+									{
+										label: __( 'Background color' ),
+										onColorChange: hasBackgroundColor
+											? onChangeColor( 'background' )
+											: undefined,
+										colorValue: backgroundValue,
+										gradientValue,
+										onGradientChange: hasGradientColor
+											? onChangeGradient
+											: undefined,
+									},
+								] }
+							/>
+						</NavigatorScreen>
+					) }
+
+					{ hasTextColor && (
+						<NavigatorScreen path="/text">
+							<ScreenHeader back="/" title={ __( 'Text' ) } />
+							<ColorPanel
+								enableContrastChecking={
+									// Turn on contrast checker for web only since it's not supported on mobile yet.
+									Platform.OS === 'web' &&
+									! gradient &&
+									! style?.color?.gradient
+								}
+								clientId={ props.clientId }
+								settings={ [
+									{
+										label: __( 'Text color' ),
+										onColorChange: onChangeColor( 'text' ),
+										colorValue: textColorValue,
+									},
+								] }
+							/>
+						</NavigatorScreen>
+					) }
+
+					{ hasLinkColor && (
+						<NavigatorScreen path="/link">
+							<ScreenHeader back="/" title={ __( 'Link' ) } />
+							<ColorPanel
+								enableContrastChecking={
+									// Turn on contrast checker for web only since it's not supported on mobile yet.
+									Platform.OS === 'web' &&
+									! gradient &&
+									! style?.color?.gradient
+								}
+								clientId={ props.clientId }
+								settings={ [
+									{
+										label: __( 'Link Color' ),
+										onColorChange: onChangeLinkColor,
+										colorValue: getLinkColorFromAttributeValue(
+											allSolids,
+											style?.elements?.link?.color?.text
+										),
+										clearable: !! style?.elements?.link
+											?.color?.text,
+									},
+								] }
+							/>
+						</NavigatorScreen>
+					) }
+				</NavigatorProvider>
+			</PanelBody>
+		</InspectorControls>
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
new file mode 100644
index 0000000000000..46a2704930faf
--- /dev/null
+++ b/packages/block-editor/src/hooks/color.scss
@@ -0,0 +1,14 @@
+.block-editor__hooks-colors-panel .component-color-indicator {
+	margin-left: 0;
+	display: block;
+	border-radius: 50%;
+	border: 0;
+	height: 24px;
+	width: 24px;
+	padding: 0;
+	background-image:
+		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+	background-position: 0 0, 25px 25px;
+	background-size: calc(2 * 5px) calc(2 * 5px);
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 6f20a3b1b2901..fae1c7053c8e6 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -57,6 +57,7 @@
 @import "./hooks/border.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
+@import "./hooks/color.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";

From 57de1332c62503cf7000aa02583b8500ae3b81ad Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 1 Dec 2021 12:54:31 +0100
Subject: [PATCH 2/4] Try adapting the padding to work in the classic
 inspector.

---
 packages/block-editor/src/hooks/color.scss | 35 ++++++++++++++--------
 packages/components/src/panel/style.scss   |  5 ++++
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index 46a2704930faf..d83bf0160588f 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -1,14 +1,23 @@
-.block-editor__hooks-colors-panel .component-color-indicator {
-	margin-left: 0;
-	display: block;
-	border-radius: 50%;
-	border: 0;
-	height: 24px;
-	width: 24px;
-	padding: 0;
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 25px 25px;
-	background-size: calc(2 * 5px) calc(2 * 5px);
+.block-editor__hooks-colors-panel {
+
+	// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
+	.components-navigator-screen {
+		overflow-x: visible;
+	}
+
+	// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
+	.component-color-indicator {
+		margin-left: 0;
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: 24px;
+		width: 24px;
+		padding: 0;
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 25px 25px;
+		background-size: calc(2 * 5px) calc(2 * 5px);
+	}
 }
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index 890a72c6add48..0c4fbc98da46f 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -28,6 +28,11 @@
 	&.is-opened {
 		padding: $grid-unit-20;
 	}
+
+	// Don't cascade the padding into nested panels.
+	.components-panel__body {
+		padding: 0;
+	}
 }
 
 .components-panel__header {

From 8a0b5e21eee4d0f44d7cd299d7eb08dd9f272150 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 2 Dec 2021 10:07:50 +0100
Subject: [PATCH 3/4] Use dropdown menus for nested color controls

---
 .../block-editor/src/hooks/color-panel.js     |  25 +-
 packages/block-editor/src/hooks/color.js      | 250 +++++++-----------
 packages/block-editor/src/hooks/color.scss    |   4 +
 3 files changed, 111 insertions(+), 168 deletions(-)

diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index f4bac877f4599..2fdd88fa4dd18 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -2,27 +2,31 @@
  * 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 { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import ColorGradientControl from '../components/colors-gradients/control';
+import useCommonSingleMultipleSelects from '../components/colors-gradients/use-common-single-multiple-selects';
+import useSetting from '../components/use-setting';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
 
 export default function ColorPanel( {
-	settings,
+	setting,
 	clientId,
 	enableContrastChecking = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const ref = useBlockRef( clientId );
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	colorGradientSettings.colors = useSetting( 'color.palette' );
+	colorGradientSettings.gradients = useSetting( 'color.gradients' );
 
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
@@ -52,19 +56,18 @@ export default function ColorPanel( {
 	} );
 
 	return (
-		<PanelColorGradientSettings
-			title={ __( 'Color' ) }
-			settings={ settings }
-			showTitle={ false }
-			__experimentalHasMultipleOrigins
-			__experimentalIsRenderedInSidebar
-		>
+		<div className="block-editor-panel-color-gradient-settings">
+			<ColorGradientControl
+				showTitle={ false }
+				{ ...colorGradientSettings }
+				{ ...setting }
+			/>
 			{ enableContrastChecking && (
 				<ContrastChecker
 					backgroundColor={ detectedBackgroundColor }
 					textColor={ detectedColor }
 				/>
 			) }
-		</PanelColorGradientSettings>
+		</div>
 	);
 }
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 1b6487a3865ea..df8f86144272c 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -9,25 +9,18 @@ import { isObject, setWith, clone } from 'lodash';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	__experimentalView as View,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHeading as Heading,
 	FlexItem,
 	ColorIndicator,
 	PanelBody,
+	Dropdown,
 } from '@wordpress/components';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -224,55 +217,6 @@ function immutableSet( object, path, value ) {
 	return setWith( object ? clone( object ) : {}, path, value, clone );
 }
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
-	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
-			{ icon && (
-				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
-					<FlexItem>{ children }</FlexItem>
-				</HStack>
-			) }
-			{ ! icon && children }
-		</Item>
-	);
-}
-
-function ScreenHeader( { back, title } ) {
-	return (
-		<VStack spacing={ 2 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationButton
-						path={ back }
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
-						size="small"
-						isBack
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
-				</Spacer>
-			</HStack>
-		</VStack>
-	);
-}
-
 /**
  * Inspector control panel containing the color related configuration
  *
@@ -460,28 +404,58 @@ export function ColorEdit( props ) {
 				title={ __( 'Colors' ) }
 				className="block-editor__hooks-colors-panel"
 			>
-				<NavigatorProvider initialPath="/">
-					<NavigatorScreen path="/">
-						<ItemGroup isBordered isSeparated>
-							{ ( hasBackgroundColor || hasGradientColor ) && (
-								<NavigationButton path="/background">
-									<HStack justify="flex-start">
-										<FlexItem>
-											<ColorIndicator
-												colorValue={
-													gradientValue ??
-													backgroundValue
-												}
-											/>
-										</FlexItem>
-										<FlexItem>
-											{ __( 'Background' ) }
-										</FlexItem>
-									</HStack>
-								</NavigationButton>
+				<ItemGroup isBordered isSeparated>
+					{ ( hasBackgroundColor || hasGradientColor ) && (
+						<Dropdown
+							position="middle left"
+							renderToggle={ ( { onToggle } ) => {
+								return (
+									<Item onClick={ onToggle }>
+										<HStack justify="flex-start">
+											<FlexItem>
+												<ColorIndicator
+													colorValue={
+														gradientValue ??
+														backgroundValue
+													}
+												/>
+											</FlexItem>
+											<FlexItem>
+												{ __( 'Background' ) }
+											</FlexItem>
+										</HStack>
+									</Item>
+								);
+							} }
+							renderContent={ () => (
+								<ColorPanel
+									enableContrastChecking={
+										// Turn on contrast checker for web only since it's not supported on mobile yet.
+										Platform.OS === 'web' &&
+										! gradient &&
+										! style?.color?.gradient
+									}
+									clientId={ props.clientId }
+									setting={ {
+										label: __( 'Background color' ),
+										onColorChange: hasBackgroundColor
+											? onChangeColor( 'background' )
+											: undefined,
+										colorValue: backgroundValue,
+										gradientValue,
+										onGradientChange: hasGradientColor
+											? onChangeGradient
+											: undefined,
+									} }
+								/>
 							) }
-							{ hasTextColor && (
-								<NavigationButton path="/text">
+						/>
+					) }
+					{ hasTextColor && (
+						<Dropdown
+							position="middle left"
+							renderToggle={ ( { onToggle } ) => (
+								<Item onClick={ onToggle }>
 									<HStack justify="flex-start">
 										<FlexItem>
 											<ColorIndicator
@@ -490,10 +464,31 @@ export function ColorEdit( props ) {
 										</FlexItem>
 										<FlexItem>{ __( 'Text' ) }</FlexItem>
 									</HStack>
-								</NavigationButton>
+								</Item>
 							) }
-							{ hasLinkColor && (
-								<NavigationButton path="/link">
+							renderContent={ () => (
+								<ColorPanel
+									enableContrastChecking={
+										// Turn on contrast checker for web only since it's not supported on mobile yet.
+										Platform.OS === 'web' &&
+										! gradient &&
+										! style?.color?.gradient
+									}
+									clientId={ props.clientId }
+									setting={ {
+										label: __( 'Text color' ),
+										onColorChange: onChangeColor( 'text' ),
+										colorValue: textColorValue,
+									} }
+								/>
+							) }
+						/>
+					) }
+					{ hasLinkColor && (
+						<Dropdown
+							position="middle left"
+							renderToggle={ ( { onToggle } ) => (
+								<Item onClick={ onToggle }>
 									<HStack justify="flex-start">
 										<FlexItem>
 											<ColorIndicator
@@ -502,77 +497,18 @@ export function ColorEdit( props ) {
 										</FlexItem>
 										<FlexItem>{ __( 'Links' ) }</FlexItem>
 									</HStack>
-								</NavigationButton>
+								</Item>
 							) }
-						</ItemGroup>
-					</NavigatorScreen>
-
-					{ ( hasBackgroundColor || hasGradientColor ) && (
-						<NavigatorScreen path="/background">
-							<ScreenHeader
-								back="/"
-								title={ __( 'Background' ) }
-							/>
-							<ColorPanel
-								enableContrastChecking={
-									// Turn on contrast checker for web only since it's not supported on mobile yet.
-									Platform.OS === 'web' &&
-									! gradient &&
-									! style?.color?.gradient
-								}
-								clientId={ props.clientId }
-								settings={ [
-									{
-										label: __( 'Background color' ),
-										onColorChange: hasBackgroundColor
-											? onChangeColor( 'background' )
-											: undefined,
-										colorValue: backgroundValue,
-										gradientValue,
-										onGradientChange: hasGradientColor
-											? onChangeGradient
-											: undefined,
-									},
-								] }
-							/>
-						</NavigatorScreen>
-					) }
-
-					{ hasTextColor && (
-						<NavigatorScreen path="/text">
-							<ScreenHeader back="/" title={ __( 'Text' ) } />
-							<ColorPanel
-								enableContrastChecking={
-									// Turn on contrast checker for web only since it's not supported on mobile yet.
-									Platform.OS === 'web' &&
-									! gradient &&
-									! style?.color?.gradient
-								}
-								clientId={ props.clientId }
-								settings={ [
-									{
-										label: __( 'Text color' ),
-										onColorChange: onChangeColor( 'text' ),
-										colorValue: textColorValue,
-									},
-								] }
-							/>
-						</NavigatorScreen>
-					) }
-
-					{ hasLinkColor && (
-						<NavigatorScreen path="/link">
-							<ScreenHeader back="/" title={ __( 'Link' ) } />
-							<ColorPanel
-								enableContrastChecking={
-									// Turn on contrast checker for web only since it's not supported on mobile yet.
-									Platform.OS === 'web' &&
-									! gradient &&
-									! style?.color?.gradient
-								}
-								clientId={ props.clientId }
-								settings={ [
-									{
+							renderContent={ () => (
+								<ColorPanel
+									enableContrastChecking={
+										// Turn on contrast checker for web only since it's not supported on mobile yet.
+										Platform.OS === 'web' &&
+										! gradient &&
+										! style?.color?.gradient
+									}
+									clientId={ props.clientId }
+									setting={ {
 										label: __( 'Link Color' ),
 										onColorChange: onChangeLinkColor,
 										colorValue: getLinkColorFromAttributeValue(
@@ -581,12 +517,12 @@ export function ColorEdit( props ) {
 										),
 										clearable: !! style?.elements?.link
 											?.color?.text,
-									},
-								] }
-							/>
-						</NavigatorScreen>
+									} }
+								/>
+							) }
+						/>
 					) }
-				</NavigatorProvider>
+				</ItemGroup>
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index d83bf0160588f..f2c7aef5ce730 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -1,5 +1,9 @@
 .block-editor__hooks-colors-panel {
 
+	.components-dropdown {
+		display: block;
+	}
+
 	// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
 	.components-navigator-screen {
 		overflow-x: visible;

From 79d75e0c3b051e06c0dbb63689a49b856ae53104 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 2 Dec 2021 11:26:49 +0100
Subject: [PATCH 4/4] Tweak the popover position

---
 packages/block-editor/src/hooks/color.js   | 6 +++---
 packages/block-editor/src/hooks/color.scss | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index df8f86144272c..6648c042028ed 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -407,7 +407,7 @@ export function ColorEdit( props ) {
 				<ItemGroup isBordered isSeparated>
 					{ ( hasBackgroundColor || hasGradientColor ) && (
 						<Dropdown
-							position="middle left"
+							contentClassName="block-editor__hooks-colors-panel__dropdown"
 							renderToggle={ ( { onToggle } ) => {
 								return (
 									<Item onClick={ onToggle }>
@@ -453,7 +453,7 @@ export function ColorEdit( props ) {
 					) }
 					{ hasTextColor && (
 						<Dropdown
-							position="middle left"
+							contentClassName="block-editor__hooks-colors-panel__dropdown"
 							renderToggle={ ( { onToggle } ) => (
 								<Item onClick={ onToggle }>
 									<HStack justify="flex-start">
@@ -486,7 +486,7 @@ export function ColorEdit( props ) {
 					) }
 					{ hasLinkColor && (
 						<Dropdown
-							position="middle left"
+							contentClassName="block-editor__hooks-colors-panel__dropdown"
 							renderToggle={ ( { onToggle } ) => (
 								<Item onClick={ onToggle }>
 									<HStack justify="flex-start">
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index f2c7aef5ce730..e7ff48d9b0643 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -1,5 +1,4 @@
 .block-editor__hooks-colors-panel {
-
 	.components-dropdown {
 		display: block;
 	}
@@ -25,3 +24,10 @@
 		background-size: calc(2 * 5px) calc(2 * 5px);
 	}
 }
+
+@include break-medium() {
+	.block-editor__hooks-colors-panel__dropdown .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+	}
+}