From a3fc90ded679116fe4fce5ca214da53201e4cc3c Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 17:28:27 +0200
Subject: [PATCH 01/12] Add simple columns slider

---
 blocks/library/gallery/index.js   | 17 +++++++++++++---
 blocks/library/gallery/style.scss | 32 +++++++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 8f0941260d9ad5..1fb3c8cb180b68 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -6,6 +6,7 @@ import { registerBlockType, query as hpq } from '../../api';
 
 import Placeholder from 'components/placeholder';
 import MediaUploadButton from '../../media-upload-button';
+import InspectorControls from '../../inspector-controls';
 
 import GalleryImage from './gallery-image';
 
@@ -96,8 +97,9 @@ registerBlockType( 'core/gallery', {
 		},
 	],
 
-	edit( { attributes, setAttributes } ) {
-		const { images, align = 'none' } = attributes;
+	edit( { attributes, setAttributes, focus } ) {
+		let { images, columns, align = 'none' } = attributes;
+		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };
 		if ( ! images ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -117,12 +119,21 @@ registerBlockType( 'core/gallery', {
 				</Placeholder>
 			);
 		}
+		if ( !columns ) {
+			columns = Math.min( 3, images.length );
+		}
 
 		return (
-			<div className={ `blocks-gallery align${ align }` }>
+			<div className={ `blocks-gallery align${ align } columns-${ columns }` }>
 				{ images.map( ( img, i ) => (
 					<GalleryImage key={ i } img={ img } />
 				) ) }
+				{ focus && images.length > 1 &&
+					<InspectorControls>
+						<label>Columns:</label>
+						<input type="range" min="1" max={ images.length } value={ columns } onChange={ setColumnsNumber } />
+						<span>{columns}</span>
+					</InspectorControls> }
 			</div>
 		);
 	},
diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
index d07d3b801db5c2..709eeee2fa604c 100644
--- a/blocks/library/gallery/style.scss
+++ b/blocks/library/gallery/style.scss
@@ -1,17 +1,41 @@
 
 .blocks-gallery {
-
 	display: flex;
 	flex-wrap: wrap;
-	
-	.blocks-gallery-image {
 
+	.blocks-gallery-image {
+		flex-grow: 1;
 		margin: 8px;
 
 		img {
-			max-width: 120px;
+			max-width: 100%;
 		}
 	}
+
+	&.columns-1 figure {
+		width: calc(100% / 1 - 2 * 8px);
+	}
+	&.columns-2 figure {
+		width: calc(100% / 2 - 3 * 8px);
+	}
+	&.columns-3 figure {
+		width: calc(100% / 3 - 4 * 8px);
+	}
+	&.columns-4 figure {
+		width: calc(100% / 4 - 5 * 8px);
+	}
+	&.columns-5 figure {
+		width: calc(100% / 5 - 6 * 8px);
+	}
+	&.columns-6 figure {
+		width: calc(100% / 6 - 7 * 8px);
+	}
+	&.columns-7 figure {
+		width: calc(100% / 7 - 8 * 8px);
+	}
+	&.columns-8 figure {
+		width: calc(100% / 8 - 9 * 8px);
+	}
 }
 
 .blocks-gallery.is-placeholder {

From d4c251bd985734971e41c8f7adcb0601b03c4404 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Sun, 11 Jun 2017 18:09:48 +0200
Subject: [PATCH 02/12] Enable wide and full-width for galleries.

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 1fb3c8cb180b68..e3fffe61d97c94 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { __ } from 'i18n';
 import './style.scss';
 import { registerBlockType, query as hpq } from '../../api';
 
@@ -66,11 +67,6 @@ registerBlockType( 'core/gallery', {
 	},
 
 	controls: [
-		{
-			icon: 'format-image',
-			title: wp.i18n.__( 'Edit Gallery' ),
-			onClick: editMediaLibrary,
-		},
 		{
 			icon: 'align-left',
 			title: wp.i18n.__( 'Align left' ),
@@ -90,13 +86,31 @@ registerBlockType( 'core/gallery', {
 			onClick: toggleAlignment( 'right' ),
 		},
 		{
-			icon: 'align-full-width',
-			title: wp.i18n.__( 'Wide width' ),
+			icon: 'align-wide',
+			title: __( 'Wide width' ),
 			isActive: ( { align } ) => 'wide' === align,
 			onClick: toggleAlignment( 'wide' ),
 		},
+		{
+			icon: 'align-full-width',
+			title: __( 'Full width' ),
+			isActive: ( { align } ) => 'full' === align,
+			onClick: toggleAlignment( 'full' ),
+		},
+		{
+			icon: 'format-image',
+			title: wp.i18n.__( 'Edit Gallery' ),
+			onClick: editMediaLibrary,
+		},
 	],
 
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
 	edit( { attributes, setAttributes, focus } ) {
 		let { images, columns, align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };

From 6df86e3274bace8ac1f6f32556ea7973d586da92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Sun, 11 Jun 2017 18:17:26 +0200
Subject: [PATCH 03/12] Adjust display of label in inspector.

---
 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 e3fffe61d97c94..5cc36c58f55f7f 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -144,7 +144,7 @@ registerBlockType( 'core/gallery', {
 				) ) }
 				{ focus && images.length > 1 &&
 					<InspectorControls>
-						<label>Columns:</label>
+						<label className="blocks-text-control__label">{ __( 'Columns' ) }</label>
 						<input type="range" min="1" max={ images.length } value={ columns } onChange={ setColumnsNumber } />
 						<span>{columns}</span>
 					</InspectorControls> }

From b90682203e0601b764148826f32d7a4584810959 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 18:27:18 +0200
Subject: [PATCH 04/12] =?UTF-8?q?We=20don=E2=80=99t=20need=20a=20key,=20si?=
 =?UTF-8?q?nce=20it=E2=80=99s=20not=20part=20of=20a=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 c2aac32ef7b518..773f46759caa27 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,7 +1,7 @@
 
 export default function GalleryImage( props ) {
 	return (
-		<figure key={ props.i } className="blocks-gallery-image">
+		<figure className="blocks-gallery-image">
 			<img src={ props.img.url } alt={ props.img.alt } />
 		</figure>
 	);

From 6b7bf26ce35367cfa472d462ecc60cfc8709d7b1 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 18:27:53 +0200
Subject: [PATCH 05/12] Switch to using URL for key

The order of images can change
---
 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 5cc36c58f55f7f..e5b8a745d6c6cc 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -139,8 +139,8 @@ registerBlockType( 'core/gallery', {
 
 		return (
 			<div className={ `blocks-gallery align${ align } columns-${ columns }` }>
-				{ images.map( ( img, i ) => (
-					<GalleryImage key={ i } img={ img } />
+				{ images.map( ( img ) => (
+					<GalleryImage key={ img.url } img={ img } />
 				) ) }
 				{ focus && images.length > 1 &&
 					<InspectorControls>
@@ -157,8 +157,8 @@ registerBlockType( 'core/gallery', {
 
 		return (
 			<div className={ `blocks-gallery align${ align }` } >
-				{ images.map( ( img, i ) => (
-					<GalleryImage key={ i } img={ img } />
+				{ images.map( ( img ) => (
+					<GalleryImage key={ img.url } img={ img } />
 				) ) }
 			</div>
 		);

From 73fd306dab22e3819deddeba27565cdd9944be08 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 18:33:26 +0200
Subject: [PATCH 06/12] Move default columns logic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To be able to pass it directly in the destructuring and avoid extra
`let` and extra `if` it’s not a function, based on the `attributes`.
---
 blocks/library/gallery/index.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index e5b8a745d6c6cc..1ab556524d4ffc 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -53,6 +53,10 @@ function toggleAlignment( align ) {
 	};
 }
 
+function defaultColumnsNumber( attributes ) {
+	return Math.min( 3, attributes.images.length );
+}
+
 registerBlockType( 'core/gallery', {
 	title: wp.i18n.__( 'Gallery' ),
 	icon: 'format-gallery',
@@ -63,7 +67,7 @@ registerBlockType( 'core/gallery', {
 			query( 'div.blocks-gallery figure.blocks-gallery-image img', {
 				url: attr( 'src' ),
 				alt: attr( 'alt' ),
-			} ),
+			} ) || [],
 	},
 
 	controls: [
@@ -112,9 +116,9 @@ registerBlockType( 'core/gallery', {
 	},
 
 	edit( { attributes, setAttributes, focus } ) {
-		let { images, columns, align = 'none' } = attributes;
+		const { images, columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };
-		if ( ! images ) {
+		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
 				<Placeholder
@@ -133,9 +137,6 @@ registerBlockType( 'core/gallery', {
 				</Placeholder>
 			);
 		}
-		if ( !columns ) {
-			columns = Math.min( 3, images.length );
-		}
 
 		return (
 			<div className={ `blocks-gallery align${ align } columns-${ columns }` }>

From c42cf12bd1d6c3906b5f3a7341b01327649cebd9 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 18:33:39 +0200
Subject: [PATCH 07/12] Persist columns number as part of attributes

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 1ab556524d4ffc..71781006dee0da 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -154,10 +154,9 @@ registerBlockType( 'core/gallery', {
 	},
 
 	save( { attributes } ) {
-		const { images, align = 'none' } = attributes;
-
+		const { images, columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		return (
-			<div className={ `blocks-gallery align${ align }` } >
+			<div className={ `blocks-gallery align${ align } columns-${ columns }` } >
 				{ images.map( ( img ) => (
 					<GalleryImage key={ img.url } img={ img } />
 				) ) }

From d4eb05ac30ac2bf6bae9f2ac9763f676f7794980 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 19:00:41 +0200
Subject: [PATCH 08/12] Limit columns to 8

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 71781006dee0da..a73f170665feb1 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -13,6 +13,8 @@ import GalleryImage from './gallery-image';
 
 const { query, attr } = hpq;
 
+const MAX_COLUMNS = 8;
+
 const editMediaLibrary = ( attributes, setAttributes ) => {
 	const frameConfig = {
 		frame: 'post',
@@ -146,7 +148,7 @@ registerBlockType( 'core/gallery', {
 				{ focus && images.length > 1 &&
 					<InspectorControls>
 						<label className="blocks-text-control__label">{ __( 'Columns' ) }</label>
-						<input type="range" min="1" max={ images.length } value={ columns } onChange={ setColumnsNumber } />
+						<input type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
 						<span>{columns}</span>
 					</InspectorControls> }
 			</div>

From bf1319656787b4fd1959e22a512e841d8834683c Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 19:01:02 +0200
Subject: [PATCH 09/12] Fix type errors

images are sometimes missing :(
---
 blocks/library/gallery/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index a73f170665feb1..fbf8f0625fb216 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -56,6 +56,7 @@ function toggleAlignment( align ) {
 }
 
 function defaultColumnsNumber( attributes ) {
+	attributes.images = attributes.images || [];
 	return Math.min( 3, attributes.images.length );
 }
 
@@ -118,7 +119,7 @@ registerBlockType( 'core/gallery', {
 	},
 
 	edit( { attributes, setAttributes, focus } ) {
-		const { images, columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
+		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );

From b6b1093e80fb645babed6fda39fc54ab6989d162 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 19:41:08 +0200
Subject: [PATCH 10/12] Remove extra curly braces

---
 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 fbf8f0625fb216..dcfa94a5003099 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -120,7 +120,7 @@ registerBlockType( 'core/gallery', {
 
 	edit( { attributes, setAttributes, focus } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
-		const setColumnsNumber = ( event ) => { setAttributes( { columns: event.target.value } ); };
+		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (

From 4aa3e37e0a7ab0506461806fb196c77b2484b271 Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 19:41:47 +0200
Subject: [PATCH 11/12] Update gallery fixtures

* Use two different images.
* Add columns CSS class.
---
 blocks/test/fixtures/core-gallery.html            | 2 +-
 blocks/test/fixtures/core-gallery.json            | 2 +-
 blocks/test/fixtures/core-gallery.serialized.html | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/blocks/test/fixtures/core-gallery.html b/blocks/test/fixtures/core-gallery.html
index 233b319fba5713..523a6732dd9597 100644
--- a/blocks/test/fixtures/core-gallery.html
+++ b/blocks/test/fixtures/core-gallery.html
@@ -4,7 +4,7 @@
 		<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" />
+		<img src="http://google.com/hi.png" alt="title" />
 	</figure>
 </div>
 <!-- /wp:core/gallery -->
diff --git a/blocks/test/fixtures/core-gallery.json b/blocks/test/fixtures/core-gallery.json
index 10cd14286ac919..4b1abd909fe7fd 100644
--- a/blocks/test/fixtures/core-gallery.json
+++ b/blocks/test/fixtures/core-gallery.json
@@ -5,7 +5,7 @@
         "attributes": {
             "images": [
                 { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" },
-                { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "title" }
+                { "url": "http://google.com/hi.png", "alt": "title" }
             ]
         }
     }
diff --git a/blocks/test/fixtures/core-gallery.serialized.html b/blocks/test/fixtures/core-gallery.serialized.html
index d3f126352a25b0..09f55993d4fd97 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">
-    <figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
+<div class="blocks-gallery alignnone columns-2">
     <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 00ecd81a71536d4fccbd3d48be5020c802f2a20f Mon Sep 17 00:00:00 2001
From: Nikolay Bachiyski <nb@nikolay.bg>
Date: Sun, 11 Jun 2017 19:42:39 +0200
Subject: [PATCH 12/12] Add a `for` attribute for the input range

In order to implement it in a clean way we are exposing the block ID
down the line.
---
 blocks/library/gallery/index.js     | 7 ++++---
 editor/modes/visual-editor/block.js | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index dcfa94a5003099..5fd47882b035a8 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -118,9 +118,10 @@ registerBlockType( 'core/gallery', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus } ) {
+	edit( { attributes, setAttributes, focus, id } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
+		const rangeId = `blocks-gallery-range-${ id }`;
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -148,8 +149,8 @@ registerBlockType( 'core/gallery', {
 				) ) }
 				{ focus && images.length > 1 &&
 					<InspectorControls>
-						<label className="blocks-text-control__label">{ __( 'Columns' ) }</label>
-						<input type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
+						<label className="blocks-text-control__label" htmlFor={ rangeId }>{ __( 'Columns' ) }</label>
+						<input id={ rangeId } type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
 						<span>{columns}</span>
 					</InspectorControls> }
 			</div>
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 86c2c3737fa0f4..4913b30e57d161 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -289,6 +289,7 @@ class VisualEditorBlock extends wp.element.Component {
 						insertBlockAfter={ onInsertAfter }
 						setFocus={ partial( onFocus, block.uid ) }
 						mergeBlocks={ this.mergeBlocks }
+						id={ block.uid }
 					/>
 				</div>
 			</div>