From 0e25d20be5a2db16d8e9701657da012f44780e36 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 22 May 2017 12:16:32 -0700
Subject: [PATCH] Integrate Media Library button into Gallery

---
 blocks/library/gallery/gallery-image.js |  2 +-
 blocks/library/gallery/index.js         | 24 +++++++++---------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index d1aa51b1cc47ff..fc7528aaefec48 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -3,7 +3,7 @@ export default class GalleryImage extends wp.element.Component {
 	render() {
 		return (
 			<div key={ this.props.i } className="blocks-gallery-image">
-				<img src={ this.props.img.src } alt={ this.props.img.alt } />
+				<img src={ this.props.img.url } alt={ this.props.img.alt } />
 			</div>
 		);
 	}
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 2bac363e1b3a54..34e5bb0211657b 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -4,8 +4,8 @@
 import './style.scss';
 import { registerBlock, query as hpq } from '../../api';
 
-import Button from 'components/button';
 import Placeholder from 'components/placeholder';
+import MediaUploadButton from '../../media-upload-button';
 
 import GalleryImage from './gallery-image';
 
@@ -22,28 +22,22 @@ registerBlock( 'core/gallery', {
 
 	edit( { attributes, setAttributes } ) {
 		const { images } = attributes;
-
-		const canned = [
-			{ src: 'https://lorempixel.com/240/180', alt: '240x180' },
-			{ src: 'https://lorempixel.com/244/183', alt: '244x183' },
-			{ src: 'https://lorempixel.com/248/186', alt: '248x186' },
-			{ src: 'https://lorempixel.com/252/189', alt: '252x189' },
-			{ src: 'https://lorempixel.com/256/192', alt: '256x192' },
-			{ src: 'https://lorempixel.com/260/195', alt: '260x195' },
-			{ src: 'https://lorempixel.com/264/198', alt: '264x198' },
-			{ src: 'https://lorempixel.com/268/201', alt: '268x201' },
-		];
-
 		if ( ! images ) {
+			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
 				<Placeholder
 					instructions={ wp.i18n.__( 'Drag images here or insert from media library' ) }
 					icon="format-gallery"
 					label={ wp.i18n.__( 'Gallery' ) }
 					className="blocks-gallery">
-					<Button isLarge onClick={ () => setAttributes( { images: canned } ) }>
+					<MediaUploadButton
+						onSelect={ setMediaUrl }
+						type="image"
+						auto-open
+						multiple="true"
+					>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
-					</Button>
+					</MediaUploadButton>
 				</Placeholder>
 			);
 		}