Global styles: improve navigation logic for revisions screen (#65946)

* Global styles: improve navigation logic for revisions screen * Merge style book case into default, add comment * Remove unnecessary goTo calls * Remove useNavigator import * Apply feedback --------- Co-authored-by: ciampo <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Oct 10, 2024 · 017c8bc · 017c8bc
1 parent 03cfbff
commit 017c8bc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	FlexItem,
-	FlexBlock,
-	Flex,
-	Button,
-	useNavigator,
-} from '@wordpress/components';
+import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -86,21 +80,17 @@ export default function GlobalStylesSidebar() {
 	}, [ shouldClearCanvasContainerView ] );
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
-	const { goTo } = useNavigator();
 
 	const toggleRevisions = () => {
 		setIsListViewOpened( false );
 		if ( isRevisionsStyleBookOpened ) {
-			goTo( '/' );
 			setEditorCanvasContainerView( 'style-book' );
 			return;
 		}
 		if ( isRevisionsOpened ) {
-			goTo( '/' );
 			setEditorCanvasContainerView( undefined );
 			return;
 		}
-		goTo( '/revisions' );
 
 		if ( isStyleBookOpened ) {
 			setEditorCanvasContainerView(

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -3,7 +3,6 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
@@ -33,7 +32,6 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 const PAGE_SIZE = 10;
 
 function ScreenRevisions() {
-	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
 	const { blocks, editorCanvasContainerView } = useSelect(
@@ -71,6 +69,8 @@ function ScreenRevisions() {
 		currentEditorGlobalStyles
 	);
 
+	// The actual code that triggers the revisions screen to navigate back
+	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
 	const onCloseRevisions = () => {
 		const canvasContainerView =
 			editorCanvasContainerView === 'global-styles-revisions:style-book'
@@ -85,15 +85,6 @@ function ScreenRevisions() {
 		onCloseRevisions();
 	};
 
-	useEffect( () => {
-		if (
-			! editorCanvasContainerView ||
-			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
-		) {
-			goTo( '/' ); // Return to global styles main panel.
-		}
-	}, [ editorCanvasContainerView ] );
-
 	useEffect( () => {
 		if ( ! isLoading && revisions.length ) {
 			setCurrentRevisions( revisions );

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -70,10 +70,8 @@ function GlobalStylesActionMenu() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { goTo } = useNavigator();
 	const loadCustomCSS = () => {
 		setEditorCanvasContainerView( 'global-styles-css' );
-		goTo( '/css' );
 	};
 
 	return (
@@ -253,21 +251,29 @@ function GlobalStylesEditorCanvasContainerLink() {
 		switch ( editorCanvasContainerView ) {
 			case 'global-styles-revisions':
 			case 'global-styles-revisions:style-book':
-				goTo( '/revisions' );
+				if ( ! isRevisionsOpen ) {
+					goTo( '/revisions' );
+				}
 				break;
 			case 'global-styles-css':
 				goTo( '/css' );
 				break;
+			// The stand-alone style book is open
+			// and the revisions panel is open,
+			// close the revisions panel.
+			// Otherwise keep the style book open while
+			// browsing global styles panel.
+			//
+			// Falling through as it matches the default scenario.
 			case 'style-book':
-				/*
-				 * The stand-alone style book is open
-				 * and the revisions panel is open,
-				 * close the revisions panel.
-				 * Otherwise keep the style book open while
-				 * browsing global styles panel.
-				 */
+			default:
+				// In general, if the revision screen is in view but the
+				// `editorCanvasContainerView` is not a revision view, close it.
+				// This also includes the scenario when the stand-alone style
+				// book is open, in which case we want the user to close the
+				// revisions screen and browse global styles.
 				if ( isRevisionsOpen ) {
-					goTo( '/' );
+					goTo( '/', { isBack: true } );
 				}
 				break;
 		}