From 06b3438519192dfa776a1d9a2aa918488f6ea640 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 9 Feb 2023 20:52:34 +0800 Subject: [PATCH 1/2] Fix unable to close the block inserter when clicking on the toggle button --- .../components/header/header-toolbar/index.js | 9 ++++--- .../editor/various/inserting-blocks.spec.js | 25 +++++++++++++++++++ 2 files changed, 31 insertions(+), 3 deletions(-) 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 b4d30adc20244..55ffd265a96cf 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/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index fdc4615f197aa..a0d042c06d6a0 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', () => { From 57d84b928e88a5a13f48004456cb94b1d1b99011 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 10 Feb 2023 15:14:26 +0800 Subject: [PATCH 2/2] Fix inserter toggle in site editor --- .../src/editor/get-blocks.ts | 15 ++++++++--- .../src/components/header-edit-mode/index.js | 9 ++++--- .../site-editor/site-editor-inserter.spec.js | 27 +++++++++++++++++++ 3 files changed, 45 insertions(+), 6 deletions(-) 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 59d52e6c151c3..dba597a19c983 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-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 8c104ddd3f9b2..448682100092d 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/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js index 2dc8002b03089..d3dfedc9bde71 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(); + } ); } );