WordPress 7.1 Iteration: 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.

The first stage (now in trunk) is to replace the inline cropping tool used by the Image block with a full media editor modal.

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

• Media Library: Create a dedicated media editor #72734
• Add free-form crop #22582

Also, to keep in mind: ensuring that the media features are extensible, especially via the AI plugin:

• Integrate media features and experiments with Gutenberg's experimental Media Editor ai#325

Current state:

Scope

PRs (to help us keep track)

• 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
• Media Editor Modal: Try adding undo/redo for the image cropper #77782
• Media editor modal: expand keyboard shortcuts and add interaction helpers #77871
• Media editor modal: add Shift+R for counter-clockwise rotation #77898
• Media Editor Modal: In the image cropper, pan when dragging the crop instead of constraining to the visible area #77899
• Media editor: replace fine-rotation slider with RotationRuler #77906
• Media Editor Modal: Add focus border styles to the stencil rect when the canvas is keyboard focused #78078
• Image block: Try syncing updated metadata fields (alt and caption) from the media editor #78139
• Media Editor Modal: Fix empty author and attached to fields #78189
• Media Editor Modal: Add custom datetime view for the sidebar to ensure minimal display of dates #78265
• Media editor: show live crop dimensions during gesture #78221
• Media Editor: Scope keyboard shortcuts to the modal #78322
• Media Editor: Harden cropper math layer against non-finite inputs #78321
• Media Editor: Enforce a minimum crop size in the image editor #78268
• Media Editor: Make zoom floor coverage-aware instead of fixed at 1x #78222
• Media Editor: Anchor cursorless zoom (slider/keyboard) at crop center #78385
• Media: Add undo snackbar for media editor image edits #78425
• Media Editor Modal: Fix unexpected tab stop on date fields in the Details sidebar #78454
• Media Editor Experiments: Tidy up by removing old pathways to the media editor experiment #78489
• Refactor media editor crop state into composite reducer #78480
• Media Editor Modal: Tighten labels for crop handles toggle #78703
• Media Editor: make the modal the default crop experience #78653
• Media Editor Modal: Update the rotation ruler to use a vertical line marker #78704
• Image Editor: focus return after closing image crop modal #78711
• Media Editor Modal: Try placing the save and cancel buttons in the footer #78708
• Media Editor: remove inline cropper (follow-up to #78653) #78654
• Image cropper: round zoom control values and display as percentages #78757
• Media Editor: Remove resize handles toggle from crop panel #78758
• Media Editor: Magnify the crop to fill the canvas #79044
• Media editor: Snap crop handles to source pixels #79139
• Media Editor Modal: Reorder details fields so the editable regular layout fields appear at the top #78792
• Media editor: address accessibility review feedback #79966

Feedback to explore

• Should we hide the fine-grained rotation behind a toggle button?
• Try moving some (or all) of the transform controls above the image being edited (needs design)
• Where do we put the Keyboard modal toggle button?

Done

Tasks that have been completed (kept for posterity)

• Fix loading of the "Attached to" entity
• Polish "Details" fields:
  • The "Date added" field can unexpectedly wrap on datetime strings like May 12, 2026 6:44 am
  • If the post hasn't yet been saved, the Attached to field says "Auto Draft" (that's consistent with core behaviour)
  • If the post doesn't have a title, the Attached to field displays the id number of the post (fixed to display (no title) for consistency with core)
• Update the previous "Media Editor" experiment if/when this experiment feels solid
  • This experiment feels solid, so re-purpose the existing experiment to the route based approach, and ensure they share common components and logic: Media Editor Experiment: Add a route, based on the media editor modal, refactor the modal components #77994
  • Tidy up unused areas that reference the old experiment
• 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. (Explored, but scaled it back to adding auto-pan behaviour for now)
• Or, alternately, at least make it easier for folks to expand the current crop area beyond the current level of zoom (without this, it's easy to feel stuck and unable to expand a small crop area back to a larger size)
• Add undo/redo behaviour
  • Add basic undo/redo for the cropper itself
  • Wire up controls that live outside of the cropper and include them in undo/redo stacks (e.g. aspect ratio select, freeform crop toggle)
• Should save and cancel should be in the bottom right?
• Prevent undo/redo in the middle of a gesture. Attempt 1. Attempt 2.
• If a user updates Caption and Alt Text but has never entered those details manually in the image block, then updating them in the cropping tool should propagate it into the Image block

To-do

• Media Editor: Add bounded advanced crop controls #78187
• Media editor: Show image and crop info in Crop panel #78650
• Make image editor extensible - Media editor modal: state management for media editor extensions #79175
• Media editor: restore original image in modal #77781
• WIP - Add circle crop mask support #79393
• Properly support rich text editing of caption and description fields
• collaborative editing - should we add collab icons to header if 2++ users are editing the same image?
• Move the modal's tabs from the private Tabs in @wordpress/components to Tabs in @wordpress/ui (the recommended component per the use-recommended-components rule). Follow up to Media Editor: refactor modal layout #78896 This may be not a drop-in swap: the tablist renders in the ComplementaryArea header and the panels in its body, bridged by hand through the legacy Tabs.Context across a Slot/Fill boundary. The @wordpress/ui Tabs (built on Base UI) does not expose its context, so this needs the sidebar restructured under a single Tabs.Root, or cross-subtree state support added to @wordpress/ui.

[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 dedicated media editor #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.