List View: Try scrolling selected blocks into view when single block …

…selection changes

packages/block-editor/src/components/list-view/block.js

@@ -27,6 +27,7 @@ import { sprintf, __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ListViewLeaf from './leaf';
+import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
@@ -220,6 +221,14 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	// When the block is selected, pass in the ref to the selected item, so that it can be scrolled into view.
+	// For long lists, the placeholder for the selected block is also observed, within ListViewBranch.
+	useListViewScrollIntoView( {
+		firstSelectedBlockClientId: selectedClientIds?.[ 0 ],
+		numBlocksSelected: selectedClientIds?.length,
+		selectedItemRef: isSelected ? cellRef : undefined,
+	} );
+
 	return (
 		<ListViewLeaf
 			className={ classes }

packages/block-editor/src/components/list-view/branch.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import { memo, useRef } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
@@ -12,6 +12,7 @@ import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
+import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -116,6 +117,16 @@ function ListViewBranch( props ) {
 
 	const { expandedState, draggedClientIds } = useListViewContext();
 
+	// For long lists where the selected item may fall outside of the current window,
+	// pass a reference to the corresponding placeholder row for the selected item.
+	// The "real" selected item is also observed in ListViewBlock, when rendered.
+	const invisibleSelectedItemRef = useRef();
+	useListViewScrollIntoView( {
+		firstSelectedBlockClientId: selectedClientIds?.[ 0 ],
+		numBlocksSelected: selectedClientIds?.length,
+		selectedItemRef: invisibleSelectedItemRef,
+	} );
+
 	if ( ! canParentExpand ) {
 		return null;
 	}
@@ -187,7 +198,13 @@ function ListViewBranch( props ) {
 							/>
 						) }
 						{ ! showBlock && (
-							<tr>
+							<tr
+								ref={
+									clientId === selectedClientIds[ 0 ]
+										? invisibleSelectedItemRef
+										: undefined
+								}
+							>
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }

packages/block-editor/src/components/list-view/use-list-view-scroll-into-view.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+export default function useListViewScrollIntoView( {
+	firstSelectedBlockClientId,
+	numBlocksSelected,
+	selectedItemRef,
+} ) {
+	useEffect( () => {
+		if (
+			numBlocksSelected !== 1 ||
+			! selectedItemRef?.current ||
+			! selectedItemRef.current.scrollIntoView
+		) {
+			return;
+		}
+
+		const { top, height } = selectedItemRef.current.getBoundingClientRect();
+		const { innerHeight } = window;
+
+		// If the selected block is not visible, scroll to it.
+		// The hard-coded value of 110 corresponds to the position at the top of the scrollable area.
+		if ( top < 110 || top + height > innerHeight ) {
+			selectedItemRef.current.scrollIntoView();
+		}
+	}, [
+		firstSelectedBlockClientId,
+		numBlocksSelected,
+		selectedItemRef?.current,
+	] );
+}