From ac95fc82b7724b231c5049fd767470a9424b65a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 13 May 2021 18:42:56 +0300 Subject: [PATCH 1/4] Image block: remove use of unstableOnFocus --- packages/block-library/src/image/edit.js | 2 ++ packages/block-library/src/image/image.js | 32 +++++------------------ 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index f9529efb7e7932..56561ae4d4fa13 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -80,6 +80,7 @@ export function ImageEdit( { insertBlocksAfter, noticeOperations, onReplace, + clientId, } ) { const { url = '', @@ -300,6 +301,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onUploadError={ onUploadError } containerRef={ ref } + clientId={ clientId } /> ) } { ! url && ( diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 0b52c1aab6b680..ed2df3a2be6984 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -87,6 +87,7 @@ export default function Image( { onSelectURL, onUploadError, containerRef, + clientId, } ) { const captionRef = useRef(); const prevUrl = usePrevious( url ); @@ -107,8 +108,8 @@ export default function Image( { multiImageSelection: multiSelectedClientIds.length && multiSelectedClientIds.every( - ( clientId ) => - getBlockName( clientId ) === 'core/image' + ( _clientId ) => + getBlockName( _clientId ) === 'core/image' ), }; }, @@ -125,12 +126,13 @@ export default function Image( { ] ); } ); - const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore ); + const { replaceBlocks, toggleSelection, selectionChange } = useDispatch( + blockEditorStore + ); const { createErrorNotice, createSuccessNotice } = useDispatch( 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 +149,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 +199,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 +401,7 @@ export default function Image( { { selectionChange( clientId ) } onError={ () => onImageError() } onLoad={ ( event ) => { setNaturalSize( @@ -564,11 +548,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' ) ) From d7eb8608ca0665abe9932e68ad88296e6047192a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 13 May 2021 18:52:43 +0300 Subject: [PATCH 2/4] Build it in --- .../block-list/use-block-props/use-focus-handler.js | 4 +++- packages/block-library/src/image/edit.js | 2 -- packages/block-library/src/image/image.js | 10 +++------- 3 files changed, 6 insertions(+), 10 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 index 4946cc40a26c9c..49050ddc37479c 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,8 @@ 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. + selectionChange( clientId ); return; } diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 56561ae4d4fa13..f9529efb7e7932 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -80,7 +80,6 @@ export function ImageEdit( { insertBlocksAfter, noticeOperations, onReplace, - clientId, } ) { const { url = '', @@ -301,7 +300,6 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onUploadError={ onUploadError } containerRef={ ref } - clientId={ clientId } /> ) } { ! url && ( diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index ed2df3a2be6984..ba59b8f4250ec3 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -87,7 +87,6 @@ export default function Image( { onSelectURL, onUploadError, containerRef, - clientId, } ) { const captionRef = useRef(); const prevUrl = usePrevious( url ); @@ -108,8 +107,8 @@ export default function Image( { multiImageSelection: multiSelectedClientIds.length && multiSelectedClientIds.every( - ( _clientId ) => - getBlockName( _clientId ) === 'core/image' + ( clientId ) => + getBlockName( clientId ) === 'core/image' ), }; }, @@ -126,9 +125,7 @@ export default function Image( { ] ); } ); - const { replaceBlocks, toggleSelection, selectionChange } = useDispatch( - blockEditorStore - ); + const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore ); const { createErrorNotice, createSuccessNotice } = useDispatch( noticesStore ); @@ -401,7 +398,6 @@ export default function Image( { { selectionChange( clientId ) } onError={ () => onImageError() } onLoad={ ( event ) => { setNaturalSize( From d71e38c7ad38585c199acbf315b7cbc22ed7dad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 13 May 2021 20:57:33 +0300 Subject: [PATCH 3/4] Fix issues --- .../use-block-props/use-focus-handler.js | 4 +- packages/block-library/src/gallery/edit.js | 5 --- .../src/gallery/gallery-image.js | 37 +------------------ packages/block-library/src/gallery/gallery.js | 2 - 4 files changed, 4 insertions(+), 44 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 index 49050ddc37479c..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 @@ -34,7 +34,9 @@ export function useFocusHandler( clientId ) { // getting data through `useSelect` asynchronously. if ( isBlockSelected( clientId ) ) { // Potentially change selection away from rich text. - selectionChange( clientId ); + 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..b2cd316826425d 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() { @@ -283,11 +250,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 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={ () => From 4115d6c45da3dbe6fa6def52ccf3621d57a27801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 13 May 2021 21:49:31 +0300 Subject: [PATCH 4/4] Gallery: move focus detection to image wrappers --- packages/block-library/src/gallery/gallery-image.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index b2cd316826425d..2b35ad52830fbd 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -183,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 } @@ -201,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 && (