Media Editor Modal: Add a media editor modal experiment#77480
Merged
Conversation
|
Size Change: +1.71 kB (+0.02%) Total Size: 7.75 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 7de59f4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24753894343
|
|
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. |
Contributor
Author
|
Just switching this over to ready for review. It's still a little on the experimental side, but I'm hoping something like this sort of shape will work as an initial pass. And in follow-ups we could look at integrating the actual cropping tools being built in #77479 🤞 |
Contributor
Author
|
Alrighty, now that #77479 has landed, I'll just give this a quick rebase. (The scope of this PR is still without cropping being integrated, to keep each PR granular). |
…allow smooth animations when opening and closing the sidebar
6275eae to
7de59f4
Compare
Contributor
Author
|
Rebased, and did a tiny update to ensure the preview is contained in the canvas area. I suspect we'll need to update all that CSS when we go to integrate the cropper anyway, but for now, the preview is rendering slightly better. 🤞 this should be ready for review / feedback now. |
ramonjd
approved these changes
Apr 22, 2026
Member
ramonjd
left a comment
There was a problem hiding this comment.
Working well behind the experiment. I think the modal paradigm will work well for in-editor and, later, as part of a data view media library.
🚀
Comment on lines
+400
to
+410
| const handleMediaUpdate = useCallback( | ||
| ( { id: newId, url: newUrl } ) => { | ||
| if ( typeof newId === 'number' && newId !== id ) { | ||
| setAttributes( { | ||
| id: newId, | ||
| url: newUrl ?? url, | ||
| } ); | ||
| } | ||
| }, | ||
| [ id, url, setAttributes ] | ||
| ); |
Member
There was a problem hiding this comment.
Not a blocker - do you think it's worth checking other attributes so that updates to the metadata are reflected in the block when the user saves and the modal closes?
I checked and they're saved to the attachment, so a save + refresh works.
Contributor
Author
There was a problem hiding this comment.
Yes, I was just thinking about that, as it'd be great to be able to update alt text from the editor and for it to flow through, etc. I decided on leaving it out for now as I wasn't too sure if/how we wanted to handle editing metadata alongside cropping in follow-ups, so I thought a simple API of id and url in the callback would be a good place to start.
But yes, let's revisit this in follow-ups — it could be that we either grab the new values from the callback, or that the block itself fetches the fresh data when the id changes 🤔
| variant="primary" | ||
| onClick={ handleSave } | ||
| isBusy={ isSaving } | ||
| disabled={ isSaving || ! media } |
Member
There was a problem hiding this comment.
Note for later - we can add a dirty state callback that combines dirty entity and dirty cropper states.
Contributor
Author
Thanks for reviewing! I'll merge this in once the tests pass.
Oh, I like that idea. Once we've gotten the modal cropping etc a little further along, it'd be worth hacking on this idea (a separate data view powered media library route, with the detail view / editing happening in the modal we're working on) 👍 |
This was referenced Apr 22, 2026
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?
Part of:
Add a media editor modal experiment (just the scaffolding at this stage). This swaps out the crop button in the image block to open up a media editor modal instead of an inline cropping interface.
We don't (yet) have cropping tools integrated (that's being explored over in #77479), so this PR just looks at adding in the editable media fields for now, and the overall structure of the modal and how to invoke it.
Why?
This is related to the linked issues, but the existing cropping tools for the image block are very limited and offer a difficult to use state and UI for interacting with the cropping tools. In order to support not just cropping but also other kinds of image editing (and even AI tools), a modal allow a much more scalable interface with way more tools, while also making it easier to interact with cropping. It also allows us to better add controls for keyboard interaction.
How?
MediaEditorModalcomponent to themedia-editorTesting Instructions
Activate the experiment:
Screenshots or screencast
Use of AI Tools
Code largely generated using Claude Code (Opus 4.7)