Fix clicking Gallery items buttons on Safari (#23586)

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { debounce, get, omit } from 'lodash';
+import { get, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,8 +34,6 @@ 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 );
@@ -45,20 +43,6 @@ class GalleryImage extends Component {
 			this
 		);
 		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
-
-		// The onDeselect prop is used to signal that the GalleryImage component
-		// has lost focus. We want to call it when focus has been lost
-		// by the figure element or any of its children but only if
-		// the element that gained focus isn't any of them.
-		//
-		// debouncedOnSelect is scheduled every time a figure's children
-		// is blurred and cancelled when any is focused. If none gain focus,
-		// the call to onDeselect will be executed.
-		//
-		// 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.onDeselect.bind( this ), 50 );
-
 		this.state = {
 			captionSelected: false,
 			isEditing: false,
@@ -139,27 +123,10 @@ class GalleryImage extends Component {
 		}
 	}
 
-	onDeselect() {
-		this.setState( { isEditing: false } );
+	deselectOnBlur() {
 		this.props.onDeselect();
 	}
 
-	/**
-	 * Note that, unlike the DOM, all React events bubble,
-	 * so this will be called after the onBlur event of any figure's children.
-	 */
-	onBlur() {
-		this.debouncedOnDeselect();
-	}
-
-	/**
-	 * Note that, unlike the DOM, all React events bubble,
-	 * so this will be called after the onBlur event of any figure's children.
-	 */
-	onFocus() {
-		this.debouncedOnDeselect.cancel();
-	}
-
 	onSelectImageFromLibrary( media ) {
 		const { setAttributes, id, url, alt, caption, sizeSlug } = this.props;
 		if ( ! media || ! media.url ) {
@@ -258,11 +225,7 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure
-				className={ className }
-				onBlur={ this.onBlur }
-				onFocus={ this.onFocus }
-			>
+			<figure className={ className }>
 				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
 				{ isEditing && (
 					<MediaPlaceholder