Add global styles related commands (#51637)

Co-authored-by: Dean Sas <dean.sas@automattic.com>

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

@@ -162,7 +162,7 @@ function useSiteEditorBasicNavigationCommands() {
 		} );
 
 		result.push( {
-			name: 'core/edit-site/open-styles',
+			name: 'core/edit-site/open-style-variations',
 			label: __( 'Open style variations' ),
 			icon: styles,
 			callback: ( { close } ) => {

packages/edit-site/src/components/global-styles/ui.js

@@ -311,7 +311,10 @@ function GlobalStylesEditorCanvasContainerLink() {
 			// Switching to any container other than revisions should
 			// redirect from the revisions screen to the root global styles screen.
 			goTo( '/' );
+		} else if ( editorCanvasContainerView === 'global-styles-css' ) {
+			goTo( '/css' );
 		}
+
 		// location?.path is not a dependency because we don't want to track it.
 		// Doing so will cause an infinite loop. We could abstract logic to avoid
 		// having to disable the check later.

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

@@ -47,6 +47,7 @@ import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
@@ -64,6 +65,7 @@ export default function Layout() {
 	useSyncCanvasModeWithURL();
 	useCommands();
 	useEditModeCommands();
+	useCommonCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();

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

@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { trash, backup, help, styles } from '@wordpress/icons';
+import { useCommandLoader, useCommand } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+function useGlobalStylesResetCommands() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const commands = useMemo( () => {
+		if ( ! canReset ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/reset-global-styles',
+				label: __( 'Reset styles to defaults' ),
+				icon: trash,
+				callback: ( { close } ) => {
+					close();
+					onReset();
+				},
+			},
+		];
+	}, [ canReset, onReset ] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+function useGlobalStylesOpenCssCommands() {
+	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const history = useHistory();
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! canEditCSS ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-styles-css',
+				label: __( 'Open CSS' ),
+				icon: styles,
+				callback: ( { close } ) => {
+					close();
+					history.push( {
+						path: '/wp_global_styles',
+						canvas: 'edit',
+					} );
+					openGeneralSidebar( 'edit-site/global-styles' );
+					setEditorCanvasContainerView( 'global-styles-css' );
+				},
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setEditorCanvasContainerView,
+		canEditCSS,
+	] );
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+export function useCommonCommands() {
+	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { set } = useDispatch( preferencesStore );
+	const history = useHistory();
+
+	useCommand( {
+		name: 'core/edit-site/open-global-styles-revisions',
+		label: __( 'Open styles revisions' ),
+		icon: backup,
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		},
+	} );
+
+	useCommand( {
+		name: 'core/edit-site/open-styles',
+		label: __( 'Open styles' ),
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+		},
+		icon: styles,
+	} );
+
+	useCommand( {
+		name: 'core/edit-site/toggle-styles-welcome-guide',
+		label: __( 'Learn about styles' ),
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+			set( 'core/edit-site', 'welcomeGuideStyles', true );
+			// sometimes there's a focus loss that happens after some time
+			// that closes the modal, we need to force reopening it.
+			setTimeout( () => {
+				set( 'core/edit-site', 'welcomeGuideStyles', true );
+			}, 500 );
+		},
+		icon: help,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/reset-global-styles',
+		hook: useGlobalStylesResetCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-css',
+		hook: useGlobalStylesOpenCssCommands,
+	} );
+}