Add optional links to individual gallery images

src/blocks/gallery-masonry/edit.js

@@ -249,6 +249,8 @@ class GalleryMasonryEdit extends Component {
 											url={ img.url }
 											alt={ img.alt }
 											id={ img.id }
+											imgLink={ img.imgLink }
+											linkTo={ linkTo }
 											isFirstItem={ index === 0 }
 											isLastItem={ ( index + 1 ) === images.length }
 											isSelected={ isSelected && this.state.selectedImage === index }

src/blocks/gallery-masonry/index.js

@@ -18,7 +18,6 @@ import { BackgroundAttributes, BackgroundClasses, BackgroundStyles, BackgroundVi
  * WordPress dependencies
  */
 const { __ } = wp.i18n;
-const { createBlock } = wp.blocks;
 const { RichText } = wp.editor;
 
 /**
@@ -67,21 +66,21 @@ const settings = {
 	edit,
 
 	save( { attributes, className } ) {
-
 		const {
 			captions,
 			gridSize,
 			gutter,
 			gutterMobile,
 			images,
 			linkTo,
-			focalPoint,
+			rel,
+			target,
 		} = attributes;
 
 		const innerClasses = classnames(
 			...GalleryClasses( attributes ),
 			...BackgroundClasses( attributes ), {
-				[ `has-gutter` ] : gutter > 0,
+				'has-gutter': gutter > 0,
 			}
 		);
 
@@ -91,8 +90,8 @@ const settings = {
 
 		const masonryClasses = classnames(
 			`has-grid-${ gridSize }`, {
-				[ `has-gutter-${ gutter }` ] : gutter > 0,
-				[ `has-gutter-mobile-${ gutterMobile }` ] : gutterMobile > 0,
+				[ `has-gutter-${ gutter }` ]: gutter > 0,
+				[ `has-gutter-mobile-${ gutterMobile }` ]: gutterMobile > 0,
 			}
 		);
 
@@ -110,7 +109,7 @@ const settings = {
 					<ul
 						className={ masonryClasses }
 						style={ masonryStyles }
-						>
+					>
 						{ images.map( ( image ) => {
 							let href;
 
@@ -123,12 +122,17 @@ const settings = {
 									break;
 							}
 
-							const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
+							// If an image has a custom link, override the linkTo selection.
+							if ( image.imgLink ) {
+								href = image.imgLink;
+							}
+
+							const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-imglink={ image.imgLink } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
 
 							return (
 								<li key={ image.id || image.url } className="coblocks-gallery--item">
 									<figure className="coblocks-gallery--figure">
-										{ href ? <a href={ href }>{ img }</a> : img }
+										{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
 										{ captions && image.caption && image.caption.length > 0 && (
 											<RichText.Content tagName="figcaption" className="coblocks-gallery--caption" value={ image.caption } />
 										) }

src/blocks/gallery-masonry/inspector.js

@@ -1,47 +1,41 @@
 /**
  * Internal dependencies
  */
-import { title } from './'
+import { title } from './';
 import ResponsiveTabsControl from '../../components/responsive-tabs-control';
-import linkOptions from '../../components/block-gallery/options/link-options';
 import captionOptions from '../../components/block-gallery/options/caption-options';
 import SizeControl from '../../components/size-control';
 import { BackgroundPanel } from '../../components/background';
+import GalleryLinkSettings from '../../components/block-gallery/gallery-link-settings';
 
 /**
  * WordPress dependencies
  */
 const { __, sprintf } = wp.i18n;
-const { Component, Fragment } = wp.element;
+const { Component } = wp.element;
 const { InspectorControls, PanelColorSettings } = wp.editor;
 const { PanelBody, RangeControl, ToggleControl, SelectControl } = wp.components;
 
 /**
  * Inspector controls
  */
 class Inspector extends Component {
-
-	constructor( props ) {
+	constructor() {
 		super( ...arguments );
 		this.setSizeControl = this.setSizeControl.bind( this );
-		this.setLinkTo = this.setLinkTo.bind( this );
 		this.setRadiusTo = this.setRadiusTo.bind( this );
 		this.setCaptionStyleTo = this.setCaptionStyleTo.bind( this );
 		this.getColors = this.getColors.bind( this );
 	}
 
-	componentDidUpdate( prevProps ) {
+	componentDidUpdate() {
 		if ( this.props.attributes.gutter <= 0 ) {
 			this.props.setAttributes( {
 				radius: 0,
 			} );
 		}
 	}
 
-	setLinkTo( value ) {
-		this.props.setAttributes( { linkTo: value } );
-	}
-
 	setRadiusTo( value ) {
 		this.props.setAttributes( { radius: value } );
 	}
@@ -59,7 +53,6 @@ class Inspector extends Component {
 	}
 
 	getColors() {
-
 		const {
 			attributes,
 			backgroundColor,
@@ -79,11 +72,10 @@ class Inspector extends Component {
 			{
 				value: backgroundColor.color,
 				onChange: ( nextBackgroundColor ) => {
-
 					setBackgroundColor( nextBackgroundColor );
 
 					// Add default padding, if they are not yet present.
-					if ( ! backgroundPadding && ! backgroundPaddingMobile  ) {
+					if ( ! backgroundPadding && ! backgroundPaddingMobile ) {
 						this.props.setAttributes( {
 							backgroundPadding: 30,
 							backgroundPaddingMobile: 30,
@@ -112,27 +104,22 @@ class Inspector extends Component {
 
 		if ( captions ) {
 			return background.concat( caption );
-		} else {
-			return background;
 		}
+
+		return background;
 	}
 
 	render() {
-
 		const {
 			attributes,
 			setAttributes,
-			isSelected,
 		} = this.props;
 
 		const {
 			captions,
 			captionStyle,
 			gridSize,
 			gutter,
-			images,
-			lightbox,
-			linkTo,
 			radius,
 		} = attributes;
 
@@ -146,7 +133,7 @@ class Inspector extends Component {
 						value={ gridSize }
 						resetValue={ 'xlrg' }
 					/>
-					<ResponsiveTabsControl { ...this.props }/>
+					<ResponsiveTabsControl { ...this.props } />
 					{ gutter > 0 && <RangeControl
 						label={ __( 'Rounded Corners' ) }
 						aria-label={ __( 'Add rounded corners to the gallery items.' ) }
@@ -159,7 +146,7 @@ class Inspector extends Component {
 					<ToggleControl
 						label={ __( 'Captions' ) }
 						checked={ !! captions }
-						onChange={ () => setAttributes( {  captions: ! captions } ) }
+						onChange={ () => setAttributes( { captions: ! captions } ) }
 						help={ this.getCaptionsHelp }
 					/>
 					{ captions &&
@@ -171,30 +158,20 @@ class Inspector extends Component {
 						/>
 					}
 				</PanelBody>
-				{ ! lightbox && <PanelBody
-					title={ __( 'Link Settings' ) }
-					initialOpen={ false }
-					>
-					<SelectControl
-						label={ __( 'Link To' ) }
-						value={ linkTo }
-						options={ linkOptions }
-						onChange={ this.setLinkTo }
-					/>
-				</PanelBody> }
+				<GalleryLinkSettings { ...this.props } />
 				<BackgroundPanel { ...this.props }
- 					hasCaption={ true }
- 					hasOverlay={ true }
- 					hasGalleryControls={ true }
- 				/>
- 				<PanelColorSettings
+					hasCaption={ true }
+					hasOverlay={ true }
+					hasGalleryControls={ true }
+				/>
+				<PanelColorSettings
 					title={ __( 'Color Settings' ) }
 					initialOpen={ false }
 					colorSettings={ this.getColors() }
 				/>
 			</InspectorControls>
-		)
+		);
 	}
-};
+}
 
 export default Inspector;

src/blocks/gallery-masonry/styles/editor.scss

@@ -83,4 +83,9 @@
 			padding-top: 48px;
 		}
 	}
+
+	// Tweak the position of the figcaption if Custom URL is set.
+	.components-coblocks-gallery-item__image-link + img + .editor-rich-text {
+		margin-bottom: 34px;
+	}
 }

src/blocks/gallery-stacked/edit.js

@@ -147,6 +147,7 @@ class GalleryStackedEdit extends Component {
 			linkTo,
 			shadow,
 			backgroundImg,
+			target,
 		} = attributes;
 
 		const hasImages = !! images.length;
@@ -205,6 +206,8 @@ class GalleryStackedEdit extends Component {
 										url={ img.url }
 										alt={ img.alt }
 										id={ img.id }
+										imgLink={ img.imgLink }
+										linkTo={ linkTo }
 										gutter={ gutter }
 										gutterMobile={ gutterMobile }
 										marginBottom={ true }

src/blocks/gallery-stacked/index.js

@@ -100,6 +100,8 @@ const settings = {
 			backgroundImg,
 			customBackgroundColor,
 			backgroundColor,
+			target,
+			rel,
 		} = attributes;
 
 		// Body color class and styles.
@@ -154,17 +156,22 @@ const settings = {
 								break;
 						}
 
+						// If an image has a custom link, override the linkTo selection.
+						if ( image.imgLink ) {
+							href = image.imgLink;
+						}
+
 						const imgClasses = classnames(
 							image.id ? [ `wp-image-${ image.id }` ] : null, {
 								[ `has-shadow-${ shadow }` ] : shadow != 'none' || shadow != undefined ,
 						} );
 
-						const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ imgClasses } />;
+						const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-imglink={ image.imgLink } data-link={ image.link } className={ imgClasses } />;
 
 						return (
 							<li key={ image.id || image.url } className="coblocks-gallery--item">
 								<figure className={ figureClasses }>
-									{ href ? <a href={ href }>{ img }</a> : img }
+									{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
 									{ captions && image.caption && image.caption.length > 0 && (
 										<RichText.Content tagName="figcaption" className={ captionClasses } value={ image.caption } styles={ captionStyles }/>
 									) }

src/blocks/gallery-stacked/inspector.js

@@ -6,6 +6,7 @@ import ResponsiveTabsControl from '../../components/responsive-tabs-control';
 import linkOptions from '../../components/block-gallery/options/link-options';
 import SizeControl from '../../components/size-control';
 import { BackgroundPanel } from '../../components/background';
+import GalleryLinkSettings from '../../components/block-gallery/gallery-link-settings';
 
 /**
  * WordPress dependencies
@@ -184,17 +185,7 @@ class Inspector extends Component {
 						/>
 					}
 				</PanelBody>
-				{ ! lightbox && <PanelBody
-					title={ __( 'Link Settings' ) }
-					initialOpen={ false }
-					>
-					<SelectControl
-						label={ __( 'Link To' ) }
-						value={ linkTo }
-						options={ linkOptions }
-						onChange={ this.setLinkTo }
-					/>
-				</PanelBody> }
+				<GalleryLinkSettings { ...this.props } />
 				<BackgroundPanel { ...this.props }
  					hasCaption={ true }
  					hasOverlay={ true }

src/blocks/gallery-stacked/styles/editor.scss

@@ -24,4 +24,9 @@
 	li:last-child .coblocks-gallery--figure {
 		width: 100% !important;
 	}
+
+	// Tweak the position of the figcaption if Custom URL is set.
+	.components-coblocks-gallery-item__image-link + img + .editor-rich-text {
+		margin-bottom: 35px;
+	}
 }