Image Block: Fix deprecation when width/height attribute is number (#…

…57063) # Conflicts: # test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html # test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
WordPress · Jan 5, 2024 · 69160f0 · 69160f0
1 parent b94f727
commit 69160f0
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
@@ -651,6 +651,14 @@ const v6 = {
 			},
 		},
 	},
+	migrate( attributes ) {
+		const { height, width } = attributes;
+		return {
+			...attributes,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,

diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json
@@ -7,8 +7,8 @@
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"alt": "",
 			"caption": "",
-			"width": 100,
-			"height": 100
+			"width": "100px",
+			"height": "100px"
 		},
 		"innerBlocks": []
 	}

diff --git a/.../integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/.../integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
+<!-- wp:image {"width":"100px","height":"100px","align":"left"} -->
 <figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json
@@ -7,8 +7,8 @@
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"alt": "",
 			"caption": "",
-			"width": 164,
-			"height": 164,
+			"width": "164px",
+			"height": "164px",
 			"sizeSlug": "large",
 			"className": "is-style-rounded",
 			"style": {

diff --git a/...gration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html b/...gration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
+<!-- wp:image {"width":"164px","height":"164px","sizeSlug":"large","align":"left","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
 <figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%;width:164px;height:164px"/></figure>
 <!-- /wp:image -->