Multi-selection: allow partial block selection (#38892)

docs/reference-guides/data/data-core-block-editor.md

@@ -1390,7 +1390,7 @@ Action that changes the position of the user caret.
 
 _Parameters_
 
--   _clientId_ `string`: The selected block client ID.
+-   _clientId_ `string|WPSelection`: The selected block client ID.
 -   _attributeKey_ `string`: The selected block attribute key.
 -   _startOffset_ `number`: The start offset.
 -   _endOffset_ `number`: The end offset.
@@ -1462,7 +1462,7 @@ _Parameters_
 
 -   _rootClientId_ `?string`: Optional root client ID of block list on which to insert.
 -   _index_ `?number`: Index at which block should be inserted.
--   _\_\_unstableOptions_ `Object`: Wether or not to show an inserter button.
+-   _\_\_unstableOptions_ `Object`: Whether or not to show an inserter button.
 
 _Returns_
 

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

@@ -73,6 +73,11 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// Needed in case the whole editor is content editable (for multi
+			// selection). It fixes an edge case where ArrowDown and ArrowRight
+			// should collapse the selection to the end of that selection and
+			// not into the appender.
+			contentEditable={ false }
 			// The appender exists to let you add the first Paragraph before
 			// any is inserted. To that end, this appender should visually be
 			// presented as a block. That means theme CSS should style it as if

packages/block-editor/src/components/block-list/style.scss

@@ -26,9 +26,9 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
+	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
 	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-multi-selected {
-
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {
 			// Show selection borders around every non-nested block's actual footprint.
 			position: absolute;
@@ -41,7 +41,7 @@
 			right: $border-width;
 
 			// Everything else.
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
 
 			// Windows High Contrast mode will show this outline.
@@ -66,11 +66,10 @@
 	}
 
 	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: $border-width solid transparent;
 	}
 
-	.block-editor-block-list__block.is-multi-selected::after,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

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

@@ -31,9 +31,7 @@ import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-name
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
-import { useScrollIntoView } from './use-scroll-into-view';
 import { useBlockRefProvider } from './use-block-refs';
-import { useMultiSelection } from './use-multi-selection';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
 
@@ -115,11 +113,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 ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useMultiSelection( clientId ),
 		useEventHandlers( clientId ),
 		useNavModeExit( clientId ),
 		useIsHovered(),

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -20,7 +20,6 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
-import { setContentEditableWrapper } from './use-multi-selection';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -37,7 +36,6 @@ function useInitialPosition( clientId ) {
 		( select ) => {
 			const {
 				getSelectedBlocksInitialCaretPosition,
-				isMultiSelecting,
 				isNavigationMode,
 				isBlockSelected,
 			} = select( blockEditorStore );
@@ -46,7 +44,7 @@ function useInitialPosition( clientId ) {
 				return;
 			}
 
-			if ( isMultiSelecting() || isNavigationMode() ) {
+			if ( isNavigationMode() ) {
 				return;
 			}
 
@@ -68,11 +66,11 @@ function useInitialPosition( clientId ) {
 export function useFocusFirstElement( clientId ) {
 	const ref = useRef();
 	const initialPosition = useInitialPosition( clientId );
-	const { isBlockSelected } = useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
-		if ( ! isBlockSelected( clientId ) ) {
+		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
 			return;
 		}
 
@@ -121,8 +119,6 @@ export function useFocusFirstElement( clientId ) {
 			}
 		}
 
-		setContentEditableWrapper( ref.current, false );
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 

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

@@ -30,6 +30,14 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
+				// When the whole editor is editable, let writing flow handle
+				// selection.
+				if (
+					node.parentElement.closest( '[contenteditable="true"]' )
+				) {
+					return;
+				}
+
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {