Wordpress visual editing causes a validation error (DIV tag inside a P tag)

[trusktr]

Wordpress creates invalid HTML when you do the following:

1. Create a new post/page and edit in visual mode
2. add a photo that includes a caption
3. You now see the photo inside a gray container, with the caption below the image.
4. Attempt to insert a "more tag" at the beginning of the post in visual mode and you'll notice that you can only place the cursor inside the caption box, thus creating a more link inside the caption box.
5. add some text below the caption (press enter to create a new line below the caption box to enter more text)
6. Publish the post/page
7. validate your page (validator.w3c.org) and you'll get an error. The reason is because there's a <div> tag inside a <p> tag right where the caption appears.

I can reproduce this error every time, and confirm that in HTML mode I can remove the <!--more--> tag from inside the [caption] and paste it before the [caption] and it will be then produce valid HTML.

There's no way in visual mode to avoid this error.

In my opinion, the user should not be able to edit or put anything inside the caption box except for at the location of the caption text. Steps have already been taken to avoid extra editing in the caption box because I realized that when you press enter the cursor is placed outside and below the caption box. However, steps should be taken so that the cursor can also be placed in front of the caption box so that pressing enter creates a new line before the caption.

Basically, an easy way for non-html-knowledgeable users to place text and content before a caption box (when the caption box is the first thing in the post) would solve the problem. Also, disallow users from placing the cursor before the image while editing inside the caption box.

Please, and thanks! Valid code is a must, especially for users who don't know any HTML, for example clients who pay to have their websites made and simply wish to manage content with no knowledge of HTML.

[azaozz]

There are several ways end users can break images with captions in the visual editor, we trust them to press Ctrl+Z to undo it :)

Generally browsers are a bit picky when is comes to placing the caret in contentEditable mode and some elements break that when placed first. As there is an easy workaround in this case, don't think it's worth it trying to place the caret before the caption. It would be easy enough for the user to either switch to HTML mode or delete the image, type the other content and insert it again.