From 28bad8c086da8d9b07c080aa2a578e6852daa0fc Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 8 Oct 2024 14:24:20 +0200 Subject: [PATCH 1/5] Global styles: improve navigation logic for revisions screen --- .../global-styles/screen-revisions/index.js | 13 ++----------- .../edit-site/src/components/global-styles/ui.js | 13 +++++++++++-- 2 files changed, 13 insertions(+), 13 deletions(-) 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 index b980d199e7be30..a50b8f13d55cc2 100644 --- 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 index d534da901cd2e2..fd03c83c5a403e 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -253,7 +253,9 @@ 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' ); @@ -267,7 +269,14 @@ function GlobalStylesEditorCanvasContainerLink() { * browsing global styles panel. */ if ( isRevisionsOpen ) { - goTo( '/' ); + goTo( '/', { isBack: true } ); + } + break; + default: + // In general, if the revision screen is in view but the + // `editorCanvasContainerView` is not a revision view, close it. + if ( isRevisionsOpen ) { + goTo( '/', { isBack: true } ); } break; } From 50d6cabacf16b9ee2fcf9681881f4b6ad2a185dc Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 8 Oct 2024 19:04:09 +0200 Subject: [PATCH 2/5] Merge style book case into default, add comment --- .../edit-site/src/components/global-styles/ui.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index fd03c83c5a403e..260f20a90638ca 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -260,21 +260,12 @@ function GlobalStylesEditorCanvasContainerLink() { case 'global-styles-css': goTo( '/css' ); break; - 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. - */ - if ( isRevisionsOpen ) { - goTo( '/', { isBack: true } ); - } - break; 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( '/', { isBack: true } ); } From b3dcbe2a1ce11c71abd84ea11cdedc6599e155a2 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 8 Oct 2024 19:04:28 +0200 Subject: [PATCH 3/5] Remove unnecessary goTo calls --- .../edit-site/src/components/global-styles-sidebar/index.js | 4 ---- packages/edit-site/src/components/global-styles/ui.js | 2 -- 2 files changed, 6 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 index 966005907cda4a..81005a9cc504a5 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -86,21 +86,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/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 260f20a90638ca..2f47979c14c8df 100644 --- 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 ( From 86029813767db181f719f8ae4476af8a689e8e9b Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 10 Oct 2024 10:12:24 +1100 Subject: [PATCH 4/5] Remove useNavigator import --- .../src/components/global-styles-sidebar/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 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 index 81005a9cc504a5..90a3331d14c716 100644 --- 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'; From d53f641b9e493ba770acb7c0870539c4fe694881 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 10 Oct 2024 10:00:06 +0200 Subject: [PATCH 5/5] Apply feedback --- packages/edit-site/src/components/global-styles/ui.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 2f47979c14c8df..6cd465e237100a 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -258,6 +258,14 @@ function GlobalStylesEditorCanvasContainerLink() { 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': default: // In general, if the revision screen is in view but the // `editorCanvasContainerView` is not a revision view, close it.