WordPress.org

Make WordPress Core

Opened 22 months ago

Last modified 22 months ago

#37905 new defect (bug)

Caption shortcode creates non-semantic html in text mode

Reported by: wvndev Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.6
Component: Formatting Keywords:
Focuses: template Cc:

Description

When adding a caption shortcode to a post in text mode, a blank line is not added after the shortcode. In visual mode, a blank line is inserted when inserting a caption photo. When a blank line is not inserted after the caption short code, WP doesn't properly encapsulate the content correctly and is not semantic HTML. This is 100% reproducible in stock WP site using 2016 theme.

Steps to reproduce:

  1. Create a new post
  2. Switch to text mode
  3. Upload an image, set the image caption and insert into the post.
  4. Press return and type a new line of content.
  5. Publish / preview the post.

Example content:

[caption id="attachment_5" align="alignnone" width="240"]<img src="http://some.site/wp-content/uploads/2016/08/Unknown.jpeg" alt="This is the caption text." width="240" height="182" class="size-full wp-image-5" /> This is the caption text.[/caption] 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus non tortor suscipit porttutor.

Integer vel risus vitae neque egestas tempus. Nam vehicula laoreet tortor, eget sodales ex tristique quis. Duis eu iaculis orci, at varius libero.

Output of HTML:

<div class="entry-content">
	<p><figure id="attachment_5" style="width: 240px" class="wp-caption alignnone"><img src="http://some.site/wp-content/uploads/2016/08/Unknown.jpeg" alt="This is the caption text." width="240" height="182" class="size-full wp-image-5" /><figcaption class="wp-caption-text">This is the caption text.</figcaption></figure><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus non tortor suscipit porttitor. </p>
	<p>Integer vel risus vitae neque egestas tempus. Nam vehicula laoreet tortor, eget sodales ex tristique quis. Duis eu iaculis orci, at varius libero.</p>
</div>

Expected output of HTML:

<div class="entry-content">
	<p><figure id="attachment_5" style="width: 240px" class="wp-caption alignnone"><img src="http://some.site/wp-content/uploads/2016/08/Unknown.jpeg" alt="This is the caption text." width="240" height="182" class="size-full wp-image-5" /><figcaption class="wp-caption-text">This is the caption text.</figcaption></figure></p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus non tortor suscipit porttitor. </p>
	<p>Integer vel risus vitae neque egestas tempus. Nam vehicula laoreet tortor, eget sodales ex tristique quis. Duis eu iaculis orci, at varius libero.</p>
</div>

Notes -- In visual mode when performing steps 1, 3-5 above, WP does insert a new line after the caption. This issue only appears to be caused in text mode in which the writer needs to add a blank line after the shortcode. In visual mode, the blank line is added.

Change History (2)

#1 @MattyRob
22 months ago

Related #34722

Last edited 22 months ago by SergeyBiryukov (previous) (diff)

#2 @MattyRob
22 months ago

@wvndev Thanks for your first ticket and steps to reproduce. I've marked it a related to another ticket with similar malformed HTML when using shortcodes. Please can you test the patch on the linked ticket and see if that fixes this issue. (In my testing the patch on that ticket fixes this issue as well)

Last edited 22 months ago by MattyRob (previous) (diff)
Note: See TracTickets for help on using tickets.