@wordpress/components 28.8.8 → 28.8.9

package/src/border-control/border-control-dropdown/component.tsx

@@ -76,15 +76,19 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'
+						),
 						colorObject.name,
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+						),
 						colorObject.name,
 						ariaLabelValue
 				  );
@@ -94,14 +98,18 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
+						// translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'
+						),
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code e.g: "#f00".
-						'Border color and style picker. The currently selected color has a value of "%1$s".',
+						// translators: %s: The color's hex code e.g: "#f00".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%s".'
+						),
 						ariaLabelValue
 				  );
 		}
@@ -111,8 +119,10 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
-			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+			// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+			),
 			colorObject.name,
 			getAriaLabelColorValue( colorObject.color )
 		);
@@ -120,8 +130,10 @@ const getToggleAriaLabel = (
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code e.g: "#f00".
-			'Border color picker. The currently selected color has a value of "%1$s".',
+			// translators: %s: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color has a value of "%s".'
+			),
 			getAriaLabelColorValue( colorValue )
 		);
 	}

package/src/color-palette/index.tsx

@@ -233,7 +233,7 @@ function UnforwardedColorPalette(
 	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -56,7 +56,7 @@ function ControlPointButton( {
 		<>
 			<Button
 				aria-label={ sprintf(
-					// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
 					__(
 						'Gradient control point at position %1$s%% with color code %2$s.'
 					),

package/src/font-size-picker/index.native.js

@@ -9,7 +9,7 @@ import { View, useWindowDimensions } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -63,8 +63,8 @@ function FontSizePicker( {
 	} );
 
 	const accessibilityLabel = sprintf(
-		// translators: %1$s: Font size name e.g. Small
-		__( 'Font Size, %1$s' ),
+		// translators: %s: Font size name e.g. Small
+		__( 'Font Size, %s' ),
 		selectedOption.name
 	);
 
@@ -77,8 +77,8 @@ function FontSizePicker( {
 					value={
 						selectedValue
 							? sprintf(
-									// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
-									__( '%1$s (%2$s)' ),
+									// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
+									_x( '%1$s (%2$s)', 'font size' ),
 									selectedOption.name,
 									selectedPxValue
 							  )
@@ -88,7 +88,7 @@ function FontSizePicker( {
 					accessibilityRole="button"
 					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. Small
+						// translators: %s: Select control button label e.g. "Button width"
 						__( 'Navigates to select %s' ),
 						selectedOption.name
 					) }
@@ -143,7 +143,7 @@ function FontSizePicker( {
 								accessibilityLabel={
 									item.sizePx === selectedValue
 										? sprintf(
-												// translators: %s: Select font size option value e.g: "Selected: Large".
+												// translators: %s: The selected option.
 												__( 'Selected: %s' ),
 												item.name
 										  )

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -165,7 +165,7 @@ class BottomSheetRangeCell extends Component {
 
 		const getAccessibilityLabel = () => {
 			return sprintf(
-				/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+				/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 				__( '%1$s. %2$s is %3$s %4$s.' ),
 				cellProps.label,
 				settingLabel,

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -159,7 +159,7 @@ class BottomSheetStepperCell extends Component {
 		};
 
 		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 			__( '%1$s. %2$s is %3$s %4$s.' ),
 			label,
 			settingLabel,

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -64,7 +64,7 @@ const BottomSheetSelectControl = ( {
 					onPress={ openSubSheet }
 					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
-						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
 						label,
 						selectedOption.label
@@ -102,7 +102,7 @@ const BottomSheetSelectControl = ( {
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
-											// translators: %s: Select control option value e.g: "Auto, 25%".
+											// translators: %s: The selected option.
 											__( 'Selected: %s' ),
 											item.label
 									  )

package/src/tools-panel/tools-panel-header/component.tsx

@@ -106,7 +106,7 @@ const OptionalControlsGroup = ( {
 					  )
 					: sprintf(
 							// translators: %s: The name of the control to display e.g. "Padding".
-							__( 'Show %s' ),
+							_x( 'Show %s', 'input control' ),
 							label
 					  );