Skip to content

Commit

Permalink
Fix inserter toggle in site editor
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 committed Feb 10, 2023
1 parent 06b3438 commit 57d84b9
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 6 deletions.
15 changes: 12 additions & 3 deletions packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
} );
}
9 changes: 6 additions & 3 deletions packages/edit-site/src/components/header-edit-mode/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
Expand Down Expand Up @@ -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 }
Expand Down
27 changes: 27 additions & 0 deletions test/e2e/specs/site-editor/site-editor-inserter.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );
} );

0 comments on commit 57d84b9

Please sign in to comment.