Fix image block v6 deprecation (#52822)

* Remove incorrect comment * Add missing attribtes and supports * Add integration tests for the deprecation * Fix incorrect import * Fix fixtures
WordPress · Jul 25, 2023 · 0c46818 · 0c46818
1 parent ec0ed70
commit 0c46818
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 2 deletions.
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalGetElementClassName as getBorderClassesAndStyles,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -545,11 +545,114 @@ const v5 = {
 
 /**
  * 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 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			__experimentalRole: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			__experimentalRole: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		anchor: true,
+		behaviors: {
+			lightbox: true,
+		},
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+	},
 	save( { attributes } ) {
 		const {
 			url,

diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","style":{"border":{"radius":"100%"}},"className":"is-style-rounded"} -->
+<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="164" height="164"/></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
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"align": "left",
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large",
+			"className": "is-style-rounded",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/...integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json b/...integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json
@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"align": "left",
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			},
+			"className": "is-style-rounded"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<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=\"164\" height=\"164\"/></figure>\n",
+		"innerContent": [
+			"\n<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=\"164\" height=\"164\"/></figure>\n"
+		]
+	}
+]
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
@@ -0,0 +1,3 @@
+<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","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" width="164" height="164"/></figure>
+<!-- /wp:image -->