Multi-selection: move shift+click logic to hook (#31358)

* Multi-selection: allow shift+click from single block selection * Restore condition
WordPress · May 1, 2021 · 1be5eb4 · 1be5eb4
1 parent 5d9d18c
commit 1be5eb4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js
@@ -36,9 +36,13 @@ export function useMultiSelection( clientId ) {
 		multiSelect,
 		selectBlock,
 	} = useDispatch( blockEditorStore );
-	const { isSelectionEnabled, isBlockSelected, getBlockParents } = useSelect(
-		blockEditorStore
-	);
+	const {
+		isSelectionEnabled,
+		isBlockSelected,
+		getBlockParents,
+		getBlockSelectionStart,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -152,9 +156,36 @@ export function useMultiSelection( clientId ) {
 				toggleRichText( node, false );
 			}
 
+			function onMouseDown( event ) {
+				// The main button.
+				// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+				if ( ! isSelectionEnabled() || event.button !== 0 ) {
+					return;
+				}
+
+				if ( event.shiftKey ) {
+					const blockSelectionStart = getBlockSelectionStart();
+					if ( blockSelectionStart !== clientId ) {
+						toggleRichText( node, false );
+						multiSelect( blockSelectionStart, clientId );
+						event.preventDefault();
+					}
+				} else if ( hasMultiSelection() ) {
+					// Allow user to escape out of a multi-selection to a
+					// singular selection of a block via click. This is handled
+					// here since focus handling excludes blocks when there is
+					// multiselection, as focus can be incurred by starting a
+					// multiselection (focus moved to first block's multi-
+					// controls).
+					selectBlock( clientId );
+				}
+			}
+
+			node.addEventListener( 'mousedown', onMouseDown );
 			node.addEventListener( 'mouseleave', onMouseLeave );
 
 			return () => {
+				node.removeEventListener( 'mousedown', onMouseDown );
 				node.removeEventListener( 'mouseleave', onMouseLeave );
 				ownerDocument.removeEventListener(
 					'selectionchange',

diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -32,7 +32,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { isInSameBlock, getBlockClientId } from '../../utils/dom';
+import { isInSameBlock } from '../../utils/dom';
 import useMultiSelection from './use-multi-selection';
 import { store as blockEditorStore } from '../../store';
 
@@ -188,43 +188,14 @@ export default function WritingFlow( { children } ) {
 		getFirstMultiSelectedBlockClientId,
 		getLastMultiSelectedBlockClientId,
 		getBlockOrder,
-		isSelectionEnabled,
-		getBlockSelectionStart,
 		getSettings,
 	} = useSelect( blockEditorStore );
 	const { multiSelect, selectBlock, setNavigationMode } = useDispatch(
 		blockEditorStore
 	);
 
-	function onMouseDown( event ) {
+	function onMouseDown() {
 		verticalRect.current = null;
-
-		// Multi-select blocks when Shift+clicking.
-		if (
-			isSelectionEnabled() &&
-			// The main button.
-			// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-			event.button === 0
-		) {
-			const clientId = getBlockClientId( event.target );
-
-			if ( clientId ) {
-				if ( event.shiftKey ) {
-					const blockSelectionStart = getBlockSelectionStart();
-					if ( blockSelectionStart !== clientId ) {
-						multiSelect( blockSelectionStart, clientId );
-						event.preventDefault();
-					}
-					// Allow user to escape out of a multi-selection to a singular
-					// selection of a block via click. This is handled here since
-					// focus handling excludes blocks when there is multiselection,
-					// as focus can be incurred by starting a multiselection (focus
-					// moved to first block's multi-controls).
-				} else if ( hasMultiSelection ) {
-					selectBlock( clientId );
-				}
-			}
-		}
 	}
 
 	function expandSelection( isReverse ) {