Embed Block: Match HTML in the editor and frontend

[t-hamano]

Discovered while reviewing #64970

What problem does this address?

In #64970, the figcaption element was moved into the figure element in the editor. However, the HTML in the frontend and editor do not match completely.

Editor:

<div 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-87cbd5e9-5d49-47a8-9085-b7e6a72d8c58" role="document" aria-label="Block: YouTube Embed" data-block="87cbd5e9-5d49-47a8-9085-b7e6a72d8c58" data-type="core/embed" data-title="YouTube Embed">
  <figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed is-type-video">
    <div class="wp-block-embed__wrapper">
      <iframe title="Embedded content from youtu.be" class="components-sandbox" sandbox="allow-scripts allow-same-origin allow-presentation" width="620" height="349"></iframe>
    </div>
    <figcaption role="textbox" aria-multiline="true" aria-label="Embed caption text" aria-readonly="false" class="block-editor-rich-text__editable wp-element-caption rich-text" contenteditable="true" data-wp-block-attribute-key="caption" style="white-space: pre-wrap; min-width: 1px;">Caption</figcaption>
  </figure>
</div>

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="Matt Mullenweg: State of the Word 2023" width="500" height="281" src="https://www.youtube.com/embed/c7M4mBVgP3Y?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>
  <figcaption class="wp-element-caption">Caption</figcaption>
</figure>

As you can see, in the editor, the block wrapper element is a div element, not a figure element.

This isn't an issue in most cases, but it can cause a visual difference when a block next to an Embed block has zero margins applied. This is because the figure element has a bottom margin applied to it.

Editor:

Frontend:

What is your proposed solution?

We should be able to make it match the front-end HTML by applying a figure element instead of the block wrapper div in the editor, and removing the existing figure element.

As a preliminary to this, it might make sense to rewrite the EmbedPreview component from a class component to a function component.

[t-hamano]

it might make sense to rewrite the EmbedPreview component from a class component to a function component.

Regarding this point, #51325 should solve it.

[hbhalodia]

Hi @t-hamano, I have raised the PR for the fix - #65478,

Thank You,

[hbhalodia]

Hi @t-hamano, Looks like we can close this issue? as PR is merged to trunk.

Thank You,

[t-hamano]

Yes, I believe the HTML in the Embed block matches perfectly, so we can close this issue 👍