Improved gallery & caption select behaviour.

Simplified code because the onClick is on the image so there is no need to detect clicks on figcaption. Corrected bug where the caption field automatically selects when selecting image. Implemented a caption select state in GalleryImage.
WordPress · Feb 8, 2018 · eb3fd81 · eb3fd81
1 parent d05abf2
commit eb3fd81
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 29 deletions.
diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -39,7 +39,7 @@ class GalleryBlock extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.onUnselectImage = this.onUnselectImage.bind( this );
+		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSelectImages = this.onSelectImages.bind( this );
 		this.setLinkTo = this.setLinkTo.bind( this );
 		this.setColumnsNumber = this.setColumnsNumber.bind( this );
@@ -55,31 +55,15 @@ class GalleryBlock extends Component {
 	}
 
 	onSelectImage( index ) {
-		return ( event ) => {
-			// ignore clicks in the editable caption.
-			// Without this logic, text operations like selection, select / unselects the images.
-			if ( event.target.tagName === 'FIGCAPTION' ) {
-				return;
+		return () => {
+			if ( this.state.selectedImage !== index ) {
+				this.setState( {
+					selectedImage: index,
+				} );
 			}
-
-			this.setState( {
-				selectedImage: index,
-			} );
 		};
 	}
 
-	onUnselectImage( event ) {
-		// ignore clicks in the editable caption.
-		// Without this logic, text operations like selection, select / unselects the images.
-		if ( event.target.tagName === 'FIGCAPTION' ) {
-			return;
-		}
-
-		this.setState( {
-			selectedImage: null,
-		} );
-	}
-
 	onRemoveImage( index ) {
 		return () => {
 			const images = filter( this.props.attributes.images, ( img, i ) => index !== i );
@@ -149,6 +133,7 @@ class GalleryBlock extends Component {
 		if ( ! nextProps.isSelected && this.props.isSelected ) {
 			this.setState( {
 				selectedImage: null,
+				captionSelected: false,
 			} );
 		}
 	}
@@ -242,7 +227,6 @@ class GalleryBlock extends Component {
 							isSelected={ isSelected && this.state.selectedImage === index }
 							onRemove={ this.onRemoveImage( index ) }
 							onSelect={ this.onSelectImage( index ) }
-							onUnselect={ this.onUnselectImage }
 							setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 							caption={ img.caption }
 						/>

diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
@@ -16,17 +16,60 @@ import { __ } from '@wordpress/i18n';
 import RichText from '../../rich-text';
 
 class GalleryImage extends Component {
-	componentWillReceiveProps( { image } ) {
+	constructor() {
+		super( ...arguments );
+
+		this.onImageClick = this.onImageClick.bind( this );
+		this.onSelectCaption = this.onSelectCaption.bind( this );
+
+		this.state = {
+			captionSelected: false,
+		};
+	}
+
+	onSelectCaption() {
+		if ( ! this.state.captionSelected ) {
+			this.setState( {
+				captionSelected: true,
+			} );
+		}
+
+		if ( ! this.props.isSelected ) {
+			this.props.onSelect();
+		}
+	}
+
+	onImageClick() {
+		if ( ! this.props.isSelected ) {
+			this.props.onSelect();
+		}
+
+		if ( this.state.captionSelected ) {
+			this.setState( {
+				captionSelected: false,
+			} );
+		}
+	}
+
+	componentWillReceiveProps( { isSelected, image } ) {
 		if ( image && image.data && ! this.props.url ) {
 			this.props.setAttributes( {
 				url: image.data.source_url,
 				alt: image.data.alt_text,
 			} );
 		}
+
+		// unselect the caption so when the user selects other image and comeback
+		// the caption is not immediately selected
+		if ( this.state.captionSelected && ! isSelected && this.props.isSelected ) {
+			this.setState( {
+				captionSelected: false,
+			} );
+		}
 	}
 
 	render() {
-		const { url, alt, id, linkTo, link, isSelected, caption, onSelect, onUnselect, onRemove, setAttributes } = this.props;
+		const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes } = this.props;
 
 		let href;
 
@@ -39,7 +82,10 @@ class GalleryImage extends Component {
 				break;
 		}
 
-		const img = url ? <img src={ url } alt={ alt } data-id={ id } /> : <Spinner />;
+		// Disable reason: Image itself is not meant to be
+		// interactive, but should direct image selection and unfocus caption fields
+		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } /> : <Spinner />;
 
 		const className = classnames( {
 			'is-selected': isSelected,
@@ -49,7 +95,7 @@ class GalleryImage extends Component {
 		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
 		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
-			<figure className={ className } onClick={ isSelected ? onUnselect : onSelect }>
+			<figure className={ className }>
 				{ isSelected &&
 					<div className="blocks-gallery-item__inline-menu">
 						<IconButton
@@ -66,9 +112,9 @@ class GalleryImage extends Component {
 						tagName="figcaption"
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
-						isSelected={ isSelected }
+						isSelected={ this.state.captionSelected }
 						onChange={ newCaption => setAttributes( { caption: newCaption } ) }
-						onFocus={ ! isSelected ? onSelect : undefined }
+						onFocus={ this.onSelectCaption }
 						inlineToolbar
 					/>
 				) : null }