diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 34b4573c1002cb..bdfdca6ee3c4d6 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -6,7 +6,11 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+ RichText,
+ useBlockProps,
+ __experimentalGetElementClassName as getBorderClassesAndStyles,
+} from '@wordpress/block-editor';
/**
* Deprecation for adding the `wp-image-${id}` class to the image block for
@@ -539,4 +543,95 @@ const v5 = {
},
};
-export default [ v5, v4, v3, v2, v1 ];
+/**
+ * Deprecation for adding width and height as style rules on the inner img.
+ * It also updates the widht and height attributes to be strings instead of numbers.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+const v6 = {
+ save( { attributes } ) {
+ const {
+ url,
+ alt,
+ caption,
+ align,
+ href,
+ rel,
+ linkClass,
+ width,
+ height,
+ aspectRatio,
+ scale,
+ id,
+ linkTarget,
+ sizeSlug,
+ title,
+ } = attributes;
+
+ const newRel = ! rel ? undefined : rel;
+ const borderProps = getBorderClassesAndStyles( attributes );
+
+ const classes = classnames( {
+ [ `align${ align }` ]: align,
+ [ `size-${ sizeSlug }` ]: sizeSlug,
+ 'is-resized': width || height,
+ 'has-custom-border':
+ !! borderProps.className ||
+ ( borderProps.style &&
+ Object.keys( borderProps.style ).length > 0 ),
+ } );
+
+ const imageClasses = classnames( borderProps.className, {
+ [ `wp-image-${ id }` ]: !! id,
+ } );
+
+ const image = (
+
+ );
+
+ const figure = (
+ <>
+ { href ? (
+
+ { image }
+
+ ) : (
+ image
+ ) }
+ { ! RichText.isEmpty( caption ) && (
+
+ ) }
+ >
+ );
+
+ return (
+
+ { figure }
+
+ );
+ },
+};
+
+export default [ v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 95e8803dd67858..6fa8c6b2342f32 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -58,6 +58,8 @@ export default function save( { attributes } ) {
...borderProps.style,
aspectRatio,
objectFit: scale,
+ width,
+ height,
} }
width={ width }
height={ height }
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
index 24be125d856abf..6b2f1a80f52c6d 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
@@ -3,10 +3,10 @@
"name": "core/image",
"isValid": true,
"attributes": {
- "align": "left",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
- "caption": []
+ "caption": [],
+ "align": "left"
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
index 8d1d58f3e6fd3e..a0ad3b755587b8 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
@@ -3,10 +3,10 @@
"name": "core/image",
"isValid": true,
"attributes": {
- "align": "left",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
"caption": [],
+ "align": "left",
"width": 100,
"height": 100
},
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
index eb06f249748638..7ce56e11fa75e9 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
index eb06f249748638..7ce56e11fa75e9 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
index 5ba1eb754e83f6..cfdc52e3cbb6ea 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-
+