From fec05ee8451ee1a8da43cdbf00485736e2b0a16a Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 9 Aug 2023 14:11:17 +1000 Subject: [PATCH] Make useBlockEditingMode() public (#52094) * Make useBlockEditingMode() public * Remove unnecessary unlock()s --- .../data/data-core-block-editor.md | 62 ++++ packages/block-editor/README.md | 34 ++ .../components/block-editing-mode/index.js | 10 +- .../src/components/block-inspector/index.js | 3 +- .../components/block-list-appender/index.js | 3 +- .../src/components/block-list/block.js | 3 +- .../block-list/use-in-between-inserter.js | 3 +- .../components/block-parent-selector/index.js | 3 +- .../src/components/block-toolbar/index.js | 3 +- .../block-tools/block-contextual-toolbar.js | 3 +- packages/block-editor/src/components/index.js | 1 + .../src/components/list-view/block.js | 5 +- .../components/use-block-drop-zone/index.js | 3 +- packages/block-editor/src/private-apis.js | 2 - packages/block-editor/src/store/actions.js | 39 ++ .../block-editor/src/store/private-actions.js | 39 -- .../src/store/private-selectors.js | 68 +--- packages/block-editor/src/store/selectors.js | 59 ++- .../block-editor/src/store/test/actions.js | 28 ++ .../src/store/test/private-actions.js | 28 -- .../src/store/test/private-selectors.js | 349 +++++------------- .../block-editor/src/store/test/selectors.js | 199 ++++++++++ packages/block-library/src/image/edit.js | 5 +- packages/block-library/src/media-text/edit.js | 5 +- .../src/navigation/edit/index.js | 3 +- packages/block-library/src/pattern/edit.js | 12 +- packages/block-library/src/post-title/edit.js | 5 +- .../navigation-block-editor-provider.js | 5 +- .../disable-non-page-content-blocks.js | 5 +- .../src/hooks/navigation-menu-edit.js | 6 +- .../push-changes-to-global-styles/index.js | 2 +- 31 files changed, 534 insertions(+), 461 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 744b7b2896e26a..fbdf0c5dfd81be 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -209,6 +209,35 @@ _Returns_ - `number`: Number of blocks in the post. +### getBlockEditingMode + +Returns the block editing mode for a given block. + +The mode can be one of three options: + +- `'disabled'`: Prevents editing the block entirely, i.e. it cannot be selected. +- `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the toolbar, the block movers, block settings. +- `'default'`: Allows editing the block as normal. + +Blocks can set a mode using the `useBlockEditingMode` hook. + +The mode is inherited by all of the block's inner blocks, unless they have their own mode. + +A template lock can also set a mode. If the template lock is `'contentOnly'`, the block's mode is overridden to `'contentOnly'` if the block has a content role attribute, or `'disabled'` otherwise. + +_Related_ + +- useBlockEditingMode + +_Parameters_ + +- _state_ `Object`: Global application state. +- _clientId_ `string`: The block client ID, or `''` for the root container. + +_Returns_ + +- `BlockEditingMode`: The block editing mode. One of `'disabled'`, `'contentOnly'`, or `'default'`. + ### getBlockHierarchyRootClientId Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks. @@ -1554,6 +1583,23 @@ _Parameters_ - _clientId_ `string`: Block client ID. - _fallbackToParent_ `boolean`: If true, select the first parent if there is no previous block. +### setBlockEditingMode + +Sets the block editing mode for a given block. + +_Related_ + +- useBlockEditingMode + +_Parameters_ + +- _clientId_ `string`: The block client ID, or `''` for the root container. +- _mode_ `BlockEditingMode`: The block editing mode. One of `'disabled'`, `'contentOnly'`, or `'default'`. + +_Returns_ + +- `Object`: Action object. + ### setBlockMovingClientId Action that enables or disables the block moving mode. @@ -1711,6 +1757,22 @@ _Returns_ - `Object`: Action object. +### unsetBlockEditingMode + +Clears the block editing mode for a given block. + +_Related_ + +- useBlockEditingMode + +_Parameters_ + +- _clientId_ `string`: The block client ID, or `''` for the root container. + +_Returns_ + +- `Object`: Action object. + ### updateBlock Action that updates the block with the specified client ID. diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 44250ec98f586d..30e0cc9f422e33 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -811,6 +811,40 @@ _Returns_ - `Object`: Block edit context +### useBlockEditingMode + +Allows a block to restrict the user interface that is displayed for editing that block and its inner blocks. + +_Usage_ + +```js +function MyBlock( { attributes, setAttributes } ) { + useBlockEditingMode( 'disabled' ); + return
; +} +``` + +`mode` can be one of three options: + +- `'disabled'`: Prevents editing the block entirely, i.e. it cannot be + selected. +- `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the + toolbar, the block movers, block settings. +- `'default'`: Allows editing the block as normal. + +The mode is inherited by all of the block's inner blocks, unless they have +their own mode. + +If called outside of a block context, the mode is applied to all blocks. + +_Parameters_ + +- _mode_ `?BlockEditingMode`: The editing mode to apply. If undefined, the current editing mode is not changed. + +_Returns_ + +- `BlockEditingMode`: The current editing mode. + ### useBlockProps This hook is used to lightly mark an element as a block element. The element should be the outermost element of a block. Call this hook and pass the returned props to the element to mark as a block. If you define a ref for the element, it is important to pass the ref to this hook, which the hook in turn will pass to the component through the props it returns. Optionally, you can also pass any other props through this hook, and they will be merged and returned. 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 8cb7bdc5d7b868..5d916d9816e606 100644 --- a/packages/block-editor/src/components/block-editing-mode/index.js +++ b/packages/block-editor/src/components/block-editing-mode/index.js @@ -8,7 +8,6 @@ import { useContext, useEffect } from '@wordpress/element'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; import { BlockListBlockContext } from '../block-list/block-list-block-context'; /** @@ -49,14 +48,11 @@ export function useBlockEditingMode( mode ) { const { clientId = '' } = useContext( BlockListBlockContext ) ?? {}; const blockEditingMode = useSelect( ( select ) => - unlock( select( blockEditorStore ) ).getBlockEditingMode( - clientId - ), + select( blockEditorStore ).getBlockEditingMode( clientId ), [ clientId ] ); - const { setBlockEditingMode, unsetBlockEditingMode } = unlock( - useDispatch( blockEditorStore ) - ); + const { setBlockEditingMode, unsetBlockEditingMode } = + useDispatch( blockEditorStore ); useEffect( () => { if ( mode ) { setBlockEditingMode( clientId, mode ); diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 64f62290340145..b7155452379309 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -30,7 +30,6 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings'; import BlockInfo from '../block-info-slot-fill'; import BlockQuickNavigation from '../block-quick-navigation'; -import { unlock } from '../../lock-unlock'; function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { const contentClientIds = useSelect( @@ -39,7 +38,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { getClientIdsOfDescendants, getBlockName, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter( ( clientId ) => getBlockName( clientId ) !== 'core/list-item' && diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index c739c98f86e75b..7b37b93d8be8d1 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -15,7 +15,6 @@ import { getDefaultBlockName } from '@wordpress/blocks'; import DefaultBlockAppender from '../default-block-appender'; import ButtonBlockAppender from '../button-block-appender'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; function DefaultAppender( { rootClientId } ) { const canInsertDefaultBlock = useSelect( ( select ) => @@ -48,7 +47,7 @@ function useAppender( rootClientId, CustomAppender ) { getSelectedBlockClientId, __unstableGetEditorMode, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); if ( CustomAppender === false ) { return false; diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index a2acb3c7b53be6..4bf9bb634dbf6f 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -37,7 +37,6 @@ import BlockHtml from './block-html'; import { useBlockProps } from './use-block-props'; import { store as blockEditorStore } from '../../store'; import { useLayout } from './layout'; -import { unlock } from '../../lock-unlock'; import { BlockListBlockContext } from './block-list-block-context'; /** @@ -102,7 +101,7 @@ function BlockListBlock( { getSettings, __unstableGetTemporarilyEditingAsBlocks, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); return { themeSupportsLayout: getSettings().supportsLayout, isTemporarilyEditingAsBlocks: diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index ecd53baceb8d6e..a60453716ff29c 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -11,7 +11,6 @@ import { isRTL } from '@wordpress/i18n'; */ import { store as blockEditorStore } from '../../store'; import { InsertionPointOpenRef } from '../block-tools/insertion-point'; -import { unlock } from '../../lock-unlock'; export function useInBetweenInserter() { const openRef = useContext( InsertionPointOpenRef ); @@ -29,7 +28,7 @@ export function useInBetweenInserter() { getTemplateLock, __unstableIsWithinBlockOverlay, getBlockEditingMode, - } = unlock( useSelect( blockEditorStore ) ); + } = useSelect( blockEditorStore ); const { showInsertionPoint, hideInsertionPoint } = useDispatch( blockEditorStore ); diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index b1d478d9c7a9e9..e4a4ff3b6a0a23 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -14,7 +14,6 @@ import useBlockDisplayInformation from '../use-block-display-information'; import BlockIcon from '../block-icon'; import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; /** * Block parent selector component, displaying the hierarchy of the @@ -30,7 +29,7 @@ export default function BlockParentSelector() { getBlockParents, getSelectedBlockClientId, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); const { hasBlockSupport } = select( blocksStore ); const selectedBlockClientId = getSelectedBlockClientId(); const parents = getBlockParents( selectedBlockClientId ); diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 4167a1a5702d9c..963cd8a475328a 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -32,7 +32,6 @@ import BlockEditVisuallyButton from '../block-edit-visually-button'; import { useShowHoveredOrFocusedGestures } from './utils'; import { store as blockEditorStore } from '../../store'; import __unstableBlockNameContext from './block-name-context'; -import { unlock } from '../../lock-unlock'; const BlockToolbar = ( { hideDragHandle } ) => { const { blockClientIds, blockType, isValid, isVisual, blockEditingMode } = @@ -44,7 +43,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { isBlockValid, getBlockRootClientId, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; const blockRootClientId = getBlockRootClientId( diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 9667cb21d99b74..18adf2c1262f71 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose'; import NavigableToolbar from '../navigable-toolbar'; import BlockToolbar from '../block-toolbar'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls'; function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { @@ -45,7 +44,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { getBlockParents, getSelectedBlockClientIds, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); const { getBlockType } = select( blocksStore ); const selectedBlockClientIds = getSelectedBlockClientIds(); const _selectedBlockClientId = selectedBlockClientIds[ 0 ]; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 5876eb4ec01e9e..6a4b5d8b98088a 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -158,6 +158,7 @@ export { export { default as __experimentalBlockPatternsList } from './block-patterns-list'; export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker'; export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header'; +export { useBlockEditingMode } from './block-editing-mode'; /* * State Related Components diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index e9eb4a78276861..d4845dc769c7fa 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -39,7 +39,6 @@ import { getBlockPositionDescription } from './utils'; import { store as blockEditorStore } from '../../store'; import useBlockDisplayInformation from '../use-block-display-information'; import { useBlockLock } from '../block-lock'; -import { unlock } from '../../lock-unlock'; import AriaReferencedText from './aria-referenced-text'; function ListViewBlock( { @@ -84,9 +83,7 @@ function ListViewBlock( { ); const blockEditingMode = useSelect( ( select ) => - unlock( select( blockEditorStore ) ).getBlockEditingMode( - clientId - ), + select( blockEditorStore ).getBlockEditingMode( clientId ), [ clientId ] ); diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index 867423991a1d8c..ba33e8ef8e74f3 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.js @@ -19,7 +19,6 @@ import { isPointContainedByRect, } from '../../utils/math'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; /** @typedef {import('../../utils/math').WPPoint} WPPoint */ /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */ @@ -155,7 +154,7 @@ export default function useBlockDropZone( { __unstableIsWithinBlockOverlay, __unstableHasActiveBlockOverlayActive, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); const blockEditingMode = getBlockEditingMode( targetRootClientId ); return ( blockEditingMode !== 'default' || diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index e4bdb5d37b16b1..f0a5bfb3902aaa 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -12,7 +12,6 @@ import { PrivateListView } from './components/list-view'; import BlockInfo from './components/block-info-slot-fill'; import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show'; import { cleanEmptyObject } from './hooks/utils'; -import { useBlockEditingMode } from './components/block-editing-mode'; import BlockQuickNavigation from './components/block-quick-navigation'; import { LayoutStyle } from './components/block-list/layout'; import { BlockRemovalWarningModal } from './components/block-removal-warning-modal'; @@ -40,7 +39,6 @@ lock( privateApis, { BlockInfo, useShouldContextualToolbarShow, cleanEmptyObject, - useBlockEditingMode, BlockQuickNavigation, LayoutStyle, BlockRemovalWarningModal, diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 17573d76d016f2..a8955f2245673f 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1878,3 +1878,42 @@ export const registerInserterMediaCategory = }, } ); }; + +/** + * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode + */ + +/** + * Sets the block editing mode for a given block. + * + * @see useBlockEditingMode + * + * @param {string} clientId The block client ID, or `''` for the root container. + * @param {BlockEditingMode} mode The block editing mode. One of `'disabled'`, + * `'contentOnly'`, or `'default'`. + * + * @return {Object} Action object. + */ +export function setBlockEditingMode( clientId = '', mode ) { + return { + type: 'SET_BLOCK_EDITING_MODE', + clientId, + mode, + }; +} + +/** + * Clears the block editing mode for a given block. + * + * @see useBlockEditingMode + * + * @param {string} clientId The block client ID, or `''` for the root container. + * + * @return {Object} Action object. + */ +export function unsetBlockEditingMode( clientId = '' ) { + return { + type: 'UNSET_BLOCK_EDITING_MODE', + clientId, + }; +} diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 6a17be50f5c8bc..b5677975364d13 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -73,45 +73,6 @@ export function showBlockInterface() { }; } -/** - * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode - */ - -/** - * Sets the block editing mode for a given block. - * - * @see useBlockEditingMode - * - * @param {string} clientId The block client ID, or `''` for the root container. - * @param {BlockEditingMode} mode The block editing mode. One of `'disabled'`, - * `'contentOnly'`, or `'default'`. - * - * @return {Object} Action object. - */ -export function setBlockEditingMode( clientId = '', mode ) { - return { - type: 'SET_BLOCK_EDITING_MODE', - clientId, - mode, - }; -} - -/** - * Clears the block editing mode for a given block. - * - * @see useBlockEditingMode - * - * @param {string} clientId The block client ID, or `''` for the root container. - * - * @return {Object} Action object. - */ -export function unsetBlockEditingMode( clientId = '' ) { - return { - type: 'UNSET_BLOCK_EDITING_MODE', - clientId, - }; -} - /** * Yields action objects used in signalling that the blocks corresponding to * the set of specified client IDs are to be removed. diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index e6fb17c5f6e3c7..13128150a11f26 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -3,21 +3,13 @@ */ import createSelector from 'rememo'; -/** - * WordPress dependencies - */ -import { select } from '@wordpress/data'; -import { store as blocksStore } from '@wordpress/blocks'; - /** * Internal dependencies */ import { - getBlockRootClientId, - getTemplateLock, - getBlockName, getBlockOrder, getBlockParents, + getBlockEditingMode, } from './selectors'; /** @@ -41,64 +33,6 @@ export function getLastInsertedBlocksClientIds( state ) { return state?.lastBlockInserted?.clientIds; } -/** - * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode - */ - -/** - * Returns the block editing mode for a given block. - * - * The mode can be one of three options: - * - * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be - * selected. - * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the - * toolbar, the block movers, block settings. - * - `'default'`: Allows editing the block as normal. - * - * Blocks can set a mode using the `useBlockEditingMode` hook. - * - * The mode is inherited by all of the block's inner blocks, unless they have - * their own mode. - * - * A template lock can also set a mode. If the template lock is `'contentOnly'`, - * the block's mode is overridden to `'contentOnly'` if the block has a content - * role attribute, or `'disabled'` otherwise. - * - * @see useBlockEditingMode - * - * @param {Object} state Global application state. - * @param {string} clientId The block client ID, or `''` for the root container. - * - * @return {BlockEditingMode} The block editing mode. One of `'disabled'`, - * `'contentOnly'`, or `'default'`. - */ -export function getBlockEditingMode( state, clientId = '' ) { - if ( state.blockEditingModes.has( clientId ) ) { - return state.blockEditingModes.get( clientId ); - } - if ( ! clientId ) { - return 'default'; - } - const rootClientId = getBlockRootClientId( state, clientId ); - const templateLock = getTemplateLock( state, rootClientId ); - if ( templateLock === 'contentOnly' ) { - const name = getBlockName( state, clientId ); - // TODO: Terrible hack! We're calling the global select() function - // here instead of using createRegistrySelector(). The problem with - // using createRegistrySelector() is that then the public - // block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't - // call this private block-editor selector due to a bug in - // @wordpress/data. See - // https://github.com/WordPress/gutenberg/pull/50985. - const isContent = - select( blocksStore ).__experimentalHasContentRoleAttribute( name ); - return isContent ? 'contentOnly' : 'disabled'; - } - const parentMode = getBlockEditingMode( state, rootClientId ); - return parentMode === 'contentOnly' ? 'default' : parentMode; -} - /** * Returns true if the block with the given client ID and all of its descendants * have an editing mode of 'disabled', or false otherwise. diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 45955366f1b3a4..76bcecf9da5769 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -14,19 +14,20 @@ import { getPossibleBlockTransformations, parse, switchToBlockType, + store as blocksStore, } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; import { symbol } from '@wordpress/icons'; import { create, remove, toHTMLString } from '@wordpress/rich-text'; import deprecated from '@wordpress/deprecated'; +import { createRegistrySelector } from '@wordpress/data'; /** * Internal dependencies */ import { mapRichTextSettings } from './utils'; import { orderBy } from '../utils/sorting'; -import { getBlockEditingMode } from './private-selectors'; /** * A block selection object. @@ -2884,3 +2885,59 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) { } return false; } + +/** + * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode + */ + +/** + * Returns the block editing mode for a given block. + * + * The mode can be one of three options: + * + * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be + * selected. + * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the + * toolbar, the block movers, block settings. + * - `'default'`: Allows editing the block as normal. + * + * Blocks can set a mode using the `useBlockEditingMode` hook. + * + * The mode is inherited by all of the block's inner blocks, unless they have + * their own mode. + * + * A template lock can also set a mode. If the template lock is `'contentOnly'`, + * the block's mode is overridden to `'contentOnly'` if the block has a content + * role attribute, or `'disabled'` otherwise. + * + * @see useBlockEditingMode + * + * @param {Object} state Global application state. + * @param {string} clientId The block client ID, or `''` for the root container. + * + * @return {BlockEditingMode} The block editing mode. One of `'disabled'`, + * `'contentOnly'`, or `'default'`. + */ +export const getBlockEditingMode = createRegistrySelector( + ( select ) => + ( state, clientId = '' ) => { + if ( state.blockEditingModes.has( clientId ) ) { + return state.blockEditingModes.get( clientId ); + } + if ( ! clientId ) { + return 'default'; + } + const rootClientId = getBlockRootClientId( state, clientId ); + const templateLock = getTemplateLock( state, rootClientId ); + if ( templateLock === 'contentOnly' ) { + const name = getBlockName( state, clientId ); + const isContent = + select( blocksStore ).__experimentalHasContentRoleAttribute( + name + ); + return isContent ? 'contentOnly' : 'disabled'; + } + const parentMode = getBlockEditingMode( state, rootClientId ); + return parentMode === 'contentOnly' ? 'default' : parentMode; + } +); diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 48fc234e0e6c21..4dc9adefb82b57 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -54,6 +54,8 @@ const { updateSettings, validateBlocksToTemplate, registerInserterMediaCategory, + setBlockEditingMode, + unsetBlockEditingMode, } = actions; describe( 'actions', () => { @@ -1323,4 +1325,30 @@ describe( 'actions', () => { } ); } ); } ); + + describe( 'setBlockEditingMode', () => { + it( 'should return the SET_BLOCK_EDITING_MODE action', () => { + expect( + setBlockEditingMode( + '14501cc2-90a6-4f52-aa36-ab6e896135d1', + 'default' + ) + ).toEqual( { + type: 'SET_BLOCK_EDITING_MODE', + clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1', + mode: 'default', + } ); + } ); + } ); + + describe( 'unsetBlockEditingMode', () => { + it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => { + expect( + unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' ) + ).toEqual( { + type: 'UNSET_BLOCK_EDITING_MODE', + clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1', + } ); + } ); + } ); } ); diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js index 01f6b85f5f9aa6..6a9593493fbc4d 100644 --- a/packages/block-editor/src/store/test/private-actions.js +++ b/packages/block-editor/src/store/test/private-actions.js @@ -4,8 +4,6 @@ import { hideBlockInterface, showBlockInterface, - setBlockEditingMode, - unsetBlockEditingMode, __experimentalUpdateSettings, } from '../private-actions'; @@ -26,32 +24,6 @@ describe( 'private actions', () => { } ); } ); - describe( 'setBlockEditingMode', () => { - it( 'should return the SET_BLOCK_EDITING_MODE action', () => { - expect( - setBlockEditingMode( - '14501cc2-90a6-4f52-aa36-ab6e896135d1', - 'default' - ) - ).toEqual( { - type: 'SET_BLOCK_EDITING_MODE', - clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1', - mode: 'default', - } ); - } ); - } ); - - describe( 'unsetBlockEditingMode', () => { - it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => { - expect( - unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' ) - ).toEqual( { - type: 'UNSET_BLOCK_EDITING_MODE', - clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1', - } ); - } ); - } ); - describe( '__experimentalUpdateSettings', () => { const experimentalSettings = { inserterMediaCategories: 'foo', diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index e826db4a62bb9d..746a51b6031101 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -1,23 +1,14 @@ -/** - * WordPress dependencies - */ -import { select } from '@wordpress/data'; - /** * Internal dependencies */ import { isBlockInterfaceHidden, getLastInsertedBlocksClientIds, - getBlockEditingMode, isBlockSubtreeDisabled, getEnabledClientIdsTree, getEnabledBlockParents, } from '../private-selectors'; - -jest.mock( '@wordpress/data/src/select', () => ( { - select: jest.fn(), -} ) ); +import { getBlockEditingMode } from '../selectors'; describe( 'private selectors', () => { describe( 'isBlockInterfaceHidden', () => { @@ -63,7 +54,7 @@ describe( 'private selectors', () => { } ); } ); - describe( 'block editing mode selectors', () => { + describe( 'isBlockSubtreeDisabled', () => { const baseState = { settings: {}, blocks: { @@ -130,264 +121,100 @@ describe( 'private selectors', () => { blockEditingModes: new Map( [] ), }; - describe( 'getBlockEditingMode', () => { - const __experimentalHasContentRoleAttribute = jest.fn( - () => false - ); - select.mockReturnValue( { + const __experimentalHasContentRoleAttribute = jest.fn( () => false ); + getBlockEditingMode.registry = { + select: jest.fn( () => ( { __experimentalHasContentRoleAttribute, - } ); - - it( 'should return default by default', () => { - expect( - getBlockEditingMode( - baseState, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'default' ); - } ); - - it( 'should return disabled if explicitly set', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], - ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'disabled' ); - } ); - - it( 'should return contentOnly if explicitly set', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ - 'b3247f75-fd94-4fef-97f9-5bfd162cc416', - 'contentOnly', - ], - ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'contentOnly' ); - } ); - - it( 'should return disabled if explicitly set on a parent', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], - ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'disabled' ); - } ); - - it( 'should return default if parent is set to contentOnly', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', - 'contentOnly', - ], - ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'default' ); - } ); - - it( 'should return disabled if overridden by a parent', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ '', 'disabled' ], - [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ], - [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], - ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'disabled' ); - } ); - - it( 'should return disabled if explicitly set on root', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'disabled' ); - } ); - - it( 'should return default if root is contentOnly', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ [ '', 'contentOnly' ] ] ), - }; - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'default' ); - } ); - - it( 'should return disabled if parent is locked and the block has no content role', () => { - const state = { - ...baseState, - blockListSettings: { - ...baseState.blockListSettings, - '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': { - templateLock: 'contentOnly', - }, - }, - }; - __experimentalHasContentRoleAttribute.mockReturnValueOnce( - false - ); - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'disabled' ); - } ); + } ) ), + }; - it( 'should return contentOnly if parent is locked and the block has a content role', () => { - const state = { - ...baseState, - blockListSettings: { - ...baseState.blockListSettings, - '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': { - templateLock: 'contentOnly', - }, - }, - }; - __experimentalHasContentRoleAttribute.mockReturnValueOnce( - true - ); - expect( - getBlockEditingMode( - state, - 'b3247f75-fd94-4fef-97f9-5bfd162cc416' - ) - ).toBe( 'contentOnly' ); - } ); + it( 'should return false when top level block is not disabled', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( false ); } ); - describe( 'isBlockSubtreeDisabled', () => { - it( 'should return false when top level block is not disabled', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( false ); - } ); - - it( 'should return true when top level block is disabled and there are no editing modes within it', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], - ] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( true ); - } ); + it( 'should return true when top level block is disabled and there are no editing modes within it', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + ] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( true ); + } ); - it( 'should return true when top level block is disabled via inheritence and there are no editing modes within it', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( true ); - } ); + it( 'should return true when top level block is disabled via inheritence and there are no editing modes within it', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( true ); + } ); - it( 'should return true when top level block is disabled and there are disabled editing modes within it', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], - [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], - ] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( true ); - } ); + it( 'should return true when top level block is disabled and there are disabled editing modes within it', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + ] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( true ); + } ); - it( 'should return false when top level block is disabled and there are non-disabled editing modes within it', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], - [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], - ] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( false ); - } ); + it( 'should return false when top level block is disabled and there are non-disabled editing modes within it', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], + ] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( false ); + } ); - it( 'should return false when top level block is disabled via inheritence and there are non-disabled editing modes within it', () => { - const state = { - ...baseState, - blockEditingModes: new Map( [ - [ '', 'disabled' ], - [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], - ] ), - }; - expect( - isBlockSubtreeDisabled( - state, - 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' - ) - ).toBe( false ); - } ); + it( 'should return false when top level block is disabled via inheritence and there are non-disabled editing modes within it', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ '', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], + ] ), + }; + expect( + isBlockSubtreeDisabled( + state, + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toBe( false ); } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index bc27bdc6b94b26..dfc27f6d21d090 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -73,6 +73,7 @@ const { __experimentalGetPatternTransformItems, wasBlockJustInserted, __experimentalGetGlobalBlocksByName, + getBlockEditingMode, } = selectors; describe( 'selectors', () => { @@ -4791,3 +4792,201 @@ describe( '__unstableGetClientIdsTree', () => { ] ); } ); } ); + +describe( 'getBlockEditingMode', () => { + const baseState = { + settings: {}, + blocks: { + byClientId: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // | Post Title + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // | Post Content + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | | Paragraph + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | | Paragraph + ] ), + order: new Map( [ + [ + '', + [ + '6cf70164-9097-4460-bcbf-200560546988', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + ], + ], + [ '6cf70164-9097-4460-bcbf-200560546988', [] ], + [ + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + [ + 'b26fc763-417d-4f01-b81c-2ec61e14a972', + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + ], + ], + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', [] ], + [ + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + [ + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + ], + ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ], + ] ), + parents: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', '' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ], + [ + 'b26fc763-417d-4f01-b81c-2ec61e14a972', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + ], + [ + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + ], + [ + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + ], + [ + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + ], + ] ), + }, + blockListSettings: { + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337': {}, + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {}, + }, + blockEditingModes: new Map( [] ), + }; + + const __experimentalHasContentRoleAttribute = jest.fn( () => false ); + getBlockEditingMode.registry = { + select: jest.fn( () => ( { + __experimentalHasContentRoleAttribute, + } ) ), + }; + + it( 'should return default by default', () => { + expect( + getBlockEditingMode( + baseState, + 'b3247f75-fd94-4fef-97f9-5bfd162cc416' + ) + ).toBe( 'default' ); + } ); + + it( 'should return disabled if explicitly set', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'disabled' ); + } ); + + it( 'should return contentOnly if explicitly set', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'contentOnly' ], + ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'contentOnly' ); + } ); + + it( 'should return disabled if explicitly set on a parent', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'disabled' ); + } ); + + it( 'should return default if parent is set to contentOnly', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'contentOnly' ], + ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'default' ); + } ); + + it( 'should return disabled if overridden by a parent', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ '', 'disabled' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'disabled' ); + } ); + + it( 'should return disabled if explicitly set on root', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'disabled' ); + } ); + + it( 'should return default if root is contentOnly', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ [ '', 'contentOnly' ] ] ), + }; + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'default' ); + } ); + + it( 'should return disabled if parent is locked and the block has no content role', () => { + const state = { + ...baseState, + blockListSettings: { + ...baseState.blockListSettings, + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': { + templateLock: 'contentOnly', + }, + }, + }; + __experimentalHasContentRoleAttribute.mockReturnValueOnce( false ); + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'disabled' ); + } ); + + it( 'should return contentOnly if parent is locked and the block has a content role', () => { + const state = { + ...baseState, + blockListSettings: { + ...baseState.blockListSettings, + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': { + templateLock: 'contentOnly', + }, + }, + }; + __experimentalHasContentRoleAttribute.mockReturnValueOnce( true ); + expect( + getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) + ).toBe( 'contentOnly' ); + } ); +} ); diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 9bd175607c5248..6c9505d8b2d986 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -17,7 +17,7 @@ import { useBlockProps, store as blockEditorStore, __experimentalUseBorderProps as useBorderProps, - privateApis as blockEditorPrivateApis, + useBlockEditingMode, } from '@wordpress/block-editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -28,7 +28,6 @@ import { store as noticesStore } from '@wordpress/notices'; * Internal dependencies */ import Image from './image'; -import { unlock } from '../lock-unlock'; /** * Module constants @@ -41,8 +40,6 @@ import { ALLOWED_MEDIA_TYPES, } from './constants'; -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); - export const pickRelevantMediaFiles = ( image, size ) => { const imageProps = Object.fromEntries( Object.entries( image ?? {} ).filter( ( [ key ] ) => diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index fffbdc71d74811..30181c9044c34d 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -18,7 +18,7 @@ import { __experimentalImageURLInputUI as ImageURLInputUI, __experimentalImageSizeControl as ImageSizeControl, store as blockEditorStore, - privateApis as blockEditorPrivateApis, + useBlockEditingMode, } from '@wordpress/block-editor'; import { PanelBody, @@ -44,9 +44,6 @@ import { LINK_DESTINATION_ATTACHMENT, TEMPLATE, } from './constants'; -import { unlock } from '../lock-unlock'; - -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); // this limits the resize to a safe zone to avoid making broken layouts const applyWidthConstraints = ( width ) => diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 6f629c20c0cfd9..90b83915a7035a 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -26,7 +26,7 @@ import { __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseBlockOverlayActive as useBlockOverlayActive, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, - privateApis as blockEditorPrivateApis, + useBlockEditingMode, } from '@wordpress/block-editor'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; @@ -70,7 +70,6 @@ import ManageMenusButton from './manage-menus-button'; import MenuInspectorControls from './menu-inspector-controls'; import DeletedNavigationWarning from './deleted-navigation-warning'; import { unlock } from '../../lock-unlock'; -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); function Navigation( { attributes, diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index bf5b84eeb02963..641280bb8a9d59 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -9,11 +9,6 @@ import { useBlockProps, } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import { unlock } from '../lock-unlock'; - const PatternEdit = ( { attributes, clientId } ) => { const selectedPattern = useSelect( ( select ) => @@ -25,10 +20,9 @@ const PatternEdit = ( { attributes, clientId } ) => { const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); - const { setBlockEditingMode } = unlock( useDispatch( blockEditorStore ) ); - const { getBlockRootClientId, getBlockEditingMode } = unlock( - useSelect( blockEditorStore ) - ); + const { setBlockEditingMode } = useDispatch( blockEditorStore ); + const { getBlockRootClientId, getBlockEditingMode } = + useSelect( blockEditorStore ); // Run this effect when the component loads. // This adds the Pattern's contents to the post. diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index 92521aa8d86b80..28d9b8cdcfd8ff 100644 --- a/packages/block-library/src/post-title/edit.js +++ b/packages/block-library/src/post-title/edit.js @@ -13,7 +13,7 @@ import { useBlockProps, PlainText, HeadingLevelDropdown, - privateApis as blockEditorPrivateApis, + useBlockEditingMode, } from '@wordpress/block-editor'; import { ToggleControl, TextControl, PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -24,9 +24,6 @@ import { useEntityProp } from '@wordpress/core-data'; * Internal dependencies */ import { useCanEditEntity } from '../utils/hooks'; -import { unlock } from '../lock-unlock'; - -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); export default function PostTitleEdit( { attributes: { level, textAlign, isLink, rel, linkTarget }, diff --git a/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js index ea9e0c8c966ec7..833ff6b0ef378b 100644 --- a/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js +++ b/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js @@ -59,9 +59,8 @@ export default function NavigationBlockEditorProvider( { children } ) { }; }, [] ); - const { selectBlock, setBlockEditingMode, unsetBlockEditingMode } = unlock( - useDispatch( blockEditorStore ) - ); + const { selectBlock, setBlockEditingMode, unsetBlockEditingMode } = + useDispatch( blockEditorStore ); const navigationBlockClientId = blocks && blocks[ 0 ]?.clientId; diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js index eb0c622840a756..9d28c01164f29b 100644 --- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js +++ b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js @@ -3,15 +3,12 @@ */ import { createHigherOrderComponent } from '@wordpress/compose'; import { addFilter, removeFilter } from '@wordpress/hooks'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { useBlockEditingMode } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import { unlock } from '../../lock-unlock'; - -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); const PAGE_CONTENT_BLOCK_TYPES = [ 'core/post-title', diff --git a/packages/edit-site/src/hooks/navigation-menu-edit.js b/packages/edit-site/src/hooks/navigation-menu-edit.js index 6b2c1166c9aa2f..d99ee57e0d953a 100644 --- a/packages/edit-site/src/hooks/navigation-menu-edit.js +++ b/packages/edit-site/src/hooks/navigation-menu-edit.js @@ -3,10 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { - BlockControls, - privateApis as blockEditorPrivateApis, -} from '@wordpress/block-editor'; +import { BlockControls, useBlockEditingMode } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { ToolbarButton } from '@wordpress/components'; import { addFilter } from '@wordpress/hooks'; @@ -20,7 +17,6 @@ import { useLink } from '../components/routes/link'; import { unlock } from '../lock-unlock'; const { useLocation } = unlock( routerPrivateApis ); -const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); function NavigationMenuEdit( { attributes } ) { const { ref } = attributes; diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js index 455f18ef74eba3..e481606524f60d 100644 --- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js +++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js @@ -7,6 +7,7 @@ import { InspectorAdvancedControls, store as blockEditorStore, privateApis as blockEditorPrivateApis, + useBlockEditingMode, } from '@wordpress/block-editor'; import { BaseControl, Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; @@ -27,7 +28,6 @@ import { unlock } from '../../lock-unlock'; const { GlobalStylesContext, - useBlockEditingMode, __experimentalUseGlobalBehaviors: useGlobalBehaviors, __experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel, } = unlock( blockEditorPrivateApis );