Media editor: show live crop dimensions during gesture#78221
Merged
Conversation
|
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. |
|
Size Change: +1.08 kB (+0.01%) Total Size: 7.95 MB 📦 View Changed
ℹ️ View Unchanged
|
ramonjd
added
[Feature] Media
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a gesture-bound, bottom-left overlay badge to the Media Editor canvas to display the live output crop dimensions in source pixels, with an optional aspect-ratio label for known presets, and includes unit tests for the badge text formatting.
Changes:
- Show/hide a crop-dimensions badge during cropper gestures (with a 500ms linger after gesture end).
- Add the
CropDimensionsBadgecomponent which derives pixel dimensions fromgetSourceRegionand formats an optional ratio label. - Add styling for the badge and unit tests for the text formatter.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/media-editor/src/components/media-editor-canvas/index.tsx | Wires gesture start/end to control badge visibility with a linger timeout and renders the badge alongside the Cropper. |
| packages/media-editor/src/components/media-editor-canvas/crop-dimensions-badge.tsx | Implements the badge UI and text formatting, including preset ratio labeling with float-tolerance. |
| packages/media-editor/src/components/media-editor-canvas/style.scss | Styles the badge overlay (positioning, fade transition, and responsive suppression). |
| packages/media-editor/src/components/media-editor-canvas/test/crop-dimensions-badge.tsx | Adds unit tests for formatBadgeText output formatting and ratio labeling behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Flaky tests detected in e9e9bed. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25846191387
|
Contributor
|
Neat idea! One of the main reasons I'd been thinking we should have the advanced controls was so that the user can see the pixel dimensions of the crop, and this is a much more direct (and friendly) way to show it in the UI 👍 UX first impression: while I immediately like being able to see the pixel dimensions, the position at the bottom left felt a bit more like a toast notification and disconnected from the action I was taking. You might have already tried this, but I wonder if it'd be worth tying it as effectively a tooltip or popover to the drag handle instead of the canvas? I.e. here's how Photopea does it (very similarly to Photoshop): 2026-05-13.15.33.53.mp4As a feature, I like this inclusion. It also gives me the idea that if/when we have an advanced panel (or a settings dropdown) it'd be good to add a toggle for this so it can be shown or hidden depending on the user's preference? Code-wise, I'm wondering if we can encapsulate things a little more. A couple of ideas:
My main thinking here is that as we get closer (or beyond) an MVP state for the media editor, it'd be good to tuck away the nice-to-have features so that they can be easily extracted (or switched on and off) and don't become too present in the main components (or API) of the editor itself (i.e. MediaEditor / MediaEditorCanvas). |
Member
Author
I haven't tried it! I went for the easiest path TBH. Top right was too busy, but a tooltip is worth a shot. Cheers!
Yeah, that sounds like the perfect place for it.
💯 I think in general we need to do another pass to do exactly what you're describing, e.g, to extract specific logic to hooks etc. I'll do a quick follow up based on your feedback here. |
ramonjd
force-pushed
the
update/cropper-dimensions-badge
branch
from
4f7bd7e to
05b28aa
Compare
Member
Author
It's requiring too much DOM tom-foolery to anchor the badge. I reckon the core library would need to expose the active handle being dragged and provide the stencil’s position in canvas coordinates, rather than forcing consumers to parse DOM elements and query the document themselves. I'm also tearing out the aspect ratio stuff and keeping it width x height for now. Maybe it's better handled in a separate PR given that consumers can pass their own aspect ratios into the component. I've tweaked the styles a bit and moved the badge to the top left (just to test it out) but we can leave this PR for now if it's not feeling right. 
|
Contributor
|
Thanks for the iterations! I'm leaving further comments here, but do feel free to set this PR aside — it's a nice feature but still in the nice-to-have category 😄
One other thought: grid lines is a feature that lives within
Just had another idea for aspect ratio if/when we want to revisit it. If at the callsite of including the badge we know the numeric value of the aspect ratio (or if any aspect ratio has been selected), we could perform the calculation within the badge to determine the aspect ratio and look up a hard-coded list of strings or construct them. So, basically saying that for the component we're not concerned with what the list of aspect ratios thinks the label is, this is a computed label based on actual pixel dimensions, so isn't customisable.
What you've got here's looking pretty good! The white and top-left position feels less "toast notification" to me. Now that we're looking at this part of the design, it's making me wonder if our dimmed background is a little dark — not something to deal with in this PR, just thinking out loud now that we're tweaking design elements 😄 |
ramonjd
force-pushed
the
update/cropper-dimensions-badge
branch
from
08bd04a to
98b51aa
Compare
Member
Author
Yeah, this was on my mind. I think it could work if we put it in a lower component. I'll give it short. Worth trying I think as it makes it more obvious that the info is related to what the user is doing right now.
Good idea. I'll come back to this for a follow up.
Everything is negotiable here 😄 Happy to change or approve anything in this regard 😄 Thank you! |
Member
Author
|
What about this? I guess the main difference is that they don't show when the canvas is zooming (and the width/height also changes) Kapture.2026-05-14.at.11.42.16.mp4 |
Member
Author
Hmm, ¿Por qué no los dos? 😄 I guess the previous badge could be there for zooming 🤔 |
Contributor
|
Hey, that video's looking pretty nice to me!
Personally I wouldn't worry about it for zooming. I think the main use of it is when manually adjusting the crop handles itself as zooming is more of a fuzzier concept in general. And if/when we get the advanced controls, folks using the zoom control will be able to see the pixel dimensions from the sidebar. |
Adds a small overlay badge in the bottom-left of the media editor canvas that surfaces the output crop dimensions (in source pixels) while the user is dragging the crop, resizing a handle, panning, or zooming. The badge fades out 500ms after the gesture ends. When a fixed aspect ratio preset is active, the ratio label (e.g. "16:9") is appended. Dimensions are derived from getSourceRegion so the number reflects the actual pixel size that will be produced by the REST /edit endpoint, not the visual crop rectangle.
Replaces the canvas-level dimensions badge with a tooltip that lives inside the cropper's React feature set, alongside the dimming and grid overlays. The tooltip follows whichever resize handle the user is dragging, only appears during pointer drags, and uses crop-rect math (no DOM queries, no focus sniffing) to track the handle. Cropper-internal API: onResizeStart on StencilProps now accepts an optional handle direction so the cropper can distinguish pointer drags (with direction) from keyboard-driven resizes (without). The rectangle stencil passes the handle from its pointer-down path; the keyboard handler is left untouched so arrow-key adjustments stay quiet. Removes the canvas-level badge, its hook, its test, and its styles.
ramonjd
force-pushed
the
update/cropper-dimensions-badge
branch
from
dbd3450 to
61d18c1
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Comments suppressed due to low confidence (2)
packages/media-editor/src/image-editor/react/components/cropper.tsx:734
- The overlay is rendered only when
activeHandleis set, which only happens for pointer-driven resize handles. Canvas pan, touch pinch, wheel zoom, and keyboard placement gestures go throughuseInteractionand never setactiveHandle, so the live dimensions badge will not appear for several gestures that this PR says it supports.
{ activeHandle && outputSize && (
<DimensionsOverlay
packages/media-editor/src/image-editor/react/components/cropper.tsx:741
- There are existing Cropper component tests for overlay behavior (for example the interactive grid), but this new dimensions overlay behavior is not covered. Please add tests for when it appears, updates from source-region dimensions, and disappears after the intended gesture end/linger behavior.
{ activeHandle && outputSize && (
<DimensionsOverlay
cropRect={ state.cropRect }
containerSize={ canvasSize }
imageSize={ visualSize }
activeHandle={ activeHandle }
outputWidth={ outputSize.width }
outputHeight={ outputSize.height }
/>
ramonjd
commented
May 14, 2026
andrewserong
approved these changes
May 14, 2026
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Thanks again for all the back-and-forth on this one, it's feeling really good to me now!
2026-05-14.16.27.44.mp4
Architecturally, I think we've landed on a good shape — nicely tucked away in an overlays component, and custom logic for the tooltip anchoring so we don't wind up importing from the rest of Gutenberg. And the flipping feels natural to me in manual testing 👍
I think the only thing missing (and not a blocker to landing) would be a showDimensions?: boolean flag like we have for dimming and the grid lines. But we can also just look at that if/when we want more advanced controls or configuration.
For now, this LGTM! 🚀
Member
Author
Great idea! Thanks for all the help on this one |
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.
What
Related to:
Adds a small overlay badge with width and height values of the crop on the crop handles while the user is dragging the crop, resizing a handle, panning, or zooming.
Why
Users currently have no in-canvas signal for the actual pixel size of the crop they're producing.
Testing instructions
W × H.Screenshots
Kapture.2026-05-14.at.11.42.16.mp4