From adaa6375da91afc99a828c0c885471faf9a4106b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:50:44 +0200
Subject: [PATCH 1/9] Global Styles: fix icon vertical alignment in
 `NavigatorButton`

---
 .../src/components/global-styles/navigation-button.js         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 7530f497b0332..2feb03b3816e6 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -15,9 +15,7 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
+					<Icon icon={ icon } size={ 24 } />
 					<FlexItem>{ children }</FlexItem>
 				</HStack>
 			) }

From 5a144d9b423a6b8b4a25ea04860ab2bfe673fc63 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:51:22 +0200
Subject: [PATCH 2/9] Global Styles: fix icon vertical alignment in root screen

---
 .../components/global-styles/screen-root.js   | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 9305e957b096c..5e708d38c413e 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -46,13 +46,11 @@ function ScreenRoot() {
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
 								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
-								<FlexItem>
-									<Icon
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</FlexItem>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
 							</HStack>
 						</NavigationButton>
 					) }
@@ -75,13 +73,9 @@ function ScreenRoot() {
 					<NavigationButton path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<FlexItem>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</FlexItem>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
 						</HStack>
 					</NavigationButton>
 				</ItemGroup>

From 3c18a6a4592fb29f268d71e4758d7a3651ad6191 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:51:57 +0200
Subject: [PATCH 3/9] Global Styles: fix icon vertical alignment in block list 
 screen

---
 .../src/components/global-styles/screen-block-list.js         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index daab69f0fe9f4..ac50ce5f672ee 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -59,9 +59,7 @@ function BlockMenuItem( { block } ) {
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<BlockIcon icon={ block.icon } />
-				</FlexItem>
+				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
 		</NavigationButton>

From 9293746da1e6e5b6877596295123920836b9713f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:52:17 +0200
Subject: [PATCH 4/9] Global Styles: fix icon vertical alignment in colors 
 screen

---
 .../components/global-styles/screen-colors.js | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 77afba1ab514b..54aacee4e3a89 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -34,11 +34,14 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<ColorIndicator
-						colorValue={ gradientValue ?? backgroundColor }
-					/>
-				</FlexItem>
+				<ColorIndicator
+					colorValue={ gradientValue ?? backgroundColor }
+					// TODO:
+					// - move to SCSS code + classname
+					// - consider using grid scss variables
+					// - consider adding a size prop to `ColorIndicator` ?
+					style={ { marginTop: '2px', marginBottom: '2px' } }
+				/>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -57,9 +60,14 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				<ColorIndicator
+					colorValue={ color }
+					// TODO:
+					// - move to SCSS code + classname
+					// - consider using grid scss variables
+					// - consider adding a size prop to `ColorIndicator` ?
+					style={ { marginTop: '2px', marginBottom: '2px' } }
+				/>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,9 +86,14 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				<ColorIndicator
+					colorValue={ color }
+					// TODO:
+					// - move to SCSS code + classname
+					// - consider using grid scss variables
+					// - consider adding a size prop to `ColorIndicator` ?
+					style={ { marginTop: '2px', marginBottom: '2px' } }
+				/>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>

From 26bbed8e4e90b728b4a9ba77f7ce5c220734ba09 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:52:55 +0200
Subject: [PATCH 5/9] Global Styles: fix icon vertical alignment in palette
 panel

---
 packages/components/src/z-stack/styles.ts     |  3 +++
 .../src/components/global-styles/palette.js   | 27 +++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index d0bf20d38b1f4..ec588b8442016 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -19,6 +19,9 @@ export const ZStackChildView = styled.div< {
 	offsetAmount: number;
 	zIndex: number;
 } >`
+	/* TODO: split this change to a separate PR */
+	display: flex;
+
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
 			? css( rtl( { marginLeft: offsetAmount } )() )
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index d4298d09bcbb5..ede5608767b2b 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -64,16 +63,22 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack
+							isLayered={ false }
+							offset={ -8 }
+							// TODO:
+							// - move to SCSS code + classname
+							// - consider using grid scss variables
+							// - consider adding a size prop to `ColorIndicator` ?
+							style={ { marginTop: '2px', marginBottom: '2px' } }
+						>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicator
+									key={ color }
+									colorValue={ color }
+								/>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>

From 3ad77e497cc5d91818ba985d764e2a89c6ad3dc8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 21:05:43 +0200
Subject: [PATCH 6/9] Move `ColorIndicator` styles to sass

---
 .../src/components/global-styles/palette.js    | 11 ++---------
 .../components/global-styles/screen-colors.js  | 18 +++---------------
 .../src/components/global-styles/style.scss    |  6 ++++++
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index ede5608767b2b..327ad806e22b3 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -63,19 +63,12 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<ZStack
-							isLayered={ false }
-							offset={ -8 }
-							// TODO:
-							// - move to SCSS code + classname
-							// - consider using grid scss variables
-							// - consider adding a size prop to `ColorIndicator` ?
-							style={ { marginTop: '2px', marginBottom: '2px' } }
-						>
+						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors.slice( 0, 5 ).map( ( { color } ) => (
 								<ColorIndicator
 									key={ color }
 									colorValue={ color }
+									className="edit-site-global-styles__color-indicator-with-margin"
 								/>
 							) ) }
 						</ZStack>
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 54aacee4e3a89..3d2b67e9accab 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -36,11 +36,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ gradientValue ?? backgroundColor }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
@@ -62,11 +58,7 @@ function TextColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ color }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
@@ -88,11 +80,7 @@ function LinkColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ color }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ebf09d5a82505..3b7a804bf4b98 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -93,3 +93,9 @@
 	}
 }
 
+.edit-site-global-styles__color-indicator-with-margin {
+	// Add 4px to compensate for the fact that `ColorIndicator` has a height
+	// of 20px, while all other icons have a height of 24px.
+	margin-top: $grid-unit * 0.25;
+	margin-bottom: $grid-unit * 0.25;
+}

From 27887aaf9341d8d67af18ceb221e6501e3b6b798 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 5 Apr 2022 18:17:47 +0200
Subject: [PATCH 7/9] Introduce local `ColorIndicatorWithSpacer` component,
 refactor `ColorIndicator` usages

---
 .../global-styles/color-indicator-spacer.js   | 25 +++++++++++++++++++
 .../src/components/global-styles/palette.js   |  5 ++--
 .../components/global-styles/screen-colors.js | 15 +++--------
 .../src/components/global-styles/style.scss   |  7 ------
 4 files changed, 31 insertions(+), 21 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/color-indicator-spacer.js

diff --git a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
new file mode 100644
index 0000000000000..b24625a81dbf3
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ColorIndicator,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+// Compensate for the fact that `ColorIndicator` has a height of 20px,
+// while all other icons have a height of 24px.
+function ColorIndicatorWithSpacer( colorIndicatorProps ) {
+	return (
+		<Spacer
+			paddingY={ 0.5 }
+			marginBottom={ 0 }
+			// Necessary to avoid extra vertical white space, since `ColorIndicator`
+			// is a `display: inline-block` component.
+			style={ { fontSize: 0 } }
+		>
+			<ColorIndicator { ...colorIndicatorProps } />
+		</Spacer>
+	);
+}
+
+export default ColorIndicatorWithSpacer;
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 327ad806e22b3..b06232b7e6ded 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
@@ -18,6 +17,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
 
 const EMPTY_COLORS = [];
 
@@ -65,10 +65,9 @@ function Palette( { name } ) {
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicator
+								<ColorIndicatorWithSpacer
 									key={ color }
 									colorValue={ color }
-									className="edit-site-global-styles__color-indicator-with-margin"
 								/>
 							) ) }
 						</ZStack>
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 3d2b67e9accab..56f3005dfeeec 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	FlexItem,
-	ColorIndicator,
 } from '@wordpress/components';
 
 /**
@@ -18,6 +17,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,9 +34,8 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
+				<ColorIndicatorWithSpacer
 					colorValue={ gradientValue ?? backgroundColor }
-					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
@@ -56,10 +55,7 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
-					colorValue={ color }
-					className="edit-site-global-styles__color-indicator-with-margin"
-				/>
+				<ColorIndicatorWithSpacer colorValue={ color } />
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,10 +74,7 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<ColorIndicator
-					colorValue={ color }
-					className="edit-site-global-styles__color-indicator-with-margin"
-				/>
+				<ColorIndicatorWithSpacer colorValue={ color } />
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 3b7a804bf4b98..6266031b7f50d 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -92,10 +92,3 @@
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
-
-.edit-site-global-styles__color-indicator-with-margin {
-	// Add 4px to compensate for the fact that `ColorIndicator` has a height
-	// of 20px, while all other icons have a height of 24px.
-	margin-top: $grid-unit * 0.25;
-	margin-bottom: $grid-unit * 0.25;
-}

From d33b9a46a64feda5dab021c4b52232be81771888 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 5 Apr 2022 18:18:14 +0200
Subject: [PATCH 8/9] Remove `ZStack` fix, now unnecessary

---
 packages/components/src/z-stack/styles.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index ec588b8442016..d0bf20d38b1f4 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -19,9 +19,6 @@ export const ZStackChildView = styled.div< {
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	/* TODO: split this change to a separate PR */
-	display: flex;
-
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
 			? css( rtl( { marginLeft: offsetAmount } )() )

From daf504808e7561709c5927ed2e61399dc8e4c526 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 5 Apr 2022 19:19:41 +0200
Subject: [PATCH 9/9] Use fixed height wrapper instead of spacer

---
 .../global-styles/color-indicator-spacer.js   | 25 -------------------
 .../global-styles/color-indicator-wrapper.js  | 23 +++++++++++++++++
 .../src/components/global-styles/palette.js   | 10 ++++----
 .../components/global-styles/screen-colors.js | 19 +++++++++-----
 .../src/components/global-styles/style.scss   |  5 ++++
 5 files changed, 46 insertions(+), 36 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/color-indicator-spacer.js
 create mode 100644 packages/edit-site/src/components/global-styles/color-indicator-wrapper.js

diff --git a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
deleted file mode 100644
index b24625a81dbf3..0000000000000
--- a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ColorIndicator,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
-
-// Compensate for the fact that `ColorIndicator` has a height of 20px,
-// while all other icons have a height of 24px.
-function ColorIndicatorWithSpacer( colorIndicatorProps ) {
-	return (
-		<Spacer
-			paddingY={ 0.5 }
-			marginBottom={ 0 }
-			// Necessary to avoid extra vertical white space, since `ColorIndicator`
-			// is a `display: inline-block` component.
-			style={ { fontSize: 0 } }
-		>
-			<ColorIndicator { ...colorIndicatorProps } />
-		</Spacer>
-	);
-}
-
-export default ColorIndicatorWithSpacer;
diff --git a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
new file mode 100644
index 0000000000000..9466b2d2282ec
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Flex } from '@wordpress/components';
+
+function ColorIndicatorWrapper( { className, ...props } ) {
+	return (
+		<Flex
+			className={ classnames(
+				'edit-site-global-styles__color-indicator-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
+export default ColorIndicatorWrapper;
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index b06232b7e6ded..c4beef9c6430e 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,6 +7,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
+	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
@@ -17,7 +18,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
-import ColorIndicatorWithSpacer from './color-indicator-spacer';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
 
@@ -65,10 +66,9 @@ function Palette( { name } ) {
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicatorWithSpacer
-									key={ color }
-									colorValue={ color }
-								/>
+								<ColorIndicatorWrapper key={ color }>
+									<ColorIndicator colorValue={ color } />
+								</ColorIndicatorWrapper>
 							) ) }
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 56f3005dfeeec..60c79ed85f11d 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -7,6 +7,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	FlexItem,
+	ColorIndicator,
 } from '@wordpress/components';
 
 /**
@@ -17,7 +18,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
-import ColorIndicatorWithSpacer from './color-indicator-spacer';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,9 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<ColorIndicatorWithSpacer
-					colorValue={ gradientValue ?? backgroundColor }
-				/>
+				<ColorIndicatorWrapper>
+					<ColorIndicator
+						colorValue={ gradientValue ?? backgroundColor }
+					/>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -55,7 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<ColorIndicatorWithSpacer colorValue={ color } />
+				<ColorIndicatorWrapper>
+					<ColorIndicator colorValue={ color } />
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -74,7 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<ColorIndicatorWithSpacer colorValue={ color } />
+				<ColorIndicatorWrapper>
+					<ColorIndicator colorValue={ color } />
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 6266031b7f50d..16070627a3584 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -92,3 +92,8 @@
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
+
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+}