While posting my last entry, I discovered a problem with WordPress’s new editor and the way it inserts images into a post. The new version of the post editor is quite slick and includes handy dialogs for inserting media (tiny buttons above the editor window). Here’s the problem:

A Duck

A Duck

If I insert a paragraph break after the image and before the text, the text doesn’t wrap around the image. This seems reasonable enough (though hard to follow because there are no <p> or <br> tags to see where breaks are going. The visual editor displays the image inline, but the actual post does not.

A Duck

A Duck

If I use the html editor and type text right after the image tags, as if they were all part of the same paragraph, I get the image inline as expected.

You would think that it is simple enough to make each image part of a paragraph of text, but, if the paragraph is too short, you end up with a gap before the start of the new (non-flowing) paragraph (as with this paragraph).

A Duck

A Duck

The solution seems to be to add explicit <br></br><br></br> tags (two sets) and running the two paragraphs together, instead of pressing enter in the editor.



Then the next paragraph displays correctly flowing around the image (like this one).



Something here is broken, and I think it is the editor module in WordPress. Because it doesn’t show the <br> or <p> tags, even in the html view, the user can’t predict the results very well. I noticed a similar problem when I tried to add a break inside a <li> tag in another post.




A DuckAs you can see above (in Firefox, but not in IE), the caption function causes the flowing paragraph to take on the attributes of the caption, so it seems best to avoid using the caption function (as here) in order to keep your text consistent within the post.



I’ve experimented with different tags and settings in style.css and tried inserting image tags without using the editor’s “Add an image” function, so I’m reasonably confident that problem lies in the editor. I’ve also noticed that if you do put in your own <br> or <p> tags, and then switch to editing with the visual editor, they are stripped out of the saved version and you end up back where you started.

Annoying!