Deselect image when none of its children have focus

packages/block-library/src/gallery/edit.js

@@ -54,6 +54,7 @@ class GalleryEdit extends Component {
 
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSelectImages = this.onSelectImages.bind( this );
+		this.onDeselectImage = this.onDeselectImage.bind( this );
 		this.setLinkTo = this.setLinkTo.bind( this );
 		this.setColumnsNumber = this.setColumnsNumber.bind( this );
 		this.toggleImageCrop = this.toggleImageCrop.bind( this );
@@ -97,6 +98,16 @@ class GalleryEdit extends Component {
 		};
 	}
 
+	onDeselectImage( index ) {
+		return () => {
+			if ( this.state.selectedImage === index ) {
+				this.setState( {
+					selectedImage: null,
+				} );
+			}
+		};
+	}
+
 	onMove( oldIndex, newIndex ) {
 		const images = [ ...this.props.attributes.images ];
 		images.splice( newIndex, 1, this.props.attributes.images[ oldIndex ] );
@@ -353,6 +364,7 @@ class GalleryEdit extends Component {
 										onMoveForward={ this.onMoveForward( index ) }
 										onRemove={ this.onRemoveImage( index ) }
 										onSelect={ this.onSelectImage( index ) }
+										onDeselect={ this.onDeselectImage( index ) }
 										setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 										caption={ img.caption }
 										aria-label={ ariaLabel }

packages/block-library/src/gallery/gallery-image.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { debounce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,11 +24,23 @@ class GalleryImage extends Component {
 	constructor() {
 		super( ...arguments );
 
+		this.onBlur = this.onBlur.bind( this );
+		this.onFocus = this.onFocus.bind( this );
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSelectCaption = this.onSelectCaption.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 
+		// debouncedOnSelect will be called every time any figure's element
+		// is blurred. Every time a figure's element is focused, it'll be cancelled.
+		//
+		// We use this to detect whether the figure element has lost focus permanently
+		// or the change was internal (a focus transition from image to caption, for example).
+		//
+		// onBlur / onFocus events are quick operations (<5ms apart in my testing),
+		// so 50ms accounts for 10x lagging while feels responsive to the user.
+		this.debouncedOnDeselect = debounce( this.props.onDeselect, 50 );
+
 		this.state = {
 			captionSelected: false,
 		};
@@ -90,6 +103,14 @@ class GalleryImage extends Component {
 		}
 	}
 
+	onBlur() {
+		this.debouncedOnDeselect();
+	}
+
+	onFocus() {
+		this.debouncedOnDeselect.cancel();
+	}
+
 	render() {
 		const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props;
 
@@ -131,7 +152,11 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure className={ className }>
+			<figure
+				className={ className }
+				onBlur={ this.onBlur }
+				onFocus={ this.onFocus }
+			>
 				{ href ? <a href={ href }>{ img }</a> : img }
 				<div className="block-library-gallery-item__move-menu">
 					<IconButton