[wp-trac] [WordPress Trac] #34823: image_send_to_editor filter is not fired when an Image is edited or replaced in TinyMce

[WordPress Trac]

#34823: image_send_to_editor filter is not fired when an Image is edited or
replaced in TinyMce
-------------------------------------+-------------------------------------
 Reporter:  nicola.peluchetti        |       Owner:  adamsilverstein
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.7
Component:  Media                    |     Version:  4.3.1
 Severity:  normal                   |  Resolution:
 Keywords:  needs-docs reporter-     |     Focuses:  ui, javascript, docs,
  feedback                           |  administration
-------------------------------------+-------------------------------------

Comment (by nicola.peluchetti):

 Replying to [comment:6 adamsilverstein]:
 Hi @adamsilverstein, thanks for looking into this.
 I think that the Javascript solution you proposed is appropriate, could
 that solution work even on the first insert and not only on edity? I'm
 asking because it would make more sense to have the code and the logic
 only in one place instead of sharing it between PHP and JS.

 > @nicola.peluchetti
 >
 > Hi! Thanks for the bug report.
 >
 > Indeed you are correct, the `image_send_to_editor` filter is only fired
 when you insert an image from the media model and could be named more
 clearly. It is called on the initial insert to construct the HTML for the
 inserted image. Once we have an image, the edit functionality runs
 entirely in JavaScript and when you edit image attributes, the editor's
 existing HTML image element is updated in place - PHP is never called. So
 in a way this is expected, if poorly documented behavior.
 >
 > To filter the update image attributes, you'll need to switch over to
 JavaScript...
 >
 > Once an image is inserted into the tinymce editor, media editing with
 the wp media modal is handled in `wp-
 includes/js/tinymce/plugins/wpeditimage/plugin.js`. In the media model,
 when the user clicks the 'Update' button, the model change triggers a
 [https://core.trac.wordpress.org/browser/tags/4.6/src/wp-includes/js
 /media-views.js#L5043 state update] and winds up calling the plugin
 [https://core.trac.wordpress.org/browser/tags/4.6/src/wp-
 includes/js/tinymce/plugins/wpeditimage/plugin.js#L356 updateImage]
 function to update the editor HTML with any new image attributes.
 >
 > Immediately after the image is updated in the editor, we trigger a
 convenient event:
 > {{{
 > wp.media.events.trigger( 'editor:image-update', {
 >       editor: editor,
 >       metadata: imageData,
 >       image: imageNode
 > } );
 > }}}
 >
 > You can hook in here to redo the logic you are accomplishing in PHP...
 For example, to remove the width/height attributes of the edited image
 (using tinymce's jQuery object here):
 >
 > {{{
 > if ( wp.media.events ) {
 >       wp.media.events.on( 'editor:image-update', function( data ) {
 >               data.editor.$( data.image ).attr( { 'width':  null,
 'height': null } );
 >       } );
 > }
 > }}}
 >
 > Will this type of hook suffice for your needs? Regarding the filter -
 one thing we could do here is to update the docs describing how this
 filter can be used and when it fires. Care to provide a patch to update
 the docs?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34823#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform