Image Block: Integrate with the media upload modal

blocks/library/image/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import Button from 'components/button';
 import Placeholder from 'components/placeholder';
 
 /**
@@ -10,6 +9,7 @@ import Placeholder from 'components/placeholder';
 import './style.scss';
 import { registerBlock, query } from '../../api';
 import Editable from '../../editable';
+import MediaUploadButton from '../../media-upload-button';
 
 const { attr, children } = query;
 
@@ -78,15 +78,22 @@ registerBlock( 'core/image', {
 		const { url, alt, caption } = attributes;
 
 		if ( ! url ) {
+			const uploadButtonProps = { isLarge: true };
+			const setMediaUrl = ( media ) => setAttributes( { url: media.url } );
 			return (
 				<Placeholder
 					instructions={ wp.i18n.__( 'Drag image here or insert from media library' ) }
 					icon="format-image"
 					label={ wp.i18n.__( 'Image' ) }
 					className="blocks-image">
-					<Button isLarge>
+					<MediaUploadButton
+						buttonProps={ uploadButtonProps }
+						onSelect={ setMediaUrl }
+						type="image"
+						auto-open
+					>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
-					</Button>
+					</MediaUploadButton>
 				</Placeholder>
 			);
 		}

blocks/media-upload-button/index.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { __ } from 'i18n';
+import Button from 'components/button';
+
+class MediaUploadButton extends Component {
+	constructor( { multiple = false, type } ) {
+		super( ...arguments );
+		this.openModal = this.openModal.bind( this );
+		this.onSelect = this.onSelect.bind( this );
+		const frameConfig = {
+			title: __( 'Select or Upload a media' ),
+			button: {
+				text: __( 'Select' ),
+			},
+			multiple,
+		};
+		if ( !! type ) {
+			frameConfig.library = { type };
+		}
+		this.frame = wp.media( frameConfig );
+
+		// When an image is selected in the media frame...
+		this.frame.on( 'select', this.onSelect );
+	}
+
+	componentDidMount() {
+		if ( !! this.props[ 'auto-open' ] ) {
+			this.frame.open();
+		}
+	}
+
+	componentWillUnmount() {
+		this.frame.remove();
+	}
+
+	onSelect() {
+		const { onSelect, multiple = false } = this.props;
+		// Get media attachment details from the frame state
+		const attachment = this.frame.state().get( 'selection' ).toJSON();
+		onSelect( multiple ? attachment : attachment[ 0 ] );
+	}
+
+	openModal() {
+		this.frame.open();
+	}
+
+	render() {
+		const { children, buttonProps } = this.props;
+
+		return (
+			<Button onClick={ this.openModal } { ...buttonProps }>
+				{ children }
+			</Button>
+		);
+	}
+}
+
+export default MediaUploadButton;

index.php

@@ -282,6 +282,7 @@ function gutenberg_scripts_and_styles( $hook ) {
 	/**
 	 * Scripts
 	 */
+	wp_enqueue_media();
 
 	// The editor code itself.
 	wp_enqueue_script(