diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js index 80a63a15df6ceb..8f443ffc5f7ac6 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -112,9 +112,11 @@ const BlockComponent = forwardRef( const textInputs = focus.tabbable .find( wrapper.current ) .filter( isTextField ) - // Exclude inner blocks - .filter( ( node ) => - isInsideRootBlock( wrapper.current, node ) + // Exclude inner blocks and block appenders + .filter( + ( node ) => + isInsideRootBlock( wrapper.current, node ) && + ! node.closest( '.block-list-appender' ) ); // If reversed (e.g. merge via backspace), use the last in the set of diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap index 4ee1d7710bbe18..14f85661ea22e0 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -49,3 +49,15 @@ exports[`Navigating the block hierarchy should navigate using the block hierarch " `; + +exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = ` +" +
+

just a paragraph

+ + + +
+
+" +`; diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 954033391e23bc..5aab0d85e31b91 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -135,4 +135,42 @@ describe( 'Navigating the block hierarchy', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should select the wrapper div for a group ', async () => { + // Insert a group block + await insertBlock( 'Group' ); + + // Insert some random blocks. + // The last block shouldn't be a textual block. + await page.click( '.block-list-appender .block-editor-inserter' ); + const paragraphMenuItem = ( + await page.$x( `//button//span[contains(text(), 'Paragraph')]` ) + )[ 0 ]; + await paragraphMenuItem.click(); + await page.keyboard.type( 'just a paragraph' ); + await insertBlock( 'Separator' ); + + // Check the Group block content + expect( await getEditedPostContent() ).toMatchSnapshot(); + + // Unselect the blocks + await page.click( '.editor-post-title' ); + + // Try selecting the group block using the block navigation + await page.click( '[aria-label="Block navigation"]' ); + const groupMenuItem = ( + await page.$x( + "//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Group')]" + ) + )[ 0 ]; + await groupMenuItem.click(); + + // The group block's wrapper should be selected. + const isGroupBlockSelected = await page.evaluate( + () => + document.activeElement.getAttribute( 'data-type' ) === + 'core/group' + ); + expect( isGroupBlockSelected ).toBe( true ); + } ); } );