Add button text when no colors found (#36684)

WordPress · Nov 23, 2021 · 6e64edc · 6e64edc
1 parent 1e78e92
commit 6e64edc
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -27,13 +27,21 @@ 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 }>
 			<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 } ) => (
@@ -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>