Return Rendered HTML For Embed Blocks

[acafourek]

When using oEmbed-enabled links, WordPress automatically converts the URL to its oEmbed entity - paste the URL of a YouTube video or of an Instagram post and the editor turns it into the embedded entity (so long as it's from a whitelisted source). It's a great editor experience but not easy to support with a headless renderer.

Currently, the information available about an embedded block like that is something like this:

Via Gutes-DB endpoint:

{
    "clientId": "de662839-2d40-4cb6-8aea-6dd582edf3da",
    "name": "core-embed\/instagram",
    "isValid": true,
    "attributes": {
        "url": "https:\/\/www.instagram.com\/p\/BmYak-1AOL4\/",
        "allowResponsive": true,
        "type": "rich",
        "providerNameSlug": "instagram",
        "className": ""
    },
    "innerBlocks": []
},

WP Raw Database

<!-- wp:core-embed/instagram {"url":"https://www.instagram.com/p/BmYak-1AOL4/","type":"rich","providerNameSlug":"instagram","className":""} -->
<figure class="wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram"><div class="wp-block-embed__wrapper">
https://www.instagram.com/p/BmYak-1AOL4/
</div></figure>
<!-- /wp:core-embed/instagram -->

WP REST API via /wp-json/wp/v2/pages/{id}

<figure class=\"wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/BmYak-1AOL4\/\" data-instgrm-version=\"12\" style=\" background:#
..... Lots of HTML/JS code
<\/p><\/div><\/blockquote><script async src=\"\/\/www.instagram.com\/embed.js\"><\/script>\n<\/div><\/figure>

Suggested Enhancement

For many block types, Gute-DB returns an originalContent field. This isn't provided for core-embed/{provider} blocks, and even if it were, the markup example above under "WP Raw Database" isn't immediately useful. A more useful value to include, perhaps in a renderedContent field would be the HTML produced by WP after rendering the embed.

This would prevent each front end consumer from having to create a rendering handler for all 2 dozen+ oEmbed providers whitelisted by WordPress - a consuming FE would simply need to handle all core/embed blocks by rendering the provided HTML.

If the originalContent is available, the string can be converted to the rendered embed code in two ways:

1. Apply the_content filters like apply_filters( 'the_content', html_entity_decode( $originalContentString));
2. Call the WP_Embed class directly

$embed = new WP_Embed();
$renderable = $embed->autoembed( html_entity_decode( $originalContentString ) );

I'm happy to contribute a filter to do the embed parsing to the API response, but have had some trouble tracking down why embed blocks dont have the originalContent available after going through the CleanFilter when saving.