From 64ffad323577dc2ca374a05375d78727536c4b24 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 May 2017 11:19:42 +0100
Subject: [PATCH 1/6] Image Block: Integrate with the media upload modal

---
 blocks/library/image/index.js | 101 ++++++++++++++++++++++------------
 index.php                     |   1 +
 2 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index ec00cccbd534a1..abce59c1e9549a 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Component } from 'element';
 import Button from 'components/button';
 import Placeholder from 'components/placeholder';
 
@@ -74,46 +75,76 @@ registerBlock( 'core/image', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { url, alt, caption } = attributes;
+	edit: class extends Component {
+		constructor() {
+			super( ...arguments );
+			this.openModal = this.openModal.bind( this );
+			this.onSelect = this.onSelect.bind( this );
+			this.frame = wp.media( {
+				title: wp.i18n.__( 'Select or Upload an image' ),
+				button: {
+					text: wp.i18n.__( 'Select' ),
+				},
+				multiple: false,
+			} );
+
+			// When an image is selected in the media frame...
+			this.frame.on( 'select', this.onSelect );
+		}
 
-		if ( ! 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>
-						{ wp.i18n.__( 'Insert from Media Library' ) }
-					</Button>
-				</Placeholder>
-			);
+		onSelect() {
+			// Get media attachment details from the frame state
+			const attachment = this.frame.state().get( 'selection' ).first().toJSON();
+			this.props.setAttributes( { url: attachment.url } );
 		}
 
-		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
+		openModal() {
+			this.frame.open();
+		}
 
-		// Disable reason: Each block can be selected by clicking on it
+		render() {
+			const { attributes, setAttributes, focus, setFocus } = this.props;
+			const { url, alt, caption } = attributes;
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-		return (
-			<figure className="blocks-image">
-				<img src={ url } alt={ alt } onClick={ setFocus } />
-				{ ( caption && caption.length > 0 ) || !! focus ? (
-					<Editable
-						tagName="figcaption"
-						placeholder={ wp.i18n.__( 'Write caption…' ) }
-						value={ caption }
-						focus={ focus && focus.editable === 'caption' ? focus : undefined }
-						onFocus={ focusCaption }
-						onChange={ ( value ) => setAttributes( { caption: value } ) }
-						inline
-						inlineToolbar
-					/>
-				) : null }
-			</figure>
-		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+
+			if ( ! 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 onClick={ this.openModal }>
+							{ wp.i18n.__( 'Insert from Media Library' ) }
+						</Button>
+					</Placeholder>
+				);
+			}
+
+			const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
+
+			// 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 (
+				<figure className="blocks-image">
+					<img src={ url } alt={ alt } onClick={ setFocus } />
+					{ ( caption && caption.length > 0 ) || !! focus ? (
+						<Editable
+							tagName="figcaption"
+							placeholder={ wp.i18n.__( 'Write caption…' ) }
+							value={ caption }
+							focus={ focus && focus.editable === 'caption' ? focus : undefined }
+							onFocus={ focusCaption }
+							onChange={ ( value ) => setAttributes( { caption: value } ) }
+							inline
+							inlineToolbar
+						/>
+					) : null }
+				</figure>
+			);
+			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		}
 	},
 
 	save( { attributes } ) {
diff --git a/index.php b/index.php
index f558c6ac2a6a1b..1da7f74b99c7be 100644
--- a/index.php
+++ b/index.php
@@ -282,6 +282,7 @@ function gutenberg_scripts_and_styles( $hook ) {
 	/**
 	 * Scripts
 	 */
+	wp_enqueue_media();
 
 	// The editor code itself.
 	wp_enqueue_script(

From a0abb06dc361e3e9bd746499d55da9d3d13971c5 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 May 2017 11:46:25 +0100
Subject: [PATCH 2/6] Media: Extract the media upload button to a separate
 component

---
 blocks/library/image/index.js           | 105 +++++++++---------------
 components/media-upload-button/index.js |  47 +++++++++++
 2 files changed, 85 insertions(+), 67 deletions(-)
 create mode 100644 components/media-upload-button/index.js

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index abce59c1e9549a..26bd17d864dcf3 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from 'element';
-import Button from 'components/button';
 import Placeholder from 'components/placeholder';
+import MediaUploadButton from 'components/media-upload-button';
 
 /**
  * Internal dependencies
@@ -75,76 +74,48 @@ registerBlock( 'core/image', {
 		}
 	},
 
-	edit: class extends Component {
-		constructor() {
-			super( ...arguments );
-			this.openModal = this.openModal.bind( this );
-			this.onSelect = this.onSelect.bind( this );
-			this.frame = wp.media( {
-				title: wp.i18n.__( 'Select or Upload an image' ),
-				button: {
-					text: wp.i18n.__( 'Select' ),
-				},
-				multiple: false,
-			} );
-
-			// When an image is selected in the media frame...
-			this.frame.on( 'select', this.onSelect );
-		}
-
-		onSelect() {
-			// Get media attachment details from the frame state
-			const attachment = this.frame.state().get( 'selection' ).first().toJSON();
-			this.props.setAttributes( { url: attachment.url } );
-		}
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { url, alt, caption } = attributes;
 
-		openModal() {
-			this.frame.open();
+		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">
+					<MediaUploadButton buttonProps={ uploadButtonProps } onSelect={ setMediaUrl }>
+						{ wp.i18n.__( 'Insert from Media Library' ) }
+					</MediaUploadButton>
+				</Placeholder>
+			);
 		}
 
-		render() {
-			const { attributes, setAttributes, focus, setFocus } = this.props;
-			const { url, alt, caption } = attributes;
-
-
-			if ( ! 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 onClick={ this.openModal }>
-							{ wp.i18n.__( 'Insert from Media Library' ) }
-						</Button>
-					</Placeholder>
-				);
-			}
+		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
 
-			const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
+		// Disable reason: Each block can be selected by clicking on it
 
-			// 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 (
-				<figure className="blocks-image">
-					<img src={ url } alt={ alt } onClick={ setFocus } />
-					{ ( caption && caption.length > 0 ) || !! focus ? (
-						<Editable
-							tagName="figcaption"
-							placeholder={ wp.i18n.__( 'Write caption…' ) }
-							value={ caption }
-							focus={ focus && focus.editable === 'caption' ? focus : undefined }
-							onFocus={ focusCaption }
-							onChange={ ( value ) => setAttributes( { caption: value } ) }
-							inline
-							inlineToolbar
-						/>
-					) : null }
-				</figure>
-			);
-			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-		}
+		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		return (
+			<figure className="blocks-image">
+				<img src={ url } alt={ alt } onClick={ setFocus } />
+				{ ( caption && caption.length > 0 ) || !! focus ? (
+					<Editable
+						tagName="figcaption"
+						placeholder={ wp.i18n.__( 'Write caption…' ) }
+						value={ caption }
+						focus={ focus && focus.editable === 'caption' ? focus : undefined }
+						onFocus={ focusCaption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						inline
+						inlineToolbar
+					/>
+				) : null }
+			</figure>
+		);
+		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	},
 
 	save( { attributes } ) {
diff --git a/components/media-upload-button/index.js b/components/media-upload-button/index.js
new file mode 100644
index 00000000000000..90694d78787272
--- /dev/null
+++ b/components/media-upload-button/index.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { __ } from 'i18n';
+import Button from 'components/button';
+
+class MediaUploadButton extends Component {
+	constructor( { multiple = false } ) {
+		super( ...arguments );
+		this.openModal = this.openModal.bind( this );
+		this.onSelect = this.onSelect.bind( this );
+		this.frame = wp.media( {
+			title: __( 'Select or Upload a media' ),
+			button: {
+				text: __( 'Select' ),
+			},
+			multiple,
+		} );
+
+		// When an image is selected in the media frame...
+		this.frame.on( 'select', this.onSelect );
+	}
+
+	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;

From 76a5894d9df12780cd8da15fdfb4fe133ce8022f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 May 2017 11:48:54 +0100
Subject: [PATCH 3/6] Image Block: Open the media library when inserting an
 image block

---
 blocks/library/image/index.js           | 2 +-
 components/media-upload-button/index.js | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 26bd17d864dcf3..800c5271dcc7f1 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -86,7 +86,7 @@ registerBlock( 'core/image', {
 					icon="format-image"
 					label={ wp.i18n.__( 'Image' ) }
 					className="blocks-image">
-					<MediaUploadButton buttonProps={ uploadButtonProps } onSelect={ setMediaUrl }>
+					<MediaUploadButton buttonProps={ uploadButtonProps } onSelect={ setMediaUrl } auto-open>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
 					</MediaUploadButton>
 				</Placeholder>
diff --git a/components/media-upload-button/index.js b/components/media-upload-button/index.js
index 90694d78787272..306105ef6c66fb 100644
--- a/components/media-upload-button/index.js
+++ b/components/media-upload-button/index.js
@@ -22,6 +22,12 @@ class MediaUploadButton extends Component {
 		this.frame.on( 'select', this.onSelect );
 	}
 
+	componentDidMount() {
+		if ( !! this.props[ 'auto-open' ] ) {
+			this.frame.open();
+		}
+	}
+
 	onSelect() {
 		const { onSelect, multiple = false } = this.props;
 		// Get media attachment details from the frame state

From 283aa7172e57c09c49f52053697fbb9ece9b4ae7 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 May 2017 13:30:38 +0100
Subject: [PATCH 4/6] Media Upload: Filter the media library by type

---
 blocks/library/image/index.js           |  7 ++++++-
 components/media-upload-button/index.js | 10 +++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 800c5271dcc7f1..4eebbb83f851bd 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -86,7 +86,12 @@ registerBlock( 'core/image', {
 					icon="format-image"
 					label={ wp.i18n.__( 'Image' ) }
 					className="blocks-image">
-					<MediaUploadButton buttonProps={ uploadButtonProps } onSelect={ setMediaUrl } auto-open>
+					<MediaUploadButton
+						buttonProps={ uploadButtonProps }
+						onSelect={ setMediaUrl }
+						type="image"
+						auto-open
+					>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
 					</MediaUploadButton>
 				</Placeholder>
diff --git a/components/media-upload-button/index.js b/components/media-upload-button/index.js
index 306105ef6c66fb..5f62e7ccb893d6 100644
--- a/components/media-upload-button/index.js
+++ b/components/media-upload-button/index.js
@@ -6,17 +6,21 @@ import { __ } from 'i18n';
 import Button from 'components/button';
 
 class MediaUploadButton extends Component {
-	constructor( { multiple = false } ) {
+	constructor( { multiple = false, type } ) {
 		super( ...arguments );
 		this.openModal = this.openModal.bind( this );
 		this.onSelect = this.onSelect.bind( this );
-		this.frame = wp.media( {
+		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 );

From 879f8c56150ed16fae487e090ab6302b5cb8c634 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 May 2017 17:58:32 +0100
Subject: [PATCH 5/6] MediaUploadButton: Moving the component to the blocks
 module

---
 blocks/library/image/index.js                       | 2 +-
 {components => blocks}/media-upload-button/index.js | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename {components => blocks}/media-upload-button/index.js (100%)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 4eebbb83f851bd..17e264b09fd4a2 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import Placeholder from 'components/placeholder';
-import MediaUploadButton from 'components/media-upload-button';
 
 /**
  * Internal dependencies
@@ -10,6 +9,7 @@ import MediaUploadButton from 'components/media-upload-button';
 import './style.scss';
 import { registerBlock, query } from '../../api';
 import Editable from '../../editable';
+import MediaUploadButton from '../../media-upload-button';
 
 const { attr, children } = query;
 
diff --git a/components/media-upload-button/index.js b/blocks/media-upload-button/index.js
similarity index 100%
rename from components/media-upload-button/index.js
rename to blocks/media-upload-button/index.js

From d9e829eeb3243b98886883047773d6d51dd49d8a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 17 May 2017 09:35:26 +0100
Subject: [PATCH 6/6] Image Upload: Remove frame on disposal

---
 blocks/media-upload-button/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/blocks/media-upload-button/index.js b/blocks/media-upload-button/index.js
index 5f62e7ccb893d6..beb6d4ca632431 100644
--- a/blocks/media-upload-button/index.js
+++ b/blocks/media-upload-button/index.js
@@ -32,6 +32,10 @@ class MediaUploadButton extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		this.frame.remove();
+	}
+
 	onSelect() {
 		const { onSelect, multiple = false } = this.props;
 		// Get media attachment details from the frame state