WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#22720 closed defect (bug) (fixed)

Insert Media produces inconsistent results (depending on captions)

Reported by: tar.gz Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (3)

22720.diff (547 bytes) - added by nacin 2 years ago.
22720.2.diff (522 bytes) - added by tar.gz 2 years ago.
With double \n
22720-3.patch (1.4 KB) - added by azaozz 2 years ago.

Download all attachments as: .zip

Change History (17)

comment:1 @nacin2 years ago

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.

Last edited 2 years ago by nacin (previous) (diff)

@nacin2 years ago

comment:2 @nacin2 years ago

  • Keywords has-patch added

How is 22720.diff?

comment:3 @tar.gz2 years ago

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.gz2 years ago

With double \n

comment:4 @nacin2 years ago

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?

comment:5 @nacin2 years ago

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

comment:6 @markjaquith2 years ago

+1 on \n\n

comment:7 @nacin2 years ago

In 23042:

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

@azaozz2 years ago

comment:8 @azaozz2 years ago

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.

comment:9 follow-up: @tar.gz2 years ago

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.

comment:10 in reply to: ↑ 9 ; follow-up: @azaozz2 years ago

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.

comment:11 in reply to: ↑ 10 @tar.gz2 years ago

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. :)

comment:12 @koopersmith2 years ago

  • Keywords commit added

Works well. +1.

comment:13 @nacin2 years ago

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

In 23055:

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

comment:14 @nacin2 years ago

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