Add Open styles revisions command conditionally (#52945)

* Add `Open styles revisions` command conditionally * feedback * remove test * use boolean
WordPress · Jul 26, 2023 · 2b8f1ce · 2b8f1ce
1 parent a78a632
commit 2b8f1ce
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 39 deletions.
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -114,13 +114,68 @@ function useGlobalStylesOpenCssCommands() {
 	};
 }
 
-export function useCommonCommands() {
+function useGlobalStylesOpenRevisionsCommands() {
 	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
 		unlock( useDispatch( editSiteStore ) );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
+	const history = useHistory();
+	const hasRevisions = useSelect(
+		( select ) =>
+			select( coreStore ).getCurrentThemeGlobalStylesRevisions()?.length,
+		[]
+	);
+	const commands = useMemo( () => {
+		if ( ! hasRevisions ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-global-styles-revisions',
+				label: __( 'Open styles revisions' ),
+				icon: backup,
+				callback: ( { close } ) => {
+					close();
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
+					openGeneralSidebar( 'edit-site/global-styles' );
+					setEditorCanvasContainerView( 'global-styles-revisions' );
+				},
+			},
+		];
+	}, [
+		hasRevisions,
+		history,
+		openGeneralSidebar,
+		setEditorCanvasContainerView,
+		isEditorPage,
+		getCanvasMode,
+		setCanvasMode,
+	] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+export function useCommonCommands() {
+	const { openGeneralSidebar, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { set } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
@@ -139,26 +194,6 @@ export function useCommonCommands() {
 		};
 	}, [] );
 
-	useCommand( {
-		name: 'core/edit-site/open-global-styles-revisions',
-		label: __( 'Open styles revisions' ),
-		icon: backup,
-		callback: ( { close } ) => {
-			close();
-			if ( ! isEditorPage ) {
-				history.push( {
-					path: '/wp_global_styles',
-					canvas: 'edit',
-				} );
-			}
-			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
-				setCanvasMode( 'edit' );
-			}
-			openGeneralSidebar( 'edit-site/global-styles' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		},
-	} );
-
 	useCommand( {
 		name: 'core/edit-site/open-styles',
 		label: __( 'Open styles' ),
@@ -228,4 +263,9 @@ export function useCommonCommands() {
 		name: 'core/edit-site/open-styles-css',
 		hook: useGlobalStylesOpenCssCommands,
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-revisions',
+		hook: useGlobalStylesOpenRevisionsCommands,
+	} );
 }
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -26,22 +26,6 @@ test.describe( 'Global styles revisions', () => {
 		await admin.visitSiteEditor();
 	} );
 
-	test( 'should display no revisions message if landing via command center', async ( {
-		page,
-	} ) => {
-		await page
-			.getByRole( 'button', { name: 'Open command palette' } )
-			.focus();
-		await page.keyboard.press( 'Meta+k' );
-		await page.keyboard.type( 'styles revisions' );
-		await page
-			.getByRole( 'option', { name: 'Open styles revisions' } )
-			.click();
-		await expect(
-			page.getByTestId( 'global-styles-no-revisions' )
-		).toHaveText( 'No results found.' );
-	} );
-
 	test( 'should display revisions UI when there is more than 1 revision', async ( {
 		page,
 		editor,