Add deprecated attributes and save

WordPress · Jan 5, 2018 · 343b182 · 343b182
1 parent 6f49455
commit 343b182
Showing 1 changed file with 61 additions and 29 deletions.
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -12,6 +12,38 @@ import './editor.scss';
 import { registerBlockType, createBlock, getBlockAttributes, getBlockType } from '../../api';
 import ImageBlock from './block';
 
+const blockAttributes = {
+	url: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'src',
+	},
+	alt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'alt',
+	},
+	caption: {
+		type: 'array',
+		source: 'children',
+		selector: 'figcaption',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'href',
+	},
+	id: {
+		type: 'number',
+	},
+	align: {
+		type: 'string',
+	},
+};
+
 registerBlockType( 'core/image', {
 	title: __( 'Image' ),
 
@@ -24,35 +56,7 @@ registerBlockType( 'core/image', {
 	keywords: [ __( 'photo' ) ],
 
 	attributes: {
-		url: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'img',
-			attribute: 'src',
-		},
-		alt: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'img',
-			attribute: 'alt',
-		},
-		caption: {
-			type: 'array',
-			source: 'children',
-			selector: 'figcaption',
-		},
-		href: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'a',
-			attribute: 'href',
-		},
-		id: {
-			type: 'number',
-		},
-		align: {
-			type: 'string',
-		},
+		...blockAttributes,
 		size: {
 			type: 'number',
 		},
@@ -162,4 +166,32 @@ registerBlockType( 'core/image', {
 			</figure>
 		);
 	},
+
+	deprecated: [
+		{
+			attributes: {
+				...blockAttributes,
+				width: {
+					type: 'number',
+				},
+				height: {
+					type: 'number',
+				},
+			},
+
+			save( { attributes } ) {
+				const { url, alt, caption, align, href, width, height } = attributes;
+				const extraImageProps = width || height ? { width, height } : {};
+				const figureStyle = width ? { width } : {};
+				const image = <img src={ url } alt={ alt } { ...extraImageProps } />;
+
+				return (
+					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
+						{ href ? <a href={ href }>{ image }</a> : image }
+						{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+					</figure>
+				);
+			},
+		},
+	],
 } );