Command Center: Add contextual commands to edit template parts

WordPress · May 22, 2023 · bdc6bfd · bdc6bfd
1 parent 8b12c1c
commit bdc6bfd
Showing 1 changed file with 85 additions and 38 deletions.
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -1,11 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash, backup } from '@wordpress/icons';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { trash, backup, edit } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +20,10 @@ import { unlock } from '../../private-apis';
 const { useHistory } = unlock( routerPrivateApis );
 
 function useEditModeCommandLoader() {
+	const templateParts = useSelect(
+		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
+		[]
+	);
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const history = useHistory();
 	const { isLoaded, record: template } = useEditedEntityRecord();
@@ -27,42 +32,84 @@ function useEditModeCommandLoader() {
 	const isRevertable =
 		isLoaded && !! template && isTemplateRevertable( template );
 
-	const commands = [];
-	if ( isRemovable ) {
-		const label =
-			template.type === 'wp_template'
-				? __( 'Delete template' )
-				: __( 'Delete template part' );
-		commands.push( {
-			name: 'core/remove-template',
-			label,
-			icon: trash,
-			context: 'site-editor-edit',
-			callback: ( { close } ) => {
-				removeTemplate( template );
-				// Navigate to the template list
-				history.push( {
-					path: '/' + template.type,
-				} );
-				close();
-			},
+	const commands = useMemo( () => {
+		const result = [];
+		templateParts.forEach( ( { templatePart } ) => {
+			result.push( {
+				name: 'core/edit-template-part' + templatePart.id,
+				label: sprintf(
+					/* translators: %s: template part title */
+					__( 'Edit %s' ),
+					templatePart.title?.rendered
+				),
+				icon: edit,
+				context: 'site-editor-edit',
+				callback: ( { close } ) => {
+					const fromState =
+						template.type === 'wp_template'
+							? {
+									fromTemplateId: template.id,
+							  }
+							: undefined;
+					history.push(
+						{
+							postId: templatePart.id,
+							postType: templatePart.type,
+							canvas: 'edit',
+						},
+						fromState
+					);
+					close();
+				},
+			} );
 		} );
-	}
-	if ( isRevertable ) {
-		const label =
-			template.type === 'wp_template'
-				? __( 'Reset template' )
-				: __( 'Reset template part' );
-		commands.push( {
-			name: 'core/reset-template',
-			label,
-			icon: backup,
-			callback: ( { close } ) => {
-				revertTemplate( template );
-				close();
-			},
-		} );
-	}
+
+		if ( isRemovable ) {
+			const label =
+				template.type === 'wp_template'
+					? __( 'Delete template' )
+					: __( 'Delete template part' );
+			result.push( {
+				name: 'core/remove-template',
+				label,
+				icon: trash,
+				context: 'site-editor-edit',
+				callback: ( { close } ) => {
+					removeTemplate( template );
+					// Navigate to the template list
+					history.push( {
+						path: '/' + template.type,
+					} );
+					close();
+				},
+			} );
+		}
+		if ( isRevertable ) {
+			const label =
+				template.type === 'wp_template'
+					? __( 'Reset template' )
+					: __( 'Reset template part' );
+			result.push( {
+				name: 'core/reset-template',
+				label,
+				icon: backup,
+				callback: ( { close } ) => {
+					revertTemplate( template );
+					close();
+				},
+			} );
+		}
+
+		return result;
+	}, [
+		isRemovable,
+		isRevertable,
+		templateParts,
+		history,
+		removeTemplate,
+		revertTemplate,
+		template,
+	] );
 
 	return {
 		isLoading: ! isLoaded,