Reset zoom level on component unmount

[Infinite-Null]

What?

Closes #69086

Reset zoom level when editor component unmounts to prevent stale zoom states.

Why?

The zoom state and button remained active after responsive changes, causing inconsistency between the visual zoom effect and the button state. This led to a confusing user experience in which the zoom button appeared pressed, but no zoom effect was visible.

How?

Added a cleanup effect in the ZoomOutToggle component that calls resetZoomLevel when the component unmounts. This ensures the zoom state is properly reset between editor sessions and responsive changes.

Testing Instructions

1. Open the WordPress block editor
2. Click the zoom-out button
3. Resize browser window to a smaller width
4. Resize browser window back to larger width
5. Verify the zoom state and button are in sync

Screencast

Screen.Recording.2025-02-07.at.12.27.40.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Do you know what part of the code disables zoomout mode for smaller screens?

Controlling a global state-based component's mounted state is tricky and usually causes more bugs. This bug probably has a different root cause; I suggest finding it and fixing the issue there.

[Infinite-Null]

Sure @Mamaduka, I’ll check what disables zoom-out on smaller screens and find the root cause.

[Infinite-Null]

Hi @Mamaduka,
I was able to find the root cause and updated my PR. While doing research I found an issue:

The useLayoutEffect hook is triggered when the viewport width is at or above 782px. However, the condition:

const isMediumOrBigger = window.matchMedia('(min-width: 782px)').matches;

does not return false when the viewport width gradually decreases to exactly 782px. This is because the (min-width: 782px) media query does not include 782px itself it applies only to widths greater than 782px.

As a result, when resizing the viewport slowly, the condition remains true even at 782px. However, when the viewport is resized quickly, bypassing the 782px threshold, the condition updates correctly and evaluates to false as expected.

A fix to this would be to change code like:

const isMediumOrBigger = window.matchMedia('(min-width: 783px)').matches;

Or

const isMediumOrBigger = window.width>=782;

Screencast:

Screen.Recording.2025-02-12.at.10.53.59.AM.mov

Should I open an issue about this also I am quite not sure which solution would be better.
I would love to hear your thoughts.

[Mamaduka]

Thanks for investigating this, @Infinite-Null!

I left a a couple of of notes, but unfortunately, I don't have time to test the proposed solution properly.

Pinging @WordPress/gutenberg-core in case someone has time to have a look.

[Mamaduka]

The useDispatch( blockEditorStore ) is also defined above. Let's move and combine them in single call.

[Mamaduka]

The components shouldn't use global select it doesn't react to store changes.

Suggested change

	const { isZoomOut } = unlock( select( blockEditorStore ) );
	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );

[Infinite-Null]

Hi @Mamaduka,
I have made the necessary changes please take a look at it at your convenience. Thank You!