From 58bfa86189b000c768af0ebe0b592577d7a0c755 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 13 Oct 2021 10:43:51 +0100
Subject: [PATCH 1/5] Remove the duplicated title in background, text and link
 views in Global Styles

---
 .../components/colors-gradients/control.js    | 27 ++++++++++---------
 .../panel-color-gradient-settings.js          |  1 +
 .../src/components/global-styles/header.js    |  2 +-
 .../global-styles/screen-background-color.js  | 13 ++++++++-
 .../global-styles/screen-link-color.js        | 11 +++++++-
 .../global-styles/screen-text-color.js        | 11 +++++++-
 .../src/components/global-styles/style.scss   | 17 +++++++-----
 7 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 8ec461342d0936..fc7ab84eed3d32 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -90,6 +90,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	gradientValue,
 	clearable,
+	showTitle = true,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -112,18 +113,20 @@ function ColorGradientControlInner( {
 		>
 			<fieldset>
 				<VStack space={ 3 }>
-					<legend>
-						<div className="block-editor-color-gradient-control__color-indicator">
-							<BaseControl.VisualLabel>
-								<VisualLabel
-									currentTab={ currentTab }
-									label={ label }
-									colorValue={ colorValue }
-									gradientValue={ gradientValue }
-								/>
-							</BaseControl.VisualLabel>
-						</div>
-					</legend>
+					{ showTitle && (
+						<legend>
+							<div className="block-editor-color-gradient-control__color-indicator">
+								<BaseControl.VisualLabel>
+									<VisualLabel
+										currentTab={ currentTab }
+										label={ label }
+										colorValue={ colorValue }
+										gradientValue={ gradientValue }
+									/>
+								</BaseControl.VisualLabel>
+							</div>
+						</legend>
+					) }
 					{ canChooseAColor && canChooseAGradient && (
 						<ToggleGroupControl
 							value={ currentTab }
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 36ef7ac2ac1ca0..84c5adad96fe50 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -133,6 +133,7 @@ export const PanelColorGradientSettingsInner = ( {
 		>
 			{ settings.map( ( setting, index ) => (
 				<ColorGradientControl
+					showTitle={ showTitle }
 					key={ index }
 					{ ...{
 						colors,
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index f380aa76330831..41969af30d9a93 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -18,7 +18,7 @@ import NavigationButton from './navigation-button';
 
 function ScreenHeader( { back, title, description } ) {
 	return (
-		<VStack spacing={ 2 }>
+		<VStack spacing={ 2 } className="edit-site-global-styles-header">
 			<HStack spacing={ 2 }>
 				<View>
 					<NavigationButton
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index 8a0429c05b99b0..b9ae5b03b0ab6b 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -3,6 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import {
+	ColorIndicator,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -80,7 +84,14 @@ function ScreenBackgroundColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={ __( 'Background' ) }
+				title={
+					<HStack justify="flex-start" spacing={ 3 }>
+						<span>{ __( 'Background' ) }</span>
+						<ColorIndicator
+							colorValue={ gradient ?? backgroundColor }
+						/>
+					</HStack>
+				}
 				description={ __(
 					'Set a background color or gradient for the whole website.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 8f2a25f4f8e0b3..c2c6f53c3ff7e8 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -3,6 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import {
+	ColorIndicator,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -50,7 +54,12 @@ function ScreenLinkColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={ __( 'Links' ) }
+				title={
+					<HStack justify="flex-start" spacing={ 3 }>
+						<span>{ __( 'Links' ) }</span>
+						<ColorIndicator colorValue={ linkColor } />
+					</HStack>
+				}
 				description={ __(
 					'Set the default color used for links across the site.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index a7d98ed1c29992..6f54ad78cbd1ba 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -3,6 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import {
+	ColorIndicator,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -42,7 +46,12 @@ function ScreenTextColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={ __( 'Text' ) }
+				title={
+					<HStack justify="flex-start" spacing={ 3 }>
+						<span>{ __( 'Text' ) }</span>
+						<ColorIndicator colorValue={ color } />
+					</HStack>
+				}
 				description={ __(
 					'Set the default color used for text across the site.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ebaae4a24a9900..1801cc03c63785 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -19,16 +19,21 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
-		display: block;
-		border-radius: 50%;
-		border: 0;
-		height: 24px;
-		width: 24px;
 		margin-left: 0;
-		padding: 0;
 	}
 }
 
+
+.edit-site-global-styles-screen-colors .component-color-indicator,
+.edit-site-global-styles-header .component-color-indicator {
+	display: block;
+	border-radius: 50%;
+	border: 0;
+	height: 24px;
+	width: 24px;
+	padding: 0;
+}
+
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }

From 2eb270066f2026b3b6c15c393a09a2f681f3d629 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 18 Oct 2021 10:53:25 +0100
Subject: [PATCH 2/5] Remove the custom color link in favor of a clickable
 color indicator

---
 .../components/colors-gradients/control.js    | 59 +------------------
 .../components/src/color-palette/index.js     | 50 +++++++++-------
 .../components/src/color-palette/style.scss   | 18 ++++++
 packages/components/src/style.scss            |  1 +
 4 files changed, 50 insertions(+), 78 deletions(-)
 create mode 100644 packages/components/src/color-palette/style.scss

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index fc7ab84eed3d32..534c9e3113f3f5 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -13,25 +13,16 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	ColorIndicator,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(Color: %s)' );
-
-// translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-const gradientIndicatorAriaLabel = __( '(Gradient: %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -39,45 +30,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-function VisualLabel( {
-	colors,
-	gradients,
-	label,
-	currentTab,
-	colorValue,
-	gradientValue,
-} ) {
-	let value, ariaLabel;
-	if ( currentTab === 'color' ) {
-		if ( colorValue ) {
-			value = colorValue;
-			const colorObject = getColorObjectByColorValue( colors, value );
-			const colorName = colorObject && colorObject.name;
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
-	} else if ( currentTab === 'gradient' && gradientValue ) {
-		value = gradientValue;
-		const gradientObject = __experimentalGetGradientObjectByGradientValue(
-			gradients,
-			value
-		);
-		const gradientName = gradientObject && gradientObject.name;
-		ariaLabel = sprintf(
-			gradientIndicatorAriaLabel,
-			gradientName || value
-		);
-	}
-
-	return (
-		<>
-			{ label }
-			{ !! value && (
-				<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />
-			) }
-		</>
-	);
-}
-
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -112,17 +64,12 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<VStack space={ 3 }>
+				<VStack spacing={ 1 }>
 					{ showTitle && (
 						<legend>
 							<div className="block-editor-color-gradient-control__color-indicator">
 								<BaseControl.VisualLabel>
-									<VisualLabel
-										currentTab={ currentTab }
-										label={ label }
-										colorValue={ colorValue }
-										gradientValue={ gradientValue }
-									/>
+									{ label }
 								</BaseControl.VisualLabel>
 							</div>
 						</legend>
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index c3e503edd58dd1..098d8c979171ee 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -15,8 +15,10 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -76,33 +78,37 @@ export default function ColorPalette( {
 	);
 
 	return (
-		<CircularOptionPicker
-			className={ className }
-			options={ colorOptions }
-			actions={
-				<>
-					{ ! disableCustomColors && (
-						<CircularOptionPicker.DropdownLinkAction
-							dropdownProps={ {
-								renderContent: renderCustomColorPicker,
-								contentClassName:
-									'components-color-palette__picker',
-							} }
-							buttonProps={ {
-								'aria-label': __( 'Custom color picker' ),
-							} }
-							linkText={ __( 'Custom color' ) }
-						/>
+		<VStack spacing={ 3 }>
+			{ ! disableCustomColors && (
+				<Dropdown
+					renderContent={ renderCustomColorPicker }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							className="components-color-palette__custom-color"
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+							style={ { background: value } }
+						>
+							{ value }
+						</button>
 					) }
-					{ !! clearable && (
+				/>
+			) }
+			<CircularOptionPicker
+				className={ className }
+				options={ colorOptions }
+				actions={
+					!! clearable && (
 						<CircularOptionPicker.ButtonAction
 							onClick={ clearColor }
 						>
 							{ __( 'Clear' ) }
 						</CircularOptionPicker.ButtonAction>
-					) }
-				</>
-			}
-		/>
+					)
+				}
+			/>
+		</VStack>
 	);
 }
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
new file mode 100644
index 00000000000000..e245457754132b
--- /dev/null
+++ b/packages/components/src/color-palette/style.scss
@@ -0,0 +1,18 @@
+.components-color-palette__custom-color {
+	border: none;
+	background: none;
+	outline: 0;
+	display: block;
+	border-radius: $radius-block-ui;
+	height: $grid-unit-60;
+	text-align: right;
+	width: 100%;
+	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 * 25px) calc(2 * 25px);
+	box-sizing: border-box;
+	color: $white;
+	cursor: pointer;
+}
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 01231952a2cc01..e5bf92c27e8456 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -8,6 +8,7 @@
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";
+@import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
 @import "./date-time/style.scss";

From e23d88cdab55f3d97ffe9a79d3bdf16607a8578d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 18 Oct 2021 10:55:29 +0100
Subject: [PATCH 3/5] Remove the color indicators from the panel headers in
 Global Styles UI

---
 .../global-styles/screen-background-color.js        | 13 +------------
 .../components/global-styles/screen-link-color.js   | 11 +----------
 .../components/global-styles/screen-text-color.js   | 11 +----------
 3 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index b9ae5b03b0ab6b..8a0429c05b99b0 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -3,10 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
-import {
-	ColorIndicator,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -84,14 +80,7 @@ function ScreenBackgroundColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={
-					<HStack justify="flex-start" spacing={ 3 }>
-						<span>{ __( 'Background' ) }</span>
-						<ColorIndicator
-							colorValue={ gradient ?? backgroundColor }
-						/>
-					</HStack>
-				}
+				title={ __( 'Background' ) }
 				description={ __(
 					'Set a background color or gradient for the whole website.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index c2c6f53c3ff7e8..8f2a25f4f8e0b3 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -3,10 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
-import {
-	ColorIndicator,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -54,12 +50,7 @@ function ScreenLinkColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={
-					<HStack justify="flex-start" spacing={ 3 }>
-						<span>{ __( 'Links' ) }</span>
-						<ColorIndicator colorValue={ linkColor } />
-					</HStack>
-				}
+				title={ __( 'Links' ) }
 				description={ __(
 					'Set the default color used for links across the site.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 6f54ad78cbd1ba..a7d98ed1c29992 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -3,10 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
-import {
-	ColorIndicator,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -46,12 +42,7 @@ function ScreenTextColor( { name } ) {
 		<>
 			<ScreenHeader
 				back={ parentMenu + '/colors' }
-				title={
-					<HStack justify="flex-start" spacing={ 3 }>
-						<span>{ __( 'Text' ) }</span>
-						<ColorIndicator colorValue={ color } />
-					</HStack>
-				}
+				title={ __( 'Text' ) }
 				description={ __(
 					'Set the default color used for text across the site.'
 				) }

From 4e666da454e1ab723c7ed2dff04d98970e2aee5c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 18 Oct 2021 11:22:00 +0100
Subject: [PATCH 4/5] Fix e2e and unit tests

---
 .../test/__snapshots__/control.js.snap        | 151 ++--
 .../colors-gradients/test/control.js          |  16 -
 .../test/__snapshots__/index.js.snap          | 799 +++++++++---------
 .../specs/editor/blocks/heading.test.js       |   9 +-
 .../specs/editor/various/rich-text.test.js    |   1 +
 5 files changed, 507 insertions(+), 469 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index edfd5531003173..6052c2ad71567b 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -32,13 +32,38 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
+  margin-top: calc(4px * 1);
 }
 
 .emotion-4>* {
   min-height: 0;
 }
 
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-6>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-6>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -59,89 +84,89 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               className="components-base-control__label"
             >
               Test Color
-              <span
-                aria-label="(Color: #f00)"
-                className="component-color-indicator"
-                style={
-                  Object {
-                    "background": "#f00",
-                  }
-                }
-              />
             </span>
           </div>
         </legend>
         <div
-          className="components-circular-option-picker"
+          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          data-wp-c16t={true}
+          data-wp-component="VStack"
         >
           <div
-            className="components-circular-option-picker__swatches"
+            className="components-dropdown"
+            tabIndex="-1"
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup="true"
+              aria-label="Custom color picker"
+              className="components-color-palette__custom-color"
+              onClick={[Function]}
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
+            >
+              #f00
+            </button>
+          </div>
+          <div
+            className="components-circular-option-picker"
           >
             <div
-              className="components-circular-option-picker__option-wrapper"
+              className="components-circular-option-picker__swatches"
             >
-              <button
-                aria-describedby={null}
-                aria-label="Color: red"
-                aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-pressed"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#f00",
-                    "color": "#f00",
-                  }
-                }
-                type="button"
-              />
-              <svg
-                aria-hidden={true}
-                fill="#000"
-                focusable={false}
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                className="components-circular-option-picker__option-wrapper"
               >
-                <path
-                  d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                <button
+                  aria-describedby={null}
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
                 />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="#000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                  />
+                </svg>
+              </div>
             </div>
-          </div>
-          <div
-            className="components-circular-option-picker__custom-clear-wrapper"
-          >
             <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-              tabIndex="-1"
+              className="components-circular-option-picker__custom-clear-wrapper"
             >
               <button
                 aria-describedby={null}
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker"
-                className="components-button is-link"
+                className="components-button components-circular-option-picker__clear is-secondary is-small"
                 onClick={[Function]}
                 type="button"
               >
-                Custom color
+                Clear
               </button>
             </div>
-            <button
-              aria-describedby={null}
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
           </div>
         </div>
       </div>
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index e0de5f5eea1ed7..99478184dd0ab6 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -10,14 +10,6 @@ import { noop } from 'lodash';
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.children[ 0 ] === text &&
-		element.children.length === 1
-	);
-};
-
 const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	element
 ) => {
@@ -76,9 +68,6 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect( screen.queryByText( 'Custom color' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -116,11 +105,6 @@ describe( 'ColorPaletteControl', () => {
 				getButtonWithAriaLabelStartPredicate( 'Color:' )
 			)
 		).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index fa0b4d2f0f7cd6..e131b8cf5802a1 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -16,160 +16,61 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
-<Fragment>
-  <button
-    aria-describedby={null}
-    aria-expanded={true}
-    aria-haspopup="true"
-    aria-label="Custom color picker"
-    className="components-button is-link"
-    onClick={[MockFunction]}
-    type="button"
-  >
-    Custom color
-  </button>
-</Fragment>
+<button
+  aria-expanded={true}
+  aria-haspopup="true"
+  aria-label="Custom color picker"
+  className="components-color-palette__custom-color"
+  onClick={[MockFunction]}
+  style={
+    Object {
+      "background": "#f00",
+    }
+  }
+>
+  #f00
+</button>
 `;
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
-  className="components-circular-option-picker__dropdown-link-action"
-  contentClassName="components-color-palette__picker"
+  key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
 >
   <div
-    className="components-dropdown components-circular-option-picker__dropdown-link-action"
+    className="components-dropdown"
     tabIndex="-1"
   >
-    <ForwardRef(Button)
+    <button
       aria-expanded={false}
       aria-haspopup="true"
       aria-label="Custom color picker"
+      className="components-color-palette__custom-color"
       onClick={[Function]}
-      variant="link"
+      style={
+        Object {
+          "background": "#f00",
+        }
+      }
     >
-      <button
-        aria-describedby={null}
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Custom color picker"
-        className="components-button is-link"
-        onClick={[Function]}
-        type="button"
-      >
-        Custom color
-      </button>
-    </ForwardRef(Button)>
+      #f00
+    </button>
   </div>
 </Dropdown>
 `;
 
 exports[`ColorPalette should allow disabling custom color picker 1`] = `
-<CircularOptionPicker
-  actions={
-    <React.Fragment>
+<VStack
+  spacing={3}
+>
+  <CircularOptionPicker
+    actions={
       <ButtonAction
         onClick={[Function]}
       >
         Clear
       </ButtonAction>
-    </React.Fragment>
-  }
-  options={
-    Array [
-      <Option
-        aria-label="Color: red"
-        isSelected={true}
-        onClick={[Function]}
-        selectedIconProps={
-          Object {
-            "fill": "#000",
-          }
-        }
-        style={
-          Object {
-            "backgroundColor": "#f00",
-            "color": "#f00",
-          }
-        }
-        tooltipText="red"
-      />,
-      <Option
-        aria-label="Color: white"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "color": "#fff",
-          }
-        }
-        tooltipText="white"
-      />,
-      <Option
-        aria-label="Color: blue"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#00f",
-            "color": "#00f",
-          }
-        }
-        tooltipText="blue"
-      />,
-    ]
-  }
-/>
-`;
-
-exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
-<ColorPalette
-  colors={
-    Array [
-      Object {
-        "color": "#f00",
-        "name": "red",
-      },
-      Object {
-        "color": "#fff",
-        "name": "white",
-      },
-      Object {
-        "color": "#00f",
-        "name": "blue",
-      },
-    ]
-  }
-  onChange={[MockFunction]}
-  value="#f00"
->
-  <CircularOptionPicker
-    actions={
-      <React.Fragment>
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        />
-        <ButtonAction
-          onClick={[Function]}
-        >
-          Clear
-        </ButtonAction>
-      </React.Fragment>
     }
     options={
       Array [
@@ -218,308 +119,438 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         />,
       ]
     }
+  />
+</VStack>
+`;
+
+exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-1 {
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-3>* {
+  min-height: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
+<ColorPalette
+  colors={
+    Array [
+      Object {
+        "color": "#f00",
+        "name": "red",
+      },
+      Object {
+        "color": "#fff",
+        "name": "white",
+      },
+      Object {
+        "color": "#00f",
+        "name": "blue",
+      },
+    ]
+  }
+  onChange={[MockFunction]}
+  value="#f00"
+>
+  <VStack
+    spacing={3}
   >
-    <div
-      className="components-circular-option-picker"
+    <View
+      className="emotion-0 emotion-1 emotion-2 emotion-3 components-flex components-h-stack components-v-stack"
+      data-wp-c16t={true}
+      data-wp-component="VStack"
+      isColumn={true}
     >
       <div
-        className="components-circular-option-picker__swatches"
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
       >
-        <Option
-          aria-label="Color: red"
-          isSelected={true}
-          key="#f00"
-          onClick={[Function]}
-          selectedIconProps={
-            Object {
-              "fill": "#000",
-            }
-          }
-          style={
-            Object {
-              "backgroundColor": "#f00",
-              "color": "#f00",
-            }
-          }
-          tooltipText="red"
+        <Dropdown
+          key=".0"
+          renderContent={[Function]}
+          renderToggle={[Function]}
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-dropdown"
+            tabIndex="-1"
           >
-            <Tooltip
-              text="red"
+            <button
+              aria-expanded={false}
+              aria-haspopup="true"
+              aria-label="Custom color picker"
+              className="components-color-palette__custom-color"
+              onClick={[Function]}
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
+            >
+              #f00
+            </button>
+          </div>
+        </Dropdown>
+        <CircularOptionPicker
+          actions={
+            <ButtonAction
+              onClick={[Function]}
             >
-              <ForwardRef(Button)
+              Clear
+            </ButtonAction>
+          }
+          key=".1"
+          options={
+            Array [
+              <Option
                 aria-label="Color: red"
-                className="components-circular-option-picker__option"
-                isPressed={true}
-                onBlur={[Function]}
+                isSelected={true}
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={
+                  Object {
+                    "fill": "#000",
+                  }
+                }
                 style={
                   Object {
                     "backgroundColor": "#f00",
                     "color": "#f00",
                   }
                 }
-              >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: red"
-                  aria-pressed={true}
-                  className="components-button components-circular-option-picker__option is-pressed"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
+                tooltipText="red"
+              />,
+              <Option
+                aria-label="Color: white"
+                isSelected={false}
+                onClick={[Function]}
+                selectedIconProps={Object {}}
+                style={
+                  Object {
+                    "backgroundColor": "#fff",
+                    "color": "#fff",
                   }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-            <Icon
-              fill="#000"
-              icon={
-                <SVG
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <Path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  />
-                </SVG>
-              }
-            >
-              <SVG
-                fill="#000"
-                height={24}
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="#000"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <Path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  >
-                    <path
-                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                    />
-                  </Path>
-                </svg>
-              </SVG>
-            </Icon>
-          </div>
-        </Option>
-        <Option
-          aria-label="Color: white"
-          isSelected={false}
-          key="#fff"
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#fff",
-              "color": "#fff",
-            }
+                }
+                tooltipText="white"
+              />,
+              <Option
+                aria-label="Color: blue"
+                isSelected={false}
+                onClick={[Function]}
+                selectedIconProps={Object {}}
+                style={
+                  Object {
+                    "backgroundColor": "#00f",
+                    "color": "#00f",
+                  }
+                }
+                tooltipText="blue"
+              />,
+            ]
           }
-          tooltipText="white"
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-circular-option-picker"
           >
-            <Tooltip
-              text="white"
+            <div
+              className="components-circular-option-picker__swatches"
             >
-              <ForwardRef(Button)
+              <Option
+                aria-label="Color: red"
+                isSelected={true}
+                key="#f00"
+                onClick={[Function]}
+                selectedIconProps={
+                  Object {
+                    "fill": "#000",
+                  }
+                }
+                style={
+                  Object {
+                    "backgroundColor": "#f00",
+                    "color": "#f00",
+                  }
+                }
+                tooltipText="red"
+              >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="red"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: red"
+                      className="components-circular-option-picker__option"
+                      isPressed={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#f00",
+                          "color": "#f00",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: red"
+                        aria-pressed={true}
+                        className="components-button components-circular-option-picker__option is-pressed"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#f00",
+                            "color": "#f00",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                  <Icon
+                    fill="#000"
+                    icon={
+                      <SVG
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                        />
+                      </SVG>
+                    }
+                  >
+                    <SVG
+                      fill="#000"
+                      height={24}
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        fill="#000"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                        >
+                          <path
+                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                          />
+                        </Path>
+                      </svg>
+                    </SVG>
+                  </Icon>
+                </div>
+              </Option>
+              <Option
                 aria-label="Color: white"
-                className="components-circular-option-picker__option"
-                isPressed={false}
-                onBlur={[Function]}
+                isSelected={false}
+                key="#fff"
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={Object {}}
                 style={
                   Object {
                     "backgroundColor": "#fff",
                     "color": "#fff",
                   }
                 }
+                tooltipText="white"
               >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: white"
-                  aria-pressed={false}
-                  className="components-button components-circular-option-picker__option"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#fff",
-                      "color": "#fff",
-                    }
-                  }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-          </div>
-        </Option>
-        <Option
-          aria-label="Color: blue"
-          isSelected={false}
-          key="#00f"
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#00f",
-              "color": "#00f",
-            }
-          }
-          tooltipText="blue"
-        >
-          <div
-            className="components-circular-option-picker__option-wrapper"
-          >
-            <Tooltip
-              text="blue"
-            >
-              <ForwardRef(Button)
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="white"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: white"
+                      className="components-circular-option-picker__option"
+                      isPressed={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#fff",
+                          "color": "#fff",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: white"
+                        aria-pressed={false}
+                        className="components-button components-circular-option-picker__option"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "color": "#fff",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                </div>
+              </Option>
+              <Option
                 aria-label="Color: blue"
-                className="components-circular-option-picker__option"
-                isPressed={false}
-                onBlur={[Function]}
+                isSelected={false}
+                key="#00f"
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={Object {}}
                 style={
                   Object {
                     "backgroundColor": "#00f",
                     "color": "#00f",
                   }
                 }
+                tooltipText="blue"
               >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: blue"
-                  aria-pressed={false}
-                  className="components-button components-circular-option-picker__option"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#00f",
-                      "color": "#00f",
-                    }
-                  }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-          </div>
-        </Option>
-      </div>
-      <div
-        className="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        >
-          <Dropdown
-            className="components-circular-option-picker__dropdown-link-action"
-            contentClassName="components-color-palette__picker"
-            renderContent={[Function]}
-            renderToggle={[Function]}
-          >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="blue"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: blue"
+                      className="components-circular-option-picker__option"
+                      isPressed={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#00f",
+                          "color": "#00f",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: blue"
+                        aria-pressed={false}
+                        className="components-button components-circular-option-picker__option"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#00f",
+                            "color": "#00f",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                </div>
+              </Option>
+            </div>
             <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-              tabIndex="-1"
+              className="components-circular-option-picker__custom-clear-wrapper"
             >
-              <ForwardRef(Button)
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker"
+              <ButtonAction
                 onClick={[Function]}
-                variant="link"
               >
-                <button
-                  aria-describedby={null}
-                  aria-expanded={false}
-                  aria-haspopup="true"
-                  aria-label="Custom color picker"
-                  className="components-button is-link"
+                <ForwardRef(Button)
+                  className="components-circular-option-picker__clear"
+                  isSmall={true}
                   onClick={[Function]}
-                  type="button"
+                  variant="secondary"
                 >
-                  Custom color
-                </button>
-              </ForwardRef(Button)>
+                  <button
+                    aria-describedby={null}
+                    className="components-button components-circular-option-picker__clear is-secondary is-small"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    Clear
+                  </button>
+                </ForwardRef(Button)>
+              </ButtonAction>
             </div>
-          </Dropdown>
-        </DropdownLinkAction>
-        <ButtonAction
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            className="components-circular-option-picker__clear"
-            isSmall={true}
-            onClick={[Function]}
-            variant="secondary"
-          >
-            <button
-              aria-describedby={null}
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
-          </ForwardRef(Button)>
-        </ButtonAction>
+          </div>
+        </CircularOptionPicker>
       </div>
-    </div>
-  </CircularOptionPicker>
+    </View>
+  </VStack>
 </ColorPalette>
 `;
diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
index 02781002dcd5cf..bdb2b625380ed0 100644
--- a/packages/e2e-tests/specs/editor/blocks/heading.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/heading.test.js
@@ -9,8 +9,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Heading', () => {
-	const CUSTOM_COLOR_TEXT = 'Custom color';
-	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `//button[contains(text(),'${ CUSTOM_COLOR_TEXT }')]`;
+	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
 	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
 		'.components-color-picker button[aria-label="Show detailed inputs"]';
 	const COLOR_INPUT_FIELD_SELECTOR =
@@ -77,7 +76,7 @@ describe( 'Heading', () => {
 		);
 		await colorPanelToggle.click();
 
-		const customTextColorButton = await page.waitForXPath(
+		const customTextColorButton = await page.waitForSelector(
 			CUSTOM_COLOR_BUTTON_X_SELECTOR
 		);
 
@@ -88,9 +87,7 @@ describe( 'Heading', () => {
 		await pressKeyWithModifier( 'primary', 'A' );
 		await page.keyboard.type( '7700ff' );
 		await page.click( 'h3[data-type="core/heading"]' );
-		await page.waitForSelector(
-			'.component-color-indicator[aria-label="(Color: #7700ff)"]'
-		);
+		await page.waitForXPath( '//button[text()="#7700ff"]' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js
index 3e76fe5376f06f..e56a5d3b34e00d 100644
--- a/packages/e2e-tests/specs/editor/various/rich-text.test.js
+++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js
@@ -397,6 +397,7 @@ describe( 'RichText', () => {
 		await page.keyboard.press( 'Tab' );
 		// Select color other than black.
 		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

From a33f87e07291b9708591cbfe9c5f2ab31674f2a6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 25 Oct 2021 09:55:06 +0100
Subject: [PATCH 5/5] Add no color indicator

---
 .../src/components/global-styles/header.js    |  2 +-
 .../src/components/global-styles/style.scss   | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 41969af30d9a93..f380aa76330831 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -18,7 +18,7 @@ import NavigationButton from './navigation-button';
 
 function ScreenHeader( { back, title, description } ) {
 	return (
-		<VStack spacing={ 2 } className="edit-site-global-styles-header">
+		<VStack spacing={ 2 }>
 			<HStack spacing={ 2 }>
 				<View>
 					<NavigationButton
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 1801cc03c63785..e92d9a832f6ffc 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -20,20 +20,20 @@
 
 	.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);
 	}
 }
 
-
-.edit-site-global-styles-screen-colors .component-color-indicator,
-.edit-site-global-styles-header .component-color-indicator {
-	display: block;
-	border-radius: 50%;
-	border: 0;
-	height: 24px;
-	width: 24px;
-	padding: 0;
-}
-
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }