Command Palette: Move custom CSS command to core-commands from edit-site package (#71565)

yashjawale · yashjawale · t-hamano · web-flow · commit c740f2671122 · 2025-09-10T23:08:02.000+09:00
* feat: move custom CSS command to core-commands package

* fix: rename 'go to custom CSS' command to 'open custom CSS'

* fix: prevent custom CSS command from showing up by default

Co-authored-by: Aki Hamano &lt;54422211+t-hamano@users.noreply.github.com&gt;

---------

Co-authored-by: yashjawale &lt;yashjawale@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -14,6 +14,7 @@ import {
 	symbolFilled,
 	styles,
 	navigation,
+	brush,
 } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs, getPath } from '@wordpress/url';
@@ -400,6 +401,61 @@ const getSiteEditorBasicNavigationCommands = () =>
 		};
 	};
 
+const getGlobalStylesOpenCssCommands = () =>
+	function useGlobalStylesOpenCssCommands() {
+		const history = useHistory();
+		const isSiteEditor = getPath( window.location.href )?.includes(
+			'site-editor.php'
+		);
+		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' ],
+			};
+		}, [] );
+
+		const commands = useMemo( () => {
+			if ( ! canEditCSS ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/open-styles-css',
+					label: __( 'Open custom CSS' ),
+					icon: brush,
+					callback: ( { close } ) => {
+						close();
+
+						if ( isSiteEditor ) {
+							history.navigate( '/styles?section=/css' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/styles',
+									section: '/css',
+								}
+							);
+						}
+					},
+				},
+			];
+		}, [ history, canEditCSS, isSiteEditor ] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
 export function useSiteEditorNavigationCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/navigate-pages',
@@ -422,4 +478,8 @@ export function useSiteEditorNavigationCommands() {
 		hook: getSiteEditorBasicNavigationCommands(),
 		context: 'site-editor',
 	} );
+	useCommandLoader( {
+		name: 'core/edit-site/global-styles-css',
+		hook: getGlobalStylesOpenCssCommands(),
+	} );
 }
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
-import { rotateLeft, rotateRight, help, brush, backup } from '@wordpress/icons';
+import { rotateLeft, rotateRight, help, backup } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -94,64 +94,6 @@ const getGlobalStylesResetCommands = () =>
 		};
 	};
 
-const getGlobalStylesOpenCssCommands = () =>
-	function useGlobalStylesOpenCssCommands() {
-		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-			useDispatch( editSiteStore )
-		);
-		const { params } = useLocation();
-		const { canvas = 'view' } = params;
-		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' ],
-			};
-		}, [] );
-
-		const commands = useMemo( () => {
-			if ( ! canEditCSS ) {
-				return [];
-			}
-
-			return [
-				{
-					name: 'core/edit-site/open-styles-css',
-					label: __( 'Open custom CSS' ),
-					icon: brush,
-					callback: ( { close } ) => {
-						close();
-						if ( canvas !== 'edit' ) {
-							history.navigate( '/styles?canvas=edit', {
-								transition: 'canvas-mode-edit-transition',
-							} );
-						}
-						openGeneralSidebar( 'edit-site/global-styles' );
-						setEditorCanvasContainerView( 'global-styles-css' );
-					},
-				},
-			];
-		}, [
-			history,
-			openGeneralSidebar,
-			setEditorCanvasContainerView,
-			canEditCSS,
-			canvas,
-		] );
-
-		return {
-			isLoading: false,
-			commands,
-		};
-	};
-
 const getGlobalStylesOpenRevisionsCommands = () =>
 	function useGlobalStylesOpenRevisionsCommands() {
 		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
@@ -220,11 +162,6 @@ export function useCommonCommands() {
 		hook: getGlobalStylesResetCommands(),
 	} );
 
-	useCommandLoader( {
-		name: 'core/edit-site/open-styles-css',
-		hook: getGlobalStylesOpenCssCommands(),
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-revisions',
 		hook: getGlobalStylesOpenRevisionsCommands(),
