List View: Fix home and end key behaviour in very long lists (#62312)

* List View: Fix home and end key behaviour in very long lists * Update e2e test Co-authored-by: andrewserong <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Jun 12, 2024 · 35ddbfb · 35ddbfb
1 parent f1016e9
commit 35ddbfb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -194,10 +194,14 @@ function ListViewBranch( props ) {
 				// This prevents the entire tree from being rendered when a branch is
 				// selected, or a user selects all blocks, while still enabling scroll
 				// into view behavior when selecting a block or opening the list view.
+				// The first and last blocks of the list are always rendered, to ensure
+				// that Home and End keys work as expected.
 				const showBlock =
 					isDragged ||
 					blockInView ||
-					( isSelected && clientId === selectedClientIds[ 0 ] );
+					( isSelected && clientId === selectedClientIds[ 0 ] ) ||
+					index === 0 ||
+					index === blockCount - 1;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
@@ -1120,7 +1120,7 @@ test.describe( 'List View', () => {
 				'Pressing keyboard shortcut should also work when the menu is opened and focused'
 			)
 			.toMatchObject( [
-				{ name: 'core/paragraph', selected: true, focused: false },
+				{ name: 'core/paragraph', selected: true, focused: true },
 				{ name: 'core/file', selected: false, focused: false },
 			] );
 		await expect(