Preview drop down: align preview editing widths with common breakpoints #74339
+8
−3
Conversation
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
ramonjd
added
[Type] Enhancement
ramonjd
requested review from
aaronrobertshaw,
andrewserong,
jasmussen,
talldan and
tellthemachines
github-actions
bot
added
[Package] Editor
|
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. |
There was a problem hiding this comment.
Pull request overview
This PR aligns the device preview widths with WordPress's standard breakpoint values and adds logic to reset the device preview to "Desktop" when the viewport transitions from mobile to non-mobile. This ensures consistent editing state since the preview dropdown is hidden on mobile viewports.
Key changes:
- Updated Tablet preview width from 780px to 781px (782-1) to match the
break-mediumbreakpoint - Updated Mobile preview width from 360px to 479px (480-1) to match the
break-mobilebreakpoint - Added useEffect to automatically reset device preview to "Desktop" when viewport becomes non-mobile
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/editor/src/components/preview-dropdown/index.js | Adds useEffect hook to reset device type when transitioning from mobile to desktop viewport; reorganizes imports |
| packages/block-editor/src/components/use-resize-canvas/index.js | Updates Tablet and Mobile preview widths to align with standard breakpoints (782-1 and 480-1); adds explanatory comments |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Size Change: +1 B (0%) Total Size: 2.6 MB
ℹ️ View Unchanged
|
t-hamano
reviewed
Jan 5, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
resets the device preview to "Desktop" when the viewport becomes non-mobile.
I'm curious to see what problems we're trying to solve with this 🤔
Contributor
|
Yeah, I have the same question as Aki 😄 Conceivably when someone has set the preview to Tablet and resizes their browser, they'd expect the preview to not change when resizing back? |
Member
Author
Thanks! Good questions - did anyone try the branch to get a feel for it? I just wanted to try it out so we know - I can revert if folks think it's too radical and leave it for another PR/discussion. What's more important is aligning the breakpoints. My thinking was that, in tablet and mobile window sizes, the toggle is hidden. Since there's no way to enter or exit the device "preview" in smaller viewport sizes, I was wondering therefore, if we should show the side effects of its behaviour in the editor. Stepping back, I'm not sure what the best UX here is. It could be that the toggle itself is redundant and it'd better to activate "resizing" of the canvas, much like browser device toolbars do, perhaps with visual indicators to communicate to the user which viewport "preview" they're looking at. Another future complication lies in relation to the upcoming viewport hiding feature - showing/hiding is currently tied to the device preview. However it's been mentioned a few times that the blocks on the editor canvas should rather react to window screen sizes as well. |
Member
Author
In the interest of moving this change forward, I've reverted the device type resetting |
ramonjd
changed the title
tellthemachines
approved these changes
Jan 6, 2026
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
Let's just align the breakpoints for now! If we do want to make other changes we can always do so in a follow up. I think the issues around device preview would benefit from further discussion though.
Member
Author
Sounds good, thanks a lot for reviewing and testing! 🙇🏻 |
…viewport breakpoints, and implement a useEffect hook to reset device type to Desktop when the viewport is no longer mobile. Update canvas resizing logic to reset to desktop when device preview toggle is not visible.
ramonjd
force-pushed
the
update/device-preview-widths
branch
from
09743d9 to
e53f95d
Compare
t-hamano
approved these changes
Jan 6, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
In this PR, I agree that it would be best to focus on aligning the breakpoints 👍
Member
Author
|
PR to fix failing E2E tests here: #74375 They're unrelated to this PR so I'll go ahead and merge |
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? How? Why?!!
Related to: #72502 (comment)
This PR:
Testing Instructions
Open the editor and play with the device previews, e.g., set to "Tablet" or "Mobile"
Check that device-dependent blocks work in the previews, e.g.,
@media (max-width: #{ ($break-medium - 1) })@media (max-width: #{ ($break-small) }) {@media (min-width: 600px) {Note
The fact that the two blocks above have
Stack on mobileat different breakpoints is another story 😄Screenshots or screencast
Kapture.2026-01-05.at.16.49.50.mp4