[wp-trac] [WordPress Trac] #37905: Caption shortcode creates non-semantic html in text mode

[WordPress Trac]

#37905: Caption shortcode creates non-semantic html in text mode
--------------------------+-----------------------------
 Reporter:  wvndev        |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Formatting    |    Version:  4.6
 Severity:  normal        |   Keywords:
  Focuses:  template      |
--------------------------+-----------------------------
 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37905>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform