diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js index 6b0b1af9ea22dd..b280cc9c51f6b8 100644 --- a/packages/block-editor/src/components/block-edit/context.js +++ b/packages/block-editor/src/components/block-edit/context.js @@ -5,6 +5,7 @@ import { createContext, useContext } from '@wordpress/element'; export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' ); export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' ); +export const blockEditingModeKey = Symbol( 'blockEditingMode' ); export const DEFAULT_BLOCK_EDIT_CONTEXT = { name: '', diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index bbef47b27c5790..457cd919f89381 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -13,6 +13,7 @@ import { useBlockEditContext, mayDisplayControlsKey, mayDisplayParentControlsKey, + blockEditingModeKey, } from './context'; /** @@ -28,6 +29,7 @@ export { useBlockEditContext }; export default function BlockEdit( { mayDisplayControls, mayDisplayParentControls, + blockEditingMode, // The remaining props are passed through the BlockEdit filters and are thus // public API! ...props @@ -59,6 +61,7 @@ export default function BlockEdit( { // usage outside of the package (this context is exposed). [ mayDisplayControlsKey ]: mayDisplayControls, [ mayDisplayParentControlsKey ]: mayDisplayParentControls, + [ blockEditingModeKey ]: blockEditingMode, } ), [ name, @@ -69,6 +72,7 @@ export default function BlockEdit( { __unstableLayoutClassNames, mayDisplayControls, mayDisplayParentControls, + blockEditingMode, ] ) } > diff --git a/packages/block-editor/src/components/block-editing-mode/index.js b/packages/block-editor/src/components/block-editing-mode/index.js index 0f0a65995ff956..7cb500af1e9c05 100644 --- a/packages/block-editor/src/components/block-editing-mode/index.js +++ b/packages/block-editor/src/components/block-editing-mode/index.js @@ -2,13 +2,16 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useContext } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { PrivateBlockContext } from '../block-list/private-block-context'; +import { + useBlockEditContext, + blockEditingModeKey, +} from '../block-edit/context'; /** * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode @@ -45,8 +48,8 @@ import { PrivateBlockContext } from '../block-list/private-block-context'; * @return {BlockEditingMode} The current editing mode. */ export function useBlockEditingMode( mode ) { - const { clientId = '', blockEditingMode } = - useContext( PrivateBlockContext ); + const context = useBlockEditContext(); + const { clientId = '' } = context; const { setBlockEditingMode, unsetBlockEditingMode } = useDispatch( blockEditorStore ); const globalBlockEditingMode = useSelect( @@ -65,5 +68,5 @@ export function useBlockEditingMode( mode ) { } }; }, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] ); - return clientId ? blockEditingMode : globalBlockEditingMode; + return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode; } diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 0bfc940865a096..af96f0e3483d1c 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -133,6 +133,7 @@ function BlockListBlock( { } mayDisplayControls={ mayDisplayControls } mayDisplayParentControls={ mayDisplayParentControls } + blockEditingMode={ context.blockEditingMode } /> ); diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index dd7953299ea2eb..f58251ee665832 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -42,7 +42,6 @@ import { store as blockEditorStore } from '../../store'; import { useLayout } from './layout'; import useScrollUponInsertion from './use-scroll-upon-insertion'; import { useSettings } from '../use-settings'; -import { PrivateBlockContext } from './private-block-context'; const EMPTY_ARRAY = []; @@ -184,7 +183,6 @@ function BlockListBlock( { isParentSelected, order, mayDisplayControls, - blockEditingMode, } = useSelect( ( select ) => { const { @@ -198,7 +196,6 @@ function BlockListBlock( { getBlockName, isFirstMultiSelectedBlock, getMultiSelectedBlockClientIds, - getBlockEditingMode, } = select( blockEditorStore ); const currentBlockType = getBlockType( name || 'core/missing' ); const currentBlockCategory = currentBlockType?.category; @@ -252,7 +249,6 @@ function BlockListBlock( { getMultiSelectedBlockClientIds().every( ( id ) => getBlockName( id ) === name ) ), - blockEditingMode: getBlockEditingMode( clientId ), }; }, [ clientId, isSelected, name, rootClientId ] @@ -345,7 +341,7 @@ function BlockListBlock( { order + 1 ); - const block = ( + return ( ); - - return ( - - { block } - - ); } const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => { diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js index 8dd92150747542..6925cfe3f62214 100644 --- a/packages/block-library/src/cover/test/edit.native.js +++ b/packages/block-library/src/cover/test/edit.native.js @@ -32,7 +32,6 @@ import { import { IMAGE_BACKGROUND_TYPE } from '../shared'; import * as paragraph from '../../paragraph'; import * as cover from '..'; -import { PrivateBlockContext } from '../../../../block-editor/src/components/block-list/private-block-context'; // Avoid errors due to mocked stylesheet files missing required selectors. jest.mock( '@wordpress/compose', () => ( { @@ -81,20 +80,14 @@ const MEDIA_OPTIONS = [ // Simplified tree to render Cover edit within slot. const CoverEdit = ( props ) => ( - - - - + + );