Image/Gallery block: remove use of unstableOnFocus (#31796)

WordPress · May 13, 2021 · 9a6e3fc · 9a6e3fc
1 parent 3e12272
commit 9a6e3fc
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 69 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js
@@ -17,7 +17,7 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusHandler( clientId ) {
 	const { isBlockSelected } = useSelect( blockEditorStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, selectionChange } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -33,6 +33,10 @@ export function useFocusHandler( clientId ) {
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {
+					// Potentially change selection away from rich text.
+					if ( ! event.target.isContentEditable ) {
+						selectionChange( clientId );
+					}
 					return;
 				}
 

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -295,10 +295,6 @@ function GalleryEdit( props ) {
 			: __( 'Thumbnails are not cropped.' );
 	}
 
-	function onFocusGalleryCaption() {
-		setSelectedImage();
-	}
-
 	function setImageAttributes( index, newAttributes ) {
 		if ( ! images[ index ] ) {
 			return;
@@ -466,7 +462,6 @@ function GalleryEdit( props ) {
 				onSelectImage={ onSelectImage }
 				onDeselectImage={ onDeselectImage }
 				onSetImageAttributes={ setImageAttributes }
-				onFocusGalleryCaption={ onFocusGalleryCaption }
 				blockProps={ blockProps }
 			/>
 		</>

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -44,7 +44,6 @@ class GalleryImage extends Component {
 		super( ...arguments );
 
 		this.onSelectImage = this.onSelectImage.bind( this );
-		this.onSelectCaption = this.onSelectCaption.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.onEdit = this.onEdit.bind( this );
@@ -53,7 +52,6 @@ class GalleryImage extends Component {
 		);
 		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
 		this.state = {
-			captionSelected: false,
 			isEditing: false,
 		};
 	}
@@ -62,28 +60,10 @@ class GalleryImage extends Component {
 		this.container = ref;
 	}
 
-	onSelectCaption() {
-		if ( ! this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: true,
-			} );
-		}
-
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-	}
-
 	onSelectImage() {
 		if ( ! this.props.isSelected ) {
 			this.props.onSelect();
 		}
-
-		if ( this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
 	}
 
 	onRemoveImage( event ) {
@@ -104,9 +84,8 @@ class GalleryImage extends Component {
 		} );
 	}
 
-	componentDidUpdate( prevProps ) {
+	componentDidUpdate() {
 		const {
-			isSelected,
 			image,
 			url,
 			__unstableMarkNextChangeAsNotPersistent,
@@ -118,18 +97,6 @@ class GalleryImage extends Component {
 				alt: image.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 &&
-			prevProps.isSelected
-		) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
 	}
 
 	deselectOnBlur() {
@@ -216,8 +183,6 @@ class GalleryImage extends Component {
 					src={ url }
 					alt={ alt }
 					data-id={ id }
-					onClick={ this.onSelectImage }
-					onFocus={ this.onSelectImage }
 					onKeyDown={ this.onRemoveImage }
 					tabIndex="0"
 					aria-label={ ariaLabel }
@@ -234,7 +199,12 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure className={ className }>
+			// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+			<figure
+				className={ className }
+				onClick={ this.onSelectImage }
+				onFocus={ this.onSelectImage }
+			>
 				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
 				{ isEditing && (
 					<MediaPlaceholder
@@ -283,11 +253,9 @@ class GalleryImage extends Component {
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }
-						isSelected={ this.state.captionSelected }
 						onChange={ ( newCaption ) =>
 							setAttributes( { caption: newCaption } )
 						}
-						unstableOnFocus={ this.onSelectCaption }
 						inlineToolbar
 					/>
 				) }

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -30,7 +30,6 @@ export const Gallery = ( props ) => {
 		onSelectImage,
 		onDeselectImage,
 		onSetImageAttributes,
-		onFocusGalleryCaption,
 		insertBlocksAfter,
 		blockProps,
 	} = props;
@@ -99,7 +98,6 @@ export const Gallery = ( props ) => {
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }
-				unstableOnFocus={ onFocusGalleryCaption }
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -130,7 +130,6 @@ export default function Image( {
 		noticesStore
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ captionFocused, setCaptionFocused ] = useState( false );
 	const isWideAligned = includes( [ 'wide', 'full' ], align );
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
@@ -147,12 +146,6 @@ export default function Image( {
 	// Check if the cover block is registered.
 	const coverBlockExists = !! getBlockType( 'core/cover' );
 
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setCaptionFocused( false );
-		}
-	}, [ isSelected ] );
-
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
 	// we can enable a button in the toolbar to upload the image.
@@ -203,18 +196,6 @@ export default function Image( {
 		setAttributes( { title: value } );
 	}
 
-	function onFocusCaption() {
-		if ( ! captionFocused ) {
-			setCaptionFocused( true );
-		}
-	}
-
-	function onImageClick() {
-		if ( captionFocused ) {
-			setCaptionFocused( false );
-		}
-	}
-
 	function updateAlt( newAlt ) {
 		setAttributes( { alt: newAlt } );
 	}
@@ -417,7 +398,6 @@ export default function Image( {
 			<img
 				src={ temporaryURL || url }
 				alt={ defaultedAlt }
-				onClick={ onImageClick }
 				onError={ () => onImageError() }
 				onLoad={ ( event ) => {
 					setNaturalSize(
@@ -564,11 +544,9 @@ export default function Image( {
 					aria-label={ __( 'Image caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }
-					unstableOnFocus={ onFocusCaption }
 					onChange={ ( value ) =>
 						setAttributes( { caption: value } )
 					}
-					isSelected={ captionFocused }
 					inlineToolbar
 					__unstableOnSplitAtEnd={ () =>
 						insertBlocksAfter( createBlock( 'core/paragraph' ) )