Site Editor Styles Screen: Fix dancing styles previews #55183
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
andrewserong
added
[Type] Bug
andrewserong
added
the
Backport to WP 6.7 Beta/RC
|
Size Change: +56 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Oct 10, 2023
|
Thanks for the quick review @ramonjd! I'll merge this in now since it's a simple fix and would be easy to revert. Happy to look into follow-ups if anyone has any concerns about the hard-coded rule here 🙂 |
|
I just cherry-picked this PR to the 6.4-beta3-2 branch to get it included in the next release: 13fe6e5 |
mikachan
pushed a commit
that referenced
this pull request
Oct 10, 2023
mikachan
removed
the
Backport to WP 6.7 Beta/RC
karmatosed
pushed a commit
that referenced
this pull request
Oct 10, 2023
* Site Editor Styles Screen: Fix dancing styles previews (#55183) * Pulling across changes from WordPress/wordpress-develop#5441 (#55181) Removed var * Add `aria-label` attribute to navigation block only when it is open (#54816) * Add `aria-label` only when is open * Remove unnecessary `label` property in edit * Escape translation * Move navigation context to `wp_json_encode` * Add `wp_json_encode` flags * Paste: fix MS Word list paste (#55127) * Paste: fix MS Word list paste * Match mso-list:Ignore * Fix inline paste * Fix scrollbars on pattern transforms (#55069) * Fix scrollbars on pattern transforms * Fix single pattern previews * Improve classname semantics * Remove modal title * Reset styles on window resize (#55077) Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com> --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
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?
Fixes: #55112
Resolves an issue in Safari browsers when browsing the Styles screen in the site editor browse mode at particular viewport sizes that can result in the styles previews going into an endless loop of resizing, which gives the previews the appearance as though they're dancing / bobbing around.
Why?
As described in #55112, Safari does not have support for
scrollbar-gutter: stablewhich is used by the navigator screens here:gutenberg/packages/edit-site/src/components/sidebar/style.scss
Line 7 in a1d941e
As a result, in browsers other than Safari, the container for the previews is always the same width irrespective of the presence of scrollbars, but in Safari, the showing / hiding of the scrollbar will result in the previews' dimensions being recalculated, and at certain viewports, this can result in an endless loop of resizing as described in #55112 (comment)
How?
A simple fix (for now) is to add a
max-widthfor the container that matches the rendered width in other browsers. Since the sidebar area is fixed to360pxinbreak-medium(here), we should be able to fairly safely use a hard-coded value here, too.An alternative to this PR could be to refactor the previews to not recalculate their
ratioso aggressively, but at this stage prior to 6.4, I thought that would likely be a harder fix to get over the line, and hopefully this fix is less risky.Testing Instructions
trunkyou should see the previews dancing around as they resize in a loopScreenshots or screencast
Before
Note the resizing / dancing effect when a scrollbar is introduced:
2023-10-10.12.06.17.mp4
After
Note that the size of the style previews buttons is unaffected when resizing the window, even though other icons / width is affected by the resized window:
2023-10-10.12.04.56.mp4