WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#51328 new defect (bug)

Classic Editor adds extra p tags to Instagram Embed

Reported by: HannaIris Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.5.1
Component: Embeds Keywords: wpautop
Focuses: Cc:

Description

Issue:

On Classic editor with wpautop enabled, when adding an Instagram url to be embedded, the editor adds extra p tags.

Steps to replicate:

  1. Use Classic Editor.
  2. Place Instagram post url to editor (doesn't matter Visual, Text, with or without p tags)
  3. Save Post.
  4. Check frontend code.

The output:

  1. Closing </p> tag after the first link:
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/XXX" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:640px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:16px;"> <a href="https://www.instagram.com/p/XXX style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> </p>
  1. Closing </a> is inside p tag: <p></a> </p>
  1. Script tag is inside p tag: <p><script async src="//www.instagram.com/embed.js"></script></p>

Expected output:

No extra p tags, eg what you get with remove_filter( 'the_content', 'wpautop' );.

Change History (1)

#1 @SergeyBiryukov
2 months ago

  • Focuses coding-standards removed
  • Keywords embeds classic-editor removed

Hi there, welcome to WordPress Trac! Thanks for the report.

Just noting that Facebook removes support for Instagram embeds from October 24th:
https://make.wordpress.org/core/2020/09/22/facebook-and-instagram-embeds-to-be-deprecated-october-24th/

Related: #50861

Note: See TracTickets for help on using tickets.