Zoom out mode doesn't persist when switching to code editor or between templates

[simison]

Description

When in zoomed-out view and switching to the code editor, the zoomed-out mode doesn't persist when closing the code editor. However, the button in the header remains active.

Step-by-step reproduction instructions

Enable zoomed-out view (tested in post editor):

Switch to code editor:

Exit code editor:

Note how the editor isn't in zoomed-out mode but the zoomed-out button remains active:

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg trunk as of Oct 1
• Chrome

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

[simison]

I expected to stay in the zoomed out mode, but if that's not what should happen, then the button at least shouldn't remain active upon switching to code editor.

[madhusudhand]

The same issue observed while switching templates:

Steps:

1. Go to zoom out mode
2. Switch to a different template
3. Zoom out button stays active, but the content goes to normal mode.

[getdave]

I suspect that the state for Zoom Out is still "active" but the UI has reset itself. There maybe an effect or listener that handles toggling the "zoom" that we need to make more intelligent / reactive.

Update: I tested and indeed it is only the "zooming of the canvas" that isn't displayed properly. The actual "zoom out" mode remains active.

[madhusudhand]

Update: I tested and indeed it is only the "zooming of the canvas" that isn't displayed properly. The actual "zoom out" mode remains active.

Yes, zoom out remains active.

The issue is due to value of prevContainerWidthRef.current being undefined
It is because the component is removed from the dom and added again, when switched to code editor and then back to editor

I have put this condition, it works for code editor switching (because the container width doesn't change), but fails when switching to different template.

I guess we either need to save prevContainerWidth in the store or in the localStorage may be?

@getdave thoughts?