Improve zoom transition #64179
Merged
Improve zoom transition #64179
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
richtabor
added
[Type] Enhancement
|
Size Change: +79 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
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. |
jeryj
reviewed
Aug 1, 2024
| ...props.style, | ||
| height: props.style?.height, | ||
| transition: 'all .3s', | ||
| transition: 'all 0.5s cubic-bezier(0.65, 0, 0.45, 1)', // Maps to the .block-editor-iframe__html transition. |
There was a problem hiding this comment.
Why don't we move this to the iframe/content.scss file to make it easeir? I don't think we need this defined in the JS anyways.
There was a problem hiding this comment.
.edit-site-visual-editor__editor-canvas already is used in scss elsewhere. 🤷♂️
There was a problem hiding this comment.
Yeah, I think we should move it there. I don't see why it should be defined in the JS over CSS.
There was a problem hiding this comment.
I agree with defining it in CSS instead of JS and not in Iframe’s styles because as long as it’s innate to the component it exacerbates #50449 by slowing down how quickly the pattern preview reaches its final height. It’s one thing I've been meaning to make a PR for. It can be done separately of course. packages/block-editor/src/components/block-canvas/style.scss seems a decent place to put it.
dereksmart
reviewed
Aug 1, 2024
|
Transition seems vastly better. Does it also account for some of the jitters that happen if you have sidebars (inserter or inspector) open? There's currently some jumpiness there in places. Otherwise, seems like this mostly needs a code review. |
17 tasks
There are still some refinements we can do to the sidebar transitions. #64110 helped a good bit, when not in zoom out; but the timings of those transition states can be finessed. |
jeryj
force-pushed
the
improve/zoom-transition
branch
from
4fec73e to
c66a8d9
Compare
|
Flaky tests detected in c66a8d9. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10220040753
|
jeryj
approved these changes
Aug 2, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Makes zooming out much smoother. I'd also like to apply the same transitions to when you switch to an alternate device preview (Tablet and Mobile). Currently those transitions are formed elsewhere.
Why?
The current transition is choppy, transitioning some attributes—but not all.
Testing Instructions
Visuals
Trunk
Note that this UI is from #63870, but the transitions are from trunk. The background color is applied without transition, as well as the initial placement to give zoom out spacing from the editor editor.
CleanShot.2024-08-01.at.14.33.39.mp4
Proposal
All elements transition together and slowed down just a little—overall, less jarring.
CleanShot.2024-08-01.at.14.30.14.mp4