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 && (
+
+ )
+ );
+}
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 && (
-
- )
- }
-
- ) }
- >
+ 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 (
<>