diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index b64b3299fc96b..c8e8c0005cfef 100644 --- 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 ( <> setAttributes( { aspectRatio: nextAspectRatio } ) }