Output width and height attributes for Image blocks

packages/block-library/src/image/edit.js

@@ -4,6 +4,7 @@
 import classnames from 'classnames';
 import ResizableBox from 're-resizable';
 import {
+	find,
 	get,
 	isEmpty,
 	map,
@@ -64,7 +65,7 @@ class ImageEdit extends Component {
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onImageClick = this.onImageClick.bind( this );
 		this.onSelectImage = this.onSelectImage.bind( this );
-		this.updateImageURL = this.updateImageURL.bind( this );
+		this.updateSizesAndURL = this.updateSizesAndURL.bind( this );
 		this.updateWidth = this.updateWidth.bind( this );
 		this.updateHeight = this.updateHeight.bind( this );
 		this.updateDimensions = this.updateDimensions.bind( this );
@@ -121,9 +122,7 @@ class ImageEdit extends Component {
 			return;
 		}
 		this.props.setAttributes( {
-			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
-			width: undefined,
-			height: undefined,
+			...pick( media, [ 'alt', 'id', 'caption', 'url', 'width', 'height' ] ),
 		} );
 	}
 
@@ -177,21 +176,32 @@ class ImageEdit extends Component {
 		this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
 	}
 
-	updateImageURL( url ) {
-		this.props.setAttributes( { url, width: undefined, height: undefined } );
+	updateSizesAndURL( url ) {
+		const newAttributes = { url, isResized: false };
+		const availableSizes = this.getAvailableSizes();
+
+		const newSize = find( availableSizes, ( size ) => {
+			return url === size.source_url;
+		} );
+
+		if ( undefined !== newSize && undefined !== newSize.width && undefined !== newSize.height ) {
+			newAttributes.width = newSize.width;
+			newAttributes.height = newSize.height;
+		}
+		this.props.setAttributes( newAttributes );
 	}
 
 	updateWidth( width ) {
-		this.props.setAttributes( { width: parseInt( width, 10 ) } );
+		this.props.setAttributes( { width: parseInt( width, 10 ), isResized: true } );
 	}
 
 	updateHeight( height ) {
-		this.props.setAttributes( { height: parseInt( height, 10 ) } );
+		this.props.setAttributes( { height: parseInt( height, 10 ), isResized: true } );
 	}
 
 	updateDimensions( width = undefined, height = undefined ) {
 		return () => {
-			this.props.setAttributes( { width, height } );
+			this.props.setAttributes( { width, height, isResized: !! ( width && height ) } );
 		};
 	}
 
@@ -210,7 +220,7 @@ class ImageEdit extends Component {
 
 	render() {
 		const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection, isRTL } = this.props;
-		const { url, alt, caption, align, id, href, linkDestination, width, height } = attributes;
+		const { url, alt, caption, align, id, href, linkDestination, width, height, isResized } = attributes;
 
 		const controls = (
 			<BlockControls>
@@ -260,7 +270,7 @@ class ImageEdit extends Component {
 
 		const classes = classnames( className, {
 			'is-transient': 0 === url.indexOf( 'blob:' ),
-			'is-resized': !! width || !! height,
+			'is-resized': isResized,
 			'is-focused': isSelected,
 		} );
 
@@ -285,7 +295,7 @@ class ImageEdit extends Component {
 								value: size.source_url,
 								label: startCase( name ),
 							} ) ) }
-							onChange={ this.updateImageURL }
+							onChange={ this.updateSizesAndURL }
 						/>
 					) }
 					{ isResizable && (
@@ -299,7 +309,6 @@ class ImageEdit extends Component {
 									className="block-library-image__dimensions__width"
 									label={ __( 'Width' ) }
 									value={ width !== undefined ? width : '' }
-									placeholder={ imageWidth }
 									min={ 1 }
 									onChange={ this.updateWidth }
 								/>
@@ -308,7 +317,6 @@ class ImageEdit extends Component {
 									className="block-library-image__dimensions__height"
 									label={ __( 'Height' ) }
 									value={ height !== undefined ? height : '' }
-									placeholder={ imageHeight }
 									min={ 1 }
 									onChange={ this.updateHeight }
 								/>

packages/block-library/src/image/index.js

@@ -56,9 +56,18 @@ const blockAttributes = {
 	},
 	width: {
 		type: 'number',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'width',
 	},
 	height: {
 		type: 'number',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'height',
+	},
+	isResized: {
+		type: 'boolean',
 	},
 	linkDestination: {
 		type: 'string',
@@ -68,7 +77,7 @@ const blockAttributes = {
 
 const imageSchema = {
 	img: {
-		attributes: [ 'src', 'alt' ],
+		attributes: [ 'src', 'alt', 'width', 'height' ],
 		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
 	},
 };
@@ -199,11 +208,11 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { url, alt, caption, align, href, width, height, id } = attributes;
+		const { url, alt, caption, align, href, width, height, id, isResized } = attributes;
 
 		const classes = classnames( {
 			[ `align${ align }` ]: align,
-			'is-resized': width || height,
+			'is-resized': isResized,
 		} );
 
 		const image = (

test/integration/fixtures/google-docs-out.html

@@ -31,6 +31,6 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" alt=""/></figure>
+<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/ID" alt="" width="602" height="451"/></figure>
 <!-- /wp:image -->
 

test/integration/fixtures/ms-word-out.html

@@ -35,5 +35,5 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="" alt=""/></figure>
+<figure class="wp-block-image"><img src="" alt="" width="451" height="338"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/one-image-out.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"id":5114} -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114"/></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114" width="300" height="137"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/two-images-out.html

@@ -1,7 +1,7 @@
 <!-- wp:image {"id":5114} -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114"/></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" class="wp-image-5114" width="300" height="137"/></figure>
 <!-- /wp:image -->
 
 <!-- wp:image {"id":5109} -->
-<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" class="wp-image-5109"/></figure>
+<figure class="wp-block-image"><img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" class="wp-image-5109" width="300" height="248"/></figure>
 <!-- /wp:image -->

test/integration/full-content/fixtures/core__image.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image -->
-<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></figure>
+<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="769" height="511" /></figure>
 <!-- /wp:core/image -->

test/integration/full-content/fixtures/core__image.json

@@ -5,6 +5,8 @@
         "isValid": true,
         "attributes": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "width": 769,
+            "height": 511,
             "alt": "",
             "caption": {
                 "formats": [],
@@ -13,6 +15,6 @@
             "linkDestination": "none"
         },
         "innerBlocks": [],
-        "originalContent": "<figure class=\"wp-block-image\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></figure>"
+        "originalContent": "<figure class=\"wp-block-image\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"769\" height=\"511\" /></figure>"
     }
 ]

test/integration/full-content/fixtures/core__image.parsed.json

@@ -3,7 +3,7 @@
         "blockName": "core/image",
         "attrs": null,
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-image\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-image\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"769\" height=\"511\" /></figure>\n"
     },
     {
         "attrs": {},

test/integration/full-content/fixtures/core__image.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image -->
-<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></figure>
+<figure class="wp-block-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="769" height="511"/></figure>
 <!-- /wp:image -->

test/integration/full-content/fixtures/core__image__attachment-link.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image {"linkDestination":"attachment"}  -->
-<figure class="wp-block-image"><a href="http://localhost:8888/?attachment_id=7"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>
+<figure class="wp-block-image"><a href="http://localhost:8888/?attachment_id=7"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="769" height="511"/></a></figure>
 <!-- /wp:core/image -->

test/integration/full-content/fixtures/core__image__attachment-link.json

@@ -6,6 +6,9 @@
         "attributes": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "alt": "",
+            "width": 769,
+            "height": 511,
+            "caption": [],
             "caption": {
                 "formats": [],
                 "text": ""
@@ -14,6 +17,6 @@
             "linkDestination": "attachment"
         },
         "innerBlocks": [],
-        "originalContent": "<figure class=\"wp-block-image\"><a href=\"http://localhost:8888/?attachment_id=7\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>"
+        "originalContent": "<figure class=\"wp-block-image\"><a href=\"http://localhost:8888/?attachment_id=7\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"769\" height=\"511\"/></a></figure>"
     }
 ]

test/integration/full-content/fixtures/core__image__attachment-link.parsed.json

@@ -5,7 +5,7 @@
             "linkDestination": "attachment"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"http://localhost:8888/?attachment_id=7\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"http://localhost:8888/?attachment_id=7\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"769\" height=\"511\"/></a></figure>\n"
     },
     {
         "attrs": {},

test/integration/full-content/fixtures/core__image__attachment-link.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"linkDestination":"attachment"} -->
-<figure class="wp-block-image"><a href="http://localhost:8888/?attachment_id=7"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></a></figure>
+<figure class="wp-block-image"><a href="http://localhost:8888/?attachment_id=7"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="769" height="511"/></a></figure>
 <!-- /wp:image -->

test/integration/full-content/fixtures/core__image__center-caption.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image {"align":"center"} -->
-<div class="wp-block-image"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>
+<div class="wp-block-image"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" width="1322" height="511" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>
 <!-- /wp:core/image -->

test/integration/full-content/fixtures/core__image__center-caption.json

@@ -5,7 +5,11 @@
         "isValid": true,
         "attributes": {
             "url": "https://cldup.com/YLYhpou2oq.jpg",
+            "width": 1322,
             "alt": "",
+            "caption": [
+                "Give it a try. Press the \"really wide\" button on the image toolbar."
+            ],
             "caption": {
                 "formats": [
                     null,
@@ -78,10 +82,11 @@
                 ],
                 "text": "Give it a try. Press the \"really wide\" button on the image toolbar."
             },
+            "height": 511,
             "align": "center",
             "linkDestination": "none"
         },
         "innerBlocks": [],
-        "originalContent": "<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>"
+        "originalContent": "<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" width=\"1322\" height=\"511\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>"
     }
 ]

test/integration/full-content/fixtures/core__image__center-caption.parsed.json

@@ -5,7 +5,7 @@
             "align": "center"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>\n"
+        "innerHTML": "\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" alt=\"\" width=\"1322\" height=\"511\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>\n"
     },
     {
         "attrs": {},

test/integration/full-content/fixtures/core__image__center-caption.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"align":"center"} -->
-<div class="wp-block-image"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt=""/><figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure></div>
+<div class="wp-block-image"><figure class="aligncenter"><img src="https://cldup.com/YLYhpou2oq.jpg" alt="" width="1322" height="511"/><figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure></div>
 <!-- /wp:image -->

test/integration/full-content/fixtures/core__image__custom-link.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image {"linkDestination":"custom"}  -->
-<figure class="wp-block-image"><a href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>
+<figure class="wp-block-image"><a href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="579" height="385" /></a></figure>
 <!-- /wp:core/image -->

test/integration/full-content/fixtures/core__image__custom-link.json

@@ -5,15 +5,17 @@
         "isValid": true,
         "attributes": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "width": 579,
             "alt": "",
             "caption": {
                 "formats": [],
                 "text": ""
             },
+            "height": 385,
             "href": "https://wordpress.org/",
             "linkDestination": "custom"
         },
         "innerBlocks": [],
-        "originalContent": "<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>"
+        "originalContent": "<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"579\" height=\"385\" /></a></figure>"
     }
 ]

test/integration/full-content/fixtures/core__image__custom-link.parsed.json

@@ -5,7 +5,7 @@
             "linkDestination": "custom"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"579\" height=\"385\" /></a></figure>\n"
     },
     {
         "attrs": {},

test/integration/full-content/fixtures/core__image__custom-link.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"linkDestination":"custom"} -->
-<figure class="wp-block-image"><a href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></a></figure>
+<figure class="wp-block-image"><a href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="579" height="385"/></a></figure>
 <!-- /wp:image -->

test/integration/full-content/fixtures/core__image__media-link.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image {"linkDestination":"media"}  -->
-<figure class="wp-block-image"><a href="https://cldup.com/uuUqE_dXzy.jpg"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>
+<figure class="wp-block-image"><a href="https://cldup.com/uuUqE_dXzy.jpg"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="579" height="385" /></a></figure>
 <!-- /wp:core/image -->

test/integration/full-content/fixtures/core__image__media-link.json

@@ -10,10 +10,12 @@
                 "formats": [],
                 "text": ""
             },
+            "height": 385,
+            "width": 579,
             "href": "https://cldup.com/uuUqE_dXzy.jpg",
             "linkDestination": "media"
         },
         "innerBlocks": [],
-        "originalContent": "<figure class=\"wp-block-image\"><a href=\"https://cldup.com/uuUqE_dXzy.jpg\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>"
+        "originalContent": "<figure class=\"wp-block-image\"><a href=\"https://cldup.com/uuUqE_dXzy.jpg\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"579\" height=\"385\" /></a></figure>"
     }
 ]

test/integration/full-content/fixtures/core__image__media-link.parsed.json

@@ -5,7 +5,7 @@
             "linkDestination": "media"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"https://cldup.com/uuUqE_dXzy.jpg\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n"
+        "innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"https://cldup.com/uuUqE_dXzy.jpg\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" width=\"579\" height=\"385\" /></a></figure>\n"
     },
     {
         "attrs": {},

test/integration/full-content/fixtures/core__image__media-link.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"linkDestination":"media"} -->
-<figure class="wp-block-image"><a href="https://cldup.com/uuUqE_dXzy.jpg"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></a></figure>
+<figure class="wp-block-image"><a href="https://cldup.com/uuUqE_dXzy.jpg"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" width="579" height="385"/></a></figure>
 <!-- /wp:image -->