Editor: Avoid text reflow during sidebar animation in the editor #60702
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
youknowriad
added
[Type] Enhancement
youknowriad
requested review from
jameskoster,
jasmussen,
richtabor and
ellatrix
|
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. |
|
What I like here is that the animation are actually simpler to achieve (no complexity in the code base). The difficulty lies in the "copy" of the background. |
|
Size Change: -258 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
Nice one. Yep, I don't mind this at all. I'll let others comment as well. |
|
If we wanted to tweak a bit further, we could try an ever so quick fade out and back in of the main content. Would have to be as quick as the sidebar animation, if not quicker, but it should be performant since it avoids the reflow. |
|
Flaky tests detected in 9465699. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8660993240
|
|
For the record, there are themes with a header background where it would feel a bit less smooth, but I guess that's ok.
|
|
That use case looks fine to me too, honestly. |
|
Reverse case Not sayings it's not fine, just documenting :)
|
|
There are some cases where you have full wide sections with different backgrounds that could also show the different background on the side during the animation. |
|
It can be a bit clunky in focus mode, I suppose we don't need to apply the theme background color here: 
I may be in the minority, but I find the visual effect more seamless and intentional on trunk. Appreciate reflow can cause performance issues, but isn't that more likely on extremely long documents? Could there be a way to only apply this when document length passes a certain threshold, or is that too crude? |
|
What if we try add some animation to the iframe without animating the width. For example, as we instantly change the width, we could add a subtle vibration to the iframe (e.g. slight zoom effect vibrating to a rest). Similar to when you touch a spider web. Not sure how to explain it better 😅 |
|
I actually prefer what's currently in trunk. Sure there's some reflow, but it feels much more natural and expected. |
|
I'd agree, actually. The context is performance, which in the past was problematic with animating the canvas. One thing we could do is keep this PR as-is, as a fallback in case those problems appear once the trunk behavior has been in trunk+plugin for a bit? |
|
I'm sure we can fix performance? I already made a few PRs and we can do our best to make it better. If it turns out to be not fixable, we can re-evaluate. |
|
I also prefer trunk's animation but yes, it's good to have this one at hand just in case. |
|
Let's close for now. |
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?
[Do not merge yet]
This PR explores a way to avoid text reflow (for performance reasons) when animating the sidebars in the post and site editors. An idea suggested by @jasmussen
It turns out that the site editor already has some code in place to apply the right background outside of the iframe already.
For now, the PR doesn't work entirely in the post editor, we'll need to figure out what is applying the background in the site editor and bringing that code to the post editor as well. We need to consider classic themes too.
Testing Instructions
1- Open the site editor
2- Try opening and closing the different sidebars (left and right).
3- How does it feel?