Fix: Embed Block: Match HTML in the editor and frontend

[hbhalodia]

What?

• Fixes - Embed Block: Match HTML in the editor and frontend #65179

Why?

• To match the exact HTML for frontend and backend as per - Embed Block: Match HTML in the editor and frontend #65179

How?

• PR removes the block wrapper div, instead adds figure as a wrapper, so it matches with frontend markup.

Testing Instructions

1. Open any post/page.
2. Add embed block.
3. Add URL to be embeded, check for frontend and backend markup.
4. It should be similar.

Testing Instructions for Keyboard

• None.

Screenshots or screencast

Backend

<figure tabindex="0" class="block-editor-block-list__block wp-block is-selected wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed" id="block-8d19fac7-16f5-44ac-8ae0-6630fd12dc9d" role="document" aria-label="Block: YouTube Embed" data-block="8d19fac7-16f5-44ac-8ae0-6630fd12dc9d" data-type="core/embed" data-title="YouTube Embed">
    <div class="wp-block-embed__wrapper">
        <iframe title="Embedded content from www.youtube.com" class="components-sandbox" sandbox="allow-scripts allow-same-origin allow-presentation" width="462" height="260">
        </iframe>
    </div>
</figure>

Frontend

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
        <iframe title="Alexandre Corbeil on Gaining New Skills at Trebas Institute Toronto" width="500" height="281" src="https://www.youtube.com/embed/BOM34PANOHM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">
    </iframe>
    </div>
</figure>

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: hbhalodia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.