@wordpress/components 28.8.8 → 28.8.10

package/build-types/border-control/border-control-dropdown/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/component.tsx"],"names":[],"mappings":"AAoQA,QAAA,MAAM,8BAA8B;;;;;;wBAlJ2D,CAAC;;;6CAqJ/F,CAAC;AAEF,eAAe,8BAA8B,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-control/border-control-dropdown/component.tsx"],"names":[],"mappings":"AAgRA,QAAA,MAAM,8BAA8B;;;;;;wBArJO,CAAC;;;6CAwJ3C,CAAC;AAEF,eAAe,8BAA8B,CAAC"}

package/build-types/form-file-upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-file-upload/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAE,EAC/B,MAAM,EACN,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,QAAQ,EAAE,KAAK,CAAE,+BA6BjE;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-file-upload/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAE,EAC/B,MAAM,EACN,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,QAAQ,EAAE,KAAK,CAAE,+BAmCjE;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.8.8",
+	"version": "28.8.10",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b78063a69a8154bed32c2217ffbaf911852cffb5"
+	"gitHead": "c4e8df94ae35ecd06b2a0c86792432b484a3bbac"
 }

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/form-file-upload/index.tsx

@@ -47,6 +47,12 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+	// This can be removed once the Chromium fix is in the stable channel.
+	const compatAccept = !! accept?.includes( 'image/*' )
+		? `${ accept }, image/heic, image/heif`
+		: accept;
 
 	return (
 		<div className="components-form-file-upload">
@@ -56,7 +62,7 @@ export function FormFileUpload( {
 				ref={ ref }
 				multiple={ multiple }
 				style={ { display: 'none' } }
-				accept={ accept }
+				accept={ compatAccept }
 				onChange={ onChange }
 				onClick={ onClick }
 				data-testid="form-file-upload-input"

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
 					  );