Adds Aspect ratio control on Image blocks in Grids (#62891)

Co-authored-by: amitraj2203 <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: ndiego <[email protected]>
WordPress · Jun 28, 2024 · 535c74f · 535c74f
1 parent 55f3a98
commit 535c74f
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 94 deletions.
diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js
@@ -58,6 +58,7 @@ function DimensionsTool( {
 	scaleOptions, // Default options handled by ScaleTool.
 	defaultScale = 'fill', // Match CSS default value for object-fit.
 	unitsOptions, // Default options handled by UnitControl.
+	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
 } ) {
 	// Coerce undefined and CSS default values to be null.
 	const width =
@@ -92,95 +93,102 @@ function DimensionsTool( {
 
 	return (
 		<>
-			<AspectRatioTool
-				panelId={ panelId }
-				options={ aspectRatioOptions }
-				defaultValue={ defaultAspectRatio }
-				value={ aspectRatioValue }
-				onChange={ ( nextAspectRatio ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextAspectRatio =
-						nextAspectRatio === 'auto' ? null : nextAspectRatio;
-
-					setLastAspectRatio( nextAspectRatio );
-
-					// Update aspectRatio.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.aspectRatio;
-					} else {
-						nextValue.aspectRatio = nextAspectRatio;
-					}
-
-					// Auto-update scale.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					// Auto-update width and height.
-					if ( 'custom' !== nextAspectRatio && width && height ) {
-						delete nextValue.height;
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			<WidthHeightTool
-				panelId={ panelId }
-				units={ unitsOptions }
-				value={ { width, height } }
-				onChange={ ( { width: nextWidth, height: nextHeight } ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextWidth = nextWidth === 'auto' ? null : nextWidth;
-					nextHeight = nextHeight === 'auto' ? null : nextHeight;
-
-					// Update width.
-					if ( ! nextWidth ) {
-						delete nextValue.width;
-					} else {
-						nextValue.width = nextWidth;
-					}
-
-					// Update height.
-					if ( ! nextHeight ) {
-						delete nextValue.height;
-					} else {
-						nextValue.height = nextHeight;
-					}
-
-					// Auto-update aspectRatio.
-					if ( nextWidth && nextHeight ) {
-						delete nextValue.aspectRatio;
-					} else if ( lastAspectRatio ) {
-						nextValue.aspectRatio = lastAspectRatio;
-					} else {
-						// No setting defaultAspectRatio here, because
-						// aspectRatio is optional in this scenario,
-						// unlike scale.
-					}
-
-					// Auto-update scale.
-					if ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			{ showScaleControl && (
+			{ tools.includes( 'aspectRatio' ) && (
+				<AspectRatioTool
+					panelId={ panelId }
+					options={ aspectRatioOptions }
+					defaultValue={ defaultAspectRatio }
+					value={ aspectRatioValue }
+					onChange={ ( nextAspectRatio ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextAspectRatio =
+							nextAspectRatio === 'auto' ? null : nextAspectRatio;
+
+						setLastAspectRatio( nextAspectRatio );
+
+						// Update aspectRatio.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.aspectRatio;
+						} else {
+							nextValue.aspectRatio = nextAspectRatio;
+						}
+
+						// Auto-update scale.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						// Auto-update width and height.
+						if ( 'custom' !== nextAspectRatio && width && height ) {
+							delete nextValue.height;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'widthHeight' ) && (
+				<WidthHeightTool
+					panelId={ panelId }
+					units={ unitsOptions }
+					value={ { width, height } }
+					onChange={ ( { width: nextWidth, height: nextHeight } ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextWidth = nextWidth === 'auto' ? null : nextWidth;
+						nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+						// Update width.
+						if ( ! nextWidth ) {
+							delete nextValue.width;
+						} else {
+							nextValue.width = nextWidth;
+						}
+
+						// Update height.
+						if ( ! nextHeight ) {
+							delete nextValue.height;
+						} else {
+							nextValue.height = nextHeight;
+						}
+
+						// Auto-update aspectRatio.
+						if ( nextWidth && nextHeight ) {
+							delete nextValue.aspectRatio;
+						} else if ( lastAspectRatio ) {
+							nextValue.aspectRatio = lastAspectRatio;
+						} else {
+							// No setting defaultAspectRatio here, because
+							// aspectRatio is optional in this scenario,
+							// unlike scale.
+						}
+
+						// Auto-update scale.
+						if (
+							! lastAspectRatio &&
+							!! nextWidth !== !! nextHeight
+						) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'scale' ) && showScaleControl && (
 				<ScaleTool
 					panelId={ panelId }
 					options={ scaleOptions }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -182,8 +182,7 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport &&
-		parentLayoutType !== 'grid';
+		isLargeViewport;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -405,6 +404,20 @@ export default function Image( {
 		/>
 	);
 
+	const aspectRatioControl = (
+		<DimensionsTool
+			value={ { aspectRatio } }
+			onChange={ ( { aspectRatio: newAspectRatio } ) => {
+				setAttributes( {
+					aspectRatio: newAspectRatio,
+					scale: 'cover',
+				} );
+			} }
+			defaultAspectRatio="auto"
+			tools={ [ 'aspectRatio' ] }
+		/>
+	);
+
 	const resetAll = () => {
 		setAttributes( {
 			alt: undefined,
@@ -423,7 +436,10 @@ export default function Image( {
 				resetAll={ resetAll }
 				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable && dimensionsControl }
+				{ isResizable &&
+					( parentLayoutType === 'grid'
+						? aspectRatioControl
+						: dimensionsControl ) }
 			</ToolsPanel>
 		</InspectorControls>
 	);
@@ -738,7 +754,10 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable && dimensionsControl }
+					{ isResizable &&
+						( parentLayoutType === 'grid'
+							? aspectRatioControl
+							: dimensionsControl ) }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -848,7 +867,7 @@ export default function Image( {
 				/>
 			</ImageWrapper>
 		);
-	} else if ( ! isResizable ) {
+	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
 		img = (
 			<div style={ { width, height, aspectRatio } }>
 				<ImageWrapper href={ href }>{ img }</ImageWrapper>