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 e933573e77ab1f..9dfa25c78c7887 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/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,
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 464e691f5fe2df..44b6c50a899dc0 100644
--- a/packages/block-editor/src/components/block-list/root-container.js
+++ b/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' ) }
>
-
- { children }
-
+ { children }
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index 030fef109d4868..9498077f14cde7 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/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 (
- <>
+
- >
+
);
/* eslint-enable jsx-a11y/no-static-element-interactions */
}
diff --git a/packages/block-editor/src/components/block-list/use-multi-selection.js b/packages/block-editor/src/components/writing-flow/use-multi-selection.js
similarity index 100%
rename from packages/block-editor/src/components/block-list/use-multi-selection.js
rename to packages/block-editor/src/components/writing-flow/use-multi-selection.js