From 9a988cf8693727ee65ca419426067f1ca0fdf7cc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 19 Jun 2020 13:56:06 +0100
Subject: [PATCH] call isMultiSelecting and is NavigationMode selectors where
 needed (#22135)

---
 .../components/block-list/block-wrapper.js    | 30 ++++++++++++-------
 .../src/components/block-list/block.js        |  6 ----
 .../src/components/block-list/index.js        |  6 +---
 .../components/block-list/insertion-point.js  | 22 ++++++++------
 .../components/block-list/root-container.js   | 19 +++++-------
 5 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
index ae6565e7aea271..4cff24dca65de3 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -41,8 +41,6 @@ const BlockComponent = forwardRef(
 			isSelected,
 			isFirstMultiSelected,
 			isLastMultiSelected,
-			isMultiSelecting,
-			isNavigationMode,
 			isPartOfMultiSelection,
 			enableAnimation,
 			index,
@@ -53,16 +51,26 @@ const BlockComponent = forwardRef(
 			blockTitle,
 			wrapperProps,
 		} = useContext( BlockListBlockContext );
-		const { initialPosition } = useSelect(
+		const {
+			initialPosition,
+			shouldFocusFirstElement,
+			isNavigationMode,
+		} = useSelect(
 			( select ) => {
-				if ( ! isSelected ) {
-					return {};
-				}
+				const {
+					getSelectedBlocksInitialCaretPosition,
+					isMultiSelecting: _isMultiSelecting,
+					isNavigationMode: _isNavigationMode,
+				} = select( 'core/block-editor' );
 
 				return {
-					initialPosition: select(
-						'core/block-editor'
-					).getSelectedBlocksInitialCaretPosition(),
+					shouldFocusFirstElement:
+						isSelected &&
+						! _isMultiSelecting() &&
+						! _isNavigationMode(),
+					initialPosition: isSelected
+						? getSelectedBlocksInitialCaretPosition()
+						: undefined,
 				};
 			},
 			[ isSelected ]
@@ -134,10 +142,10 @@ const BlockComponent = forwardRef(
 		};
 
 		useEffect( () => {
-			if ( ! isMultiSelecting && ! isNavigationMode && isSelected ) {
+			if ( shouldFocusFirstElement ) {
 				focusTabbable();
 			}
-		}, [ isSelected, isMultiSelecting, isNavigationMode ] );
+		}, [ shouldFocusFirstElement ] );
 
 		// Block Reordering animation
 		useMovingAnimation(
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index d7d7c951d31d38..aae498c0c95f26 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -64,8 +64,6 @@ function BlockListBlock( {
 	toggleSelection,
 	index,
 	enableAnimation,
-	isNavigationMode,
-	isMultiSelecting,
 } ) {
 	// In addition to withSelect, we should favor using useSelect in this
 	// component going forward to avoid leaking new props to the public API
@@ -177,8 +175,6 @@ function BlockListBlock( {
 		isSelected,
 		isFirstMultiSelected,
 		isLastMultiSelected,
-		isMultiSelecting,
-		isNavigationMode,
 		isPartOfMultiSelection,
 		enableAnimation,
 		index,
@@ -243,7 +239,6 @@ const applyWithSelect = withSelect(
 			hasSelectedInnerBlock,
 			getTemplateLock,
 			__unstableGetBlockWithoutInnerBlocks,
-			isNavigationMode,
 			getMultiSelectedBlockClientIds,
 		} = select( 'core/block-editor' );
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
@@ -289,7 +284,6 @@ const applyWithSelect = withSelect(
 			isSelectionEnabled: isSelectionEnabled(),
 			isLocked: !! templateLock,
 			isFocusMode: focusMode && isLargeViewport,
-			isNavigationMode: isNavigationMode(),
 			isRTL,
 
 			// Users of the editor.BlockListBlock filter used to be able to
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 0f603511826320..92eb185ee4bd4c 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -38,7 +38,6 @@ function BlockList(
 		const {
 			getBlockOrder,
 			getBlockListSettings,
-			isMultiSelecting,
 			getSelectedBlockClientId,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
@@ -48,7 +47,6 @@ function BlockList(
 
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
-			isMultiSelecting: isMultiSelecting(),
 			selectedBlockClientId: getSelectedBlockClientId(),
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
 			moverDirection: getBlockListSettings( rootClientId )
@@ -62,7 +60,6 @@ function BlockList(
 
 	const {
 		blockClientIds,
-		isMultiSelecting,
 		selectedBlockClientId,
 		multiSelectedBlockClientIds,
 		moverDirection,
@@ -103,8 +100,7 @@ function BlockList(
 						<BlockListBlock
 							rootClientId={ rootClientId }
 							clientId={ clientId }
-							isMultiSelecting={ isMultiSelecting }
-							// This prop is explicitly computed and passed down
+							// This prop is explicitely computed and passed down
 							// to avoid being impacted by the async mode
 							// otherwise there might be a small delay to trigger the animation.
 							index={ index }
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index 3d23ad7da4431b..6dbfeed8964e64 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -49,7 +49,6 @@ function Indicator( { clientId } ) {
 }
 
 export default function InsertionPoint( {
-	isMultiSelecting,
 	hasMultiSelection,
 	selectedBlockClientId,
 	children,
@@ -60,15 +59,20 @@ export default function InsertionPoint( {
 	const [ inserterElement, setInserterElement ] = useState( null );
 	const [ inserterClientId, setInserterClientId ] = useState( null );
 	const ref = useRef();
-	const { multiSelectedBlockClientIds } = useSelect( ( select ) => {
-		const { getMultiSelectedBlockClientIds } = select(
-			'core/block-editor'
-		);
+	const { multiSelectedBlockClientIds, isMultiSelecting } = useSelect(
+		( select ) => {
+			const {
+				getMultiSelectedBlockClientIds,
+				isMultiSelecting: _isMultiSelecting,
+			} = select( 'core/block-editor' );
 
-		return {
-			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
-		};
-	} );
+			return {
+				isMultiSelecting: _isMultiSelecting(),
+				multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
+			};
+		},
+		[]
+	);
 
 	function onMouseMove( event ) {
 		if (
diff --git a/packages/block-editor/src/components/block-list/root-container.js b/packages/block-editor/src/components/block-list/root-container.js
index 63a94c19e3b457..20bfaca2a45810 100644
--- a/packages/block-editor/src/components/block-list/root-container.js
+++ b/packages/block-editor/src/components/block-list/root-container.js
@@ -24,16 +24,13 @@ export const BlockNodes = createContext();
 export const SetBlockNodes = createContext();
 
 function selector( select ) {
-	const {
-		getSelectedBlockClientId,
-		hasMultiSelection,
-		isMultiSelecting,
-	} = select( 'core/block-editor' );
+	const { getSelectedBlockClientId, hasMultiSelection } = select(
+		'core/block-editor'
+	);
 
 	return {
 		selectedBlockClientId: getSelectedBlockClientId(),
 		hasMultiSelection: hasMultiSelection(),
-		isMultiSelecting: isMultiSelecting(),
 	};
 }
 
@@ -53,11 +50,10 @@ function onDragStart( event ) {
 }
 
 function RootContainer( { children, className }, ref ) {
-	const {
-		selectedBlockClientId,
-		hasMultiSelection,
-		isMultiSelecting,
-	} = useSelect( selector, [] );
+	const { selectedBlockClientId, hasMultiSelection } = useSelect(
+		selector,
+		[]
+	);
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const onSelectionStart = useMultiSelection( ref );
 
@@ -84,7 +80,6 @@ function RootContainer( { children, className }, ref ) {
 
 	return (
 		<InsertionPoint
-			isMultiSelecting={ isMultiSelecting }
 			hasMultiSelection={ hasMultiSelection }
 			selectedBlockClientId={ selectedBlockClientId }
 			containerRef={ ref }