Add deprecation for moving border radius to inner image element

New border block support styles and classes need to be on the inner img element. As a result it makes sense to move the border radius style with them. This requires a deprecation which this commit provides along with new fixtures.
WordPress · Apr 30, 2021 · 087c2b6 · 087c2b6
1 parent ae4b948
commit 087c2b6
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 1 deletion.
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const blockAttributes = {
 	align: {
@@ -30,6 +31,12 @@ const blockAttributes = {
 		source: 'html',
 		selector: 'figcaption',
 	},
+	title: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'title',
+	},
 	href: {
 		type: 'string',
 		source: 'attribute',
@@ -57,6 +64,9 @@ const blockAttributes = {
 	height: {
 		type: 'number',
 	},
+	sizeSlug: {
+		type: 'string',
+	},
 	linkDestination: {
 		type: 'string',
 	},
@@ -189,6 +199,93 @@ const deprecated = [
 			);
 		},
 	},
+	{
+		attributes: blockAttributes,
+		supports: {
+			anchor: true,
+			color: {
+				__experimentalDuotone: 'img',
+				text: false,
+				background: false,
+				__experimentalBorder: {
+					radius: true,
+				},
+			},
+		},
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			if ( 'left' === align || 'right' === align || 'center' === align ) {
+				return (
+					<div { ...useBlockProps.save() }>
+						<figure className={ classes }>{ figure }</figure>
+					</div>
+				);
+			}
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 ];
 
 export default deprecated;
diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.html b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"id":260,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":50}}} -->
+<figure class="wp-block-image size-large" style="border-radius:50px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-260"/></figure>
+<!-- /wp:image -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.json b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.json
@@ -0,0 +1,22 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"id": 260,
+			"sizeSlug": "large",
+			"linkDestination": "none",
+			"style": {
+				"border": {
+					"radius": 50
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": "<figure class=\"wp-block-image size-large\" style=\"border-radius:50px\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" class=\"wp-image-260\"/></figure>"
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.parsed.json b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.parsed.json
@@ -0,0 +1,20 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"id": 260,
+			"sizeSlug": "large",
+			"linkDestination": "none",
+			"style": {
+				"border": {
+					"radius": 50
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image size-large\" style=\"border-radius:50px\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" class=\"wp-image-260\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image size-large\" style=\"border-radius:50px\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" class=\"wp-image-260\"/></figure>\n"
+		]
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.serialized.html b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-4.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"id":260,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":50}}} -->
+<figure class="wp-block-image size-large"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-260" style="border-radius:50px"/></figure>
+<!-- /wp:image -->