From 079e770272d83ab3f57f483dfdf36fce5ffcfca5 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 13:50:15 -0700
Subject: [PATCH 01/12] Add Inspector option for setting linkto attribute to
 Attachment, Media, or None

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index a0cfc086fc16a7..5fed5c6673fe4d 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -14,12 +14,18 @@ import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
+import SelectControl from '../../inspector-controls/select-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
 import BlockDescription from '../../block-description';
 
 const MAX_COLUMNS = 8;
+const linkOptions = [
+	{ value: 'attachment', label: __( 'Attachment' ) },
+	{ value: 'media', label: __( 'Media' ) },
+	{ value: 'none', label: __( 'None' ) },
+];
 
 const editMediaLibrary = ( attributes, setAttributes ) => {
 	const frameConfig = {
@@ -71,9 +77,11 @@ registerBlockType( 'core/gallery', {
 
 	edit( { attributes, setAttributes, focus, className } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
+		const setLinkto = ( value ) => setAttributes( { linkto: value } );
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const { imageCrop = true } = attributes;
+		const { linkto = 'none' } = attributes;
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
 		const controls = (
@@ -127,6 +135,12 @@ registerBlockType( 'core/gallery', {
 						<p>{ __( 'Image galleries are a great way to share groups of pictures on your site.' ) }</p>
 					</BlockDescription>
 					<h3>{ __( 'Gallery Settings' ) }</h3>
+					<SelectControl
+						label={ __( 'Link to' ) }
+						selected={ linkto }
+						onBlur={ setLinkto }
+						options={ linkOptions }
+					/>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }

From 2fb30b5555e02276a13bf4ec24e579f250920c8e Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 13:52:28 -0700
Subject: [PATCH 02/12] Update labels to match core

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 5fed5c6673fe4d..1227da8b6ef14b 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -22,8 +22,8 @@ import BlockDescription from '../../block-description';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
-	{ value: 'attachment', label: __( 'Attachment' ) },
-	{ value: 'media', label: __( 'Media' ) },
+	{ value: 'attachment', label: __( 'Attachment Page' ) },
+	{ value: 'media', label: __( 'Media File' ) },
 	{ value: 'none', label: __( 'None' ) },
 ];
 

From 550ef082a083a6ff3ec5c6733c18413d7d7e8b23 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 14:21:14 -0700
Subject: [PATCH 03/12] Pass linkto attribute to GalleryImage

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 1227da8b6ef14b..76be87307ad4ec 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -164,11 +164,11 @@ registerBlockType( 'core/gallery', {
 	},
 
 	save( { attributes } ) {
-		const { images, columns = defaultColumnsNumber( attributes ), align = 'none', imageCrop = true } = attributes;
+		const { images, columns = defaultColumnsNumber( attributes ), align = 'none', imageCrop = true, linkto = 'none' } = attributes;
 		return (
 			<div className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
 				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } />
+					<GalleryImage key={ img.url } img={ img } linkto={ linkto } />
 				) ) }
 			</div>
 		);

From fca483f0d9b3d688c8bcff45f7e8dce8691003e6 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 14:21:32 -0700
Subject: [PATCH 04/12] Add media link if linkto set

---
 blocks/library/gallery/gallery-image.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 773f46759caa27..928c6e50c673f7 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,5 +1,17 @@
 
 export default function GalleryImage( props ) {
+	const linkto = props.linkto;
+
+	if ( linkto === 'media' ) {
+		return (
+			<figure className="blocks-gallery-image">
+				<a href={ props.img.url }>
+					<img src={ props.img.url } alt={ props.img.alt } />
+				</a>
+			</figure>
+		);
+	}
+
 	return (
 		<figure className="blocks-gallery-image">
 			<img src={ props.img.url } alt={ props.img.alt } />

From 4fd1e10794a77e6ef94520b0010eea23d2e26815 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 14:37:15 -0700
Subject: [PATCH 05/12] We need link data for linking to attachment page

---
 blocks/media-upload-button/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/media-upload-button/index.js b/blocks/media-upload-button/index.js
index cd018d14abb2ff..ad64d6ba23d5f1 100644
--- a/blocks/media-upload-button/index.js
+++ b/blocks/media-upload-button/index.js
@@ -54,7 +54,7 @@ const getGalleryDetailsMediaFrame = () => {
 // the media library image object contains numerous attributes
 // we only need this set to display the image in the library
 const slimImageObject = ( img ) => {
-	const attrSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt' ];
+	const attrSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt', 'link' ];
 	return pick( img, attrSet );
 };
 

From 7867cf67eba37ee1194ca1e13a78a495ec4e5730 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 31 Jul 2017 14:38:38 -0700
Subject: [PATCH 06/12] Add attachment link if linkto specifies so

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

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 928c6e50c673f7..b576d2e6866cc3 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,8 +1,6 @@
 
 export default function GalleryImage( props ) {
-	const linkto = props.linkto;
-
-	if ( linkto === 'media' ) {
+	if ( props.linkto === 'media' ) {
 		return (
 			<figure className="blocks-gallery-image">
 				<a href={ props.img.url }>
@@ -12,6 +10,16 @@ export default function GalleryImage( props ) {
 		);
 	}
 
+	if ( props.linkto === 'attachment' && !! props.img.link ) {
+		return (
+			<figure className="blocks-gallery-image">
+				<a href={ props.img.link }>
+					<img src={ props.img.url } alt={ props.img.alt } />
+				</a>
+			</figure>
+		);
+	}
+
 	return (
 		<figure className="blocks-gallery-image">
 			<img src={ props.img.url } alt={ props.img.alt } />

From c4b27735eee2a9093f1b31b5bdf5870b6ef5f03d Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 3 Aug 2017 12:08:08 -0700
Subject: [PATCH 07/12] Switch event to Change not Blur so can Update without
 needing to click out

---
 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 76be87307ad4ec..8f6ae3d9105477 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -138,7 +138,7 @@ registerBlockType( 'core/gallery', {
 					<SelectControl
 						label={ __( 'Link to' ) }
 						selected={ linkto }
-						onBlur={ setLinkto }
+						onChange={ setLinkto }
 						options={ linkOptions }
 					/>
 					<RangeControl

From 47172d192bb23cc0fda68b158f2d6cd8941fb8af Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 4 Aug 2017 10:02:04 -0700
Subject: [PATCH 08/12] Refactor logic for displaying link to simplier switch &
 ternary

---
 blocks/library/gallery/gallery-image.js | 28 +++++++++----------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index b576d2e6866cc3..256d7fb0b15cee 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,28 +1,20 @@
 
 export default function GalleryImage( props ) {
-	if ( props.linkto === 'media' ) {
-		return (
-			<figure className="blocks-gallery-image">
-				<a href={ props.img.url }>
-					<img src={ props.img.url } alt={ props.img.alt } />
-				</a>
-			</figure>
-		);
+	let href = null;
+	switch ( props.linkto ) {
+		case 'media':
+			href = props.img.url;
+			break;
+		case 'attacment':
+			href = props.img.link;
+			break;
 	}
 
-	if ( props.linkto === 'attachment' && !! props.img.link ) {
-		return (
-			<figure className="blocks-gallery-image">
-				<a href={ props.img.link }>
-					<img src={ props.img.url } alt={ props.img.alt } />
-				</a>
-			</figure>
-		);
-	}
+	const image = <img src={ props.img.url } alt={ props.img.alt } />;
 
 	return (
 		<figure className="blocks-gallery-image">
-			<img src={ props.img.url } alt={ props.img.alt } />
+			{ href ? <a href={ href }>{ image }</a> : image }
 		</figure>
 	);
 }

From 60aeae8e14aa30179706b2fbe742476ed85b4f9a Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 4 Aug 2017 10:44:19 -0700
Subject: [PATCH 09/12] Move Link To select control below image crop

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

diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 8f6ae3d9105477..a22b0a3446dd48 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -135,12 +135,6 @@ registerBlockType( 'core/gallery', {
 						<p>{ __( 'Image galleries are a great way to share groups of pictures on your site.' ) }</p>
 					</BlockDescription>
 					<h3>{ __( 'Gallery Settings' ) }</h3>
-					<SelectControl
-						label={ __( 'Link to' ) }
-						selected={ linkto }
-						onChange={ setLinkto }
-						options={ linkOptions }
-					/>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
@@ -153,6 +147,12 @@ registerBlockType( 'core/gallery', {
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
 					/>
+					<SelectControl
+						label={ __( 'Link to' ) }
+						selected={ linkto }
+						onChange={ setLinkto }
+						options={ linkOptions }
+					/>
 				</InspectorControls>
 			),
 			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>

From a55ccaa01b8a7a63879006c0fd5aa063a526938f Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 4 Aug 2017 11:27:30 -0700
Subject: [PATCH 10/12] Switch back to onBlur, SelectControl doesnt work with
 onChange

---
 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 a22b0a3446dd48..0a8aaa208c6016 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -150,7 +150,7 @@ registerBlockType( 'core/gallery', {
 					<SelectControl
 						label={ __( 'Link to' ) }
 						selected={ linkto }
-						onChange={ setLinkto }
+						onBlur={ setLinkto }
 						options={ linkOptions }
 					/>
 				</InspectorControls>

From 7b6fe4c08462c3df2e197da3c438186b81eb4854 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 4 Aug 2017 11:36:49 -0700
Subject: [PATCH 11/12] Fix typo :(

---
 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 256d7fb0b15cee..74a2fe08501383 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -5,7 +5,7 @@ export default function GalleryImage( props ) {
 		case 'media':
 			href = props.img.url;
 			break;
-		case 'attacment':
+		case 'attachment':
 			href = props.img.link;
 			break;
 	}

From b35b2e50717c44a629c7f02e0dbdb1433bd6f837 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 4 Aug 2017 11:57:31 -0700
Subject: [PATCH 12/12] Switch linkto to camelCase linkTo

---
 blocks/library/gallery/gallery-image.js |  2 +-
 blocks/library/gallery/index.js         | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 74a2fe08501383..0d5ade2b58a74f 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -1,7 +1,7 @@
 
 export default function GalleryImage( props ) {
 	let href = null;
-	switch ( props.linkto ) {
+	switch ( props.linkTo ) {
 		case 'media':
 			href = props.img.url;
 			break;
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 0a8aaa208c6016..c4eba4657bfc28 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -77,11 +77,11 @@ registerBlockType( 'core/gallery', {
 
 	edit( { attributes, setAttributes, focus, className } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
-		const setLinkto = ( value ) => setAttributes( { linkto: value } );
+		const setLinkTo = ( value ) => setAttributes( { linkTo: value } );
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const { imageCrop = true } = attributes;
-		const { linkto = 'none' } = attributes;
+		const { linkTo = 'none' } = attributes;
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
 		const controls = (
@@ -149,8 +149,8 @@ registerBlockType( 'core/gallery', {
 					/>
 					<SelectControl
 						label={ __( 'Link to' ) }
-						selected={ linkto }
-						onBlur={ setLinkto }
+						selected={ linkTo }
+						onBlur={ setLinkTo }
 						options={ linkOptions }
 					/>
 				</InspectorControls>
@@ -164,11 +164,11 @@ registerBlockType( 'core/gallery', {
 	},
 
 	save( { attributes } ) {
-		const { images, columns = defaultColumnsNumber( attributes ), align = 'none', imageCrop = true, linkto = 'none' } = attributes;
+		const { images, columns = defaultColumnsNumber( attributes ), align = 'none', imageCrop = true, linkTo = 'none' } = attributes;
 		return (
 			<div className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
 				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } linkto={ linkto } />
+					<GalleryImage key={ img.url } img={ img } linkTo={ linkTo } />
 				) ) }
 			</div>
 		);