Keep focus within the list view

WordPress · May 8, 2024 · 31d9f7f · 31d9f7f
1 parent 20866f8
commit 31d9f7f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -333,17 +333,21 @@ function ListViewBlock( {
 			// Expand all parents of the current block.
 			expand( blockParents );
 		} else if ( isMatch( 'core/block-editor/group', event ) ) {
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 && isGroupable( clientIds ) ) {
+			const { blocksToUpdate } = getBlocksToUpdate();
+			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
 				event.preventDefault();
-				const blocks = getBlocksByClientId( clientIds );
+				const blocks = getBlocksByClientId( blocksToUpdate );
 				const groupingBlockName = getGroupingBlockName();
 				const newBlocks = switchToBlockType(
 					blocks,
 					groupingBlockName
 				);
-				replaceBlocks( clientIds, newBlocks );
+				replaceBlocks( blocksToUpdate, newBlocks );
 				speak( __( 'Selected blocks are grouped.' ) );
+				const newlySelectedBlocks = getSelectedBlockClientIds();
+				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+				setOpenedBlockSettingsMenu( undefined );
+				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
 			}
 		}
 	}

diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
@@ -1005,11 +1005,10 @@ test.describe( 'List View', () => {
 			.poll( listViewUtils.getBlocksWithA11yAttributes )
 			.toMatchObject( [
 				{ name: 'core/paragraph', selected: false, focused: false },
-
 				{
 					name: 'core/group',
 					selected: true,
-					focused: false,
+					focused: true,
 					innerBlocks: [
 						{
 							name: 'core/heading',