Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#15095 closed defect (bug) (fixed)

Visual Editor inserts empty paragraphs before/after captioned images

Reported by: markel Owned by: azaozz
Milestone: 3.1 Priority: normal
Severity: major Version: 3.1
Component: Editor Keywords: reporter-feedback
Focuses: Cc:


Tested in Safari 5 and Firefox 3 on most recent nightly (as of 10/10/10) 3.1-alpha.

When adding an image with a caption using the Visual Editor, paragraphs containing non-breaking spaces are added before and after the image. This isn't readily apparent in the Editor itself, but is pretty clear when viewing the post.

To reproduce:

  1. Create a post that includes any image with a caption in it using the Visual Editor. Publish the post or save the draft.
  2. Check the resulting post. You will see the added paragraphs.

Sample code after publish:

Testing an image.


[caption id="attachment_48" align="alignnone" width="640" caption="I can rotate things."]<a href="http://26mag.com/wp-content/uploads/2010/10/bungienetshot.png"><img class="size-large wp-image-48" title="bungienetshot" src="http://26mag.com/wp-content/uploads/2010/10/bungienetshot-1024x575.png" alt="" width="640" height="359" /></a>[/caption]


Change History (12)

#1 @westi
5 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

#2 follow-up: @markel
5 years ago

  • Cc rmarkel@… added
  • Severity changed from normal to major

This also affects some styling created using the visual editor. Steps to reproduce:

  1. Enter a line of text, then return.
  2. Change the style to H3 or any other style, type a line of text, then return.
  3. Type a third line of text.
  4. Flip to the HTML editor and you will see the non-breaking space.

This doesn't occur in 2.9.2 and seems undesirable, so I'm nudging the severity.

#3 in reply to: ↑ 2 ; follow-up: @azaozz
5 years ago

  • Keywords reporter-feedback added

Replying to markel:
Cannot reproduce either behavior. Are you using any TinyMCE plugins like TinyMCE Advanced with the "Preserve new lines" option turned on?

#4 in reply to: ↑ 3 @markel
5 years ago

Replying to azaozz:

Cannot reproduce either behavior. Are you using any TinyMCE plugins like TinyMCE Advanced with the "Preserve new lines" option turned on?

I'm not using any TinyMCE-altering plugins; was just able to reproduce it with a captioned image with no plugins installed of any kind.

#5 @designsimply
5 years ago

Reproduced with r15782.


  1. Open any post with a captioned image.
  2. Click in the following order: Update button, HTML tab, Visual tab. Then repeat.

---> Each time you repeat, a non-breaking space is added above and below the captioned image.

Screencast example: http://screencast.com/t/6qVpiPPMQd

#6 @markel
5 years ago

You can also cause this to happen by using Paste from Word. Click the button, paste some text, insert it, then publish. As long as you don't swap over to the HTML editor, non-breaking spaces will be added to the pasted text.

#7 @azaozz
5 years ago

These problems seem to come from a change in behaviour in TinyMCE. When performing a cleanup things like <p><div>....</div></p> are converted to <p></p><div>..., i.e. the invalid <p> tag is closed properly instead of removed.

I'm still working on a proper fix for this.

#8 @azaozz
5 years ago

(In [15822]) Editor: stop inserting empty paragraphs before/after captioned images, see #15095

#9 @azaozz
5 years ago

The above patch fixes this when inserting the caption shortcode but is an "after the fact" fix. A proper solution would be part of TinyMCE in collaboration with their dev team.

#10 @nacin
5 years ago

  • Milestone changed from Awaiting Review to 3.1

#11 @markel
5 years ago

This is still affecting various things. A quick way to see it in action is to add a horizontal rule in the HTML editor, then flip to Visual and back again—two non-breaking spaces will be inserted into your code.

#12 @azaozz
5 years ago

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

(In [16394]) Remove invalid parent paragraph when pasting in the visual editor or switching visual to HTML and back, keep multiple empty lines in a <pre> tag, fixes #15095 fixes #15367

Note: See TracTickets for help on using tickets.