Fix global style variations previews not showing correct height #39737
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
talldan
added
[Type] Bug
talldan
commented
Mar 25, 2022
| @@ -91,7 +91,7 @@ const StylesPreview = ( { label, isFocused } ) => { | |||
| { containerResizeListener } | |||
| <motion.div | |||
| style={ { | |||
| height: '100%', | |||
| height: 150 * ratio, | |||
There was a problem hiding this comment.
This matches the height set on the iframe on line 84. Reviewers might need to expand the file to see it.
|
Size Change: -4 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
andrewserong
approved these changes
Mar 25, 2022
There was a problem hiding this comment.
This looks good to me, thanks for following up @talldan! Also fixes the larger preview, too:
| Before | After |
|---|---|
 |
 |
From your comment on #39725 (comment) — it sounds like we might still want both PRs if that one makes the test a bit more reliable?
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.
Related and potential alternative to #39725
What?
Should help fix the failing tests in
trunk. This seems to have started happening after #38855 was merged.Why?
From what I can tell, now that the previews are rendering using standards mode instead of quirks mode, there's a change to how the document in the iframe determines its size. Previously it assumed the size of the iframe (like having
height: 100%), but now it assumes the size of the content (like havingheight: auto).The problem with this is not only did the previews end up looking wrong, but there was also a problem where the bottom part of the preview couldn't be clicked (the cause of the e2e test failures—props to @Mamaduka for diagnosing that).
How?
I've fixed it by giving the content an explicit height that matches the iframe's height.
I'm not all that familiar with the code, so unsure if there are issues with this fix. It looks like content in the iframe is all known ahead of time rather than dynamic, so I wouldn't expect any problems.
Testing Instructions
Use a theme that has style variations. The gutenberg test environment has one called 'Style Variations'.
Screenshots or screencast
Before
After