Add template contextual commands

packages/core-commands/src/site-editor-navigation-commands.js

@@ -15,7 +15,7 @@ import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
  */
 import { unlock } from './lock-unlock';
 
-const { useCommandLoader, useCommand } = unlock( privateApis );
+const { useCommandLoader } = unlock( privateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 const icons = {
@@ -108,8 +108,6 @@ const useTemplatePartNavigationCommandLoader =
 	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
 
 export function useSiteEditorNavigationCommands() {
-	const history = useHistory();
-
 	useCommandLoader( {
 		name: 'core/edit-site/navigate-pages',
 		group: __( 'Pages' ),
@@ -130,26 +128,4 @@ export function useSiteEditorNavigationCommands() {
 		group: __( 'Template Parts' ),
 		hook: useTemplatePartNavigationCommandLoader,
 	} );
-
-	useCommand( {
-		name: 'core/edit-site/browse-styles',
-		label: __( 'Browse Styles' ),
-		group: __( 'Site Editor' ),
-		context: 'site-editor',
-		icon: layout,
-		callback: () => {
-			const isSiteEditor = getPath( window.location.href )?.includes(
-				'site-editor.php'
-			);
-			const args = {
-				path: '/styles',
-			};
-			const targetUrl = addQueryArgs( 'site-editor.php', args );
-			if ( isSiteEditor ) {
-				history.push( args );
-			} else {
-				document.location = targetUrl;
-			}
-		},
-	} );
 }

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

@@ -48,6 +48,7 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
@@ -71,6 +72,7 @@ export default function Layout() {
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
 	useCommands();
+	useEditModeCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();

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

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { trash } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+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 { unlock } from '../../private-apis';
+
+const { useCommandLoader } = unlock( commandsPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+function useEditModeCommandLoader() {
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const history = useHistory();
+	const { isLoaded, record: template } = useEditedEntityRecord();
+	const isRemovable =
+		isLoaded && !! template && isTemplateRemovable( template );
+	const isRevertable =
+		isLoaded && !! template && isTemplateRevertable( template );
+
+	const commands = [];
+	if ( isRemovable ) {
+		const label =
+			template.type === 'wp_template'
+				? __( 'Delete template' )
+				: __( 'Delete template part' );
+		commands.push( {
+			name: label,
+			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'
+				? __( 'Clear template customizations' )
+				: __( 'Clear template part customizations' );
+		commands.push( {
+			name: label,
+			label,
+			icon: trash,
+			callback: ( { close } ) => {
+				revertTemplate( template, { allowUndo: false } );
+				close();
+			},
+		} );
+	}
+
+	return {
+		isLoading: ! isLoaded,
+		commands,
+	};
+}
+
+export function useEditModeCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/manipulate-document',
+		group: __( 'Templates' ),
+		hook: useEditModeCommandLoader,
+		context: 'site-editor-edit',
+	} );
+}