Block editor: scroll selected block only if it has no focus

packages/block-editor/README.md

@@ -448,6 +448,8 @@ _Related_
 
 <a name="MultiSelectScrollIntoView" href="#MultiSelectScrollIntoView">#</a> **MultiSelectScrollIntoView**
 
+> **Deprecated** 
+
 Scrolls the multi block selection end into view if not in view already. This
 is important to do after selection by keyboard.
 

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

@@ -19,7 +19,6 @@ import useBlockDropZone from '../use-block-drop-zone';
 import useInsertionPoint from './insertion-point';
 import BlockPopover from './block-popover';
 import { store as blockEditorStore } from '../../store';
-import { useScrollSelectionIntoView } from '../selection-scroll-into-view';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 
@@ -30,7 +29,6 @@ export default function BlockList( { className, __experimentalLayout } ) {
 	const ref = useRef();
 	const [ blockNodes, setBlockNodes ] = useState( {} );
 	const insertionPoint = useInsertionPoint( ref );
-	useScrollSelectionIntoView( ref );
 	usePreParsePatterns();
 
 	const isLargeViewport = useViewportMatch( 'medium' );

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -29,6 +29,7 @@ import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-name
 import { useEventHandlers } from './use-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockNodes } from './use-block-nodes';
+import { useScrollIntoView } from './use-scroll-into-view';
 import { store as blockEditorStore } from '../../../store';
 
 /**
@@ -102,6 +103,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( clientId ),
+		// Must happen after focus because we check for focus in the block.
+		useScrollIntoView( clientId ),
 		useBlockNodes( clientId ),
 		useEventHandlers( clientId ),
 		useNavModeExit( clientId ),

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

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import scrollIntoView from 'dom-scroll-into-view';
+
+/**
+ * WordPress dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { getScrollContainer } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export function useScrollIntoView( clientId ) {
+	const ref = useRef();
+	const isSelectionEnd = useSelect(
+		( select ) => {
+			const { isBlockSelected, getBlockSelectionEnd } = select(
+				blockEditorStore
+			);
+
+			return (
+				isBlockSelected( clientId ) ||
+				getBlockSelectionEnd() === clientId
+			);
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelectionEnd ) {
+			return;
+		}
+
+		const extentNode = ref.current;
+
+		// If the block is focused, the browser will already have scrolled into
+		// view if necessary.
+		if ( extentNode.contains( extentNode.ownerDocument.activeElement ) ) {
+			return;
+		}
+
+		const scrollContainer = getScrollContainer( extentNode );
+
+		// If there's no scroll container, it follows that there's no scrollbar
+		// and thus there's no need to try to scroll into view.
+		if ( ! scrollContainer ) {
+			return;
+		}
+
+		scrollIntoView( extentNode, scrollContainer, {
+			onlyScrollIfNeeded: true,
+		} );
+	}, [ isSelectionEnd ] );
+
+	return ref;
+}

packages/block-editor/src/components/selection-scroll-into-view/index.js

@@ -1,70 +1,17 @@
-/**
- * External dependencies
- */
-import scrollIntoView from 'dom-scroll-into-view';
-
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { getScrollContainer } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
-import { getBlockDOMNode } from '../../utils/dom';
-import { store as blockEditorStore } from '../../store';
-
-export function useScrollSelectionIntoView( ref ) {
-	// Although selectionRootClientId isn't used directly in calculating
-	// whether scrolling should occur, it is used as a dependency of the
-	// effect to take into account situations where a block might be moved
-	// to a different parent. In this situation, the selectionEnd clientId
-	// remains the same, so the rootClientId is used to trigger the effect.
-	const { selectionRootClientId, selectionEnd } = useSelect( ( select ) => {
-		const selectors = select( blockEditorStore );
-		const selectionEndClientId = selectors.getBlockSelectionEnd();
-		return {
-			selectionEnd: selectionEndClientId,
-			selectionRootClientId: selectors.getBlockRootClientId(
-				selectionEndClientId
-			),
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( ! selectionEnd ) {
-			return;
-		}
-
-		const { ownerDocument } = ref.current;
-		const extentNode = getBlockDOMNode( selectionEnd, ownerDocument );
-
-		if ( ! extentNode ) {
-			return;
-		}
-
-		const scrollContainer = getScrollContainer( extentNode );
-
-		// If there's no scroll container, it follows that there's no scrollbar
-		// and thus there's no need to try to scroll into view.
-		if ( ! scrollContainer ) {
-			return;
-		}
-
-		scrollIntoView( extentNode, scrollContainer, {
-			onlyScrollIfNeeded: true,
-		} );
-	}, [ selectionRootClientId, selectionEnd ] );
-}
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Scrolls the multi block selection end into view if not in view already. This
  * is important to do after selection by keyboard.
+ *
+ * @deprecated
  */
 export function MultiSelectScrollIntoView() {
-	const ref = useRef();
-	useScrollSelectionIntoView( ref );
-	return <div ref={ ref } />;
+	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
+		hint: 'This behaviour is now built-in.',
+	} );
+	return null;
 }