Avoid creating an empty paragraph when selecting the parent's group b…

…lock (#21318)

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

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
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
+
+exports[`Navigating the block hierarchy should select the wrapper div for a group  1`] = `
+"<!-- wp:group -->
+<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><!-- wp:paragraph -->
+<p>just a paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:separator -->
+<hr class=\\"wp-block-separator\\"/>
+<!-- /wp:separator --></div></div>
+<!-- /wp:group -->"
+`;

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 );
+	} );
 } );