Media Editor Modal: render cropper in canvas for images#77537
Merged
Conversation
Add an internal MediaEditorCanvas component that mounts the image editor's <Cropper> and useCropperState() controller. The modal picks between MediaEditorCanvas (for images) and the existing MediaPreview (for everything else) based on mime type. Cropper dirty state is bubbled up via onDirtyChange so a follow-up can wire it to Save. No public API changes, no toolbar, no save path.
|
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: +13.6 kB (+0.18%) Total Size: 7.76 MB 📦 View Changed
ℹ️ View Unchanged
|
andrewserong
approved these changes
Apr 22, 2026
Contributor
andrewserong
left a comment
There was a problem hiding this comment.
Looking good as an incremental start!
One detail is that the padding area of the canvas has a different background color (to the user) as to the outside area of the cropping area. Not a blocker for this PR, but it'd be good for this to be consistent so that (to a user) it feels like the cropping area is placed within a padded area. I.e. either the outer area should match visually, or have the padding within the cropper.
Anyway this looks good to merge to me!
76075f3 to
e660ccf
Compare
Member
Author
Thanks for testing! I also noticed this. I'll make a follow up. Looking at it more closely, there's a balance to be struck between padding/gutter around a zoomed image and ensuring the freeform crop handles don't sit on the edge of the canvas container. |
|
Flaky tests detected in e660ccf. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24758497656
|
Member
Author
Working on a fix here: |
46 tasks
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
2 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?
Mount the internal image editor (
<Cropper>+useCropperState(), from #77479) inside the media editor modal (from #77480) when the edited attachment is an image. Non-image media (video/audio/file) continues to render through<MediaPreview>unchanged.Part of:
Why?
Now that the modal scaffold and the cropper are both merged, this is the minimum wiring to get the cropper rendering inside the modal. Keeps the PR small so follow-ups (tools UI, save path) can be reviewed on their own merits.
How?
MediaEditorCanvaswrapsuseCropperState()+<Cropper>. Sibling toMediaPreview:MediaPreviewstays a passive viewer,MediaEditorCanvasis the interactive editor.MediaEditorModalroutes toMediaEditorCanvasfor images,MediaPreviewotherwise. Akey={ media.id }on the canvas guarantees a clean remount if the attachment changes while the modal is open.MediaEditorCanvasbubblescontroller.isDirtyup viaonDirtyChangeon gesture end. The modal captures it in local state — unused for now, ready for a future PR to gate the Save button on edits.MediaEditorCanvasis internal to@wordpress/media-editor.What's explicitly not in this PR
Testing Instructions
wp-admin/admin.php?page=gutenberg-experiments.<MediaPreview>.Screenshots