Make it clearer how to edit a site's palette (#61364)

* "Edit" instead of color count * remove unused style * use chevron * Update style-variations.spec.js * lint Co-authored-by: richtabor <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · May 30, 2024 · c85d43b · c85d43b
1 parent 3a95bcc
commit c85d43b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -10,8 +10,8 @@ import {
 	ColorIndicator,
 	Button,
 } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -55,27 +55,20 @@ function Palette( { name } ) {
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
-		colors.length > 0
-			? sprintf(
-					// Translators: %d: Number of palette colors.
-					_n( '%d color', '%d colors', colors.length ),
-					colors.length
-			  )
-			: __( 'Add custom colors' );
+		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }
-					aria-label={ __( 'Color palettes' ) }
+					aria-label={ paletteButtonText }
 				>
-					<HStack
-						direction={
-							colors.length === 0 ? 'row-reverse' : 'row'
-						}
-					>
+					<HStack direction="row">
+						{ colors.length <= 0 && (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors
 								.slice( 0, 5 )
@@ -87,9 +80,7 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
-							{ paletteButtonText }
-						</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -58,10 +58,6 @@
 	row-gap: calc(#{$grid-unit-05} * 3);
 }
 
-.edit-site-global-styles-screen-colors__palette-count {
-	color: $gray-700;
-}
-
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }

diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -157,7 +157,7 @@ test.describe( 'Global styles variations', () => {
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click( 'role=button[name="Back"i]' );
 		await page.click( 'role=button[name="Colors styles"i]' );
-		await page.click( 'role=button[name="Color palettes"i]' );
+		await page.click( 'role=button[name="Edit palette"i]' );
 
 		await expect(
 			page.locator( 'role=option[name="Color: Foreground"i]' )