From 59fa6529a6e3d1c6e40574480ed2371919a122ab Mon Sep 17 00:00:00 2001
From: Kevin Batdorf <kbat82@gmail.com>
Date: Fri, 19 Nov 2021 16:32:27 -0500
Subject: [PATCH 1/2] Add button text when no colors found

---
 .../src/components/global-styles/palette.js      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 36375d1b84e433..c471abd2f0e881 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -27,6 +27,14 @@ function Palette( { name } ) {
 	const screenPath = ! name
 		? '/colors/palette'
 		: '/blocks/' + name + '/colors/palette';
+	const palleteButtonText =
+		colors.length > 0
+			? sprintf(
+					// Translators: %d: Number of palette colors.
+					_n( '%d color', '%d colors', colors.length ),
+					colors.length
+			  )
+			: __( 'Add custom colors' );
 
 	return (
 		<VStack spacing={ 3 }>
@@ -44,13 +52,7 @@ function Palette( { name } ) {
 								) ) }
 							</ZStack>
 						</FlexBlock>
-						<FlexItem>
-							{ sprintf(
-								// Translators: %d: Number of palette colors.
-								_n( '%d color', '%d colors', colors.length ),
-								colors.length
-							) }
-						</FlexItem>
+						<FlexItem>{ palleteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>
 			</ItemGroup>

From a52512cbe4b9a947470a4d5b56a61fa0dca5f431 Mon Sep 17 00:00:00 2001
From: Kevin Batdorf <kbat82@gmail.com>
Date: Fri, 19 Nov 2021 17:30:29 -0500
Subject: [PATCH 2/2] Reverse layout when empty

---
 packages/edit-site/src/components/global-styles/palette.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index c471abd2f0e881..3acd4e20b0fe5d 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -41,7 +41,7 @@ function Palette( { name } ) {
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButton path={ screenPath }>
-					<HStack>
+					<HStack isReversed={ colors.length === 0 }>
 						<FlexBlock>
 							<ZStack isLayered={ false } offset={ -8 }>
 								{ colors.slice( 0, 5 ).map( ( { color } ) => (