Add additional size units to product image element (#50770)

* Add additional size units to product image element

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx

@@ -43,6 +43,33 @@ const scaleHelp: Record< string, string > = {
 	),
 };
 
+const sizeUnits: { value: string; label: string }[] = [
+	{
+		value: 'px',
+		label: 'px',
+	},
+	{
+		value: 'em',
+		label: 'em',
+	},
+	{
+		value: 'rem',
+		label: 'rem',
+	},
+	{
+		value: '%',
+		label: '%',
+	},
+	{
+		value: 'vw',
+		label: 'vw',
+	},
+	{
+		value: 'vh',
+		label: 'vh',
+	},
+];
+
 export const ImageSizeSettings = ( {
 	scale,
 	width,
@@ -60,12 +87,7 @@ export const ImageSizeSettings = ( {
 					setAttributes( { height: value } );
 				} }
 				value={ height }
-				units={ [
-					{
-						value: 'px',
-						label: 'px',
-					},
-				] }
+				units={ sizeUnits }
 			/>
 			<UnitControl
 				label={ __( 'Width', 'woocommerce' ) }
@@ -73,12 +95,7 @@ export const ImageSizeSettings = ( {
 					setAttributes( { width: value } );
 				} }
 				value={ width }
-				units={ [
-					{
-						value: 'px',
-						label: 'px',
-					},
-				] }
+				units={ sizeUnits }
 			/>
 			{ height && (
 				<ToolsPanelItem

plugins/woocommerce/changelog/50770-image-add-additional-size-units

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add additional sizing units for product image block