From 13b6b35faa6394711275892688d4c18feefd5dc0 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 8 Aug 2017 13:13:56 -0700
Subject: [PATCH 01/17] Add initial abstraction for File Upload

---
 utils/fileupload.js | 34 ++++++++++++++++++++++++++++++++++
 utils/index.js      |  4 ++++
 2 files changed, 38 insertions(+)
 create mode 100644 utils/fileupload.js

diff --git a/utils/fileupload.js b/utils/fileupload.js
new file mode 100644
index 0000000000000..3cf3ca8e0beb2
--- /dev/null
+++ b/utils/fileupload.js
@@ -0,0 +1,34 @@
+
+export default function fileUpload( files, setAttributes ) {
+	console.log("Here!", files, setAttributes);
+
+	const media = files[ 0 ];
+
+	// Only allow image uploads
+	if ( ! /^image\//.test( media.type ) ) {
+		return;
+	}
+
+	// Use File API to assign temporary URL from upload
+	setAttributes( {
+		url: window.URL.createObjectURL( media ),
+	} );
+
+	// Create upload payload
+	const data = new window.FormData();
+	data.append( 'file', media );
+
+	new wp.api.models.Media().save( null, {
+		data: data,
+		contentType: false,
+	} ).done( ( savedMedia ) => {
+		setAttributes( {
+			id: savedMedia.id,
+			url: savedMedia.source_url,
+		} );
+	} ).fail( () => {
+		// Reset to empty on failure.
+		// TODO: Better failure messaging
+		setAttributes( { url: null } );
+	} );
+}
diff --git a/utils/index.js b/utils/index.js
index e24a5b1782f91..444acedf1e981 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -3,3 +3,7 @@ import * as nodetypes from './nodetypes';
 
 export { keycodes };
 export { nodetypes };
+
+export * from './tracking';
+
+export * from './fileupload';

From cb9acac307f1d4a2a8148c810273faf935ce4342 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 8 Aug 2017 13:14:40 -0700
Subject: [PATCH 02/17] Use abstracted fileUpload function

---
 blocks/library/image/index.js | 35 +++--------------------------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 204f3f0144135..c8a9340e5426b 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -8,6 +8,7 @@ import ResizableBox from 'react-resizable-box';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { fileUpload } from '@wordpress/utils';
 import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordpress/components';
 
 /**
@@ -108,37 +109,7 @@ registerBlockType( 'core/image', {
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1;
 		const uploadButtonProps = { isLarge: true };
 		const onSetHref = ( value ) => setAttributes( { href: value } );
-		const uploadFromFiles = ( files ) => {
-			const media = files[ 0 ];
-
-			// Only allow image uploads
-			if ( ! /^image\//.test( media.type ) ) {
-				return;
-			}
-
-			// Use File API to assign temporary URL from upload
-			setAttributes( {
-				url: window.URL.createObjectURL( media ),
-			} );
-
-			// Create upload payload
-			const data = new window.FormData();
-			data.append( 'file', media );
-
-			new wp.api.models.Media().save( null, {
-				data: data,
-				contentType: false,
-			} ).done( ( savedMedia ) => {
-				setAttributes( {
-					id: savedMedia.id,
-					url: savedMedia.source_url,
-				} );
-			} ).fail( () => {
-				// Reset to empty on failure.
-				// TODO: Better failure messaging
-				setAttributes( { url: null } );
-			} );
-		};
+		const uploadFromFiles = ( event ) => fileUpload( event.target.files, setAttributes );
 
 		const controls = (
 			focus && (
@@ -183,7 +154,7 @@ registerBlockType( 'core/image', {
 					<FormFileUpload
 						isLarge
 						className="wp-block-image__upload-button"
-						onChange={ ( event ) => uploadFromFiles( event.target.files ) }
+						onChange={ uploadFromFiles }
 						accept="image/*"
 					>
 						{ __( 'Upload' ) }

From 726fe5ce28a6ec4502256df3da4e4b174bb43310 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 8 Aug 2017 13:31:17 -0700
Subject: [PATCH 03/17] Remove console debug

---
 utils/fileupload.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/utils/fileupload.js b/utils/fileupload.js
index 3cf3ca8e0beb2..ccbd921063b6b 100644
--- a/utils/fileupload.js
+++ b/utils/fileupload.js
@@ -1,7 +1,5 @@
 
 export default function fileUpload( files, setAttributes ) {
-	console.log("Here!", files, setAttributes);
-
 	const media = files[ 0 ];
 
 	// Only allow image uploads

From 35f8a610fb9f94ad3e495a51dcdb3b4748db5365 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 13:48:54 -0700
Subject: [PATCH 04/17] Add image upload button for gallery

---
 blocks/library/gallery/index.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 0bb77c8fb084a..b93ee31c570fb 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar, Placeholder } from '@wordpress/components';
+import { filesUpload } from '@wordpress/utils';
+import { Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -104,6 +105,10 @@ registerBlockType( 'core/gallery', {
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
+		const uploadFromFiles = ( event ) => {
+			filesUpload( event.target.files, setAttributes );
+		};
+
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -134,6 +139,15 @@ registerBlockType( 'core/gallery', {
 					icon="format-gallery"
 					label={ __( 'Gallery' ) }
 					className={ className }>
+					<FormFileUpload
+						isLarge
+						className="wp-block-image__upload-button"
+						onChange={ uploadFromFiles }
+						accept="image/*"
+						multiple="true"
+					>
+						{ __( 'Upload' ) }
+					</FormFileUpload>
 					<MediaUploadButton
 						buttonProps={ uploadButtonProps }
 						onSelect={ setMediaUrl }

From b075215932075b121fa8229044bc9ba60deaa58a Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 14:58:32 -0700
Subject: [PATCH 05/17] Checkpoint: files uploading, but not editable in modal

---
 utils/fileupload.js | 51 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/utils/fileupload.js b/utils/fileupload.js
index ccbd921063b6b..2c65cf5a78d3d 100644
--- a/utils/fileupload.js
+++ b/utils/fileupload.js
@@ -1,5 +1,9 @@
 
-export default function fileUpload( files, setAttributes ) {
+export function fileUpload( files, setAttributes ) {
+	if ( files.length < 1 ) {
+		return;
+	}
+
 	const media = files[ 0 ];
 
 	// Only allow image uploads
@@ -30,3 +34,48 @@ export default function fileUpload( files, setAttributes ) {
 		setAttributes( { url: null } );
 	} );
 }
+
+export function filesUpload( filesList, setAttributes ) {
+	const files = [ ...filesList ];
+	if ( files.length < 1 ) {
+		return;
+	}
+
+	const imgs = [];
+	files.forEach( ( media, idx ) => {
+		// only allow image uploads
+		if ( ! /^image\//.test( media.type ) ) {
+			return;
+		}
+
+		// set temporary URL to create image placeholder
+		const tempUrl = window.URL.createObjectURL( media );
+		const img = { url: tempUrl };
+		imgs.push( img );
+		setAttributes( { images: imgs } );
+
+		// create upload payload
+		const data = new window.FormData();
+		data.append( 'file', media );
+
+		new wp.api.models.Media().save( null, {
+			data: data,
+			contentType: false,
+		} ).done( ( savedMedia ) => {
+			img.url = savedMedia.source_url;
+			setAttributes( { images: [
+				...imgs.slice( 0, idx ),
+				img,
+				...imgs.slice( idx + 1 ),
+			] } );
+		} ).fail( () => {
+			// Reset to empty on failure.
+			// TODO: Better failure messaging
+			img.url = null;
+			setAttributes( { images: [
+				...imgs.slice( 0, idx ),
+				...imgs.slice( idx + 1 ),
+			] } );
+		} );
+	} );
+}

From 6dbe9d0a47646d834d2783a0f1ab944dca1c7197 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 14:59:57 -0700
Subject: [PATCH 06/17] Add link and id to img object

---
 utils/fileupload.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/utils/fileupload.js b/utils/fileupload.js
index 2c65cf5a78d3d..7a3416e9cc6f7 100644
--- a/utils/fileupload.js
+++ b/utils/fileupload.js
@@ -62,6 +62,8 @@ export function filesUpload( filesList, setAttributes ) {
 			data: data,
 			contentType: false,
 		} ).done( ( savedMedia ) => {
+			img.id = savedMedia.id;
+			img.link = savedMedia.link;
 			img.url = savedMedia.source_url;
 			setAttributes( { images: [
 				...imgs.slice( 0, idx ),

From 732c4b73b6d78a034167d55d1f598124803f7e9f Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 16:51:28 -0700
Subject: [PATCH 07/17] Add id to gallery image

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

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 0d5ade2b58a74..7f113901f0807 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -10,7 +10,7 @@ export default function GalleryImage( props ) {
 			break;
 	}
 
-	const image = <img src={ props.img.url } alt={ props.img.alt } />;
+	const image = <img src={ props.img.url } alt={ props.img.alt } data-id={ props.img.id } />;
 
 	return (
 		<figure className="blocks-gallery-image">

From cbaa1ef2f6dfb5aaff6a96573213a6363630ffaf Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 16:52:11 -0700
Subject: [PATCH 08/17] Switch media modal to use MediaUploadButton on edit

---
 blocks/library/gallery/index.js | 68 ++++++++++++++-------------------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index b93ee31c570fb..07e1854a713c9 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -3,14 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { filesUpload } from '@wordpress/utils';
-import { Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
+import { Dashicon, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType } from '../../api';
+import { registerBlockType, source } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
@@ -21,6 +21,7 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
 import BlockDescription from '../../block-description';
 
+const { query, attr } = source;
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: 'attachment', label: __( 'Attachment Page' ) },
@@ -28,37 +29,6 @@ const linkOptions = [
 	{ value: 'none', label: __( 'None' ) },
 ];
 
-const editMediaLibrary = ( attributes, setAttributes ) => {
-	const frameConfig = {
-		frame: 'post',
-		title: __( 'Update Gallery media' ),
-		button: {
-			text: __( 'Select' ),
-		},
-		multiple: true,
-		state: 'gallery-edit',
-		selection: new wp.media.model.Selection( attributes.images, { multiple: true } ),
-	};
-
-	const editFrame = wp.media( frameConfig );
-
-	// the frameConfig settings dont carry to other state modals
-	// so requires setting this attribute directory to not show settings
-	editFrame.state( 'gallery-edit' ).attributes.displaySettings = false;
-
-	function updateFn() {
-		setAttributes( {
-			images: this.frame.state().attributes.library.models.map( ( a ) => {
-				return a.attributes;
-			} ),
-		} );
-	}
-
-	editFrame.on( 'insert', updateFn );
-	editFrame.state( 'gallery-edit' ).on( 'update', updateFn );
-	editFrame.open( 'gutenberg-gallery' );
-};
-
 function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
@@ -77,6 +47,11 @@ registerBlockType( 'core/gallery', {
 		images: {
 			type: 'array',
 			default: [],
+			source: query( 'div.wp-block-gallery figure.blocks-gallery-image img', {
+				url: attr( 'src' ),
+				alt: attr( 'alt' ),
+				id: attr( 'data-id' ),
+			} )
 		},
 		columns: {
 			type: 'number',
@@ -105,6 +80,8 @@ registerBlockType( 'core/gallery', {
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
+		const onSelectImages = ( imgs ) => setAttributes( { images: imgs } );
+
 		const uploadFromFiles = ( event ) => {
 			filesUpload( event.target.files, setAttributes );
 		};
@@ -117,18 +94,29 @@ registerBlockType( 'core/gallery', {
 						onChange={ updateAlignment }
 					/>
 					{ !! images.length && (
-						<Toolbar controls={ [ {
-							icon: 'edit',
-							title: __( 'Edit Gallery' ),
-							onClick: () => editMediaLibrary( attributes, setAttributes ),
-						} ] } />
+						<Toolbar>
+							<li>
+								<MediaUploadButton
+									buttonProps={ {
+										className: 'components-icon-button components-toolbar__control',
+										'aria-label': __( 'Edit Gallery' ),
+									} }
+									onSelect={ onSelectImages }
+									type="image"
+									multiple="true"
+									gallery="true"
+									value={ images }
+								>
+									<Dashicon icon="edit" />
+								</MediaUploadButton>
+							</li>
+						</Toolbar>
 					) }
 				</BlockControls>
 			)
 		);
 
 		if ( images.length === 0 ) {
-			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			const uploadButtonProps = { isLarge: true };
 
 			return [
@@ -150,7 +138,7 @@ registerBlockType( 'core/gallery', {
 					</FormFileUpload>
 					<MediaUploadButton
 						buttonProps={ uploadButtonProps }
-						onSelect={ setMediaUrl }
+						onSelect={ onSelectImages }
 						type="image"
 						multiple="true"
 						gallery="true"

From 76294854a2d271a3581195179ab4d3f3ef503f55 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 17:16:55 -0700
Subject: [PATCH 09/17] Value for MediaUploadButton needs to be array of ids

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 07e1854a713c9..36d00104ebc40 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -105,7 +105,7 @@ registerBlockType( 'core/gallery', {
 									type="image"
 									multiple="true"
 									gallery="true"
-									value={ images }
+									value={ images.map( ( img ) => img.id ) }
 								>
 									<Dashicon icon="edit" />
 								</MediaUploadButton>

From 3ac5392f3d3d50914fa7a4bd7caa9b1460274706 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 20:50:37 -0700
Subject: [PATCH 10/17] Fix core gallery test fixtures with simplified data

---
 blocks/test/fixtures/core__gallery.html       |  2 +-
 blocks/test/fixtures/core__gallery.json       | 24 ------------
 .../test/fixtures/core__gallery.parsed.json   | 37 +------------------
 .../fixtures/core__gallery.serialized.html    |  2 +-
 4 files changed, 3 insertions(+), 62 deletions(-)

diff --git a/blocks/test/fixtures/core__gallery.html b/blocks/test/fixtures/core__gallery.html
index 2846a09568013..37aff1683b508 100644
--- a/blocks/test/fixtures/core__gallery.html
+++ b/blocks/test/fixtures/core__gallery.html
@@ -1,4 +1,4 @@
-<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
+<!-- wp:core/gallery -->
 <div class="wp-block-gallery">
 	<figure class="blocks-gallery-image">
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
diff --git a/blocks/test/fixtures/core__gallery.json b/blocks/test/fixtures/core__gallery.json
index c02ea7ffb75f6..e10fadd76a9a2 100644
--- a/blocks/test/fixtures/core__gallery.json
+++ b/blocks/test/fixtures/core__gallery.json
@@ -7,34 +7,10 @@
             "align": "none",
             "images": [
                 {
-                    "sizes": {
-                        "full": {
-                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                            "height": 1080,
-                            "width": 810,
-                            "orientation": "portrait"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 1,
                     "url": "https://cldup.com/uuUqE_dXzy.jpg",
                     "alt": "title"
                 },
                 {
-                    "sizes": {
-                        "full": {
-                            "url": "http://google.com/hi.png",
-                            "height": 1080,
-                            "width": 1440,
-                            "orientation": "landscape"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 2,
                     "url": "http://google.com/hi.png",
                     "alt": "title"
                 }
diff --git a/blocks/test/fixtures/core__gallery.parsed.json b/blocks/test/fixtures/core__gallery.parsed.json
index 914a3635b82bb..31f38109c032b 100644
--- a/blocks/test/fixtures/core__gallery.parsed.json
+++ b/blocks/test/fixtures/core__gallery.parsed.json
@@ -1,42 +1,7 @@
 [
     {
         "blockName": "core/gallery",
-        "attrs": {
-            "images": [
-                {
-                    "sizes": {
-                        "full": {
-                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                            "height": 1080,
-                            "width": 810,
-                            "orientation": "portrait"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 1,
-                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                    "alt": "title"
-                },
-                {
-                    "sizes": {
-                        "full": {
-                            "url": "http://google.com/hi.png",
-                            "height": 1080,
-                            "width": 1440,
-                            "orientation": "landscape"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 2,
-                    "url": "http://google.com/hi.png",
-                    "alt": "title"
-                }
-            ]
-        },
+        "attrs": null,
         "rawContent": "\n<div class=\"wp-block-gallery\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
     },
     {
diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html
index 64f50571c8cc9..1703362512af8 100644
--- a/blocks/test/fixtures/core__gallery.serialized.html
+++ b/blocks/test/fixtures/core__gallery.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
+<!-- wp:core/gallery -->
 <div class="wp-block-gallery">
     <figure class="blocks-gallery-image">
         <img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />

From 6a600a2fe828e2cc22d68a80d9c15be7a264c47a Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 20:50:58 -0700
Subject: [PATCH 11/17] Add core gallery test for columns parameter

---
 .../test/fixtures/core__gallery__columns.html | 10 ++++++++
 .../test/fixtures/core__gallery__columns.json | 24 +++++++++++++++++++
 .../core__gallery__columns.parsed.json        | 13 ++++++++++
 .../core__gallery__columns.serialized.html    | 10 ++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 blocks/test/fixtures/core__gallery__columns.html
 create mode 100644 blocks/test/fixtures/core__gallery__columns.json
 create mode 100644 blocks/test/fixtures/core__gallery__columns.parsed.json
 create mode 100644 blocks/test/fixtures/core__gallery__columns.serialized.html

diff --git a/blocks/test/fixtures/core__gallery__columns.html b/blocks/test/fixtures/core__gallery__columns.html
new file mode 100644
index 0000000000000..184fa34783941
--- /dev/null
+++ b/blocks/test/fixtures/core__gallery__columns.html
@@ -0,0 +1,10 @@
+<!-- wp:core/gallery {"columns":"1"} -->
+<div class="wp-block-gallery columns-1 ">
+	<figure class="blocks-gallery-image">
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
+	</figure>
+	<figure class="blocks-gallery-image">
+		<img src="http://google.com/hi.png" alt="title" />
+	</figure>
+</div>
+<!-- /wp:core/gallery -->
diff --git a/blocks/test/fixtures/core__gallery__columns.json b/blocks/test/fixtures/core__gallery__columns.json
new file mode 100644
index 0000000000000..7d39a9280edcb
--- /dev/null
+++ b/blocks/test/fixtures/core__gallery__columns.json
@@ -0,0 +1,24 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/gallery",
+        "isValid": false,
+        "attributes": {
+            "align": "none",
+            "images": [
+                {
+                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                    "alt": "title"
+                },
+                {
+                    "url": "http://google.com/hi.png",
+                    "alt": "title"
+                }
+            ],
+            "columns": 1,
+            "imageCrop": true,
+            "linkTo": "none"
+        },
+        "originalContent": "<div class=\"wp-block-gallery columns-1 \">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>"
+    }
+]
diff --git a/blocks/test/fixtures/core__gallery__columns.parsed.json b/blocks/test/fixtures/core__gallery__columns.parsed.json
new file mode 100644
index 0000000000000..a17f139ec74e9
--- /dev/null
+++ b/blocks/test/fixtures/core__gallery__columns.parsed.json
@@ -0,0 +1,13 @@
+[
+    {
+        "blockName": "core/gallery",
+        "attrs": {
+            "columns": "1"
+        },
+        "rawContent": "\n<div class=\"wp-block-gallery columns-1 \">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]
diff --git a/blocks/test/fixtures/core__gallery__columns.serialized.html b/blocks/test/fixtures/core__gallery__columns.serialized.html
new file mode 100644
index 0000000000000..a7b90a472283f
--- /dev/null
+++ b/blocks/test/fixtures/core__gallery__columns.serialized.html
@@ -0,0 +1,10 @@
+<!-- wp:core/gallery {"columns":1} -->
+<div class="wp-block-gallery columns-1 ">
+    <figure class="blocks-gallery-image">
+        <img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
+    </figure>
+    <figure class="blocks-gallery-image">
+        <img src="http://google.com/hi.png" alt="title" />
+    </figure>
+</div>
+<!-- /wp:core/gallery -->

From 7b14eca91e574ad59bc4f42871df778cc51a0117 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 9 Aug 2017 21:49:45 -0700
Subject: [PATCH 12/17] Lint fix trailing comma

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 36d00104ebc40..455b12ed0a804 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -51,7 +51,7 @@ registerBlockType( 'core/gallery', {
 				url: attr( 'src' ),
 				alt: attr( 'alt' ),
 				id: attr( 'data-id' ),
-			} )
+			} ),
 		},
 		columns: {
 			type: 'number',

From 0d6a4dc5b16f1707ee20d3b0e8ae7b55f8cbcaf9 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 10 Aug 2017 07:39:47 -0700
Subject: [PATCH 13/17] Can just use parameter, dont need ="true"

---
 blocks/library/gallery/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 455b12ed0a804..0de781d55f72d 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -103,8 +103,8 @@ registerBlockType( 'core/gallery', {
 									} }
 									onSelect={ onSelectImages }
 									type="image"
-									multiple="true"
-									gallery="true"
+									multiple
+									gallery
 									value={ images.map( ( img ) => img.id ) }
 								>
 									<Dashicon icon="edit" />
@@ -140,8 +140,8 @@ registerBlockType( 'core/gallery', {
 						buttonProps={ uploadButtonProps }
 						onSelect={ onSelectImages }
 						type="image"
-						multiple="true"
-						gallery="true"
+						multiple
+						gallery
 					>
 						{ __( 'Insert from Media Library' ) }
 					</MediaUploadButton>

From d335497c7cd3784ace0a26e9c4591a44add2b042 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 10 Aug 2017 07:45:04 -0700
Subject: [PATCH 14/17] Rename fileupload.js to mediaupload.js

---
 blocks/library/gallery/index.js         | 4 ++--
 blocks/library/image/index.js           | 4 ++--
 utils/index.js                          | 2 +-
 utils/{fileupload.js => mediaupload.js} | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename utils/{fileupload.js => mediaupload.js} (93%)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 0de781d55f72d..e4bb9768432cb 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { filesUpload } from '@wordpress/utils';
+import { mediasUpload } from '@wordpress/utils';
 import { Dashicon, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
@@ -83,7 +83,7 @@ registerBlockType( 'core/gallery', {
 		const onSelectImages = ( imgs ) => setAttributes( { images: imgs } );
 
 		const uploadFromFiles = ( event ) => {
-			filesUpload( event.target.files, setAttributes );
+			mediasUpload( event.target.files, setAttributes );
 		};
 
 		const controls = (
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index c8a9340e5426b..469b17449084b 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -8,7 +8,7 @@ import ResizableBox from 'react-resizable-box';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { fileUpload } from '@wordpress/utils';
+import { mediaUpload } from '@wordpress/utils';
 import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordpress/components';
 
 /**
@@ -109,7 +109,7 @@ registerBlockType( 'core/image', {
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1;
 		const uploadButtonProps = { isLarge: true };
 		const onSetHref = ( value ) => setAttributes( { href: value } );
-		const uploadFromFiles = ( event ) => fileUpload( event.target.files, setAttributes );
+		const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAttributes );
 
 		const controls = (
 			focus && (
diff --git a/utils/index.js b/utils/index.js
index 444acedf1e981..3977354701175 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -6,4 +6,4 @@ export { nodetypes };
 
 export * from './tracking';
 
-export * from './fileupload';
+export * from './mediaupload';
diff --git a/utils/fileupload.js b/utils/mediaupload.js
similarity index 93%
rename from utils/fileupload.js
rename to utils/mediaupload.js
index 7a3416e9cc6f7..29e7a93b2ba86 100644
--- a/utils/fileupload.js
+++ b/utils/mediaupload.js
@@ -1,5 +1,5 @@
 
-export function fileUpload( files, setAttributes ) {
+export function mediaUpload( files, setAttributes ) {
 	if ( files.length < 1 ) {
 		return;
 	}
@@ -35,7 +35,7 @@ export function fileUpload( files, setAttributes ) {
 	} );
 }
 
-export function filesUpload( filesList, setAttributes ) {
+export function mediasUpload( filesList, setAttributes ) {
 	const files = [ ...filesList ];
 	if ( files.length < 1 ) {
 		return;

From d050713c77823ad05945805b96714321297990cc Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 10 Aug 2017 08:14:24 -0700
Subject: [PATCH 15/17] Refactor so image and gallery use same function, clean
 up variable names and comments

---
 blocks/library/gallery/index.js |   5 +-
 utils/mediaupload.js            | 108 ++++++++++++++------------------
 2 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index e4bb9768432cb..2faaeef761e31 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { mediasUpload } from '@wordpress/utils';
+import { mediaUpload } from '@wordpress/utils';
 import { Dashicon, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
@@ -22,6 +22,7 @@ import GalleryImage from './gallery-image';
 import BlockDescription from '../../block-description';
 
 const { query, attr } = source;
+const isGallery = true;
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: 'attachment', label: __( 'Attachment Page' ) },
@@ -83,7 +84,7 @@ registerBlockType( 'core/gallery', {
 		const onSelectImages = ( imgs ) => setAttributes( { images: imgs } );
 
 		const uploadFromFiles = ( event ) => {
-			mediasUpload( event.target.files, setAttributes );
+			mediaUpload( event.target.files, setAttributes, isGallery );
 		};
 
 		const controls = (
diff --git a/utils/mediaupload.js b/utils/mediaupload.js
index 29e7a93b2ba86..b1056891bc3aa 100644
--- a/utils/mediaupload.js
+++ b/utils/mediaupload.js
@@ -1,83 +1,67 @@
+/* mediaupload.js
+	Media Upload is used by image and gallery blocks to handle uploading an image
+	when a file upload button is activated.
 
-export function mediaUpload( files, setAttributes ) {
-	if ( files.length < 1 ) {
-		return;
-	}
+	The gallery flag is needed since the gallery and image blocks have different
+	attributes and can not simply be keyed off the number of images, since a
+	single image gallery is possible
 
-	const media = files[ 0 ];
+	TODO: future enhancement to add an upload indicator
+*/
 
-	// Only allow image uploads
-	if ( ! /^image\//.test( media.type ) ) {
-		return;
-	}
-
-	// Use File API to assign temporary URL from upload
-	setAttributes( {
-		url: window.URL.createObjectURL( media ),
-	} );
-
-	// Create upload payload
-	const data = new window.FormData();
-	data.append( 'file', media );
-
-	new wp.api.models.Media().save( null, {
-		data: data,
-		contentType: false,
-	} ).done( ( savedMedia ) => {
-		setAttributes( {
-			id: savedMedia.id,
-			url: savedMedia.source_url,
-		} );
-	} ).fail( () => {
-		// Reset to empty on failure.
-		// TODO: Better failure messaging
-		setAttributes( { url: null } );
-	} );
-}
-
-export function mediasUpload( filesList, setAttributes ) {
+export function mediaUpload( filesList, setAttributes, gallery = false ) {
+	// Cast filesList to array
 	const files = [ ...filesList ];
-	if ( files.length < 1 ) {
-		return;
-	}
 
-	const imgs = [];
-	files.forEach( ( media, idx ) => {
-		// only allow image uploads
-		if ( ! /^image\//.test( media.type ) ) {
+	const gallerySet = [];
+	files.forEach( ( mediaFile, idx ) => {
+		// Only allow image uploads, may need updating if used for video
+		if ( ! /^image\//.test( mediaFile.type ) ) {
 			return;
 		}
 
-		// set temporary URL to create image placeholder
-		const tempUrl = window.URL.createObjectURL( media );
-		const img = { url: tempUrl };
-		imgs.push( img );
-		setAttributes( { images: imgs } );
+		// Set temporary URL to create placeholder image, this is replaced
+		// with final image from media gallery when upload is `done` below
+		const tempUrl = window.URL.createObjectURL( mediaFile );
+		const media = { url: tempUrl };
+		if ( gallery ) {
+			gallerySet.push( media );
+			setAttributes( { images: gallerySet } );
+		} else {
+			setAttributes( media );
+		}
 
-		// create upload payload
+		// Create upload payload
 		const data = new window.FormData();
-		data.append( 'file', media );
+		data.append( 'file', mediaFile );
 
 		new wp.api.models.Media().save( null, {
 			data: data,
 			contentType: false,
 		} ).done( ( savedMedia ) => {
-			img.id = savedMedia.id;
-			img.link = savedMedia.link;
-			img.url = savedMedia.source_url;
-			setAttributes( { images: [
-				...imgs.slice( 0, idx ),
-				img,
-				...imgs.slice( idx + 1 ),
-			] } );
+			media.id = savedMedia.id;
+			media.url = savedMedia.source_url;
+			if ( gallery ) {
+				setAttributes( { images: [
+					...gallerySet.slice( 0, idx ),
+					media,
+					...gallerySet.slice( idx + 1 ),
+				] } );
+			} else {
+				setAttributes( media );
+			}
 		} ).fail( () => {
 			// Reset to empty on failure.
 			// TODO: Better failure messaging
-			img.url = null;
-			setAttributes( { images: [
-				...imgs.slice( 0, idx ),
-				...imgs.slice( idx + 1 ),
-			] } );
+			media.url = null;
+			if ( gallery ) {
+				setAttributes( { images: [
+					...gallerySet.slice( 0, idx ),
+					...gallerySet.slice( idx + 1 ),
+				] } );
+			} else {
+				setAttributes( media );
+			}
 		} );
 	} );
 }

From 937026d7b4f9ea91522310263d7f03c4c324ec80 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 10 Aug 2017 08:52:26 -0700
Subject: [PATCH 16/17] Remove tracking include, rebase error

---
 utils/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/utils/index.js b/utils/index.js
index 3977354701175..2487d3d122452 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -4,6 +4,4 @@ import * as nodetypes from './nodetypes';
 export { keycodes };
 export { nodetypes };
 
-export * from './tracking';
-
 export * from './mediaupload';

From 2d88d138ee77ead9be166b0f2b3d286e8a62d8d0 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 10 Aug 2017 13:01:55 -0700
Subject: [PATCH 17/17] Add initial test for mediaupload.js

---
 utils/test/mediaupload.js | 40 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 utils/test/mediaupload.js

diff --git a/utils/test/mediaupload.js b/utils/test/mediaupload.js
new file mode 100644
index 0000000000000..24895e134526c
--- /dev/null
+++ b/utils/test/mediaupload.js
@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+
+/**
+ * Internal dependencies
+ */
+import { mediaUpload } from '../mediaupload';
+
+// mediaUpload is passed the setAttributes function
+// so we can stub that out have it pass the data to
+// console.error to check if proper thing is called
+const setAttributesStub = ( obj ) => console.error( obj );
+
+const invalidMediaObj = {
+	url: 'https://cldup.com/uuUqE_dXzy.jpg',
+	type: 'text/xml',
+};
+
+describe( 'mediaUpload', () => {
+	const originalConsoleError = console.error;
+	const originalGetUserSetting = window.getUserSetting;
+
+	beforeEach( () => {
+		console.error = jest.fn();
+	} );
+
+	afterEach( () => {
+		console.error = originalConsoleError;
+		window.getUserSetting = originalGetUserSetting;
+	} );
+
+	it( 'should do nothing on no files', () => {
+		mediaUpload( [ ], setAttributesStub );
+		expect( console.error ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should do nothing on invalid image type', () => {
+		mediaUpload( [ invalidMediaObj ], setAttributesStub );
+		expect( console.error ).not.toHaveBeenCalled();
+	} );
+} );