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 && ( ) ); diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js index d060a464cc306..db71d8127e7a4 100644 --- a/packages/block-editor/src/components/url-popover/index.js +++ b/packages/block-editor/src/components/url-popover/index.js @@ -71,6 +71,9 @@ const URLPopover = forwardRef( return ( { + const { removeBlock } = useDispatch( blockEditorStore ); return ( setPopover( false ) } + aria-label={ __( 'Edit social link' ) } + onClose={ () => { + setPopover( false ); + popoverAnchor?.focus(); + } } >
{ event.preventDefault(); setPopover( false ); + popoverAnchor?.focus(); } } >
@@ -56,6 +67,18 @@ const SocialLinkURLPopover = ( { label={ __( 'Enter social link' ) } hideLabelFromVision disableSuggestions + onKeyDown={ ( event ) => { + if ( + !! url || + event.defaultPrevented || + ! [ BACKSPACE, DELETE ].includes( + event.keyCode + ) + ) { + return; + } + removeBlock( clientId ); + } } />