From 825c30ee852b2a84c5bad63689adaa5e56b7a47e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 May 2024 16:11:25 +0800 Subject: [PATCH 1/6] Return focus from URLPopover in social link block --- packages/block-editor/src/components/url-popover/index.js | 1 + packages/block-library/src/social-link/edit.js | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js index d060a464cc306..ee39a49ea0ed7 100644 --- a/packages/block-editor/src/components/url-popover/index.js +++ b/packages/block-editor/src/components/url-popover/index.js @@ -71,6 +71,7 @@ const URLPopover = forwardRef( return ( setPopover( false ) } + onClose={ () => { + setPopover( false ); + popoverAnchor?.focus(); + } } >
{ event.preventDefault(); setPopover( false ); + popoverAnchor?.focus(); } } >
@@ -143,6 +147,7 @@ const SocialLinkEdit = ( { className="wp-block-social-link-anchor" ref={ setPopoverAnchor } onClick={ () => setPopover( true ) } + aria-haspopup="dialog" > Date: Thu, 2 May 2024 16:27:24 +0800 Subject: [PATCH 2/6] Fix media-placeholder focus return and aria-haspopup --- .../src/components/media-placeholder/index.js | 54 ++++++++----------- 1 file changed, 22 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 7fb46d3ca9d56..347cd3e42d130 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -60,28 +60,37 @@ const InsertFromURLPopover = ( { ); -const URLSelectionUI = ( { - isURLInputVisible, - src, - onChangeSrc, - onSubmitSrc, - openURLInput, - closeURLInput, -} ) => { +const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => { // Use internal state instead of a ref to make sure that the component // re-renders when the popover's anchor updates. const [ popoverAnchor, setPopoverAnchor ] = useState( null ); + const [ isURLInputVisible, setIsURLInputVisible ] = useState( false ); + + const openURLInput = () => { + setIsURLInputVisible( true ); + }; + const closeURLInput = () => { + setIsURLInputVisible( false ); + popoverAnchor?.focus(); + }; + + const onSubmitSrc = ( event ) => { + event.preventDefault(); + if ( src && onSelectURL ) { + onSelectURL( src ); + closeURLInput(); + } + }; return ( -
+
@@ -138,7 +147,6 @@ export function MediaPlaceholder( { return getSettings().mediaUpload; }, [] ); const [ src, setSrc ] = useState( '' ); - const [ isURLInputVisible, setIsURLInputVisible ] = useState( false ); useEffect( () => { setSrc( value?.src ?? '' ); @@ -159,21 +167,6 @@ export function MediaPlaceholder( { setSrc( event.target.value ); }; - const openURLInput = () => { - setIsURLInputVisible( true ); - }; - const closeURLInput = () => { - setIsURLInputVisible( false ); - }; - - const onSubmitSrc = ( event ) => { - event.preventDefault(); - if ( src && onSelectURL ) { - onSelectURL( src ); - closeURLInput(); - } - }; - const onFilesUpload = ( files ) => { if ( ! handleUpload ) { return onSelect( files ); @@ -404,12 +397,9 @@ export function MediaPlaceholder( { return ( onSelectURL && ( ) ); From 5eeb51136542dab813dd86211cdffe0d68f08918 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 May 2024 16:36:04 +0800 Subject: [PATCH 3/6] Label the URL Popover --- packages/block-editor/src/components/url-popover/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js index ee39a49ea0ed7..3fc735c65e33c 100644 --- a/packages/block-editor/src/components/url-popover/index.js +++ b/packages/block-editor/src/components/url-popover/index.js @@ -72,6 +72,7 @@ const URLPopover = forwardRef( Date: Thu, 2 May 2024 16:40:17 +0800 Subject: [PATCH 4/6] Adjust labelling --- packages/block-editor/src/components/url-popover/index.js | 2 +- packages/block-library/src/social-link/edit.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js index 3fc735c65e33c..9311d928a8266 100644 --- a/packages/block-editor/src/components/url-popover/index.js +++ b/packages/block-editor/src/components/url-popover/index.js @@ -72,7 +72,7 @@ const URLPopover = forwardRef( { setPopover( false ); popoverAnchor?.focus(); From 1e9c3977b814e12164b342f39c35e92cbbf5b501 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 May 2024 12:21:59 +0800 Subject: [PATCH 5/6] Revert "Avoid deleting the block when pressing delete key one too many times in URLPopover" This reverts commit 78a85219975727f01825a41d68a753ec78a4e9da. --- .../block-library/src/social-link/edit.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js index fd1520f5977d1..6afcedfd76356 100644 --- a/packages/block-library/src/social-link/edit.js +++ b/packages/block-library/src/social-link/edit.js @@ -6,11 +6,15 @@ import clsx from 'clsx'; /** * WordPress dependencies */ +import { DELETE, BACKSPACE } from '@wordpress/keycodes'; +import { useDispatch } from '@wordpress/data'; + import { InspectorControls, URLPopover, URLInput, useBlockProps, + store as blockEditorStore, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { @@ -32,7 +36,9 @@ const SocialLinkURLPopover = ( { setAttributes, setPopover, popoverAnchor, + clientId, } ) => { + const { removeBlock } = useDispatch( blockEditorStore ); return ( { + if ( + !! url || + event.defaultPrevented || + ! [ BACKSPACE, DELETE ].includes( + event.keyCode + ) + ) { + return; + } + removeBlock( clientId ); + } } />