Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global styles: improve navigation logic for revisions screen #65946

Merged
merged 5 commits into from
Oct 10, 2024
Merged

Global styles: improve navigation logic for revisions screen #65946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28bad8c
Global styles: improve navigation logic for revisions screen
ciampo Oct 8, 2024
50d6cab
Merge style book case into default, add comment
ciampo Oct 8, 2024
b3dcbe2
Remove unnecessary goTo calls
ciampo Oct 8, 2024
8602981
Remove useNavigator import
ramonjd Oct 9, 2024
d53f641
Apply feedback
ciampo Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions packages/edit-site/src/components/global-styles-sidebar/index.js
View file
Open in desktop
Copy link
Contributor Author

@ciampo ciampo Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the goTo calls in this file are no-ops, because useNavigator is being called in a component that is not a child of a Navigator component.

Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -86,21 +80,17 @@ export default function GlobalStylesSidebar() {
}, [ shouldClearCanvasContainerView ] );

const { setIsListViewOpened } = useDispatch( editorStore );
const { goTo } = useNavigator();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch 👏

FWIW we should also remove the useNavigator import.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just did this while testing. 👍🏻


const toggleRevisions = () => {
setIsListViewOpened( false );
if ( isRevisionsStyleBookOpened ) {
goTo( '/' );
setEditorCanvasContainerView( 'style-book' );
return;
}
if ( isRevisionsOpened ) {
goTo( '/' );
setEditorCanvasContainerView( undefined );
return;
}
goTo( '/revisions' );

if ( isStyleBookOpened ) {
setEditorCanvasContainerView(
Expand Down
13 changes: 2 additions & 11 deletions packages/edit-site/src/components/global-styles/screen-revisions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import {
useNavigator,
__experimentalConfirmDialog as ConfirmDialog,
Spinner,
} from '@wordpress/components';
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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`.
Comment on lines +72 to +73
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment 👍

const onCloseRevisions = () => {
const canvasContainerView =
editorCanvasContainerView === 'global-styles-revisions:style-book'
Expand All @@ -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 );
Expand Down
28 changes: 17 additions & 11 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,8 @@ function GlobalStylesActionMenu() {
const { setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const { goTo } = useNavigator();
const loadCustomCSS = () => {
setEditorCanvasContainerView( 'global-styles-css' );
goTo( '/css' );
};

return (
Expand Down Expand Up @@ -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;
}
Expand Down
Loading