Gallery: Add link to option

blocks/library/gallery/gallery-image.js

@@ -1,8 +1,20 @@
 
 export default function GalleryImage( props ) {
+	let href = null;
+	switch ( props.linkto ) {
+		case 'media':
+			href = props.img.url;
+			break;
+		case 'attacment':
+			href = props.img.link;
+			break;
+	}
+
+	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>
 	);
 }

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 Page' ) },
+	{ value: 'media', label: __( 'Media File' ) },
+	{ 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 }
+						onChange={ setLinkto }
+						options={ linkOptions }
+					/>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
@@ -150,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>
 		);

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 );
 };