fix use aspect ratio options from theme.json in post featured image b…

…lock
WordPress · May 2, 2024 · 8496552 · 8496552
1 parent 8a3088c
commit 8496552
Showing 1 changed file with 30 additions and 36 deletions.
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -57,7 +57,13 @@ const DimensionControls = ( {
 	setAttributes,
 	media,
 } ) => {
-	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
+		useSettings(
+			'spacing.units',
+			'dimensions.aspectRatios.default',
+			'dimensions.aspectRatios.theme',
+			'dimensions.defaultAspectRatios'
+		);
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
@@ -93,6 +99,28 @@ const DimensionControls = ( {
 	const showScaleControl =
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+	];
+
 	return (
 		<>
 			<ToolsPanelItem
@@ -109,41 +137,7 @@ const DimensionControls = ( {
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
-					options={ [
-						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
-						{
-							label: __( 'Original' ),
-							value: 'auto',
-						},
-						{
-							label: __( 'Square' ),
-							value: '1',
-						},
-						{
-							label: __( '16:9' ),
-							value: '16/9',
-						},
-						{
-							label: __( '4:3' ),
-							value: '4/3',
-						},
-						{
-							label: __( '3:2' ),
-							value: '3/2',
-						},
-						{
-							label: __( '9:16' ),
-							value: '9/16',
-						},
-						{
-							label: __( '3:4' ),
-							value: '3/4',
-						},
-						{
-							label: __( '2:3' ),
-							value: '2/3',
-						},
-					] }
+					options={ aspectRatioOptions }
 					onChange={ ( nextAspectRatio ) =>
 						setAttributes( { aspectRatio: nextAspectRatio } )
 					}