Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#19611 closed defect (bug) (fixed)

Editor shows edit/remove image buttons when it should not

Reported by: sirzooro Owned by: azaozz
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.3
Component: Editor Keywords: has-patch
Focuses: Cc:


Insert image and set its style to float: right. Enter some text next to it (in the same paragraph). When you click on the text, editor will show the edit/remove image buttons - see attached image.

When you click on image, buttons are displayed correctly.

I have found this using FF 8.0 and IE 8.

This is possibly related to #16569.

Attachments (2)

wp-image-buttons.PNG (45.7 KB) - added by sirzooro 6 years ago.
19611.diff (746 bytes) - added by solarissmoke 6 years ago.

Download all attachments as: .zip

Change History (9)

#1 @azaozz
6 years ago

Seems to be working properly here. Could you paste the exact html from inside the editor (run tinymce.activeEditor.getContent() from the console and capture the output).

#2 @sirzooro
6 years ago

[19:46:27.366] "<p><img style=\"float: right;\" src=\"http://i243.photobucket.com/albums/ff144/aloneboyvn/red_heart.png\" alt=\"\" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod velit eget elit hendrerit bibendum. Nunc quis aliquam leo. Quisque vitae quam eu augue volutpat fringilla a eu justo. Aliquam erat volutpat. Sed molestie nulla eget mauris scelerisque tincidunt porta nibh malesuada. Quisque ornare augue a dui luctus venenatis. In ultrices, orci vitae consequat vehicula, urna leo pharetra quam, non elementum magna augue quis eros. Fusce quis magna in ligula congue lacinia nec a lacus. Sed vel feugiat neque. Cras scelerisque ultrices cursus. Phasellus porta venenatis enim, et scelerisque elit scelerisque eu.</p><p>Vestibulum et risus feugiat sem euismod dictum. Praesent in ligula odio. Nulla ut massa eget eros sollicitudin rutrum. Proin malesuada, enim eu euismod euismod, mi purus pellentesque ligula, eget lacinia nisl sapien sed elit. Nulla facilisi. Aenean posuere diam vitae ante rhoncus id tincidunt mi pretium. Fusce neque velit, eleifend id mollis in, bibendum non diam.</p>"

#3 follow-up: @sirzooro
6 years ago

Just to be sure, I checked that it also happens with all plugins disabled. I also found that float:left also triggers this - edit/remove buttons appeared when I clicked on text in 1st paragraph.

Code on HTML tab looks as follows:

<img ... /> Lorem ipsum ...

Vestibulum et ...

#4 in reply to: ↑ 3 @azaozz
6 years ago

Replying to sirzooro:

The difference seems to be:

<img style="float: right;" src="...


<img class="alignright" title="...

We use classes to align images in TinyMCE, set in the "formats" option.

However setting inline style should work too, thinking this has something to do with editor-style.css in the theme.

Version 1, edited 6 years ago by azaozz (previous) (next) (diff)

6 years ago

#5 @solarissmoke
6 years ago

  • Keywords has-patch added; needs-patch removed

This is caused by the following line in wpeditimage/editor_plugin_src.js:

if ( e.target && ( e.target.nodeName == 'IMG' || (e.target.firstChild && e.target.firstChild.nodeName == 'IMG') ) ) {

If you click on anything whose first child is an image (as in the example code above - the image is the first child of the paragraph tag), then it will display the image edit buttons, even if the target has other contents.

Attached patch fixes it (at least in FF 10, Opera 11 and IE 9), and shouldn't mess with the original intention which is to show the image buttons when a container block is clicked.

#6 @azaozz
6 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [19984]:

Don't show edit/remove image buttons in the visual editor when an image is floated, doesn't have a caption and there is text in the same paragraph, props solarissmoke, fixes #19611

#7 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 3.4
Note: See TracTickets for help on using tickets.