Media Editor Modal task tracking

[andrewserong]

Add a Gutenberg-powered media editor that's intended to eventually replace cropping tools and the core media editor screen with a more modern and extensible interface.

For now, this is being built behind an experiment in Gutenberg, with the primary interface a modal that can be invoked from the Crop toolbar button on the image block:

When complete, we'll be able to close out these issues:

• Media Library: Create a media editor, that can be used from within the post and site editors #72734
• Add free-form crop #22582

Current state:

Done

• Image Cropper: add package and basic stories #72414
• Implements the image-cropper package in the editor. #73277
• Media Library: Add DataViews/Forms fields specific to media/attachments #72612
• Media Editor Modal: Add a media editor modal experiment #77480
• Media Editor experiment: add experimental image editor and cropper #77479
• Media Editor Modal: render cropper in canvas for images #77537
• Media Editor: add cropper controls to the media editor modal #77540
• Experimental Image Cropper: Ensure focus is on canvas when dragging #77591
• Experimental Image Cropper: Tweak the keyboard interactions with drag handles and canvas #77639
• Site Logo Block: Enable the media editor modal experiment for the crop button #77548
• Image editor: hold Shift while resizing to lock current aspect ratio #77663
• Image editor: fix locked-ratio resize driver-axis on non-square images #77664
• Image Editor experiment: Pass theme aspect ratios to media editor #77665
• Media Editor Modal: save via Core's /edit modifiers #77641
• Media editor: avoid double-mount flicker on open #77732
• Media Editor Modal: surface save failures as scoped snackbar notices #77733

To-do

• Fix loading of the "Attached to" entity
• Remove the previous "Media Editor" experiment if/when this experiment feels solid
• Add slots / extension points that can be used by the AI experiment
  • Image editor: formalize cropper contract #77668 (Formalize the API contract to get ready for the above)
  • Tighten export helper behavior. Scope: make getCroppedImage, exportCroppedImage, and canvas helpers more predictable around MIME type, quality, CORS/load failures, output dimensions, and error shape. Unlocks: a reliable “produce an image blob” boundary for future tools, downloads, uploads, AI providers, and tests
  • Separate crop stencils from future selection tools Scope: clarify that stencil is for crop area UI only. Future tools like pencil masks, focal-point pickers, object selection, or AI regions should not be squeezed into the crop stencil contract. Unlocks: extensibility without contaminating crop behavior.
  • Open third-party extension points Scope: a registration API for custom tools, overlays, panels, operations, and provider-backed actions. Unlocks: third parties can extend the image editor surface without forking the cropper.
• Create a bespoke control/component for fine-grained rotation like Google Photos
• Try out a zoom area component that controls the zoom of the camera/world without adjusting the crop area. Similarly, to allow panning the camera/world separately from moving the crop area. Essentially allowing a way to browse the area a bit like we might in Figma/Photoshop/Affinity
• Create an "Advanced" panel that has keyboard controls for precise pixel crop, explore collapsible panels to group these
• Media editor: restore original image in modal #77781

[andrewserong]

Update:

• Media fields have been added (these will be used for both the media editor and media modal experiments): Media Library: Add DataViews/Forms fields specific to media/attachments #72612
• Work on the media editor itself is underway, with a minimal package merged into the plugin (Media Editor: Add a simple media editor package and integrate into the editor package #74601) — this currently only displays a media preview and a metadata form, but lays the foundation for building out the media editor. Subsequent work and updates will be in the issue: Media Library: Create a media editor, that can be used from within the post and site editors #72734

[eric-michel]

I'm not sure if this is an appropriate place to request any new features for media editing, but adding a media-level focal point selector (similar to the cover block) that gives a media item a global level focal point (which could be overridden in an individual cover block) would be incredibly helpful. Having this focal point output in some way via wp_get_attachment_image would also be critical.

We currently use custom fields to select images on a regular basis (in ACF, for instance) and often will use object-fit: cover in whatever custom implementation we're doing at the time. Having the ability to add a focal point natively would enhance what we can do a lot.

We're currently using this excellent plugin, but this really feels like a core feature that should exist anytime an image is set to object-fit: cover or set as a background image.

[andrewserong]

Update: while work is progressing pretty well on the media editor (see tracking issue and latest WIP PR exploring cropping tools), there are still quite a few features left to implement and not much time before the 7.0 feature freeze (beta 1). Due to the complexity of tasks remaining, I'm going to punt this to WP 7.1 to allow more time to explore key features like extensibility, and to give more time for adequate rounds of testing and iteration before proposing introducing in core.

I intend to keep working on this, but it will be a little bit on the back-burner over the next couple of weeks as I help out with higher priority 7.0 tasks for this release. I've updated the issue description.

---

I'm not sure if this is an appropriate place to request any new features for media editing, but adding a media-level focal point selector

Thanks for raising it @eric-michel! If you're keen to see that feature as part of a new media editor / media library, a fresh issue would be a good place to suggest it, as that way folks can dig into implementation details a bit better than on tracking / iteration issues like this one.

At first glance that sounds like a really useful feature! For my part, my main focus on these kinds of media tasks (both the media editor and media library modal) is to attempt to build a DataViews/DataForms-powered representation of the media library that seeks to have parity with the existing media library in core. So the first goal will be to build out what currently works, and then we'd be able to explore adding additional features (including setting a media-level focal point, etc) once we've got feature parity in place.

[eric-michel]

Got it! Thanks @andrewserong! I'll make a new issue.