From e593b317e2724ee9592bb37d82d3397554a61b3c Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 27 Mar 2018 14:38:58 +1100
Subject: [PATCH 01/12] Add ability to manually set image dimensions

Let users manually set the width and height of an image either using a
text field or by a preset percentage amount.
---
 blocks/library/image/block.js    | 79 ++++++++++++++++++++++++++++----
 blocks/library/image/editor.scss | 20 ++++++++
 components/button/index.js       |  2 +-
 components/button/test/index.js  |  2 +-
 components/text-control/index.js |  4 +-
 5 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 7629ab5c58f0e..0360cf130b77d 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -4,11 +4,12 @@
 import classnames from 'classnames';
 import ResizableBox from 're-resizable';
 import {
-	startCase,
+	find,
+	get,
 	isEmpty,
 	map,
-	get,
 	pick,
+	startCase,
 } from 'lodash';
 
 /**
@@ -18,9 +19,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
+	Button,
+	ButtonGroup,
 	IconButton,
 	PanelBody,
 	SelectControl,
+	TextControl,
 	TextareaControl,
 	Toolbar,
 } from '@wordpress/components';
@@ -144,10 +148,6 @@ class ImageBlock extends Component {
 		const { attributes, setAttributes, isSelected, className, settings, toggleSelection } = this.props;
 		const { url, alt, caption, align, id, href, width, height } = attributes;
 
-		const availableSizes = this.getAvailableSizes();
-		const figureStyle = width ? { width } : {};
-		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );
-
 		const controls = (
 			isSelected && (
 				<BlockControls key="controls">
@@ -176,7 +176,10 @@ class ImageBlock extends Component {
 			)
 		);
 
-		if ( ! url ) {
+		const availableSizes = this.getAvailableSizes();
+		const selectedSize = find( availableSizes, ( size ) => size.source_url === url );
+
+		if ( ! url || ! selectedSize ) {
 			return [
 				controls,
 				<ImagePlaceholder
@@ -195,8 +198,10 @@ class ImageBlock extends Component {
 			'is-focused': isSelected,
 		} );
 
-		// Disable reason: Each block can be selected by clicking on it
+		const figureStyle = width ? { width } : {};
+		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );
 
+		// Disable reason: Each block can be selected by clicking on it
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return [
 			controls,
@@ -211,7 +216,7 @@ class ImageBlock extends Component {
 						/>
 						{ ! isEmpty( availableSizes ) && (
 							<SelectControl
-								label={ __( 'Size' ) }
+								label={ __( 'Source Type' ) }
 								value={ url }
 								options={ map( availableSizes, ( size, name ) => ( {
 									value: size.source_url,
@@ -220,6 +225,62 @@ class ImageBlock extends Component {
 								onChange={ this.updateImageURL }
 							/>
 						) }
+						<div className="blocks-image-dimensions">
+							<div className="blocks-image-dimensions__row">
+								<TextControl
+									type="number"
+									className="blocks-image-dimensions__width"
+									label={ __( 'Width' ) }
+									value={ width !== undefined ? width : '' }
+									placeholder={ selectedSize.width }
+									onChange={ ( value ) => {
+										setAttributes( { width: parseInt( value, 10 ) } );
+									} }
+								/>
+								<TextControl
+									type="number"
+									className="blocks-image-dimensions__height"
+									label={ __( 'Height' ) }
+									value={ height !== undefined ? height : '' }
+									placeholder={ selectedSize.height }
+									onChange={ ( value ) => {
+										setAttributes( { height: parseInt( value, 10 ) } );
+									} }
+								/>
+							</div>
+							<div className="blocks-image-dimensions__row">
+								<ButtonGroup aria-label={ __( 'Image Size' ) }>
+									{ [ 25, 50, 75, 100 ].map( ( scale ) => {
+										const scaledWidth = Math.round( selectedSize.width * ( scale / 100 ) );
+										const scaledHeight = Math.round( selectedSize.height * ( scale / 100 ) );
+
+										const isCurrent = width === scaledWidth && height === scaledHeight;
+
+										return (
+											<Button
+												key={ scale }
+												isSmall
+												isPrimary={ isCurrent }
+												aria-pressed={ isCurrent }
+												onClick={ () => {
+													setAttributes( { width: scaledWidth, height: scaledHeight } );
+												} }
+											>
+												{ scale }%
+											</Button>
+										);
+									} ) }
+								</ButtonGroup>
+								<Button
+									isSmall
+									onClick={ () => {
+										setAttributes( { width: undefined, height: undefined } );
+									} }
+								>
+									{ __( 'Reset' ) }
+								</Button>
+							</div>
+						</div>
 					</PanelBody>
 				</InspectorControls>
 			),
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index db51468bc901e..02e36a0acf37f 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -92,3 +92,23 @@
 		margin-right: auto;
 	}
 }
+
+.blocks-image-dimensions {
+	.blocks-image-dimensions__row {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.blocks-image-dimensions__width,
+	.blocks-image-dimensions__height {
+		margin-bottom: 0.5em;
+	}
+
+	.blocks-image-dimensions__width {
+		margin-right: 5px;
+	}
+
+	.blocks-image-dimensions__height {
+		margin-left: 5px;
+	}
+}
diff --git a/components/button/index.js b/components/button/index.js
index 49713d398a824..26d576b78d47e 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -47,7 +47,7 @@ class Button extends Component {
 			...additionalProps
 		} = this.props;
 		const classes = classnames( 'components-button', className, {
-			button: ( isPrimary || isLarge ),
+			button: ( isPrimary || isLarge || isSmall ),
 			'button-primary': isPrimary,
 			'button-large': isLarge,
 			'button-small': isSmall,
diff --git a/components/button/test/index.js b/components/button/test/index.js
index 2d3582ae8b82c..089d40721ec98 100644
--- a/components/button/test/index.js
+++ b/components/button/test/index.js
@@ -38,7 +38,7 @@ describe( 'Button', () => {
 
 		it( 'should render a button element with button-small class', () => {
 			const button = shallow( <Button isSmall /> );
-			expect( button.hasClass( 'button' ) ).toBe( false );
+			expect( button.hasClass( 'button' ) ).toBe( true );
 			expect( button.hasClass( 'button-large' ) ).toBe( false );
 			expect( button.hasClass( 'button-small' ) ).toBe( true );
 			expect( button.hasClass( 'button-primary' ) ).toBe( false );
diff --git a/components/text-control/index.js b/components/text-control/index.js
index d0a801f7b7282..66d5812f45916 100644
--- a/components/text-control/index.js
+++ b/components/text-control/index.js
@@ -5,12 +5,12 @@ import BaseControl from '../base-control';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function TextControl( { label, value, help, instanceId, onChange, type = 'text', ...props } ) {
+function TextControl( { label, value, help, className, instanceId, onChange, type = 'text', ...props } ) {
 	const id = `inspector-text-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl label={ label } id={ id } help={ help }>
+		<BaseControl label={ label } id={ id } help={ help } className={ className }>
 			<input className="components-text-control__input"
 				type={ type }
 				id={ id }

From 08dec8b47e5c1fb32db4dd444e9eecaf0e94799d Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 27 Mar 2018 16:05:57 +1100
Subject: [PATCH 02/12] Reset image width and height when source type changes

---
 blocks/library/image/block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 0360cf130b77d..dd4e9ca33e5e1 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -137,7 +137,7 @@ class ImageBlock extends Component {
 	}
 
 	updateImageURL( url ) {
-		this.props.setAttributes( { url } );
+		this.props.setAttributes( { url, width: undefined, height: undefined } );
 	}
 
 	getAvailableSizes() {

From c06aecd95d901be9d81052a819118e410ec22114 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 11 Apr 2018 13:57:18 +1000
Subject: [PATCH 03/12] Add explicit height to the editor image only

The resizing tools we use size a parent div on the image. The height:
auto responsive CSS we inherit from up higher messes with this. So this
push adds an explicit 100% height on resized images.

Co-authored-by: Joen Asmussen <joen@automattic.com>
---
 blocks/library/image/block.js    | 8 ++++++--
 blocks/library/image/editor.scss | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index dd4e9ca33e5e1..a943044ceee81 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -194,7 +194,7 @@ class ImageBlock extends Component {
 
 		const classes = classnames( className, {
 			'is-transient': 0 === url.indexOf( 'blob:' ),
-			'is-resized': !! width,
+			'is-resized': !! width || !! height,
 			'is-focused': isSelected,
 		} );
 
@@ -300,7 +300,11 @@ class ImageBlock extends Component {
 						const img = <img src={ url } alt={ alt } onClick={ this.onImageClick } />;
 
 						if ( ! isResizable || ! imageWidthWithinContainer ) {
-							return img;
+							return (
+								<div style={ { width, height } }>
+									{ img }
+								</div>
+							);
 						}
 
 						const currentWidth = width || imageWidthWithinContainer;
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index 02e36a0acf37f..43b21b0439155 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -7,6 +7,10 @@
 		width: 100%;
 	}
 
+	&.is-resized img {
+		height: 100%;
+	}
+
 	&.is-transient img {
 		@include loading_fade;
 	}

From c139fae9e56d212184e914875982c82f1344d842 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 3 Apr 2018 13:04:46 +1000
Subject: [PATCH 04/12] Fix Safari misaligning width/height placeholders

Setting an explicit line height on the width and height text fields
prevents a small visual bug in Safari where the fields flicker when a
number is typed in.
---
 blocks/library/image/editor.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index 43b21b0439155..18f2cb29997d3 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -106,6 +106,11 @@
 	.blocks-image-dimensions__width,
 	.blocks-image-dimensions__height {
 		margin-bottom: 0.5em;
+
+		// Fix the text and placeholder text being misaligned in Safari
+		input {
+			line-height: 1.25;
+		}
 	}
 
 	.blocks-image-dimensions__width {

From bdf94cd7e4d36d64e6371bb6c14c02ea7d1f9b2a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 10 Apr 2018 14:35:46 +1000
Subject: [PATCH 05/12] Fix paragraph and image inspector control margins

- Fixes Reset button being too tall on mobile in the paragraph and image
  inspectors
- Makes the margin at bottom of a <ButtonGroup> consistent with all
  other controls (1em)
- Fix regression causing width and height fields from being too close to
  each other
---
 blocks/library/image/editor.scss     | 30 +++++++++++++++-------------
 blocks/library/paragraph/editor.scss |  1 +
 components/button-group/style.scss   |  1 -
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index 18f2cb29997d3..6059eb75a5e74 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -97,27 +97,29 @@
 	}
 }
 
-.blocks-image-dimensions {
+.edit-post-sidebar .blocks-image-dimensions {
+	margin-bottom: 1em;
+
 	.blocks-image-dimensions__row {
 		display: flex;
 		justify-content: space-between;
-	}
 
-	.blocks-image-dimensions__width,
-	.blocks-image-dimensions__height {
-		margin-bottom: 0.5em;
+		.blocks-image-dimensions__width,
+		.blocks-image-dimensions__height {
+			margin-bottom: 0.5em;
 
-		// Fix the text and placeholder text being misaligned in Safari
-		input {
-			line-height: 1.25;
+			// Fix the text and placeholder text being misaligned in Safari
+			input {
+				line-height: 1.25;
+			}
 		}
-	}
 
-	.blocks-image-dimensions__width {
-		margin-right: 5px;
-	}
+		.blocks-image-dimensions__width {
+			margin-right: 5px;
+		}
 
-	.blocks-image-dimensions__height {
-		margin-left: 5px;
+		.blocks-image-dimensions__height {
+			margin-left: 5px;
+		}
 	}
 }
diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
index a7a87b0415126..a93686fa68e21 100644
--- a/blocks/library/paragraph/editor.scss
+++ b/blocks/library/paragraph/editor.scss
@@ -1,6 +1,7 @@
 .blocks-font-size__main {
 	display: flex;
 	justify-content: space-between;
+	margin-bottom: 1em;
 }
 
 .blocks-paragraph__custom-size-slider {
diff --git a/components/button-group/style.scss b/components/button-group/style.scss
index 5be7e700ac197..3634833e5b606 100644
--- a/components/button-group/style.scss
+++ b/components/button-group/style.scss
@@ -1,6 +1,5 @@
 .components-button-group {
 	display: inline-block;
-	margin-bottom: 20px;
 
 	.components-button {
 		border-radius: 0;

From 43c6e0830318259fd1c4f41d0e9eb948b7443e44 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 11 Apr 2018 14:19:18 +1000
Subject: [PATCH 06/12] Add 'Image Dimensions' label above width and height
 controls

---
 blocks/library/image/block.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index a943044ceee81..64296ad79317a 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -226,6 +226,9 @@ class ImageBlock extends Component {
 							/>
 						) }
 						<div className="blocks-image-dimensions">
+							<p className="blocks-image-dimensions__row">
+								{ __( 'Image Dimensions' ) }
+							</p>
 							<div className="blocks-image-dimensions__row">
 								<TextControl
 									type="number"

From 0fd7a959717f26dcb7f9a6286772049ffc87fa94 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 16 Apr 2018 15:11:52 +1000
Subject: [PATCH 07/12] Don't set inline styles on an image's <figure>

Let the <figure> get its width from the fit-content rule that was added
in 2dc9fb3.
---
 blocks/library/image/block.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 64296ad79317a..f64e8ece25459 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -198,7 +198,6 @@ class ImageBlock extends Component {
 			'is-focused': isSelected,
 		} );
 
-		const figureStyle = width ? { width } : {};
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );
 
 		// Disable reason: Each block can be selected by clicking on it
@@ -287,7 +286,7 @@ class ImageBlock extends Component {
 					</PanelBody>
 				</InspectorControls>
 			),
-			<figure key="image" className={ classes } style={ figureStyle }>
+			<figure key="image" className={ classes }>
 				<ImageSize src={ url } dirtynessTrigger={ align }>
 					{ ( sizes ) => {
 						const {

From 33a4bed61594847fe20bf46c4fcdbcf6ed745a36 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 16 Apr 2018 15:51:13 +1000
Subject: [PATCH 08/12] Update re-resizable to v4.4.8

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fce43d9d7a554..a06ef75388465 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11871,9 +11871,9 @@
 			"dev": true
 		},
 		"re-resizable": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-4.0.3.tgz",
-			"integrity": "sha512-6YpsC4JFT7zVG8/8gIXxdnrlHdz64/H7dpjHgXNCy5kwy2DIG1dVbdgASNUTwy4AaHgI8rvjJJzr2BxZAVu/3Q=="
+			"version": "4.4.8",
+			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-4.4.8.tgz",
+			"integrity": "sha512-5Nm4FL5wz41/5SYz8yJIM1kCcftxNPXxv3Yfa5qhkrGasHPgYzmzbbu1pcYM9vuCHog79EVwKWuz7zxDH52Gfw=="
 		},
 		"react": {
 			"version": "16.3.0",
diff --git a/package.json b/package.json
index 96f331aeaf77c..68455c98ab923 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
 		"mousetrap": "1.6.1",
 		"prop-types": "15.5.10",
 		"querystringify": "1.0.0",
-		"re-resizable": "4.0.3",
+		"re-resizable": "4.4.8",
 		"react": "16.3.0",
 		"react-autosize-textarea": "3.0.2",
 		"react-click-outside": "2.3.1",

From 9674199f10281eb7525a9425d94de319285049d9 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 18 Apr 2018 10:50:40 +1000
Subject: [PATCH 09/12] =?UTF-8?q?Rename=20blocks-image-dimensions=20?=
 =?UTF-8?q?=E2=86=92=20blocks-image=5F=5Fdimensions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blocks/library/image/block.js    | 12 ++++++------
 blocks/library/image/editor.scss | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index f64e8ece25459..0afc8ffac4485 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -224,14 +224,14 @@ class ImageBlock extends Component {
 								onChange={ this.updateImageURL }
 							/>
 						) }
-						<div className="blocks-image-dimensions">
-							<p className="blocks-image-dimensions__row">
+						<div className="blocks-image__dimensions">
+							<p className="blocks-image__dimensions__row">
 								{ __( 'Image Dimensions' ) }
 							</p>
-							<div className="blocks-image-dimensions__row">
+							<div className="blocks-image__dimensions__row">
 								<TextControl
 									type="number"
-									className="blocks-image-dimensions__width"
+									className="blocks-image__dimensions__width"
 									label={ __( 'Width' ) }
 									value={ width !== undefined ? width : '' }
 									placeholder={ selectedSize.width }
@@ -241,7 +241,7 @@ class ImageBlock extends Component {
 								/>
 								<TextControl
 									type="number"
-									className="blocks-image-dimensions__height"
+									className="blocks-image__dimensions__height"
 									label={ __( 'Height' ) }
 									value={ height !== undefined ? height : '' }
 									placeholder={ selectedSize.height }
@@ -250,7 +250,7 @@ class ImageBlock extends Component {
 									} }
 								/>
 							</div>
-							<div className="blocks-image-dimensions__row">
+							<div className="blocks-image__dimensions__row">
 								<ButtonGroup aria-label={ __( 'Image Size' ) }>
 									{ [ 25, 50, 75, 100 ].map( ( scale ) => {
 										const scaledWidth = Math.round( selectedSize.width * ( scale / 100 ) );
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index 6059eb75a5e74..826b1c103d827 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -97,15 +97,15 @@
 	}
 }
 
-.edit-post-sidebar .blocks-image-dimensions {
+.edit-post-sidebar .blocks-image__dimensions {
 	margin-bottom: 1em;
 
-	.blocks-image-dimensions__row {
+	.blocks-image__dimensions__row {
 		display: flex;
 		justify-content: space-between;
 
-		.blocks-image-dimensions__width,
-		.blocks-image-dimensions__height {
+		.blocks-image__dimensions__width,
+		.blocks-image__dimensions__height {
 			margin-bottom: 0.5em;
 
 			// Fix the text and placeholder text being misaligned in Safari
@@ -114,11 +114,11 @@
 			}
 		}
 
-		.blocks-image-dimensions__width {
+		.blocks-image__dimensions__width {
 			margin-right: 5px;
 		}
 
-		.blocks-image-dimensions__height {
+		.blocks-image__dimensions__height {
 			margin-left: 5px;
 		}
 	}

From 18e4e92aba16e20b207b6bdce44d12f8e7bb2c08 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 18 Apr 2018 11:00:18 +1000
Subject: [PATCH 10/12] Use class methods instead of calling setAttributes()
 directly

---
 blocks/library/image/block.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 0afc8ffac4485..4df1131cd40ad 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -59,6 +59,9 @@ class ImageBlock extends Component {
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSetHref = this.onSetHref.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
+		this.updateWidth = this.updateWidth.bind( this );
+		this.updateHeight = this.updateHeight.bind( this );
+		this.updateDimensions = this.updateDimensions.bind( this );
 
 		this.state = {
 			captionFocused: false,
@@ -140,6 +143,20 @@ class ImageBlock extends Component {
 		this.props.setAttributes( { url, width: undefined, height: undefined } );
 	}
 
+	updateWidth( width ) {
+		this.props.setAttributes( { width: parseInt( width, 10 ) } );
+	}
+
+	updateHeight( height ) {
+		this.props.setAttributes( { height: parseInt( height, 10 ) } );
+	}
+
+	updateDimensions( width = undefined, height = undefined ) {
+		return () => {
+			this.props.setAttributes( { width, height } );
+		};
+	}
+
 	getAvailableSizes() {
 		return get( this.props.image, [ 'media_details', 'sizes' ], {} );
 	}
@@ -235,9 +252,7 @@ class ImageBlock extends Component {
 									label={ __( 'Width' ) }
 									value={ width !== undefined ? width : '' }
 									placeholder={ selectedSize.width }
-									onChange={ ( value ) => {
-										setAttributes( { width: parseInt( value, 10 ) } );
-									} }
+									onChange={ this.updateWidth }
 								/>
 								<TextControl
 									type="number"
@@ -245,9 +260,7 @@ class ImageBlock extends Component {
 									label={ __( 'Height' ) }
 									value={ height !== undefined ? height : '' }
 									placeholder={ selectedSize.height }
-									onChange={ ( value ) => {
-										setAttributes( { height: parseInt( value, 10 ) } );
-									} }
+									onChange={ this.updateHeight }
 								/>
 							</div>
 							<div className="blocks-image__dimensions__row">
@@ -264,9 +277,7 @@ class ImageBlock extends Component {
 												isSmall
 												isPrimary={ isCurrent }
 												aria-pressed={ isCurrent }
-												onClick={ () => {
-													setAttributes( { width: scaledWidth, height: scaledHeight } );
-												} }
+												onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
 											>
 												{ scale }%
 											</Button>
@@ -275,9 +286,7 @@ class ImageBlock extends Component {
 								</ButtonGroup>
 								<Button
 									isSmall
-									onClick={ () => {
-										setAttributes( { width: undefined, height: undefined } );
-									} }
+									onClick={ this.updateDimensions() }
 								>
 									{ __( 'Reset' ) }
 								</Button>

From cfd6d55166f9e9e4f5c98302fde19f4a70893a87 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 18 Apr 2018 11:17:56 +1000
Subject: [PATCH 11/12] Add className prop to TextControl README

---
 components/text-control/README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/text-control/README.md b/components/text-control/README.md
index 51f80c365883e..449c132c36f97 100644
--- a/components/text-control/README.md
+++ b/components/text-control/README.md
@@ -44,11 +44,19 @@ Type of the input element to render. Defaults to "text".
 
 ### value
 
-The current value of the input
+The current value of the input.
 
 - Type: `Number`
 - Required: Yes
 
+### className
+
+The class that will be added with "components-base-control" to the classes of the wrapper div.
+If no className is passed only components-base-control is used.
+
+- Type: `String`
+- Required: No
+
 ### onChange
 
 A function that receives the value of the input.

From af073abe6d86c360631fbe90006d47e725de48fb Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 18 Apr 2018 11:21:13 +1000
Subject: [PATCH 12/12] Reset any set image dimensions when image is changed

If the user selects a new image, forget any image dimensions that they
added since it likely no longer makes any sense.
---
 blocks/library/image/block.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 4df1131cd40ad..78e436c48585b 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -105,7 +105,11 @@ class ImageBlock extends Component {
 	}
 
 	onSelectImage( media ) {
-		this.props.setAttributes( pick( media, [ 'alt', 'id', 'caption', 'url' ] ) );
+		this.props.setAttributes( {
+			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
+			width: undefined,
+			height: undefined,
+		} );
 	}
 
 	onSetHref( value ) {