PaletteEdit: Fix order numbers (WordPress#52212)

Using FSE to change styles on a page template. When using the English language in site and add new colors to Styles, the default name appear with numbers in order. However, when switching to Japanese language, the sequential order numbers did not work anymore in the default name.

Gutenberg was trying to create slugs for colors using translated strings, e.g., 色 6 but that didn't pass the regex new RegExp( ^${ slugPrefix }color-([\d]+)$ )

This commit hardcodes the English `color-` slug fragment to avoid this.

Updates unit tests.

---------

Co-authored-by: megane9988 <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mirka <[email protected]>

packages/components/CHANGELOG.md

@@ -12,6 +12,11 @@
 
 -   `Button`: Keep deprecated props in type definitions ([#59913](https://github.com/WordPress/gutenberg/pull/59913)).
 
+### Bug Fix
+-   `PaletteEdit`: Fix number incrementing of default names for new colors added in non-en-US locales ([#52212](https://github.com/WordPress/gutenberg/pull/52212)).
+
+
+
 ## 27.1.0 (2024-03-06)
 
 ### Bug Fix

packages/components/src/palette-edit/index.tsx

@@ -74,17 +74,17 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a name for a palette item in the format "Color + id".
+ * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
  *
  * @param elements   An array of color palette items.
  * @param slugPrefix The slug prefix used to match the element slug.
  *
- * @return A unique name for a palette item.
+ * @return A name and slug for the new palette item.
  */
-export function getNameForPosition(
+export function getNameAndSlugForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
@@ -102,11 +102,14 @@ export function getNameForPosition(
 		return previousValue;
 	}, 1 );
 
-	return sprintf(
-		/* translators: %s: is an id for a custom color */
-		__( 'Color %s' ),
-		position
-	);
+	return {
+		name: sprintf(
+			/* translators: %s: is an id for a custom color */
+			__( 'Color %s' ),
+			position
+		),
+		slug: `${ slugPrefix }color-${ position }`,
+	};
 }
 
 function ColorPickerPopover< T extends Color | Gradient >( {
@@ -434,31 +437,28 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const optionName = getNameForPosition(
-									elements,
-									slugPrefix
-								);
+								const { name, slug } =
+									getNameAndSlugForPosition(
+										elements,
+										slugPrefix
+									);
 
 								if ( !! gradients ) {
 									onChange( [
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								} else {
 									onChange( [
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: optionName,
-											slug:
-												slugPrefix +
-												kebabCase( optionName ),
+											name,
+											slug,
 										},
 									] );
 								}

packages/components/src/palette-edit/test/index.tsx

@@ -7,7 +7,7 @@ import { click, type, press } from '@ariakit/test';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameForPosition } from '..';
+import PaletteEdit, { getNameAndSlugForPosition } from '..';
 import type { PaletteElement } from '../types';
 
 const noop = () => {};
@@ -21,17 +21,18 @@ async function clearInput( input: HTMLInputElement ) {
 	}
 }
 
-describe( 'getNameForPosition', () => {
+describe( 'getNameAndSlugForPosition', () => {
 	test( 'should return 1 by default', () => {
 		const slugPrefix = 'test-';
 		const elements: PaletteElement[] = [];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
 	} );
 
-	test( 'should return a new color name with an incremented slug id', () => {
+	test( 'should return a new color name and slug with an incremented slug id', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -41,12 +42,13 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 2'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 2',
+			slug: 'test-color-2',
+		} );
 	} );
 
-	test( 'should ignore user-defined color names', () => {
+	test( 'should ignore user-defined color name and slug', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -56,12 +58,13 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
 	} );
 
-	test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
+	test( 'should return a new color name and slug with an incremented slug id one higher than the current highest', () => {
 		const slugPrefix = 'test-';
 		const elements = [
 			{
@@ -86,9 +89,10 @@ describe( 'getNameForPosition', () => {
 			},
 		];
 
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 151'
-		);
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 151',
+			slug: 'test-color-151',
+		} );
 	} );
 } );