Revise zoom layout shift fix #66390
Merged
Revise zoom layout shift fix #66390
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
|
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. |
stokesman
added
[Type] Bug
2 tasks
|
Size Change: +1 B (0%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Overall this is testing great for me, and to me it feels like the right fix. The one issue I've encountered is that this winds up affecting the block previews in global styles, so they're no longer vertically aligned:
| Trunk | This PR |
|---|---|
 |
 |
 |
 |
I wonder if it's worth seeing if we can apply display: flow-root only to the iframe used for the editor canvas, or something like that?
Otherwise it's testing well:
✅ Resolves the scrollbar issue
✅ Preserves the fix for the layout shift
✅ Working nicely for me in template preview and not template preview modes, in the post and site editors
Thanks again for digging in to try to find a more stable fix!
|
Thanks for getting this up 🍺 |
Just thinking a little more about this bug. Here's where this CSS rule is overriding the flex rule used in the block previews: 
So I suppose two options might be:
|
|
Thanks for the quick review and spotting that issue Andrew! I think to fix it we might incorporate both your ideas. I’d already thought reducing the specificity might be the right thing to do in general. Also, I almost decided to add the style in gutenberg/packages/editor/src/components/visual-editor/index.js Lines 355 to 366 in 67fca2e You’re welcome to jump in and fix it. I can get to it early tomorrow but it’s EOD for me. |
|
Update: I wonder if it'd work to set this body rule here instead, so it's only on gutenberg/packages/editor/src/components/visual-editor/index.js Lines 348 to 359 in 6d8f1cf I see there's also the same rule on the |
|
Snap! We had the same idea 😆 I'll try pushing a commit and let's see how we go! |
|
Alrighty, I've given that a try in f4eaee5 It seems to be testing pretty well for me. Feel free to update and/or revert that commit as needed, of course! |
17 tasks
andrewserong
approved these changes
Oct 25, 2024
|
Thanks for the review! Since we'd like to get this in for 6.7 I'll merge this in. Thanks again for opening this @stokesman 🙇 |
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Oct 25, 2024
* Contain margins with BFC instead of border * Move to block canvas styles in the visual editor --------- Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 1e39ceb |
Yes, I’d been curious about that and found it was added with the Style Book a26d321 but there’s nothing there noting what it specifically dealt with and, curiously, doesn’t actually apply in the Style Book now. It does seem to be the thing saving templated views from potentially having the same layout shift issue as post-only views had. With some brief testing the rule on the body seemed to suffice for that on its own. Something to look at in a separate effort anyway. Thanks again folks ❤️ |
swissspidy
pushed a commit
that referenced
this pull request
Oct 25, 2024
* Contain margins with BFC instead of border * Move to block canvas styles in the visual editor --------- Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]>
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
* Contain margins with BFC instead of border * Move to block canvas styles in the visual editor --------- Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]>
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?
A revised way to fix the layout shift that #66041 fixed and an alternative way to fix #66297.
Why?
The a
borderrule used in the prior PR caused #66297 and also introduces minute layout differences in unintended places. Here’s one @ramonjd spotted #66041 (comment)Kapture.2024-10-23.at.10.55.47.mp4
How?
Steals Ramon’s idea #66041 (comment) to use
display: flow-rootTesting Instructions
No layout shift (from #66041)
No vertical scrollbar in focused editor
There should be no vertical scrollbar.
Screenshots or screencast