Multi selection: move hook to WritingFlow with other multi selection …

…logic (#27479)

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

@@ -26,7 +26,8 @@ import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
  */
 import { isInsideRootBlock } from '../../utils/dom';
 import useMovingAnimation from '../use-moving-animation';
-import { Context, SetBlockNodes } from './root-container';
+import { SetBlockNodes } from './root-container';
+import { SelectionStart } from '../writing-flow';
 import { BlockListBlockContext } from './block';
 import ELEMENTS from './block-wrapper-elements';
 
@@ -49,7 +50,7 @@ import ELEMENTS from './block-wrapper-elements';
 export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const fallbackRef = useRef();
 	const ref = props.ref || fallbackRef;
-	const onSelectionStart = useContext( Context );
+	const onSelectionStart = useContext( SelectionStart );
 	const setBlockNodes = useContext( SetBlockNodes );
 	const {
 		clientId,

packages/block-editor/src/components/block-list/root-container.js

@@ -11,16 +11,13 @@ import { createContext, forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useMultiSelection from './use-multi-selection';
 import useInsertionPoint from './insertion-point';
 import BlockPopover from './block-popover';
 
-export const Context = createContext();
 export const BlockNodes = createContext();
 export const SetBlockNodes = createContext();
 
 function RootContainer( { children, className }, ref ) {
-	const onSelectionStart = useMultiSelection( ref );
 	const [ blockNodes, setBlockNodes ] = useState( {} );
 	const insertionPoint = useInsertionPoint( ref );
 
@@ -33,9 +30,7 @@ function RootContainer( { children, className }, ref ) {
 				className={ classnames( className, 'is-root-container' ) }
 			>
 				<SetBlockNodes.Provider value={ setBlockNodes }>
-					<Context.Provider value={ onSelectionStart }>
-						{ children }
-					</Context.Provider>
+					{ children }
 				</SetBlockNodes.Provider>
 			</div>
 		</BlockNodes.Provider>

packages/block-editor/src/components/writing-flow/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef, useEffect, useState, createContext } from '@wordpress/element';
 import {
 	computeCaretRect,
 	focus,
@@ -44,6 +44,9 @@ import {
 	getBlockClientId,
 } from '../../utils/dom';
 import FocusCapture from './focus-capture';
+import useMultiSelection from './use-multi-selection';
+
+export const SelectionStart = createContext();
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -257,6 +260,8 @@ export default function WritingFlow( { children } ) {
 	// browser behaviour across blocks.
 	const verticalRect = useRef();
 
+	const onSelectionStart = useMultiSelection( container );
+
 	const {
 		selectedBlockClientId,
 		selectionStartClientId,
@@ -687,7 +692,7 @@ export default function WritingFlow( { children } ) {
 	// bubbling events from children to determine focus transition intents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
-		<>
+		<SelectionStart.Provider value={ onSelectionStart }>
 			<FocusCapture
 				ref={ focusCaptureBeforeRef }
 				selectedClientId={ selectedBlockClientId }
@@ -725,7 +730,7 @@ export default function WritingFlow( { children } ) {
 				multiSelectionContainer={ multiSelectionContainer }
 				isReverse
 			/>
-		</>
+		</SelectionStart.Provider>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
 }