Insert Media produces inconsistent results (depending on captions)

[tar.gz]

While testing the media uploader in WP 3.5-RC3, I notice the following inconsistencies when using Insert Media on several images:

(1): When inserting several single images ("Insert Media") with the editor in Text mode, we get one huge block of code, with no line returns between the images. That's not convenient if the user intends to write something between the single images (which is likely the intent, otherwise the user would do "Create Gallery").

In Visual mode, we get a line return - but only between the images that have a caption.

(2) Images without caption are nested as p > a > img (whith no spacing inbetween images), while each image with caption is wrapped in a div.wp-caption block -- which in the TwentyTwelve theme gives them 4px of padding. This will result in an uneven look.

(3) When working in the Visual editor, and inserting series of images, sometimes the captions get the WYSIWYG treatment, sometimes they show up with the shortcode. After some testing, I notice that if the first image has a caption, all the captions are rendered as WYSIWYG. If the first image is without caption, all further captions are showing up as shortcode.

Expected result:

• Every image inserted through the Insert Media method should be nested in the same way (inside a div.wp-caption, not in a p), so the theme author can achieve a consistent look.
• There should be a line return between each item, so a blogger using the text mode can easily insert text between the images.

[nacin]

Every image inserted through the Insert Media method should be nested in the same way (inside a div.wp-caption, not in a p), so the theme author can achieve a consistent look.

I don't think this is a regression, and is not something we will deal with for 3.5.

There should be a line return between each item, so a blogger using the text mode can easily insert text between the images.

Yes, I agree with that. There is an items.join('') before sending a bunch of items to the editor. These should be joined by \n or \n\n instead.

[nacin]

How is 22720.diff​?

[tar.gz]

With 22720.diff​, it's one step in the good direction for resolving issue (1) : when working in Text mode, we get now a single line return after each item.

But what would be actually required is a double line return between each item. That's what we get when we perform the same operation - inserting several single images - in the Visual editor, and switch afterwards to the Text editor.

Actually, we even get that when switching from Text -> Visual -> Text: the line returns are changed into double line returns.

With a single line return, there are two problems:

• Visually, it's a bit more readable, but still a wall of code, not very intuitive for a user to know where to insert body copy between the images.
• If the user doesn't add line returns manually, on the frontend, all the images will be nested inside a <p> tag. If we have captions, that will result in a <p> container with <div.wp-caption> items inside. Not very pretty markup :)

For issues (2) and (3), I guess they aren't affected by this patch.

[tar.gz]

With double \n

[nacin]

I mentioned that issue 2 is not something we are going to solve. Issue 3 is a fairly critical issue. Can you open a separate bug report for that?

[nacin]

Actually, let's leave this on the ticket here.

[markjaquith]

+1 on \n\n

[nacin]

In 23042:

Media: When doing a multiple-insert into the editor, separate each inserted item with two line breaks. props tar.gz. see #22720.

[azaozz]

22720-3.patch should take care of multi-images insert when the first doesn't have a caption and the second has one. We already have a fix for TinyMCE not to insert anything inside a caption, the only fix here is to look for the shortcode(s) and handle them when inserting longer strings into the editor.

[tar.gz]

22720-3.patch works for me, takes care of issue (3).

The only little thing that could still be improved:

As noted in issue (1), the Visual editor puts line returns between images that have captions, but not between non-captioned images - those are left as a big block of code (we can see that when toggling between Visual and Text mode).

Since we seem to agree on the \n\n between single images, it would be logical if the Visual editor's insert operation would add them as well. I assume that's a very easy thing to change.

Apart from being a more consistent behavior, I think it would be generally useful: if the user wants to write text between the images, this will be easier to do. If he just leaves the images as they are, the result will generally look nicer as the pictures will have some vertical padding.

[azaozz]

Replying to tar.gz:

Since we seem to agree on the \n\n between single images, it would be logical if the Visual editor's insert operation would add them as well.

They are actually added to the Visual editor, but it strips all line breaks from the html while switching to the Text editor as line breaks are significant there. In the Text editor \n\n is a paragraph separator and gets converted to <p> on display and on switching to Visual.

[tar.gz]

They are actually added to the Visual editor, but it strips all line breaks from the html while switching to the Text editor as line breaks are significant there.

Ah, ok. Then let's not make things more complicated. :)

[koopersmith]

Works well. +1.

[nacin]

In 23055:

Fix inserting of multiple attachments with captions when the first attachment does not have a caption. props azaozz. fixes #22720.