Commands: Unify the editor context between post and site editors (#61862

)

packages/edit-post/src/components/layout/index.js

@@ -204,7 +204,7 @@ function Layout( { initialPost } ) {
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
 		? 'block-selection-edit'
-		: 'post-editor-edit';
+		: 'entity-edit';
 	useCommandContext( commandContext );
 
 	const styles = useEditorStyles();

packages/edit-site/src/components/editor/index.js

@@ -48,7 +48,6 @@ import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
@@ -267,12 +266,7 @@ export default function Editor( { isLoading, onClick } ) {
 			<GlobalStylesRenderer />
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
-			{ showVisualEditor && (
-				<>
-					<TemplatePartConverter />
-					<PatternModal />
-				</>
-			) }
+			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (

packages/edit-site/src/components/layout/index.js

@@ -150,7 +150,7 @@ export default function Layout() {
 	let commandContext = 'site-editor';
 
 	if ( canvasMode === 'edit' ) {
-		commandContext = 'site-editor-edit';
+		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';

packages/edit-site/src/hooks/commands/use-edit-mode-commands.js

@@ -4,7 +4,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	edit,
 	trash,
 	rotateLeft,
 	rotateRight,
@@ -13,7 +12,6 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	symbol,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -30,9 +28,8 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
-import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
 const { interfaceStore } = unlock( editorPrivateApis );
@@ -225,58 +222,18 @@ function useEditUICommands() {
 	};
 }
 
-function usePatternCommands() {
-	const { isLoaded, record: pattern } = useEditedEntityRecord();
-	const { openModal } = useDispatch( interfaceStore );
-
-	if ( ! isLoaded ) {
-		return { isLoading: true, commands: [] };
-	}
-
-	const commands = [];
-
-	if ( pattern?.type === PATTERN_TYPES.user ) {
-		commands.push( {
-			name: 'core/rename-pattern',
-			label: __( 'Rename pattern' ),
-			icon: edit,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.rename );
-				close();
-			},
-		} );
-		commands.push( {
-			name: 'core/duplicate-pattern',
-			label: __( 'Duplicate pattern' ),
-			icon: symbol,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.duplicate );
-				close();
-			},
-		} );
-	}
-
-	return { isLoading: false, commands };
-}
-
 export function useEditModeCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,
-		context: 'site-editor-edit',
+		context: 'entity-edit',
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
 		hook: useManipulateDocumentCommands,
 	} );
 
-	useCommandLoader( {
-		name: 'core/edit-site/patterns',
-		hook: usePatternCommands,
-		context: 'site-editor-edit',
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/edit-ui',
 		hook: useEditUICommands,

packages/editor/src/components/commands/index.js

@@ -3,7 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { code, listView, external, keyboard } from '@wordpress/icons';
+import {
+	code,
+	edit,
+	listView,
+	external,
+	keyboard,
+	symbol,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
@@ -15,6 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+import { modalName as patternRenameModalName } from '../pattern-rename-modal';
+import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
 
 function useEditorCommandLoader() {
 	const {
@@ -221,9 +231,49 @@ function useEditorCommandLoader() {
 	};
 }
 
+function useEditedEntityContextualCommands() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+	const { openModal } = useDispatch( interfaceStore );
+	const commands = [];
+
+	if ( postType === PATTERN_POST_TYPE ) {
+		commands.push( {
+			name: 'core/rename-pattern',
+			label: __( 'Rename pattern' ),
+			icon: edit,
+			callback: ( { close } ) => {
+				openModal( patternRenameModalName );
+				close();
+			},
+		} );
+		commands.push( {
+			name: 'core/duplicate-pattern',
+			label: __( 'Duplicate pattern' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				openModal( patternDuplicateModalName );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
 export default function useCommands() {
 	useCommandLoader( {
 		name: 'core/editor/edit-ui',
 		hook: useEditorCommandLoader,
 	} );
+
+	useCommandLoader( {
+		name: 'core/editor/contextual-commands',
+		hook: useEditedEntityContextualCommands,
+		context: 'entity-edit',
+	} );
 }

packages/editor/src/components/pattern-duplicate-modal/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-duplicate';
+
+export default function PatternDuplicateModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ () => closeModal() }
+			pattern={ record }
+		/>
+	);
+}

packages/editor/src/components/pattern-rename-modal/index.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-rename';
+
+export default function PatternRenameModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ record } />;
+}