Style Book: keep browsing styles open when toggling on/off Style Book

[annezazu]

Using 6.5 beta 2, I noticed that if I were browsing style variations and turned on the style book, it would boot me out of browsing the style variations. I'd have to then re-enter style variations and continue selecting different options from there:

resets.browsing.styles.mov

This feels like a bug to me! To replicate:

1. Open Styles
2. Select "Browse styles"
3. Select a different style
4. Turn on the style book
5. Notice you get booted out of your original spot

[ramonjd]

Just to get started, I hacked something to get it working:

2024-02-21.11.33.06.mp4

The only snag is that the routing logic is complex.

Here's my hack for the record. I'm not proud of it, it's just for illustrative purposes 😄

THE HACK

	useEffect( () => {
		switch ( editorCanvasContainerView ) {
			case 'global-styles-revisions':
			case 'global-styles-revisions:style-book':
				goTo( '/revisions' );
				break;
			case 'global-styles-css':
				goTo( '/css' );
				break;
			case 'style-book':
				if ( path === '/revisions' ) {
					goTo( '/' );
				} else {
					goTo( path );
				}
				break;
			default:
				if ( path !== '/' && path !== '/revisions' ) {
					return;
				}
				goTo( '/' );
				break;
		}
	}, [ editorCanvasContainerView, goTo ] );

I'm adding notes here for the record.

What makes this exercise tricky is that there are two variables at play:

1. The current path of the global styles sidebar - this value represents a navigation route and changes as we navigate down, up or between panels. E.g., path is / for the main global styles panel, /revisions for the global styles revisions, /typography/text for the global styles typography text settings and so on.
2. editorCanvasContainerView - this value is meant to signify what's loaded in the editor canvas container, when not the current post. E.g., the style book.

Examples of how these two variables interact:

1. when the canvas (editorCanvasContainerView) switches to global style revisions, we want to update the path to /revisions so the global styles revisions panel opens.
2. when the canvas (editorCanvasContainerView) switches to style book, we don't care which global styles panel is open

I'm going to think about how to simplify all this and hopefully make it more robust.

[ramonjd]

Closing the loop here. I tried a few things and fell down a hole.

I'll try a "cleaner" version of the hack above.