diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index 261ac6f789b29..855581238ee9c 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -14,16 +14,19 @@ import { withInstanceId } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function SelectControl( { label, selected, help, instanceId, onBlur, options = [], ...props } ) {
+function SelectControl( { label, help, instanceId, onChange, options = [], ...props } ) {
 	const id = 'inspector-select-control-' + instanceId;
-	const onBlurValue = ( event ) => onBlur( event.target.value );
+	const onChangeValue = ( event ) => onChange( event.target.value );
 
+	// Disable reason: A select with an onchange throws a warning
+
+	/* eslint-disable jsx-a11y/no-onchange */
 	return ! isEmpty( options ) && (
 		<BaseControl label={ label } id={ id } help={ help }>
 			<select
 				id={ id }
 				className="blocks-select-control__input"
-				onBlur={ onBlurValue }
+				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			>
@@ -31,7 +34,6 @@ function SelectControl( { label, selected, help, instanceId, onBlur, options = [
 					<option
 						key={ option.value }
 						value={ option.value }
-						selected={ option.value === selected }
 					>
 						{ option.label }
 					</option>
@@ -39,6 +41,7 @@ function SelectControl( { label, selected, help, instanceId, onBlur, options = [
 			</select>
 		</BaseControl>
 	);
+	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 export default withInstanceId( SelectControl );
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 2faaeef761e31..49ca753fbee6b 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -172,8 +172,8 @@ registerBlockType( 'core/gallery', {
 					/>
 					<SelectControl
 						label={ __( 'Link to' ) }
-						selected={ linkTo }
-						onBlur={ setLinkTo }
+						value={ linkTo }
+						onChange={ setLinkTo }
 						options={ linkOptions }
 					/>
 				</InspectorControls>
diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
new file mode 100644
index 0000000000000..e6bd5a8f2ad69
--- /dev/null
+++ b/blocks/library/image/block.js
@@ -0,0 +1,259 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import ResizableBox from 'react-resizable-box';
+import { startCase, findKey } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { mediaUpload } from '@wordpress/utils';
+import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import withEditorSettings from '../../with-editor-settings';
+import Editable from '../../editable';
+import MediaUploadButton from '../../media-upload-button';
+import InspectorControls from '../../inspector-controls';
+import TextControl from '../../inspector-controls/text-control';
+import SelectControl from '../../inspector-controls/select-control';
+import BlockControls from '../../block-controls';
+import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import BlockDescription from '../../block-description';
+import UrlInputButton from '../../url-input/button';
+import ImageSize from './image-size';
+
+class ImageBlock extends Component {
+	constructor() {
+		super( ...arguments );
+		this.updateAlt = this.updateAlt.bind( this );
+		this.updateAlignment = this.updateAlignment.bind( this );
+		this.onSelectImage = this.onSelectImage.bind( this );
+		this.onSetHref = this.onSetHref.bind( this );
+		this.updateImageSize = this.updateImageSize.bind( this );
+		this.state = {
+			availableSizes: {},
+		};
+	}
+
+	componentDidMount() {
+		if ( this.props.attributes.id ) {
+			this.fetchMedia( this.props.attributes.id );
+		}
+	}
+
+	componentWillUnmout() {
+		if ( this.fetchImageRequest ) {
+			this.fetchImageRequest.abort();
+		}
+	}
+
+	onSelectImage( media ) {
+		this.props.setAttributes( { url: media.url, alt: media.alt, caption: media.caption, id: media.id } );
+		this.fetchMedia( media.id );
+	}
+
+	onSetHref( value ) {
+		this.props.setAttributes( { href: value } );
+	}
+
+	updateAlt( newAlt ) {
+		this.props.setAttributes( { alt: newAlt } );
+	}
+
+	updateAlignment( nextAlign ) {
+		const extraUpdatedAttributes = [ 'wide', 'full' ].indexOf( nextAlign ) !== -1
+			? { width: undefined, height: undefined }
+			: {};
+		this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
+	}
+
+	fetchMedia( id ) {
+		if ( this.fetchImageRequest ) {
+			this.fetchImageRequest.abort();
+		}
+		this.fetchImageRequest = new wp.api.models.Media( { id } ).fetch();
+		this.fetchImageRequest.then( ( image ) => {
+			this.setState( {
+				availableSizes: image.media_details.sizes,
+			} );
+		} );
+	}
+
+	updateImageSize( selectedSize ) {
+		this.props.setAttributes( {
+			url: this.state.availableSizes[ selectedSize ].source_url,
+		} );
+	}
+
+	render() {
+		const { attributes, setAttributes, focus, setFocus, className, settings } = this.props;
+		const { url, alt, caption, align, id, href, width, height } = attributes;
+
+		const availableSizes = Object.keys( this.state.availableSizes ).sort();
+		const selectedSize = findKey( this.state.availableSizes, ( size ) => size.source_url === url );
+		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1;
+		const uploadButtonProps = { isLarge: true };
+		const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAttributes );
+		const dropFiles = ( files ) => mediaUpload( files, setAttributes );
+
+		const controls = (
+			focus && (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ this.updateAlignment }
+					/>
+
+					<Toolbar>
+						<li>
+							<MediaUploadButton
+								buttonProps={ {
+									className: 'components-icon-button components-toolbar__control',
+									'aria-label': __( 'Edit image' ),
+								} }
+								onSelect={ this.onSelectImage }
+								type="image"
+								value={ id }
+							>
+								<Dashicon icon="edit" />
+							</MediaUploadButton>
+						</li>
+						<UrlInputButton onChange={ this.onSetHref } url={ href } />
+					</Toolbar>
+				</BlockControls>
+			)
+		);
+
+		if ( ! url ) {
+			return [
+				controls,
+				<Placeholder
+					key="placeholder"
+					instructions={ __( 'Drag image here or insert from media library' ) }
+					icon="format-image"
+					label={ __( 'Image' ) }
+					className={ className }>
+					<DropZone
+						onFilesDrop={ dropFiles }
+					/>
+					<FormFileUpload
+						isLarge
+						className="wp-block-image__upload-button"
+						onChange={ uploadFromFiles }
+						accept="image/*"
+					>
+						{ __( 'Upload' ) }
+					</FormFileUpload>
+					<MediaUploadButton
+						buttonProps={ uploadButtonProps }
+						onSelect={ this.onSelectImage }
+						type="image"
+					>
+						{ __( 'Insert from Media Library' ) }
+					</MediaUploadButton>
+				</Placeholder>,
+			];
+		}
+
+		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
+		const classes = classnames( className, {
+			'is-transient': 0 === url.indexOf( 'blob:' ),
+			'is-resized': !! width,
+			'is-focused': !! focus,
+		} );
+
+		// 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,
+			focus && (
+				<InspectorControls key="inspector">
+					<BlockDescription>
+						<p>{ __( 'Worth a thousand words.' ) }</p>
+					</BlockDescription>
+					<h3>{ __( 'Image Settings' ) }</h3>
+					<TextControl label={ __( 'Alternate Text' ) } value={ alt } onChange={ this.updateAlt } />
+					{ !! availableSizes.length && (
+						<SelectControl
+							label={ __( 'Size' ) }
+							value={ selectedSize || '' }
+							options={ availableSizes.map( ( imageSize ) => ( {
+								value: imageSize,
+								label: startCase( imageSize ),
+							} ) ) }
+							onChange={ this.updateImageSize }
+						/>
+					) }
+				</InspectorControls>
+			),
+			<figure key="image" className={ classes }>
+				<ImageSize src={ url } dirtynessTrigger={ align }>
+					{ ( sizes ) => {
+						const {
+							imageWidthWithinContainer,
+							imageHeightWithinContainer,
+							imageWidth,
+							imageHeight,
+						} = sizes;
+						const currentWidth = width || imageWidthWithinContainer;
+						const currentHeight = height || imageHeightWithinContainer;
+						const img = <img src={ url } alt={ alt } onClick={ setFocus } />;
+						if ( ! isResizable || ! imageWidthWithinContainer ) {
+							return img;
+						}
+						const ratio = imageWidth / imageHeight;
+						const minWidth = imageWidth < imageHeight ? 10 : 10 * ratio;
+						const minHeight = imageHeight < imageWidth ? 10 : 10 / ratio;
+						return (
+							<ResizableBox
+								width={ currentWidth }
+								height={ currentHeight }
+								minWidth={ minWidth }
+								maxWidth={ settings.maxWidth }
+								minHeight={ minHeight }
+								maxHeight={ settings.maxWidth / ratio }
+								lockAspectRatio
+								handlerClasses={ {
+									topRight: 'wp-block-image__resize-handler-top-right',
+									bottomRight: 'wp-block-image__resize-handler-bottom-right',
+									topLeft: 'wp-block-image__resize-handler-top-left',
+									bottomLeft: 'wp-block-image__resize-handler-bottom-left',
+								} }
+								enable={ { top: false, right: true, bottom: false, left: false, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true } }
+								onResize={ ( event, direction, elt ) => {
+									setAttributes( {
+										width: elt.clientWidth,
+										height: elt.clientHeight,
+									} );
+								} }
+							>
+								{ img }
+							</ResizableBox>
+						);
+					} }
+				</ImageSize>
+				{ ( caption && caption.length > 0 ) || !! focus ? (
+					<Editable
+						tagName="figcaption"
+						placeholder={ __( 'Write caption…' ) }
+						value={ caption }
+						focus={ focus && focus.editable === 'caption' ? focus : undefined }
+						onFocus={ focusCaption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						inlineToolbar
+					/>
+				) : null }
+			</figure>,
+		];
+		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+	}
+}
+
+export default withEditorSettings()( ImageBlock );
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 2097dd3f859ff..c2024e08b1963 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -1,15 +1,7 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import ResizableBox from 'react-resizable-box';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { mediaUpload } from '@wordpress/utils';
-import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,16 +9,7 @@ import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordp
 import './style.scss';
 import './editor.scss';
 import { registerBlockType, source } from '../../api';
-import withEditorSettings from '../../with-editor-settings';
-import Editable from '../../editable';
-import MediaUploadButton from '../../media-upload-button';
-import InspectorControls from '../../inspector-controls';
-import TextControl from '../../inspector-controls/text-control';
-import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
-import BlockDescription from '../../block-description';
-import UrlInputButton from '../../url-input/button';
-import ImageSize from './image-size';
+import ImageBlock from './block';
 
 const { attr, children } = source;
 
@@ -89,165 +72,7 @@ registerBlockType( 'core/image', {
 		}
 	},
 
-	edit: withEditorSettings()( ( { attributes, setAttributes, focus, setFocus, className, settings } ) => {
-		const { url, alt, caption, align, id, href, width, height } = attributes;
-		const updateAlt = ( newAlt ) => setAttributes( { alt: newAlt } );
-		const updateAlignment = ( nextAlign ) => {
-			const extraUpdatedAttributes = [ 'wide', 'full' ].indexOf( nextAlign ) !== -1
-				? { width: undefined, height: undefined }
-				: {};
-			setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
-		};
-		const onSelectImage = ( media ) => {
-			setAttributes( { url: media.url, alt: media.alt, caption: media.caption, id: media.id } );
-		};
-		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1;
-		const uploadButtonProps = { isLarge: true };
-		const onSetHref = ( value ) => setAttributes( { href: value } );
-		const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAttributes );
-		const dropFiles = ( files ) => mediaUpload( files, setAttributes );
-
-		const controls = (
-			focus && (
-				<BlockControls key="controls">
-					<BlockAlignmentToolbar
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-
-					<Toolbar>
-						<li>
-							<MediaUploadButton
-								buttonProps={ {
-									className: 'components-icon-button components-toolbar__control',
-									'aria-label': __( 'Edit image' ),
-								} }
-								onSelect={ onSelectImage }
-								type="image"
-								value={ id }
-							>
-								<Dashicon icon="edit" />
-							</MediaUploadButton>
-						</li>
-						<UrlInputButton onChange={ onSetHref } url={ href } />
-					</Toolbar>
-				</BlockControls>
-			)
-		);
-
-		if ( ! url ) {
-			return [
-				controls,
-				<Placeholder
-					key="placeholder"
-					instructions={ __( 'Drag image here or insert from media library' ) }
-					icon="format-image"
-					label={ __( 'Image' ) }
-					className={ className }>
-					<DropZone
-						onFilesDrop={ dropFiles }
-					/>
-					<FormFileUpload
-						isLarge
-						className="wp-block-image__upload-button"
-						onChange={ uploadFromFiles }
-						accept="image/*"
-					>
-						{ __( 'Upload' ) }
-					</FormFileUpload>
-					<MediaUploadButton
-						buttonProps={ uploadButtonProps }
-						onSelect={ onSelectImage }
-						type="image"
-					>
-						{ __( 'Insert from Media Library' ) }
-					</MediaUploadButton>
-				</Placeholder>,
-			];
-		}
-
-		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
-		const classes = classnames( className, {
-			'is-transient': 0 === url.indexOf( 'blob:' ),
-			'is-resized': !! width,
-			'is-focused': !! focus,
-		} );
-
-		// 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,
-			focus && (
-				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Worth a thousand words.' ) }</p>
-					</BlockDescription>
-					<h3>{ __( 'Image Settings' ) }</h3>
-					<TextControl label={ __( 'Alternate Text' ) } value={ alt } onChange={ updateAlt } />
-				</InspectorControls>
-			),
-			<figure key="image" className={ classes }>
-				<ImageSize src={ url } dirtynessTrigger={ align }>
-					{ ( sizes ) => {
-						const {
-							imageWidthWithinContainer,
-							imageHeightWithinContainer,
-							imageWidth,
-							imageHeight,
-						} = sizes;
-						const currentWidth = width || imageWidthWithinContainer;
-						const currentHeight = height || imageHeightWithinContainer;
-						const img = <img src={ url } alt={ alt } onClick={ setFocus } />;
-						if ( ! isResizable || ! imageWidthWithinContainer ) {
-							return img;
-						}
-						const ratio = imageWidth / imageHeight;
-						const minWidth = imageWidth < imageHeight ? 10 : 10 * ratio;
-						const minHeight = imageHeight < imageWidth ? 10 : 10 / ratio;
-						return (
-							<ResizableBox
-								width={ currentWidth }
-								height={ currentHeight }
-								minWidth={ minWidth }
-								maxWidth={ settings.maxWidth }
-								minHeight={ minHeight }
-								maxHeight={ settings.maxWidth / ratio }
-								lockAspectRatio
-								handlerClasses={ {
-									topRight: 'wp-block-image__resize-handler-top-right',
-									bottomRight: 'wp-block-image__resize-handler-bottom-right',
-									topLeft: 'wp-block-image__resize-handler-top-left',
-									bottomLeft: 'wp-block-image__resize-handler-bottom-left',
-								} }
-								enable={ { top: false, right: true, bottom: false, left: false, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true } }
-								onResize={ ( event, direction, elt ) => {
-									setAttributes( {
-										width: elt.clientWidth,
-										height: elt.clientHeight,
-									} );
-								} }
-							>
-								{ img }
-							</ResizableBox>
-						);
-					} }
-				</ImageSize>
-				{ ( caption && caption.length > 0 ) || !! focus ? (
-					<Editable
-						tagName="figcaption"
-						placeholder={ __( 'Write caption…' ) }
-						value={ caption }
-						focus={ focus && focus.editable === 'caption' ? focus : undefined }
-						onFocus={ focusCaption }
-						onChange={ ( value ) => setAttributes( { caption: value } ) }
-						inlineToolbar
-					/>
-				) : null }
-			</figure>,
-		];
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-	} ),
+	edit: ImageBlock,
 
 	save( { attributes } ) {
 		const { url, alt, caption, align, href, width, height } = attributes;