diff --git a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts index 59d52e6c151c30..dba597a19c9835 100644 --- a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts +++ b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts @@ -12,10 +12,19 @@ import type { Editor } from './index'; */ export async function getBlocks( this: Editor ) { return await this.page.evaluate( () => { + const blocks = window.wp.data.select( 'core/block-editor' ).getBlocks(); + // The editor might still contain an unmodified empty block even when it's technically "empty". - if ( window.wp.data.select( 'core/editor' ).isEditedPostEmpty() ) { - return []; + if ( blocks.length === 1 ) { + const blockName = blocks[ 0 ].name; + if ( + blockName === window.wp.blocks.getDefaultBlockName() || + blockName === window.wp.blocks.getFreeformContentHandlerName() + ) { + return []; + } } - return window.wp.data.select( 'core/block-editor' ).getBlocks(); + + return blocks; } ); } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index b4d30adc20244a..55ffd265a96cfa 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -91,10 +91,13 @@ function HeaderToolbar() { /> ); - const openInserter = useCallback( () => { + const toggleInserter = useCallback( () => { if ( isInserterOpened ) { - // Focusing the inserter button closes the inserter popover. + // Focusing the inserter button should close the inserter popover. + // However, there are some cases it won't close when the focus is lost. + // See https://github.com/WordPress/gutenberg/issues/43090 for more details. inserterButton.current.focus(); + setIsInserterOpened( false ); } else { setIsInserterOpened( true ); } @@ -120,7 +123,7 @@ function HeaderToolbar() { variant="primary" isPressed={ isInserterOpened } onMouseDown={ preventDefault } - onClick={ openInserter } + onClick={ toggleInserter } disabled={ ! isInserterEnabled } icon={ plus } label={ showIconLabels ? shortLabel : longLabel } diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 8c104ddd3f9b2e..448682100092d6 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -100,10 +100,13 @@ export default function HeaderEditMode() { const isLargeViewport = useViewportMatch( 'medium' ); - const openInserter = useCallback( () => { + const toggleInserter = useCallback( () => { if ( isInserterOpen ) { - // Focusing the inserter button closes the inserter popover. + // Focusing the inserter button should close the inserter popover. + // However, there are some cases it won't close when the focus is lost. + // See https://github.com/WordPress/gutenberg/issues/43090 for more details. inserterButton.current.focus(); + setIsInserterOpened( false ); } else { setIsInserterOpened( true ); } @@ -148,7 +151,7 @@ export default function HeaderEditMode() { variant="primary" isPressed={ isInserterOpen } onMouseDown={ preventDefault } - onClick={ openInserter } + onClick={ toggleInserter } disabled={ ! isVisualMode } icon={ plus } label={ showIconLabels ? shortLabel : longLabel } diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index fdc4615f197aa5..a0d042c06d6a04 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -289,6 +289,31 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { await expect.poll( editor.getEditedPostContent ).toBe( beforeContent ); } ); + + // A test for https://github.com/WordPress/gutenberg/issues/43090. + test( 'should close the inserter when clicking on the toggle button', async ( { + page, + editor, + } ) => { + const inserterButton = page.getByRole( 'button', { + name: 'Toggle block inserter', + } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await inserterButton.click(); + + await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click(); + + await expect + .poll( editor.getBlocks ) + .toMatchObject( [ { name: 'core/buttons' } ] ); + + await inserterButton.click(); + + await expect( blockLibrary ).toBeHidden(); + } ); } ); test.describe( 'insert media from inserter', () => { diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js index 2dc8002b03089b..d3dfedc9bde71a 100644 --- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js +++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js @@ -40,4 +40,31 @@ test.describe( 'Site Editor Inserter', () => { ) ).toBeHidden(); } ); + + // A test for https://github.com/WordPress/gutenberg/issues/43090. + test( 'should close the inserter when clicking on the toggle button', async ( { + page, + editor, + } ) => { + const inserterButton = page.getByRole( 'button', { + name: 'Toggle block inserter', + } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + const beforeBlocks = await editor.getBlocks(); + + await inserterButton.click(); + await blockLibrary.getByRole( 'tab', { name: 'Blocks' } ).click(); + await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click(); + + await expect + .poll( editor.getBlocks ) + .toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] ); + + await inserterButton.click(); + + await expect( blockLibrary ).toBeHidden(); + } ); } );