fix WordPress#53555

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

@@ -310,6 +310,13 @@ const v4 = {
 	supports: {
 		anchor: true,
 	},
+	migrate( { width, height, ...attributes } ) {
+		return {
+			...attributes,
+			width: `${ width }px`,
+			height: `${ height }px`,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,
@@ -480,6 +487,13 @@ const v5 = {
 			},
 		},
 	},
+	migrate( { width, height, ...attributes } ) {
+		return {
+			...attributes,
+			width: `${ width }px`,
+			height: `${ height }px`,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,
@@ -654,6 +668,13 @@ const v6 = {
 			},
 		},
 	},
+	migrate( { width, height, ...attributes } ) {
+		return {
+			...attributes,
+			width: `${ width }px`,
+			height: `${ height }px`,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,

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

@@ -49,17 +49,30 @@ export default function save( { attributes } ) {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 
+	const imgStyle = { aspectRatio, objectFit: scale };
+
+	// Branch by whether width and height both have size.
+	// If the image block is very old and has not been migrated to a string type, the size will be int.
+	// Note that only width may be "auto".
+	if ( ! aspectRatio && height && width && 'auto' !== width ) {
+		const w = parseInt( width );
+		const h = parseInt( height );
+		if ( ! isNaN( w ) && ! isNaN( h ) ) {
+			imgStyle.aspectRatio = `${ w }/${ h }`;
+		}
+	} else {
+		if ( 'string' === typeof width ) imgStyle.width = width;
+		if ( 'string' === typeof height ) imgStyle.height = height;
+	}
+
 	const image = (
 		<img
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
 			style={ {
 				...borderProps.style,
-				aspectRatio,
-				objectFit: scale,
-				width,
-				height,
+				...imgStyle,
 			} }
 			title={ title }
 		/>