From 9447fba1ae31b5f14f23c5f8315c21a7cd09c621 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 26 Apr 2024 09:25:17 +0800
Subject: [PATCH] Add content only description for patterns and templates

---
 .../block-settings-menu-controls/index.js     |   2 +-
 .../block-settings-dropdown.js                |  20 ++-
 .../content-only-settings-menu.js             | 118 ++++++++++++++++++
 .../components/block-settings-menu/style.scss |   4 +
 .../editor/src/components/provider/index.js   |   2 +
 packages/editor/src/style.scss                |   1 +
 6 files changed, 140 insertions(+), 7 deletions(-)
 create mode 100644 packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
 create mode 100644 packages/editor/src/components/block-settings-menu/style.scss

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 d043ae34aa0d27..4ee58f80e82b53 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
@@ -106,7 +106,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 								{ __( 'Move to' ) }
 							</MenuItem>
 						) }
-						{ fillProps?.count === 1 && (
+						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }
 								onToggle={ fillProps?.onClose }
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 39e6af2eda5118..0a644fa4dcc35d 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -66,6 +66,7 @@ export function BlockSettingsDropdown( {
 		previousBlockClientId,
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
+		isContentOnly,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -76,6 +77,7 @@ export function BlockSettingsDropdown( {
 				getSelectedBlockClientIds,
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
+				getBlockEditingMode,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -99,6 +101,8 @@ export function BlockSettingsDropdown( {
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
+				isContentOnly:
+					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 			};
 		},
 		[ firstBlockClientId ]
@@ -281,11 +285,15 @@ export function BlockSettingsDropdown( {
 										clientId={ firstBlockClientId }
 									/>
 								) }
-								<CopyMenuItem
-									clientIds={ clientIds }
-									onCopy={ onCopy }
-									shortcut={ displayShortcut.primary( 'c' ) }
-								/>
+								{ ! isContentOnly && (
+									<CopyMenuItem
+										clientIds={ clientIds }
+										onCopy={ onCopy }
+										shortcut={ displayShortcut.primary(
+											'c'
+										) }
+									/>
+								) }
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(
@@ -321,7 +329,7 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							{ canCopyStyles && (
+							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>
 									<CopyMenuItem
 										clientIds={ clientIds }
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
new file mode 100644
index 00000000000000..0fe33f1bb7915f
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+function ContentOnlySettingsMenuItems( { clientId } ) {
+	const { entity, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const contentOnly =
+				getBlockEditingMode( clientId ) === 'contentOnly';
+			if ( ! contentOnly ) return {};
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else {
+				const templateId = select( editorStore ).getCurrentTemplateId();
+				if ( templateId ) {
+					record = select( coreStore ).getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+					);
+				}
+			}
+			return {
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! entity ) return null;
+
+	const isPattern = entity.type === 'wp_block';
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<Text
+					variant="muted"
+					as="p"
+					className="editor-content-only-settings-menu__description"
+				>
+					{ isPattern
+						? sprintf(
+								// translators: %s: pattern's title.
+								__(
+									'This block is part of the synced pattern: "%s". To move, delete, or edit other properties, you must edit the pattern.'
+								),
+								entity.title.raw
+						  )
+						: sprintf(
+								// translators: %s: template's title.
+								__(
+									'This block is part of the template: "%s". To move, delete, or edit other properties, you must edit the template.'
+								),
+								entity.title.rendered
+						  ) }
+				</Text>
+			</BlockSettingsMenuFirstItem>
+			<MenuItem
+				onClick={ () => {
+					onNavigateToEntityRecord( {
+						postId: entity.id,
+						postType: entity.type,
+					} );
+				} }
+			>
+				{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+			</MenuItem>
+		</>
+	);
+}
+
+export default function TemplateContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
new file mode 100644
index 00000000000000..53fa391d28ef04
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index df0fb488c69dc1..4f359104ea02da 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -28,6 +28,7 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -264,6 +265,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index db6aebb8432a7d..107131cc584cef 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -3,6 +3,7 @@
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
+@import "./components/block-settings-menu/style.scss";
 @import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
 @import "./components/document-tools/style.scss";