Make WordPress Core

Opened 8 years ago

Closed 5 years ago

#37905 closed defect (bug) (worksforme)

Caption shortcode creates non-semantic html in text mode

Reported by: wvndev's profile wvndev Owned by:
Milestone: 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 (3)

#1 @MattyRob
8 years ago

Related #34722

Last edited 8 years ago by SergeyBiryukov (previous) (diff)

#2 @MattyRob
8 years 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.

Version 0, edited 8 years ago by MattyRob (next)

#3 @desrosj
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

@wvndev @MattyRob My apologies that this ticket fell through the cracks.

Testing this today, I am seeing the following output using your example text:

<div class="entry-content">
	<figure id="attachment_5" aria-describedby="caption-attachment-5" style="width: 240px" class="wp-caption alignnone"><img class="size-full wp-image-5" src="http://some.site/wp-content/uploads/2016/08/Unknown.jpeg" alt="This is the caption text." width="240" height="182" /><figcaption id="caption-attachment-5" class="wp-caption-text">This is the caption text.</figcaption></figure>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus non tortor suscipit porttutor.</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><!-- .entry-content -->

This looks correct to me, and matches your expected output with the exception of the <p> tag wrapping the <figure> tag. It's possible this was fixed in another ticket, but I was not able to track it down.

If you are still experiencing the issue, feel free to reopen and provide more details to reproduce.

Note: See TracTickets for help on using tickets.