From c85d43bd985dcbc21c014d2ec30e128c7279909e Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 30 May 2024 08:54:27 -0400 Subject: [PATCH] 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 Co-authored-by: jasmussen Co-authored-by: t-hamano Co-authored-by: annezazu --- .../src/components/global-styles/palette.js | 27 +++++++------------ .../src/components/global-styles/style.scss | 4 --- .../site-editor/style-variations.spec.js | 2 +- 3 files changed, 10 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js index 3d35397a63b0a..e85c0e9331402 100644 --- 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,13 +55,7 @@ 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 ( @@ -69,13 +63,12 @@ function Palette( { name } ) { - + + { colors.length <= 0 && ( + { __( 'Add colors' ) } + ) } { colors .slice( 0, 5 ) @@ -87,9 +80,7 @@ function Palette( { name } ) { ) ) } - - { paletteButtonText } - + diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 6afb0e787cf56..34a7696901f70 100644 --- 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 index f991b512e840d..c4dad7c7d7546 100644 --- 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]' )