Fix Modify button not showing if it's not selected

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' ) }
 								</MenuItem>
 							) }
+						{ selectedClientIds.length === 1 && (
+							<ModifyContentLockMenuItem
+								clientId={ selectedClientIds[ 0 ] }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }

packages/block-editor/src/components/content-lock/index.js

@@ -0,0 +1 @@
+export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';

packages/block-editor/src/components/content-lock/modify-content-lock-menu-item.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
+
+export function ModifyContentLockMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+		( select ) => {
+			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 && (
+			<MenuItem
+				onClick={ () => {
+					modifyContentLockBlock( clientId );
+					onClose();
+				} }
+			>
+				{ __( 'Modify' ) }
+			</MenuItem>
+		)
+	);
+}

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 && (
-				<>
-					<BlockControls group="other">
-						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
-							{ __( 'Done' ) }
-						</ToolbarButton>
-					</BlockControls>
-				</>
-			) }
-			{ showStartEditingAsBlocks && (
-				<BlockSettingsMenuControls>
-					{ ( { selectedClientIds, onClose } ) =>
-						selectedClientIds.length === 1 &&
-						selectedClientIds[ 0 ] === clientId && (
-							<MenuItem
-								onClick={ () => {
-									modifyContentLockBlock( clientId );
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						)
-					}
-				</BlockSettingsMenuControls>
-			) }
-		</>
+		showStopEditingAsBlocks && (
+			<BlockControls group="other">
+				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
+					{ __( 'Done' ) }
+				</ToolbarButton>
+			</BlockControls>
+		)
 	);
 }
 

packages/block-editor/src/store/private-actions.js

@@ -400,6 +400,7 @@ export function expandBlock( clientId ) {
 export const modifyContentLockBlock =
 	( clientId ) =>
 	( { select, dispatch } ) => {
+		dispatch.selectBlock( clientId );
 		dispatch.__unstableMarkNextChangeAsNotPersistent();
 		dispatch.updateBlockAttributes( clientId, {
 			templateLock: undefined,

packages/editor/src/components/block-settings-menu/content-only-settings-menu.js

@@ -123,22 +123,18 @@ 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 (
 		<>
 			<BlockSettingsMenuFirstItem>
 				<MenuItem
 					onClick={ () => {
-						selectBlock( contentLockingParent );
 						modifyContentLockBlock( contentLockingParent );
 						onClose();
 					} }