diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 1edf02eb368945..39063db4f52e02 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -21,7 +21,7 @@ import { import { BlockLockMenuItem, useBlockLock } from '../block-lock'; import { store as blockEditorStore } from '../../store'; import BlockModeToggle from '../block-settings-menu/block-mode-toggle'; - +import { ModifyContentLockMenuItem } from '../content-lock'; import { BlockRenameControl, useBlockRename } from '../block-rename'; const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); @@ -108,6 +108,12 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { { __( 'Move to' ) } ) } + { selectedClientIds.length === 1 && ( + + ) } { fillProps?.count === 1 && ! isContentOnly && ( { + const { + getContentLockingParent, + getTemplateLock, + getTemporarilyEditingAsBlocks, + } = unlock( select( blockEditorStore ) ); + return { + templateLock: getTemplateLock( clientId ), + isLockedByParent: !! getContentLockingParent( clientId ), + isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId, + }; + }, + [ clientId ] + ); + const blockEditorActions = useDispatch( blockEditorStore ); + const isContentLocked = + ! isLockedByParent && templateLock === 'contentOnly'; + if ( ! isContentLocked && ! isEditingAsBlocks ) { + return null; + } + + const { modifyContentLockBlock } = unlock( blockEditorActions ); + const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked; + + return ( + showStartEditingAsBlocks && ( + { + modifyContentLockBlock( clientId ); + onClose(); + } } + > + { _x( 'Modify', 'Unlock content locked blocks' ) } + + ) + ); +} diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js index 7cca4b325b09d7..f5e3bde31ce509 100644 --- a/packages/block-editor/src/hooks/content-lock-ui.js +++ b/packages/block-editor/src/hooks/content-lock-ui.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { ToolbarButton, MenuItem } from '@wordpress/components'; +import { ToolbarButton } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { useCallback } from '@wordpress/element'; @@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element'; * Internal dependencies */ import { store as blockEditorStore } from '../store'; -import { BlockControls, BlockSettingsMenuControls } from '../components'; +import { BlockControls } from '../components'; import { unlock } from '../lock-unlock'; // The implementation of content locking is mainly in this file, although the mechanism @@ -19,7 +19,7 @@ import { unlock } from '../lock-unlock'; // Besides the components on this file and the file referenced above the implementation // also includes artifacts on the store (actions, reducers, and selector). -function ContentLockControlsPure( { clientId, isSelected } ) { +function ContentLockControlsPure( { clientId } ) { const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect( ( select ) => { const { @@ -36,9 +36,7 @@ function ContentLockControlsPure( { clientId, isSelected } ) { [ clientId ] ); - const { stopEditingAsBlocks, modifyContentLockBlock } = unlock( - useDispatch( blockEditorStore ) - ); + const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) ); const isContentLocked = ! isLockedByParent && templateLock === 'contentOnly'; @@ -51,38 +49,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) { } const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked; - const showStartEditingAsBlocks = - ! isEditingAsBlocks && isContentLocked && isSelected; return ( - <> - { showStopEditingAsBlocks && ( - <> - - - { __( 'Done' ) } - - - - ) } - { showStartEditingAsBlocks && ( - - { ( { selectedClientIds, onClose } ) => - selectedClientIds.length === 1 && - selectedClientIds[ 0 ] === clientId && ( - { - modifyContentLockBlock( clientId ); - onClose(); - } } - > - { __( 'Modify' ) } - - ) - } - - ) } - + showStopEditingAsBlocks && ( + + + { __( 'Done' ) } + + + ) ); } diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 74aec3c49d1e89..dc57d61fd6b76c 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -367,6 +367,7 @@ export function expandBlock( clientId ) { export const modifyContentLockBlock = ( clientId ) => ( { select, dispatch } ) => { + dispatch.selectBlock( clientId ); dispatch.__unstableMarkNextChangeAsNotPersistent(); dispatch.updateBlockAttributes( clientId, { templateLock: undefined, diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index b5e93659a4b7ab..fcf7adfa77635c 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -10,7 +10,7 @@ import { import { store as coreStore } from '@wordpress/core-data'; import { __experimentalText as Text, MenuItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -137,27 +137,23 @@ function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) { ); const blockDisplayInformation = useBlockDisplayInformation( contentLockingParent ); - // Disable reason: We're using a hook here so it has to be on top-level. - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const { modifyContentLockBlock, selectBlock } = unlock( - useDispatch( blockEditorStore ) - ); - + const blockEditorActions = useDispatch( blockEditorStore ); if ( ! blockDisplayInformation?.title ) { return null; } + const { modifyContentLockBlock } = unlock( blockEditorActions ); + return ( <> { - selectBlock( contentLockingParent ); modifyContentLockBlock( contentLockingParent ); onClose(); } } > - { __( 'Unlock' ) } + { _x( 'Unlock', 'Unlock content locked blocks' ) }