Media: bind the edit-image content handler once per frame - #12913
Media: bind the edit-image content handler once per frame#12913jigneshbhavani wants to merge 1 commit into
Conversation
`MediaFrame.Select.bindHandlers()` already binds `content:render:edit-image` to `editImageContent`, and `MediaFrame.Post` and `MediaFrame.ImageDetails` both bound it a second time, so a single Edit Image click built two `EditImage` views and sent two `image-editor` Ajax requests. Props bejignesh. Fixes #65825.
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
MediaFrame.Select.bindHandlers()bindscontent:render:edit-imagetoeditImageContent.MediaFrame.PostandMediaFrame.ImageDetailsboth extendMediaFrame.Selectand callSelect.prototype.bindHandlers(), then bind the same pair a second time:Postthrough the'edit-image': 'editImageContent'entry in its handlers map,ImageDetailsthrough a directthis.on()call.Both subclasses define their own
editImageContent, atpost.js:407andimage-details.js:81. SinceSelect.prototype.bindHandlers()bindsthis.editImageContent, which resolves on the instance, both registrations on a given frame point at that subclass's own override rather than the one onSelect. Checked on constructed frames: onPostand onImageDetailsthe two registered callbacks are the same function reference, and each is identical to the subclass's own override and not toSelect.prototype.editImageContent.So the same method runs twice for one "Edit Image" click, building two
wp.media.view.EditImageviews and callingloadEditor()twice, which issues twoimage-editorAjax requests. The second view replaces the first, so the visible result is correct and the first view and its request are simply discarded.Removing the second registration leaves exactly one call to the subclass's own override, so behaviour is unchanged.
This PR removes the two redundant bindings and leaves the inherited one from
MediaFrame.Select.Listeners on
content:render:edit-image, counted on freshly constructed frames:MediaFrame.SelectMediaFrame.PostMediaFrame.ImageDetailsIntroduced in [46461] (5.3), which added
editImageContentand its listener to theselectframe for #48028.post.jsalready carried the entry in its handlers map at that point, andimage-details.jsalready had its ownthis.on()call, so both have been duplicated since.Testing
admin-ajax.php.Before: two POST requests with
action=image-editoranddo=openfor the samepostid.After: one.
In both cases the image editor renders with Crop, Scale and Image Rotation, and a single
imgedit-panel-*element is present in the DOM.The Classic block path is used above because it goes through
wp.media.editorand involves no block editor media frame.Results on this branch:
grunt jshint:media: 98 files lint freegrunt qunit:compiled: 566/566 passed, 0 failed, on bothcompiled.htmlandindex.htmlTrac ticket: https://core.trac.wordpress.org/ticket/65825
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Driving the browser to count event listeners and Ajax requests before and after the change, tracing the duplicate binding back to [46461], and drafting this description. The change itself is two line removals. I reviewed the reasoning, ran the lint and QUnit suites, and confirmed the before and after request counts myself.