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 index 4946cc40a26c9c..ac9e0f8c6d1bdf 100644 --- 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 index dfa960d5d16602..2145746dd51f3e 100644 --- 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 index 5b07c133ef9625..2b35ad52830fbd 100644 --- 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 ( -
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions +
{ ! isEditing && ( href ? { img } : img ) } { isEditing && ( 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 index 8e28b50562e6d1..fc9d0fa39448e4 100644 --- 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 index 0b52c1aab6b680..ba59b8f4250ec3 100644 --- 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( { { 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' ) )