[wp-trac] [WordPress Trac] #52764: Classic editor adding empty <p></p> tags in some media embed situations

[WordPress Trac]

#52764: Classic editor adding empty <p></p> tags in some media embed situations
-----------------------------+---------------------
 Reporter:  jonathanstegall  |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  5.7.1
Component:  Editor           |     Version:  5.7
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:
-----------------------------+---------------------

Comment (by nazianzun):

 Replying to [comment:3 jonathanstegall]:
 > After reinstalling 5.6.2 a few times, I think I'm starting to realize
 that (at least in some cases) this empty `<p></p>` was already there,
 seemingly because the `<figure>` is getting put inside a paragraph and the
 browser (as usual) renders it as an empty paragraph instead. But in
 previous versions the empty paragraph didn't have CSS to make it visible.
 In 5.7 there is maybe new CSS that makes it visually apparent when it
 wasn't before.
 >
 > Am I correct on this?

 In my own testing, the `<p>` tags weren't originally present. For example,
 if I have the following image embed with caption:

 {{{
 [caption id="attachment_14568" align="aligncenter" width="300"]<a
 href="https://domain.com/?attachment_id=14568" rel="attachment wp-
 att-14568"><img class="size-medium wp-image-14568" src="https://domain.com
 /wp-content/uploads/2019/07/Cuisinart-Griddle.jpg?w=300" alt="cuisinart
 griddle cooking center outside" width="300" height="225" /></a> This is an
 image of a barbecue. But will it generate empty P tags?[/caption]
 }}}

 It produces for me the following markup:


 [[Image(https://p-xBFZpQ2k.t2.n0.cdn.getcloudapp.com/items/bLuAzDoZ/c7c747c1-f1d7-4375-b90b-552106000534.png?v=20c580bf0a07da4cf3e21574597ef5e9)]]

 But if I add text immediately following the closing `[/caption]` tag, like
 so:

 {{{
 [caption id="attachment_14568" align="aligncenter" width="300"]<a
 href="https://tumbleweed-simonwheatley-co-uk-dca.go-
 vip.co/?attachment_id=14568" rel="attachment wp-att-14568"><img class
 ="size-medium wp-image-14568" src="https://tumbleweed-simonwheatley-co-uk-
 dca.go-vip.co/wp-content/uploads/2019/07/Cuisinart-Griddle.jpg?w=300"
 alt="cuisinart griddle cooking center outside" width="300" height="225"
 /></a> This is an image of a barbecue. But will it generate empty P
 tags?[/caption]Here's text after the tag.
 }}}

 I see the following markup instead:

 [[Image(https://p-xBFZpQ2k.t2.n0.cdn.getcloudapp.com/items/6qu8KWkL
 /44b4fa6d-6d9a-49ec-83fe-
 7696a4769059.png?v=9f27bbae400e48c4f3fb3e75a177f356)]]

 We now have empty `<p>` tags where none before existed. The `<p>` tag
 wraps the entire embed rather than just the text immediately following the
 closing `[/caption]`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52764#comment:17>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform