Zoom Out: Disable zooming out when Distraction Free mode is activated

[yogeshbhutkar]

Fixes: #67025

What?

The Zoom Out and Distraction Free Mode features currently have conflicting behaviors. When Distraction Free Mode is enabled, users can still zoom out and add patterns, which undermines the purpose of Distraction Free Mode.

This pull request addresses the issue by resolving these conflicting behaviors to maintain the intended functionality of Distraction Free Mode.

The following are the fixes made in this PR:

1. If Distraction Free mode is already activated and the user tries to activate the zoomed-out state using the keyboard shortcut, this action will then disable the distraction-free mode.
2. Zoom Out Toggle will be completely disabled in Distraction Free Mode.
3. If the Zoom Out state is active and the user decides to enter Distraction Free mode either using the keyboard shortcut or from the options, then the zoom out state will reset and then the Distraction Free mode will be activated.

Why?

The PR ensures Distraction Free Mode functions as intended by preventing disruptive actions like zooming out and adding patterns, preserving focus, and enhancing user experience.

How?

1. Updated the toggleDistractionFree() function to include resetting the zoom level.
2. Disable the Zoom Out Toggle when Distraction Free mode is activated.
3. Update zoom out's callback function to disable distraction-free mode when zoomed out.

Testing Instructions

1. Go to editing a post.
2. Turn on Distraction Free Mode.
3. The Zoomed Out state Toggle should now not be rendered.
4. If the page is already Zoomed Out, then the page again Zooms In gracefully when distraction-free mode is toggled.

Screenshots or screencast ( Updated )

zoom-out-new-720p.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: yogeshbhutkar <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[Mamaduka]

Thank you, @yogeshbhutkar!

Users can enable distraction-free mode through the Options dropdown, Commands and Keyboard shortcuts. The fix in the MoreMenu component only covers one case.

I think it would be better to update the toggleDistractionFree store action. I pushed similar fix in #66262, you can use it as example.

P.S. Let's also update the PR title/description to better reflect recent changes.

[t-hamano]

Thanks for the PR!

Just like Distraction free mode, there is a shortcut for zoom out mode. When zoom out mode is enabled via the keyboard shortcut, it is better to disable Distraction free mode.

[yogeshbhutkar]

Thank you, @yogeshbhutkar!

Users can enable distraction-free mode through the Options dropdown, Commands and Keyboard shortcuts. The fix in the MoreMenu component only covers one case.

I think it would be better to update the toggleDistractionFree store action. I pushed similar fix in #66262, you can use it as example.

P.S. Let's also update the PR title/description to better reflect recent changes.

Hi @Mamaduka, thanks for taking the time to suggest changes. I've refactored the action to reset the zoom when distraction-free mode is activated. This also enabled the changes to be seamlessly integrated with the keyboard shortcuts.

[yogeshbhutkar]

Thanks for the PR!

Just like Distraction free mode, there is a shortcut for zoom out mode. When zoom out mode is enabled via the keyboard shortcut, it is better to disable Distraction free mode.

Hi @t-hamano, thanks for taking the time to suggest changes. I've incorporated the change where when the user uses the keyboard shortcut to enable zoom out state and if distraction mode is enabled, then this action will, in turn, disable the distraction-free mode and enable the zoomed-out state.