Fix block preview for responsive style states#78538
Merged
Merged
Conversation
talldan
added
[Type] Bug
26 tasks
|
Size Change: +128 B (0%) Total Size: 7.98 MB 📦 View Changed
ℹ️ View Unchanged
|
ramonjd
approved these changes
May 22, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Thanks for fixing this!
I tested in the default styles panel width, and also at smaller and very narrow widths and the results are consistent.
Also checked a bunch of blocks. The desktop styles are now able to be previewed on top of the tablet styles.
There's a minor issue with content being pushed down for some blocks, but I'll leave it to you as to whether its worth fixing here or later.
Before
Kapture.2026-05-22.at.13.28.58.mp4
After
Kapture.2026-05-22.at.13.29.43.mp4
Comment on lines
+108
to
+112
| .is-root-container { | ||
| width: ${ 100 / previewScale }%; | ||
| transform: scale(${ previewScale }); | ||
| transform-origin: center left; | ||
| } |
Member
There was a problem hiding this comment.
I don't know if this is a huge deal, but I noticed on blocks like Table and Cover that the mobile viewport results in .is-root-container getting large widths, e.g., width: 95.75%;
For some reason this pushes the preview content down:
Aligning items on the body to flex-start, and setting the transform origin to top seems to keep it stable:
body{
padding: ${ previewPadding }px;
min-height:${ Math.round( minHeight ) }px;
display:flex;
align-items: flex-start;
}
.is-root-container {
width: ${ 100 / previewScale }%;
transform: scale(${ previewScale });
transform-origin: top left;
}
Member
There was a problem hiding this comment.
Whoops had my screenshots mixed up. Fixed.
Contributor
Author
There was a problem hiding this comment.
Does the same also happen on trunk? I saw some issues that I'll follow up on.
If you make your browser window around 780px it looks like this (and some blocks aren't even visible in the preview):
Maybe your patch will fix that too.
Member
There was a problem hiding this comment.
Oh sheez, good point. I just retested on trunk and can reproduce that.
I was initially only clicking the viewport dropdown. On trunk it doesn't move around. I'll get a patch up to see.
Thanks!
Contributor
There was a problem hiding this comment.
Fwiw I can see the issue with Cover and Table on default and tablet on this PR, and it's not happening on trunk.
Contributor
There was a problem hiding this comment.
wait are we talking about the same issue 😅
On this PR:
On trunk:
the preview looks cut at the top on default and tablet on this PR.
Contributor
Author
There was a problem hiding this comment.
Yeah, I can reproduce that. I'll look into it. It might not be completely fixable without fixing the trunk issue also though. From what I can tell there are two different issues.
The trunk issue is the align-items: center that's set on the body. The PR issue is the transform-origin: center left; on the root container.
Maybe it makes sense to fix both in one go in this PR then.
Member
There was a problem hiding this comment.
Maybe it makes sense to fix both in one go in this PR then.
Oh I didn't refresh the page and just saw this.
I'll close my PR.
Thank you!
Contributor
Author
There was a problem hiding this comment.
I've pushed some fixes (essentially what @ramonjd proposed) and it looks better to me now.
I do also think the block preview could be a little taller than 144px, especially on tablet/mobile browser windows. At 780px it looks like a thin strip.
It seems to be an inline style though.
|
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. |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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 block previews for responsive states so that they show the correct styles
Why?
Previously when adding a style for tablet, and then switching to a mobile state the tablet style would still be displayed in the preview.
This was happening because the block preview's width was
500pxno matter what viewport was being selected.500pxis considered a tablet viewport size, so the preview was always picking up tablet styles.How?
The fix is to set the preview to an appropriate size for the selected responsive state. The preview is then scaled to counteract that so that the different size is not noticeable.
Currently these changes are only applied for
BlockPreviewPanelin global styles, I think that's the only place that needs the changes.Testing Instructions
Screenshots or screencast
Kapture.2026-05-22.at.11.02.50.mp4