Prevent images from appearing squished when only one dimension is set

packages/block-library/src/image/deprecated.js

@@ -11,8 +11,14 @@ import {
 	useBlockProps,
 	__experimentalGetElementClassName,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { mediaPosition } from './utils';
+
 /**
  * Deprecation for adding the `wp-image-${id}` class to the image block for
  * responsive images.
@@ -854,11 +860,12 @@ const v7 = {
 			},
 		},
 	},
-	migrate( { width, height, ...attributes } ) {
+	migrate( attributes ) {
+		const { width, height } = attributes;
 		return {
 			...attributes,
-			width: `${ width }px`,
-			height: `${ height }px`,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
 		};
 	},
 	save( { attributes } ) {
@@ -1166,4 +1173,229 @@ const v8 = {
 	},
 };
 
-export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
+/**
+ * Deprecation for adding height: auto when only one dimension is explicitly
+ * set, to prevent theme CSS from squishing images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/70575
+ */
+const v9 = {
+	attributes: {
+		blob: {
+			type: 'string',
+			role: 'local',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			role: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			role: 'content',
+		},
+		caption: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'figcaption',
+			role: 'content',
+		},
+		lightbox: {
+			type: 'object',
+			enabled: {
+				type: 'boolean',
+			},
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			role: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			role: 'content',
+		},
+		width: {
+			type: 'string',
+		},
+		height: {
+			type: 'string',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		interactivity: true,
+		align: [ 'left', 'center', 'right', 'wide', 'full' ],
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		spacing: {
+			margin: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			focalPoint,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+			metadata: { bindings = {} } = {},
+		} = attributes;
+
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+
+		const classes = clsx( {
+			alignnone: 'none' === align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
+
+		const imageClasses = clsx( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					...shadowProps.style,
+					aspectRatio,
+					objectFit: scale,
+					objectPosition:
+						focalPoint && scale
+							? mediaPosition( focalPoint )
+							: undefined,
+					width,
+					height,
+				} }
+				title={ title }
+			/>
+		);
+
+		const displayCaption =
+			! RichText.isEmpty( caption ) ||
+			bindings.caption ||
+			bindings?.__default?.source === 'core/pattern-overrides';
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ displayCaption && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+export default [ v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

packages/block-library/src/image/image.js

@@ -1102,7 +1102,33 @@ export default function Image( {
 									height:
 										pixelSize.height + resizeDelta.height,
 							  }
-							: { width, height } ),
+							: ( () => {
+									const style = {};
+									if ( width === 'auto' ) {
+										style.width = 'auto';
+									} else if (
+										width !== undefined &&
+										width !== null
+									) {
+										style.width =
+											typeof width === 'number'
+												? `${ width }px`
+												: width;
+									}
+									if (
+										height === 'auto' ||
+										height === undefined ||
+										height === null
+									) {
+										style.height = 'auto';
+									} else {
+										style.height =
+											typeof height === 'number'
+												? `${ height }px`
+												: height;
+									}
+									return style;
+							  } )() ),
 						objectFit: scale,
 						objectPosition:
 							focalPoint && scale

packages/block-library/src/image/save.js

@@ -65,18 +65,43 @@ export default function save( { attributes } ) {
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
-			style={ {
-				...borderProps.style,
-				...shadowProps.style,
-				aspectRatio,
-				objectFit: scale,
-				objectPosition:
-					focalPoint && scale
-						? mediaPosition( focalPoint )
-						: undefined,
-				width,
-				height,
-			} }
+			style={ ( () => {
+				const style = {
+					...borderProps.style,
+					...shadowProps.style,
+					aspectRatio,
+					objectFit: scale,
+					objectPosition:
+						focalPoint && scale
+							? mediaPosition( focalPoint )
+							: undefined,
+				};
+				// Only apply dimension styles when a width or height is provided.
+				if ( width !== undefined || height !== undefined ) {
+					// Only apply width when explicitly provided.
+					if ( width === 'auto' ) {
+						style.width = 'auto';
+					} else if ( width !== undefined && width !== null ) {
+						style.width =
+							typeof width === 'number' ? `${ width }px` : width;
+					}
+					// Force height to auto when unspecified to prevent
+					// theme CSS from squishing the image.
+					if (
+						height === 'auto' ||
+						height === undefined ||
+						height === null
+					) {
+						style.height = 'auto';
+					} else {
+						style.height =
+							typeof height === 'number'
+								? `${ height }px`
+								: height;
+					}
+				}
+				return style;
+			} )() }
 			title={ title }
 		/>
 	);

test/integration/fixtures/blocks/core__image__deprecated-v9-add-height-auto.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"width":"200px","sizeSlug":"large"} -->
+<figure class="wp-block-image size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:200px"/></figure>
+<!-- /wp:image -->

test/integration/fixtures/blocks/core__image__deprecated-v9-add-height-auto.json

@@ -0,0 +1,14 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"sizeSlug": "large",
+			"width": "200px"
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__image__deprecated-v9-add-height-auto.parsed.json

@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"width": "200px",
+			"sizeSlug": "large"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"width:200px\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"width:200px\"/></figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__image__deprecated-v9-add-height-auto.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"width":"200px","sizeSlug":"large"} -->
+<figure class="wp-block-image size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:200px;height:auto"/></figure>
+<!-- /wp:image -->