Try using Mix as placeholder for mixed values

WordPress · Sep 28, 2022 · a10eb32 · a10eb32
1 parent 0f2b87c
commit a10eb32
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -32,7 +32,10 @@ export default function AllInputControl( {
 
 	const hasValues = hasDefinedValues( values );
 	const isMixed = hasValues && hasMixedValues( values );
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+	const allPlaceholder = isMixed
+		? /* translators: Placeholder text representing a mix of values. */
+		  __( 'Mix' )
+		: null;
 
 	// Filter out CSS-unit-only values to prevent invalid styles.
 	const handleOnChange = ( next ) => {

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -105,7 +105,10 @@ const BorderBoxControl = (
 						enableStyle={ enableStyle }
 						onChange={ onLinkedChange }
 						placeholder={
-							hasMixedBorders ? __( 'Mixed' ) : undefined
+							hasMixedBorders
+								? /* translators: Placeholder text representing a mix of values. */
+								  __( 'Mix' )
+								: undefined
 						}
 						__unstablePopoverProps={ popoverProps }
 						shouldSanitizeBorder={ false } // This component will handle that.

diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
@@ -127,7 +127,7 @@ describe( 'BorderBoxControl', () => {
 			clickButton( 'Link sides' );
 
 			const widthInput = screen.getByRole( 'spinbutton' );
-			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mix' );
 		} );
 
 		it( 'should render shared border width when switching to linked view', async () => {