From bc92ce1772f8b66bba1a2ee8090d5aa553708684 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 4 May 2017 11:41:49 -0700
Subject: [PATCH 01/18] Initial gallery block

Creates initial gallery block, with stubbed out functionality.
Will create tickets for drag/drop, upload, multiple styles
---
 blocks/library/gallery/gallery-image.js | 12 ++++
 blocks/library/gallery/index.js         | 76 +++++++++++++++++++++++++
 blocks/library/gallery/style.scss       | 38 +++++++++++++
 3 files changed, 126 insertions(+)
 create mode 100644 blocks/library/gallery/gallery-image.js
 create mode 100644 blocks/library/gallery/index.js
 create mode 100644 blocks/library/gallery/style.scss

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
new file mode 100644
index 00000000000000..e7899c987d0672
--- /dev/null
+++ b/blocks/library/gallery/gallery-image.js
@@ -0,0 +1,12 @@
+
+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 } />
+			</div>
+		);
+	}
+}
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
new file mode 100644
index 00000000000000..d006eb53b24f58
--- /dev/null
+++ b/blocks/library/gallery/index.js
@@ -0,0 +1,76 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from 'api';
+
+// TODO: Revisit when we have a common components solution
+import Dashicon from '../../../editor/components/dashicon';
+import Button from '../../../editor/components/button';
+
+import GalleryImage from './gallery-image';
+
+const { query } = hpq;
+
+registerBlock( 'core/gallery', {
+	title: wp.i18n.__( 'Gallery' ),
+	icon: 'format-gallery',
+	category: 'common',
+
+	attributes: {
+		images: query( 'div.blocks-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 ) {
+			return (
+				<div className="blocks-gallery is-placeholder">
+					<div className="blocks-gallery__placeholder-label">
+						<Dashicon icon="format-gallery" />
+						{ wp.i18n.__( 'Gallery' ) }
+					</div>
+					<div className="blocks-gallery__placeholder-instructions">
+						{ wp.i18n.__( 'Drag images here or insert from media library' ) }
+					</div>
+					<Button isLarge
+						onClick={ () => setAttributes( { images: canned } ) }>
+						{ wp.i18n.__( 'Insert from Media Library' ) }
+					</Button>
+				</div>
+			);
+		}
+
+		return (
+			<div className="blocks-gallery-images">
+				{ images.map( ( img, i ) => (
+					<GalleryImage key={ i } img={ img } />
+				) ) }
+			</div>
+		);
+	},
+
+	save( { attributes } ) {
+		const { images } = attributes;
+
+		return (
+			<div className="blocks-gallery">
+				{ images.map( ( img, i ) => (
+					<GalleryImage key={ i } img={ img } />
+				) ) }
+			</div>
+		);
+	}
+} );
diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
new file mode 100644
index 00000000000000..7e9dbcf75add6f
--- /dev/null
+++ b/blocks/library/gallery/style.scss
@@ -0,0 +1,38 @@
+
+.blocks-gallery-images {
+
+	display: flex;
+	flex-wrap: wrap;
+	
+	.blocks-gallery-image {
+
+		margin: 8px;
+
+		img {
+			max-width: 120px;
+		}
+	}
+}
+
+
+.blocks-gallery.is-placeholder {
+	margin: -15px;
+	padding: 6em 0;
+	border: 2px solid $light-gray-500;
+	text-align: center;
+}
+
+.blocks-gallery__placeholder-label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+
+	.dashicon {
+		margin-right: 1ch;
+	}
+}
+
+.blocks-gallery__placeholder-instructions {
+	margin: 1.8em 0;
+}

From b87177ae78a5e3c42dbb9b2108d000b1b780acbe Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 9 May 2017 11:21:17 -0700
Subject: [PATCH 02/18] Add gallery to library list

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

diff --git a/blocks/library/index.js b/blocks/library/index.js
index 59f625113cf564..bf5e64d4a9cef6 100644
--- a/blocks/library/index.js
+++ b/blocks/library/index.js
@@ -11,3 +11,4 @@ import './pullquote';
 import './table';
 import './preformatted';
 import './code';
+import './gallery';

From 7d59acce8931e62065515365bcc75bb733590559 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 10 May 2017 10:26:46 -0700
Subject: [PATCH 03/18] Fix paths for imports

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index d006eb53b24f58..8034be3c381ba3 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -2,11 +2,11 @@
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query as hpq } from 'api';
+import { registerBlock, query as hpq } from '../../api';
 
 // TODO: Revisit when we have a common components solution
-import Dashicon from '../../../editor/components/dashicon';
-import Button from '../../../editor/components/button';
+import Dashicon from '../../../components/dashicon';
+import Button from '../../../components/button';
 
 import GalleryImage from './gallery-image';
 

From adc6085c7b16da4f54130a6bbf7cc3e8f55304b2 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 10 May 2017 10:39:16 -0700
Subject: [PATCH 04/18] Make the linter happy

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

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index e7899c987d0672..d1aa51b1cc47ff 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,8 +1,6 @@
 
 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 } />

From a77e250604017050b993472fd8f21c4dc865ef3c Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 11 May 2017 11:02:38 -0700
Subject: [PATCH 05/18] Switch out with Placeholder component

---
 blocks/library/gallery/index.js | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 8034be3c381ba3..2bac363e1b3a54 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -4,9 +4,8 @@
 import './style.scss';
 import { registerBlock, query as hpq } from '../../api';
 
-// TODO: Revisit when we have a common components solution
-import Dashicon from '../../../components/dashicon';
-import Button from '../../../components/button';
+import Button from 'components/button';
+import Placeholder from 'components/placeholder';
 
 import GalleryImage from './gallery-image';
 
@@ -37,19 +36,15 @@ registerBlock( 'core/gallery', {
 
 		if ( ! images ) {
 			return (
-				<div className="blocks-gallery is-placeholder">
-					<div className="blocks-gallery__placeholder-label">
-						<Dashicon icon="format-gallery" />
-						{ wp.i18n.__( 'Gallery' ) }
-					</div>
-					<div className="blocks-gallery__placeholder-instructions">
-						{ wp.i18n.__( 'Drag images here or insert from media library' ) }
-					</div>
-					<Button isLarge
-						onClick={ () => setAttributes( { images: canned } ) }>
+				<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 } ) }>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
 					</Button>
-				</div>
+				</Placeholder>
 			);
 		}
 
@@ -72,5 +67,6 @@ registerBlock( 'core/gallery', {
 				) ) }
 			</div>
 		);
-	}
+	},
+
 } );

From 0303d84045b7dc5b1490f20744ffae7b0f4dacc8 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 22 May 2017 12:16:32 -0700
Subject: [PATCH 06/18] 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>
 			);
 		}

From 5f9b88ac23869a6c0730a3bb8700ccee3aabccae Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 23 May 2017 14:44:30 -0700
Subject: [PATCH 07/18] Add controls for alignment, and start to edit opening
 back media library

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 34e5bb0211657b..a5eab3deb8846a 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -11,6 +11,32 @@ import GalleryImage from './gallery-image';
 
 const { query } = hpq;
 
+const openMediaLibrary = () => {
+	const frameConfig = {
+		title: wp.i18n.__( 'Select or Upload a media' ),
+		button: {
+			text: wp.i18n.__( 'Select' ),
+		},
+		multiple: true,
+	};
+
+	wp.media( frameConfig ).open();
+};
+
+/**
+ * Returns an attribute setter with behavior that if the target value is
+ * already the assigned attribute value, it will be set to undefined.
+ *
+ * @param  {string}   align Alignment value
+ * @return {Function}       Attribute setter
+ */
+function toggleAlignment( align ) {
+	return ( attributes, setAttributes ) => {
+		const nextAlign = attributes.align === align ? undefined : align;
+		setAttributes( { align: nextAlign } );
+	};
+}
+
 registerBlock( 'core/gallery', {
 	title: wp.i18n.__( 'Gallery' ),
 	icon: 'format-gallery',
@@ -20,8 +46,40 @@ registerBlock( 'core/gallery', {
 		images: query( 'div.blocks-gallery' ),
 	},
 
+	controls: [
+		{
+			icon: 'format-image',
+			title: wp.i18n.__( 'Edit Gallery' ),
+			onClick: () => openMediaLibrary(),
+		},
+		{
+			icon: 'align-left',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => 'left' === align,
+			onClick: toggleAlignment( 'left' ),
+		},
+		{
+			icon: 'align-center',
+			title: wp.i18n.__( 'Align center' ),
+			isActive: ( { align } ) => ! align || 'center' === align,
+			onClick: toggleAlignment( 'center' ),
+		},
+		{
+			icon: 'align-right',
+			title: wp.i18n.__( 'Align right' ),
+			isActive: ( { align } ) => 'right' === align,
+			onClick: toggleAlignment( 'right' ),
+		},
+		{
+			icon: 'align-full-width',
+			title: wp.i18n.__( 'Wide width' ),
+			isActive: ( { align } ) => 'wide' === align,
+			onClick: toggleAlignment( 'wide' ),
+		},
+	],
+
 	edit( { attributes, setAttributes } ) {
-		const { images } = attributes;
+		const { images, align = 'none' } = attributes;
 		if ( ! images ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -43,7 +101,7 @@ registerBlock( 'core/gallery', {
 		}
 
 		return (
-			<div className="blocks-gallery-images">
+			<div className={ `blocks-gallery align${ align }` }>
 				{ images.map( ( img, i ) => (
 					<GalleryImage key={ i } img={ img } />
 				) ) }
@@ -52,10 +110,10 @@ registerBlock( 'core/gallery', {
 	},
 
 	save( { attributes } ) {
-		const { images } = attributes;
+		const { images, align = 'none' } = attributes;
 
 		return (
-			<div className="blocks-gallery">
+			<div className={ `blocks-gallery align${ align }` }>
 				{ images.map( ( img, i ) => (
 					<GalleryImage key={ i } img={ img } />
 				) ) }

From 02cadf4c5ce43f424578fec32686f026b7ffd824 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 25 May 2017 11:39:13 -0700
Subject: [PATCH 08/18] Change CSS to just blocks-gallery to fix image width
 issue

---
 blocks/library/gallery/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
index 7e9dbcf75add6f..d07d3b801db5c2 100644
--- a/blocks/library/gallery/style.scss
+++ b/blocks/library/gallery/style.scss
@@ -1,5 +1,5 @@
 
-.blocks-gallery-images {
+.blocks-gallery {
 
 	display: flex;
 	flex-wrap: wrap;
@@ -14,7 +14,6 @@
 	}
 }
 
-
 .blocks-gallery.is-placeholder {
 	margin: -15px;
 	padding: 6em 0;

From 70c5b7fc5b501110589b6c05052fbe6ad3d7f957 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 25 May 2017 11:40:17 -0700
Subject: [PATCH 09/18] Switch on open to Edit Gallery with images

Instead of reopening the Media Gallery, which the Media Upload Button does,
when editing the gallery requires opening the Edit Gallery modal. Also
requires setting selection and event which translates backbone data.

Props to @georgeh, who I paired with developing

See wp.media.editor from wp-includes/js/media-views.js
---
 blocks/library/gallery/index.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index a5eab3deb8846a..856a65e09b2449 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -11,16 +11,30 @@ import GalleryImage from './gallery-image';
 
 const { query } = hpq;
 
-const openMediaLibrary = () => {
+const editMediaLibrary = ( attributes, setAttributes ) => {
 	const frameConfig = {
-		title: wp.i18n.__( 'Select or Upload a media' ),
+		frame: 'post',
+		title: wp.i18n.__( 'Update Gallery media' ),
 		button: {
 			text: wp.i18n.__( 'Select' ),
 		},
 		multiple: true,
+		state: 'gallery-edit',
+		selection: new wp.media.model.Selection( attributes.images, { multiple: true } ),
 	};
 
-	wp.media( frameConfig ).open();
+	const editFrame = wp.media( frameConfig );
+	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' );
 };
 
 /**
@@ -43,6 +57,7 @@ registerBlock( 'core/gallery', {
 	category: 'common',
 
 	attributes: {
+		// TODO: fix when loading view with existing gallery
 		images: query( 'div.blocks-gallery' ),
 	},
 
@@ -50,7 +65,7 @@ registerBlock( 'core/gallery', {
 		{
 			icon: 'format-image',
 			title: wp.i18n.__( 'Edit Gallery' ),
-			onClick: () => openMediaLibrary(),
+			onClick: editMediaLibrary,
 		},
 		{
 			icon: 'align-left',

From 9be7823e8003bd02c9f5e8084e14563254549528 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 30 May 2017 15:05:39 -0700
Subject: [PATCH 10/18] Fix query/set attributes

---
 blocks/library/gallery/gallery-image.js |  2 +-
 blocks/library/gallery/index.js         | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index fc7528aaefec48..f0bfe83251f408 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -2,7 +2,7 @@
 export default class GalleryImage extends wp.element.Component {
 	render() {
 		return (
-			<div key={ this.props.i } className="blocks-gallery-image">
+			<div key={ this.props.i } className="blocks-gallery-image" data-url={ this.props.img.url } data-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 856a65e09b2449..0881b81fede277 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -9,7 +9,7 @@ import MediaUploadButton from '../../media-upload-button';
 
 import GalleryImage from './gallery-image';
 
-const { query } = hpq;
+const { query, attr } = hpq;
 
 const editMediaLibrary = ( attributes, setAttributes ) => {
 	const frameConfig = {
@@ -57,8 +57,11 @@ registerBlock( 'core/gallery', {
 	category: 'common',
 
 	attributes: {
-		// TODO: fix when loading view with existing gallery
-		images: query( 'div.blocks-gallery' ),
+		images:
+			query( 'div.blocks-gallery div.blocks-gallery-image', {
+				url: attr( 'data-url' ),
+				alt: attr( 'data-alt' ),
+			} ),
 	},
 
 	controls: [
@@ -128,7 +131,7 @@ registerBlock( 'core/gallery', {
 		const { images, align = 'none' } = attributes;
 
 		return (
-			<div className={ `blocks-gallery align${ align }` }>
+			<div className={ `blocks-gallery align${ align }` } >
 				{ images.map( ( img, i ) => (
 					<GalleryImage key={ i } img={ img } />
 				) ) }

From da0fe964f5a5ae4a55554335085c71d6c9c11d90 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 30 May 2017 15:06:29 -0700
Subject: [PATCH 11/18] Initial fixture for testing

---
 blocks/test/fixtures/core-gallery.html | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 blocks/test/fixtures/core-gallery.html

diff --git a/blocks/test/fixtures/core-gallery.html b/blocks/test/fixtures/core-gallery.html
new file mode 100644
index 00000000000000..e8d15b33c967c1
--- /dev/null
+++ b/blocks/test/fixtures/core-gallery.html
@@ -0,0 +1,10 @@
+<!-- wp:core/gallery -->
+<div class="blocks-gallery">
+	<div class="blocks-gallery-image">
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/>
+	</div>
+	<div class="blocks-gallery-image">
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/>
+	</div>
+</div>
+<!-- /wp:core/gallery -->

From 26f5d77fd76428976fa0ebfb1eb3a9cf4737578b Mon Sep 17 00:00:00 2001
From: James Nylen <jnylen@gmail.com>
Date: Wed, 31 May 2017 14:24:33 -0400
Subject: [PATCH 12/18] Work around receiving objects that are not React
 components

---
 blocks/test/full-content.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/blocks/test/full-content.js b/blocks/test/full-content.js
index 0798782fb5e3db..4bdf65b03bac7f 100644
--- a/blocks/test/full-content.js
+++ b/blocks/test/full-content.js
@@ -53,7 +53,10 @@ function normalizeReactTree( element ) {
 		return element.map( child => normalizeReactTree( child ) );
 	}
 
-	if ( isObject( element ) ) {
+	// Check if we got an object first, then if it actually has a `type` like a
+	// React component.  Sometimes we get other stuff here, which probably
+	// indicates a bug.
+	if ( isObject( element ) && element.type ) {
 		const toReturn = {
 			type: element.type,
 		};

From dc9412a43e5a0b8409f8bd6cf9b111ff55863a8a Mon Sep 17 00:00:00 2001
From: James Nylen <jnylen@gmail.com>
Date: Wed, 31 May 2017 14:24:51 -0400
Subject: [PATCH 13/18] Add remaining `core/gallery` test fixtures

---
 blocks/test/fixtures/core-gallery.json            | 12 ++++++++++++
 blocks/test/fixtures/core-gallery.serialized.html |  7 +++++++
 2 files changed, 19 insertions(+)
 create mode 100644 blocks/test/fixtures/core-gallery.json
 create mode 100644 blocks/test/fixtures/core-gallery.serialized.html

diff --git a/blocks/test/fixtures/core-gallery.json b/blocks/test/fixtures/core-gallery.json
new file mode 100644
index 00000000000000..f36b3596161448
--- /dev/null
+++ b/blocks/test/fixtures/core-gallery.json
@@ -0,0 +1,12 @@
+[
+    {
+        "uid": "_uid_0",
+        "blockType": "core/gallery",
+        "attributes": {
+            "images": [
+                {},
+                {}
+            ]
+        }
+    }
+]
diff --git a/blocks/test/fixtures/core-gallery.serialized.html b/blocks/test/fixtures/core-gallery.serialized.html
new file mode 100644
index 00000000000000..a91d7eb1c663a1
--- /dev/null
+++ b/blocks/test/fixtures/core-gallery.serialized.html
@@ -0,0 +1,7 @@
+<!-- wp:core/gallery -->
+<div class="blocks-gallery alignnone">
+    <div class="blocks-gallery-image"><img/></div>
+    <div class="blocks-gallery-image"><img/></div>
+</div>
+<!-- /wp:core/gallery -->
+

From 0aee746bf7f448c9bb2466a3473c01b272c08e68 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 31 May 2017 12:29:19 -0700
Subject: [PATCH 14/18] Switch attributes to use img attributes and not add
 data attributes

---
 blocks/library/gallery/gallery-image.js           | 2 +-
 blocks/library/gallery/index.js                   | 6 +++---
 blocks/test/fixtures/core-gallery.html            | 4 ++--
 blocks/test/fixtures/core-gallery.json            | 4 ++--
 blocks/test/fixtures/core-gallery.serialized.html | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index f0bfe83251f408..fc7528aaefec48 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -2,7 +2,7 @@
 export default class GalleryImage extends wp.element.Component {
 	render() {
 		return (
-			<div key={ this.props.i } className="blocks-gallery-image" data-url={ this.props.img.url } data-alt={ this.props.img.alt }>
+			<div key={ this.props.i } className="blocks-gallery-image">
 				<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 0881b81fede277..a165e7b948400d 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -58,9 +58,9 @@ registerBlock( 'core/gallery', {
 
 	attributes: {
 		images:
-			query( 'div.blocks-gallery div.blocks-gallery-image', {
-				url: attr( 'data-url' ),
-				alt: attr( 'data-alt' ),
+			query( 'div.blocks-gallery div.blocks-gallery-image img', {
+				url: attr( 'src' ),
+				alt: attr( 'alt' ),
 			} ),
 	},
 
diff --git a/blocks/test/fixtures/core-gallery.html b/blocks/test/fixtures/core-gallery.html
index e8d15b33c967c1..126b9a6d840d1c 100644
--- a/blocks/test/fixtures/core-gallery.html
+++ b/blocks/test/fixtures/core-gallery.html
@@ -1,10 +1,10 @@
 <!-- wp:core/gallery -->
 <div class="blocks-gallery">
 	<div class="blocks-gallery-image">
-		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/>
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
 	</div>
 	<div class="blocks-gallery-image">
-		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title"/>
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
 	</div>
 </div>
 <!-- /wp:core/gallery -->
diff --git a/blocks/test/fixtures/core-gallery.json b/blocks/test/fixtures/core-gallery.json
index f36b3596161448..460b572d6c2516 100644
--- a/blocks/test/fixtures/core-gallery.json
+++ b/blocks/test/fixtures/core-gallery.json
@@ -4,8 +4,8 @@
         "blockType": "core/gallery",
         "attributes": {
             "images": [
-                {},
-                {}
+                { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" },
+                { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" }
             ]
         }
     }
diff --git a/blocks/test/fixtures/core-gallery.serialized.html b/blocks/test/fixtures/core-gallery.serialized.html
index a91d7eb1c663a1..7a61a9a5c2797b 100644
--- a/blocks/test/fixtures/core-gallery.serialized.html
+++ b/blocks/test/fixtures/core-gallery.serialized.html
@@ -1,7 +1,7 @@
 <!-- wp:core/gallery -->
 <div class="blocks-gallery alignnone">
-    <div class="blocks-gallery-image"><img/></div>
-    <div class="blocks-gallery-image"><img/></div>
+    <div class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></div>
+    <div class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></div>
 </div>
 <!-- /wp:core/gallery -->
 

From c3cbce69994a57df15cbf32509078e909846e9be Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 5 Jun 2017 09:50:28 -0700
Subject: [PATCH 15/18] Fix to registerBlockType

---
 blocks/library/gallery/index.js        | 4 ++--
 blocks/test/fixtures/core-gallery.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index a165e7b948400d..1c2a6d6d31a290 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query as hpq } from '../../api';
+import { registerBlockType, query as hpq } from '../../api';
 
 import Placeholder from 'components/placeholder';
 import MediaUploadButton from '../../media-upload-button';
@@ -51,7 +51,7 @@ function toggleAlignment( align ) {
 	};
 }
 
-registerBlock( 'core/gallery', {
+registerBlockType( 'core/gallery', {
 	title: wp.i18n.__( 'Gallery' ),
 	icon: 'format-gallery',
 	category: 'common',
diff --git a/blocks/test/fixtures/core-gallery.json b/blocks/test/fixtures/core-gallery.json
index 460b572d6c2516..10cd14286ac919 100644
--- a/blocks/test/fixtures/core-gallery.json
+++ b/blocks/test/fixtures/core-gallery.json
@@ -1,7 +1,7 @@
 [
     {
         "uid": "_uid_0",
-        "blockType": "core/gallery",
+        "name": "core/gallery",
         "attributes": {
             "images": [
                 { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" },

From 469fc552af0d11ebe8f1f668d9e13aed13c32565 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 7 Jun 2017 13:49:51 -0700
Subject: [PATCH 16/18] Update test to use <figure> instead of <div> for images

---
 blocks/test/fixtures/core-gallery.html            | 8 ++++----
 blocks/test/fixtures/core-gallery.serialized.html | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/blocks/test/fixtures/core-gallery.html b/blocks/test/fixtures/core-gallery.html
index 126b9a6d840d1c..233b319fba5713 100644
--- a/blocks/test/fixtures/core-gallery.html
+++ b/blocks/test/fixtures/core-gallery.html
@@ -1,10 +1,10 @@
 <!-- wp:core/gallery -->
 <div class="blocks-gallery">
-	<div class="blocks-gallery-image">
+	<figure class="blocks-gallery-image">
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
-	</div>
-	<div class="blocks-gallery-image">
+	</figure>
+	<figure class="blocks-gallery-image">
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
-	</div>
+	</figure>
 </div>
 <!-- /wp:core/gallery -->
diff --git a/blocks/test/fixtures/core-gallery.serialized.html b/blocks/test/fixtures/core-gallery.serialized.html
index 7a61a9a5c2797b..d3f126352a25b0 100644
--- a/blocks/test/fixtures/core-gallery.serialized.html
+++ b/blocks/test/fixtures/core-gallery.serialized.html
@@ -1,7 +1,7 @@
 <!-- wp:core/gallery -->
 <div class="blocks-gallery alignnone">
-    <div class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></div>
-    <div class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></div>
+    <figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
+    <figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
 </div>
 <!-- /wp:core/gallery -->
 

From 263c401befa38c42555a4c7d6f338a6e3a8b3fc7 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 7 Jun 2017 13:50:28 -0700
Subject: [PATCH 17/18] Switch attributes to use figure for querying

---
 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 1c2a6d6d31a290..8f0941260d9ad5 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -58,7 +58,7 @@ registerBlockType( 'core/gallery', {
 
 	attributes: {
 		images:
-			query( 'div.blocks-gallery div.blocks-gallery-image img', {
+			query( 'div.blocks-gallery figure.blocks-gallery-image img', {
 				url: attr( 'src' ),
 				alt: attr( 'alt' ),
 			} ),

From a7108ba463937aefa77c01d5c010f3a5c88caf81 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 7 Jun 2017 13:51:09 -0700
Subject: [PATCH 18/18] Switch to simple function, use <figure> instead of
 <div>

---
 blocks/library/gallery/gallery-image.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index fc7528aaefec48..c2aac32ef7b518 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,10 +1,8 @@
 
-export default class GalleryImage extends wp.element.Component {
-	render() {
-		return (
-			<div key={ this.props.i } className="blocks-gallery-image">
-				<img src={ this.props.img.url } alt={ this.props.img.alt } />
-			</div>
-		);
-	}
+export default function GalleryImage( props ) {
+	return (
+		<figure key={ props.i } className="blocks-gallery-image">
+			<img src={ props.img.url } alt={ props.img.alt } />
+		</figure>
+	);
 }