Global Styles: Additional CSS button doesn't work on the second click

[t-hamano]

Description

Found in this comment: #68928 (comment)

This issue doesn't occur in WP 6.7 and can be reproduced in the latest Gutenberg.

Step-by-step reproduction instructions

• Site Editor > Global Styles > Click the Additional CSS button
• ✅ The CSS screen opens
• Click the back button
• Click the Additional CSS button again
• ❌ Nothing happens

Screenshots, screen recording, code snippet

03535722f05de68d15a5d488e829c115.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Infinite-Null]

Hi @t-hamano,

I was able to reproduce the issue. The root cause was that the editor canvas view state wasn't being reset when navigating away from the CSS screen. I have implemented a fix. Please review it at your convenience.

Thank You!

[t-hamano]

@Infinite-Null Thanks for working on this issue.

The root cause was that the editor canvas view state wasn't being reset when navigating away from the CSS screen.

In order to fix the problem rather than the symptom, we first need to determine why the canvas view is no longer resetting.

One way to do this is to identify the pull request in which this issue occurred. I investigated the issue with git bisect and found that this issue occurred in #65946.

I also looked at your PR (#68954), but resetting the view conditionally on a specific path may not be the best idea.

Let's investigate the changes made in #65946, and the navigation logic, and investigate the root issue first.

cc @ciampo @tyxla

[Infinite-Null]

Hi @t-hamano,

I've come up with a solution that handles the state reset. The issue occurred in the CSS screen component itself, where we weren't properly cleaning up the editor canvas view state when navigating back.

The fix adds the state reset directly in the CSS screen's back button handler, ensuring the view state is cleaned up at the right moment.

onBack={ () => {
    setEditorCanvasContainerView( undefined );
} }

Here are the changes

Let me know if you'd like me to make any adjustments to this approach.
Thanks!

[t-hamano]

I'm trying to solve this problem in #68956, but it's a bit tricky.

The screens in the global styles sidebar are switched automatically via the useEffect() hook here, depending on the value of the canvas view. The underlying problem is that if the canvas view's state is already "global-styles-css", clicking the Additional CSS button keeps the canvas view's state at global-styles-css and the useEffect() hook doesn't react.

Related to this issue, I found that accessing the CSS screen via the command palette also doesn't work in some cases.

This command only switches the canvas view to global-styles-css, so if the canvas view's state is already global-styles-css, the CSS screen doesn't appear for the same reason. I discovered this issue has been present since at least WP 6.3.

30b4d0557b8308529b1908df485c1bda.mp4

I think we need to find a way to switch to the CSS screen from outside the Navigator component, regardless of the canvas view change.