Editor Canvas: Fix animation when device type changes #56970
Merged
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
t-hamano
added
[Type] Bug
|
Size Change: +4 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in cbe44bf. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7189863050
|
youknowriad
reviewed
Dec 12, 2023
youknowriad
approved these changes
Dec 12, 2023
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?
This PR fixes an awkward animation in the editor canvas when changing device type.
Before
When switching from Mobile or Tablet to Desktop, the canvas area moves to the top left and then animates.
before.mp4
After
The left/right center position should be maintained no matter what device type you switch to.
after.mp4
Why?
Tablets and mobile devices have
margin: autoon the left and right via theuseResizeCanvashook. However, the desktop does not have any margin, so the transition CSS does not work correctly.How?
I first thought of adding default left and right auto margins to
useResizeCanvasitself. However, the documentation mentions that "it has no effect on the desktop".Therefore, I added auto margin to the higher-level component, the
EditorCanvascomponent.Update: I included margin in the
useResizeCanvashook itself. See here for the context.Testing Instructions
Switch device types to see the animation.
Note
If the desktop preview of the Post Editor is not iframed, the animation will not work in the first place. This problem is summarized in #56968.