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