Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52764 closed defect (bug) (fixed)

Classic editor adding empty <p></p> tags in some media embed situations

Reported by: jonathanstegall's profile jonathanstegall Owned by:
Milestone: 5.7.1 Priority: normal
Severity: normal Version: 5.7
Component: Editor Keywords:
Focuses: Cc:

Description

In 5.7, I'm noticing cases where empty <p></p> markup is being inserted around image embeds when posts are created with the Classic Editor. I tried reverting to 5.6.2 and they were no longer inserted.

I'm having a little trouble isolating exactly when this happens, but here's what I'm noticing:

  1. The image has a caption
  2. The image is aligned left or right
  3. The image markup is followed immediately (without hitting enter) by paragraph text.

This appears to happen whether I use the WYSIWYG or the Text Editor, but it does not happen with the Block Editor.

I first noticed this on an established website, but have also been able to reproduce it on a clean WordPress install.

Here's a paste where this does happen (I'm pasting what is in the Text Editor view):

Duis in lacus nibh. In vulputate ex urna, ac iaculis justo aliquam nec. Cras feugiat, risus sit amet lobortis scelerisque, nisi lorem ultrices magna, ut congue mauris neque sed sapien. Integer a arcu eu massa feugiat auctor. Quisque egestas mattis elit at condimentum. In ac tortor ac odio tempus sodales sit amet eu orci. Aenean quis velit orci. Donec id tortor eget metus consectetur fringilla. Nullam eu eros sit amet turpis egestas porttitor. In ullamcorper mauris nec orci commodo, sit amet mollis odio porta. Aenean pulvinar consectetur eros, in malesuada ex iaculis id. Quisque nec pharetra lorem.

[caption id="attachment_604" align="alignright" width="300"]<img class="size-medium wp-image-604" src="https://vanilla-wordpress.test/wp-content/uploads/2020/08/20714776-fe88-3f54-b657-a0228a93adbd-300x240.png" alt="this is my alt text" width="300" height="240" /> this is my caption[/caption]Phasellus tortor dui, hendrerit nec mollis ac, posuere non erat. Aliquam erat volutpat. Curabitur at urna augue. Nulla et urna aliquet, pulvinar ipsum eget, faucibus lorem. Aliquam erat volutpat. Aliquam nulla tortor, gravida in sodales aliquam, convallis fermentum mauris. Donec in nunc tortor. Donec posuere viverra condimentum. Donec placerat vel lacus sed sagittis. In orci dui, tristique ut lobortis at, gravida in sapien.

And here's the markup it generates (I'm using the Twenty Twenty One theme in this case):

<p>Duis in lacus nibh. In vulputate ex urna, ac iaculis justo aliquam nec. Cras feugiat, risus sit amet lobortis scelerisque, nisi lorem ultrices magna, ut congue mauris neque sed sapien. Integer a arcu eu massa feugiat auctor. Quisque egestas mattis elit at condimentum. In ac tortor ac odio tempus sodales sit amet eu orci. Aenean quis velit orci. Donec id tortor eget metus consectetur fringilla. Nullam eu eros sit amet turpis egestas porttitor. In ullamcorper mauris nec orci commodo, sit amet mollis odio porta. Aenean pulvinar consectetur eros, in malesuada ex iaculis id. Quisque nec pharetra lorem.</p>
<p></p><figure id="attachment_604" aria-describedby="caption-attachment-604" style="width: 300px" class="wp-caption alignright"><img loading="lazy" class="size-medium wp-image-604" src="https://vanilla-wordpress.test/wp-content/uploads/2020/08/20714776-fe88-3f54-b657-a0228a93adbd-300x240.png" alt="this is my alt text" srcset="https://vanilla-wordpress.test/wp-content/uploads/2020/08/20714776-fe88-3f54-b657-a0228a93adbd-300x240.png 300w, https://vanilla-wordpress.test/wp-content/uploads/2020/08/20714776-fe88-3f54-b657-a0228a93adbd.png 448w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="240"><figcaption id="caption-attachment-604" class="wp-caption-text">this is my caption</figcaption></figure>Phasellus tortor dui, hendrerit nec mollis ac, posuere non erat. Aliquam erat volutpat. Curabitur at urna augue. Nulla et urna aliquet, pulvinar ipsum eget, faucibus lorem. Aliquam erat volutpat. Aliquam nulla tortor, gravida in sodales aliquam, convallis fermentum mauris. Donec in nunc tortor. Donec posuere viverra condimentum. Donec placerat vel lacus sed sagittis. In orci dui, tristique ut lobortis at, gravida in sapien.<p></p>

Attachments (3)

screenshot.png (51.3 KB) - added by jonathanstegall 3 years ago.
screenshot of 5.7 rendering of empty p tags
screenshot-db.jpg (89.7 KB) - added by pixelverbieger 3 years ago.
screenshot-sourcecode-firefox.jpg (306.6 KB) - added by pixelverbieger 3 years ago.

Download all attachments as: .zip

Change History (29)

@jonathanstegall
3 years ago

screenshot of 5.7 rendering of empty p tags

#1 follow-up: @ravipatel
3 years ago

@jonathanstegall

You need to add text in next line instead of after caption.
As per default editor behaviors is convert as a text.

#2 in reply to: ↑ 1 @jonathanstegall
3 years ago

Replying to ravipatel:

I've noticed that does have an effect. But I don't think it's a very good fix, since this is (presumably) a new issue and large sites like the one I work on would potentially have tens of thousands of posts that are affected by this. It seems to me that while the Classic Editor is still supported, this should be a fixable thing.

@jonathanstegall

You need to add text in next line instead of after caption.
As per default editor behaviors is convert as a text.

#3 follow-ups: @jonathanstegall
3 years ago

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?

#5 @SergeyBiryukov
3 years ago

  • Milestone changed from Awaiting Review to 5.7.1

Hi there, welcome back to WordPress Trac!

Thanks for the report, moving to 5.7.1 for investigation.

#7 @SergeyBiryukov
3 years ago

#52771 was marked as a duplicate.

#8 @SergeyBiryukov
3 years ago

Replying to 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.

Just noting that the issue is not limited to media embeds, and can happen with any <p></p> tags that were not previously visible on the page, but are visible now.

As noted above in comment:6, this is due to the change to block library paragraph styles in PR 27995, so the fix would likely need to be made upstream and backported to core.

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

#9 @SergeyBiryukov
3 years ago

#52782 was marked as a duplicate.

#10 in reply to: ↑ 3 ; follow-up: @Otto42
3 years ago

Replying to 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?

I've looked at half a dozen sites reporting this issue since yesterday, and in all cases I've seen so far, yes, those empty P tags were already present in the markup for those sites, or the markup was broken in such a way that Chrome interpreted an empty set of P tags (such as an unclosed P before a DIV and similar).

The CSS change introduced into 5.7 will make those tags have space on the page, but as far as I can see, there are no changes adding any new P tags to the page. Only the style changes as Sergey noted above.

#11 in reply to: ↑ 10 @jonathanstegall
3 years ago

Replying to Otto42:

Replying to 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?

I've looked at half a dozen sites reporting this issue since yesterday, and in all cases I've seen so far, yes, those empty P tags were already present in the markup for those sites, or the markup was broken in such a way that Chrome interpreted an empty set of P tags (such as an unclosed P before a DIV and similar).

The CSS change introduced into 5.7 will make those tags have space on the page, but as far as I can see, there are no changes adding any new P tags to the page. Only the style changes as Sergey noted above.

Yes, that seems right. I think my issue is that it never sank in for me that the editor didn't treat shortcodes, which we get when we embed media objects that have captions, as block level elements. It instead seems to wrap the div or figure from the shortcode inside the paragraph that follows, and the browser can't handle that and renders the empty paragraph tags instead. And then as you say, in 5.7 that paragraph has CSS to make it visible. Now that I'm looking for it I'm seeing it with all kinds of shortcodes that render as block level elements.

#12 follow-up: @Otto42
3 years ago

Note that a workaround can be used for now, if it's a severe problem on your site. This code in your Additional CSS will essentially undo this style on a site.

body p:empty:before {
  content: none;
}

#13 in reply to: ↑ 12 @wordpresssalad
3 years ago

Replying to Otto42:

Note that a workaround can be used for now, if it's a severe problem on your site. This code in your Additional CSS will essentially undo this style on a site.

body p:empty:before {
  content: none;
}

Thanks - that works for me (on my site is was the existing archives that were affected)

#14 @jonathanstegall
3 years ago

I'm realizing that ultimately the issue I'm having is actually related to #6984.

#15 @arskrigitsioniets
3 years ago

I also have this problem with my code. If there is no tag in taxonomy, I get an empty string.

My code:

<?php
    <!--tags start-->
<?php 
if( has_tag() )
        echo '<p class="game-post-has-tags">Метки:</p>'; 
?>
<p class="post-tags-game"><?php the_terms( $post->ID, 'genre', '<span class="post-tags-name-of-tag">Жанр: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'time', '<span class="post-tags-name-of-tag">Время: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'history', '<span class="post-tags-name-of-tag">Исторический период: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'wars', '<span class="post-tags-name-of-tag">Война: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'setting', '<span class="post-tags-name-of-tag">Сеттинг: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'gameplay', '<span class="post-tags-name-of-tag">Принципы геймплея: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'units', '<span class="post-tags-name-of-tag">О технике: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'fantasy_peoples', '<span class="post-tags-name-of-tag">О фэнтези расах: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'other', '<span class="post-tags-name-of-tag">Другое: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'regions', '<span class="post-tags-name-of-tag">Место действия: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'countries', '<span class="post-tags-name-of-tag">О стране: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'universe', '<span class="post-tags-name-of-tag">Вселенная: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'platform', '<span class="post-tags-name-of-tag">Платформы: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'modes', '<span class="post-tags-name-of-tag">Режимы: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'series', '<span class="post-tags-name-of-tag">Серия: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'developer', '<span class="post-tags-name-of-tag">Разработчик: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'developer_from', '<span class="post-tags-name-of-tag">Разработчик из: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'publisher', '<span class="post-tags-name-of-tag">Издатель: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'status_of_game', '<span class="post-tags-name-of-tag">Статус: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'year_of_release', '<span class="post-tags-name-of-tag">Год выхода: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'year_of_ea', '<span class="post-tags-name-of-tag">Год выхода в ранний доступ: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'score', '<span class="post-tags-name-of-tag">Оценка обозревателя: </span>', '');?></p>
<p class="post-tags-game"><?php the_terms( $post->ID, 'languages', '<span class="post-tags-name-of-tag">Языки: </span>', '');?></p>
<!--tags end-->
Version 0, edited 3 years ago by arskrigitsioniets (next)

#16 @SergeyBiryukov
3 years ago

#52866 was marked as a duplicate.

#17 in reply to: ↑ 3 @nazianzun
3 years ago

Replying to 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:

https://p-xBFZpQ2k.t2.n0.cdn.getcloudapp.com/items/bLuAzDoZ/c7c747c1-f1d7-4375-b90b-552106000534.png

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

[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]Here's text after the tag.

I see the following markup instead:

https://p-xBFZpQ2k.t2.n0.cdn.getcloudapp.com/items/6qu8KWkL/44b4fa6d-6d9a-49ec-83fe-7696a4769059.png

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].

Last edited 3 years ago by nazianzun (previous) (diff)

#18 @mkaz
3 years ago

The change that introduced the CSS was reverted in: https://github.com/WordPress/gutenberg/pull/29809

Last edited 3 years ago by mkaz (previous) (diff)

This ticket was mentioned in Slack in #core by mkaz. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

#23 follow-up: @pixelverbieger
3 years ago

All of you stating that these empty p tags have been there before - can you spot them in my database?


Here's what the web developer tools in Firefox show:


Is it Shortcode Ultimate adding these p tags!?

Screenshots were taken with a child theme we use on several dozens of websites. We haven't had these problems so far and it is no option to edit all the websites we take care of (approx. 200) …

Last edited 3 years ago by pixelverbieger (previous) (diff)

#24 in reply to: ↑ 23 @SergeyBiryukov
3 years ago

Replying to pixelverbieger:

All of you stating that these empty p tags have been there before - can you spot them in my database?

They are generally added by the wpautop() function at runtime and are not stored in the database.

Screenshots were taken with a child theme we use on several dozens of websites. We haven't had these problems so far and it is no option to edit all the websites we take care of (approx. 200) …

The fix is already made upstream in GB29809 and should be a part of WP 5.7.1.

#25 @Hareesh Pillai
3 years ago

Should we close this ticket as it has been reported upstream and fixed?

#26 @peterwilsoncc
3 years ago

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

This was fixed in the Gutenberg repository and included in the package update committed in [50678] for the ticket #52912.

Thanks for the report and assistance all.

Note: See TracTickets for help on using tickets.