diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index e8ad64a2bbab4..8c887a3b3a116 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -97,7 +97,10 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo setIsURLPickerOpen( true ); }; const linkControl = isURLPickerOpen && ( - + setIsURLPickerOpen( false ) } + > { - setIsURLPickerOpen( false ); - } } /> ); diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index f878ca3f7d46d..c417f2190bd18 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -175,7 +175,10 @@ function NavigationLinkEdit( { } { isLinkOpen && ( - + setIsLinkOpen( false ) } + > setIsLinkOpen( false ) } /> ) } diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap index d7ec73d815055..067425ce07d6c 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap @@ -8,6 +8,14 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = ` " `; +exports[`Buttons dismisses link editor when escape is pressed 1`] = ` +" + +" +`; + exports[`Buttons has focus on button content 1`] = ` "
diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js index a723f30802948..6906578e33ea5 100644 --- a/packages/e2e-tests/specs/editor/blocks/buttons.test.js +++ b/packages/e2e-tests/specs/editor/blocks/buttons.test.js @@ -20,6 +20,16 @@ describe( 'Buttons', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + it( 'dismisses link editor when escape is pressed', async () => { + // Regression: https://github.com/WordPress/gutenberg/pull/19885 + await insertBlock( 'Buttons' ); + await pressKeyWithModifier( 'primary', 'k' ); + await page.keyboard.press( 'Escape' ); + await page.keyboard.type( 'WordPress' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + it( 'can jump to the link editor using the keyboard shortcut', async () => { await insertBlock( 'Buttons' ); await page.keyboard.type( 'WordPress' ); diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index bdb237c0aee04..561b74ba80c42 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -9,6 +9,7 @@ import { insertBlock, pressKeyWithModifier, setUpResponseMocking, + clickBlockToolbarButton, } from '@wordpress/e2e-test-utils'; async function mockPagesResponse( pages ) { @@ -132,6 +133,23 @@ describe( 'Navigation', () => { // an issue where the block appender requires two clicks. await page.click( '.wp-block-navigation .block-list-appender' ); + // After adding a new block, search input should be shown immediately. + // Verify that Escape would close the popover. + // Regression: https://github.com/WordPress/gutenberg/pull/19885 + const isInURLInput = await page.evaluate( () => ( + !! document.activeElement.closest( '.block-editor-url-input' ) + ) ); + expect( isInURLInput ).toBe( true ); + await page.keyboard.press( 'Escape' ); + const isInLinkRichText = await page.evaluate( () => ( + document.activeElement.classList.contains( 'rich-text' ) && + !! document.activeElement.closest( '.block-editor-block-list__block' ) + ) ); + expect( isInLinkRichText ).toBe( true ); + + // Now, trigger the link dialog once more. + await clickBlockToolbarButton( 'Link' ); + // For the second nav link block use an existing internal page. // Mock the api response so that it's consistent. await mockSearchResponse( [ { title: 'Contact Us', slug: 'contact-us' } ] );