WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 15 months ago

#34823 closed defect (bug) (fixed)

image_send_to_editor filter is not fired when an Image is edited or replaced in TinyMce

Reported by: nicola.peluchetti Owned by: adamsilverstein
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.3.1
Component: Media Keywords: has-patch commit
Focuses: ui, javascript, docs, administration Cc:

Description

image_send_to_editor filter should be called every time an image is modified/replaced in TinyMce, right now it looks like it's called only when the image is inserted.

To replicate

add_filter( 'image_send_to_editor', 'remove_width_attribute' , 10 );
public static function remove_width_attribute( $html ) {

$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;

}

Add an image with TinyMce. The Html will have no height/width attributes. Edit the added image, change the "Link To" for example and update it, the html will have height/width and the filter is not called.

Attachments (1)

34823.diff (486 bytes) - added by adamsilverstein 15 months ago.

Download all attachments as: .zip

Change History (14)

#1 @nicola.peluchetti
2 years ago

The correct code to replicate is

<?php
add_filter( 'image_send_to_editor', 'remove_width_attribute' , 10 );
function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}

#2 @adamsilverstein
2 years ago

  • Component changed from TinyMCE to Media
  • Focuses ui javascript administration added
  • Owner set to adamsilverstein
  • Status changed from new to accepted

#3 @joemcgill
16 months ago

Hi @nicola.peluchetti,

Thanks for the report. @adamsilverstein is this something you're interested in picking up in 4.7?

#4 @adamsilverstein
16 months ago

Sure @joemcgill I can take a look!

#5 @joemcgill
16 months ago

  • Milestone changed from Awaiting Review to 4.7
  • Status changed from accepted to assigned

#6 follow-up: @adamsilverstein
16 months ago

  • Focuses docs added
  • Keywords needs-docs added

@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 state update and winds up calling the plugin 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?

Last edited 16 months ago by adamsilverstein (previous) (diff)

#7 @joemcgill
15 months ago

  • Keywords reporter-feedback added

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


15 months ago

#9 in reply to: ↑ 6 ; follow-up: @nicola.peluchetti
15 months ago

Replying to 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 state update and winds up calling the plugin 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?

#10 in reply to: ↑ 9 @adamsilverstein
15 months ago

  • Milestone 4.7 deleted
  • Resolution set to wontfix
  • Status changed from assigned to closed

Replying to nicola.peluchetti:

Replying to 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.

I looked into this and I think php may be the simplest bet for the insert which is handled quite separately from an edit of existing content. looking at wp.media.editor.insert i do see that you can override the default behavior by creating a (global) window.send_to_editor function, but the code would need to be completely different and we don't fire any type of event here you can hook into other than possibly mceInsertContent.

Good luck!

Last edited 15 months ago by adamsilverstein (previous) (diff)

#11 @adamsilverstein
15 months ago

  • Milestone set to 4.7
  • Resolution wontfix deleted
  • Status changed from closed to reopened

#12 @adamsilverstein
15 months ago

  • Keywords has-patch commit added; needs-docs reporter-feedback removed

In 34823.diff:

  • update inline docs for the image_send_to_editor filter to better describe when it is fired

#13 @joemcgill
15 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 38734:

Media: Improve docs for image_send_to_editor filter.

This updates inline docs for the image_send_to_editor filter to better
describe when it is fired.

Props adamsilverstein.
Fixes #34823.

Note: See TracTickets for help on using tickets.