Media Editor: add zoom control and hide fine rotation on narrow viewports#77585
Merged
Media Editor: add zoom control and hide fine rotation on narrow viewports#77585
Conversation
ramonjd
added
[Feature] Media
Contributor
There was a problem hiding this comment.
Pull request overview
Adds additional cropper usability controls to the experimental Media Editor modal, improving edit precision (zoom) while keeping the bottom toolbar usable on narrow viewports.
Changes:
- Adds a Zoom
RangeControl(1×–10×) to the Crop sidebar panel with a percentage tooltip. - Hides the fine-rotation slider in the bottom toolbar at viewports
<= 480pxto reduce cramped controls.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/media-editor/src/components/media-editor-toolbar/style.scss | Hides the rotation slider at/under the mobile breakpoint to keep the toolbar usable on narrow viewports. |
| packages/media-editor/src/components/media-editor-crop-panel/index.tsx | Adds a zoom slider wired to the shared cropper controller and displays tooltip values as percentages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Size Change: +136 B (0%) Total Size: 7.76 MB 📦 View Changed
ℹ️ View Unchanged
|
andrewserong
approved these changes
Apr 23, 2026
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Looking good!
Not for now, but once we've built out the cropper interface to the point where we think we've got everything we need, it'd be good to review the order of which controls we have available in the sidebar as to which should come first, etc. I suspect it'll become clearer once we've got some more stuff in there.
But for now, this LGTM 🚀
|
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. |
|
Flaky tests detected in dd35d80. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24815334358
|
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
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.
Follow-up to #77540.
Part of:
Summary
RangeControlto the Crop sidebar tab (1×–10×, step 0.1, tooltip as a percentage). Reset still handled by the toolbar's Reset button.Thanks to @andrewserong for the suggestions
Test plan
100%–1000%.Kapture.2026-04-23.at.13.33.54.mp4