-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Track if we programmatically changed zoom states for the user #66381
Conversation
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
I'd like to add these manual tests as e2e tests. |
Size Change: +71 B (0%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
Would this be targeting 6.7? You have a blocking review on #66330 (review) so I assume this will be the alternative? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This all tests well to me.
The fundamental of this is that if you ever manually engaged Zoom Out and an action you took caused an automated behaviour to disengage Zoom Out (for UX reasons) then when you reverse that action the Zoom Out state will be restored.
The hook changes quite a bit between this and 6.7 since zoom out is no longer a mode. The 6.7 version of this hook has a similar but different method of tracking mode changes that is pretty reliable. You can still trick it (same with this one) with manually unsetting while in the mode, but it's minor IMO. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My understanding is that does not need to be backported to WordPress 6.7.
Also left a few nits - very minor.
|
||
useEffect( () => { | ||
const isZoomOutOnMount = isZoomOut(); | ||
|
||
return () => { | ||
if ( isZoomOutOnMount && isWideViewport ) { | ||
// We never changed modes for them, so there is nothing to do. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// We never changed modes for them, so there is nothing to do. | |
// No mode change was made for the user, so no action is needed." |
e2d6203
to
17ce681
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is cool! But I still have to ask, are all these refs and effects worth just not doing it manually where we want to engage/disengage zoom out?
const isZoomedOut = isZoomOut(); | ||
|
||
// Requested zoom and current zoom states are different, so toggle the state. | ||
if ( zoomOut !== isZoomedOut ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This check is so confusing unless you scroll up to see the function signature 😆
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed. Not sure what should be renamed. I think the passed zoomOut
would be best to rename. Maybe change to setZoomState
? Or zoomLevel
?
} | ||
}, [ zoomOut, setZoomLevel, resetZoomLevel ] ); | ||
}, [ manualIsZoomOutCheck ] ); | ||
// Intentionally excluding zoomOut from the dependency array. We want to catch instances where |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should add a eslint exclude?
@jeryj testing this I still get another weird behavior:
This is a debatable "works as intended". But, if I do:
... it does not work as intented, since the manual zoom out toggle is overriden 🤷🏻 |
This is the expected behavior. Anytime we "guess" what the user wants we're going to have issues with things being weird. If they click to blocks, are they officially "done" with zoom out? Or did they not realize clicking to blocks would exit zoom out? I'll check on the other state you found. |
@draganescu I was able to fix the bug you found by also tracking the zoom state on mount, but it made the code less pretty :/ Basically, we're tracking if we should trust their zoom state on mount or not. I'd like to not need to track this too. The tests should majorly help in refactoring it at least. |
Maybe they wouldn't have been, but it's already done and working well, I think. There are e2e tests to catch regressions as well. That was the biggest reason this hook was so annoying in the past -- people kept accidentally breaking it. |
The problem of both this and https://github.com/WordPress/gutenberg/pull/66574is that they show the bug in global styles. I understand that neither cause the bug, but ... it'd be great if the one we merge also fixes the bug:
|
Co-authored-by: Dave Smith <[email protected]>
Co-authored-by: Dave Smith <[email protected]>
…e via blocks tab and back to zoom out tab
74a708c
to
69c6cf2
Compare
Closing in favor of #67591 |
Fixes #66328
What?
Track if the useZoomOut hook changed the zoom level for the user. If we never changed it, don't change the zoom level on unmount.
Why?
Fixes a bug where zoom out was engaged/disengaged incorrectly on unmount.
How?
Adds a ref that tracks if we ever set a zoom level for them, and what we changed the zoom level to.
With this info, we can check on unmount for the correct states for if we should enter or exit zoom out on unmount (or do nothing).
Testing Instructions
From full screen mode
From full screen mode, exit zoom out manually
From zoom out, re-engage after unmount
Testing Instructions for Keyboard
Screenshots or screencast