call isMultiSelecting and is NavigationMode selectors where needed (#…

…22135)
WordPress · Jun 19, 2020 · 9a988cf · 9a988cf
1 parent 64b3ed3
commit 9a988cf
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }