Gutenberg: Embeds: WordPress Embeds not properly previewed in Editor

[ockham]

Describe the bug
WordPress Embeds are rendered quite differently in the Editor than on the frontend.

To reproduce
Steps to reproduce the behavior:

1. Start a new post.
2. Insert the URL of a WordPress site, e.g. https://ma.tt/2020/07/corner-office-interview/
3. Verify that rather than the embed, only a link with the page title is inserted.

Expected behavior
The WordPress Embed should be inserted, as seen on the frontend.

Screenshots
Editor:

Frontend:

Editor version (please complete the following information):

• WordPress version: 5.5
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.9

Additional context
Found by @david-szabo97 here: https://github.com/Automattic/wp-calypso/issues/39935#issuecomment-686524172. Quoting that comment:

EDIT:
~TLDR: We need this patch: D48267-code~
TLDR: oAuth embed auto discovery embeds the iframe

Figured it out. It's actually being embedded:

But you can see an inline style there on the iframe: position: absolute;clip: rect(1px, 1px, 1px, 1px); which is basically hiding the embedded content.

wp-embed.js is supposed to remove that inline style, but since we don't have that on WP.com, it's not happening.

So it seems we need to load that wp-embed.js in the editor to make things work? :thinking:

This issue also discussed as part of https://github.com/WordPress/gutenberg/issues/21029, and in https://github.com/bobbingwide/oik/issues/158 (although with a somewhat different conclusion, IIRC).

cc/ @mcsf @ntsekouras @paaljoachim @bobbingwide

[youknowriad]

Related #21945

[paaljoachim]

Thanks for adding the issue @ockham Bernie!

What we need is to be able to view the result of the embed in the backend as we can see it on the frontend.
The ideal would probably be this process:
1- User pastes a link (that wants to create a WP embed).
2- A placeholder shows up asking if one wants an embed or convert into a text link. Kinda like the below example.
3- (Really the ideal method would be) If user selects embed then one sees the result in the backend, and should be able to modify it as if it was a group block with inner blocks. As the embed contains a lot of elements.

Here is a kind of overview....

@desaiuditd Udit has been working on embeds.
I am not really sure where we are at right now.

At the moment we can transform an embed into a Paragraph through the Transform panel.
Like so.

Below are various issues. I believe we need a developer to look through to see where the forward path goes. I have lost track and feel a bit lost in the forest.

Embed issues:
https://github.com/WordPress/gutenberg/issues/21029

https://github.com/WordPress/gutenberg/issues/21789

https://github.com/WordPress/gutenberg/issues/15102

https://github.com/WordPress/gutenberg/issues/20442

https://github.com/WordPress/gutenberg/issues/18653

Merged Embed PR's:
https://github.com/WordPress/gutenberg/pull/22846
https://github.com/WordPress/gutenberg/pull/17413

[ntsekouras]

Great description and investigation made here!

I created a draft PR for now here: https://github.com/WordPress/gutenberg/pull/25370 and I'll work on it (still WIP).

The ideal would probably be this process:
1- User pastes a link (that wants to create a WP embed).
2- A placeholder shows up asking if one wants an embed or convert into a text link. Kinda like the below example.
3- If user selects embed then one sees the result in the backend, and should be able to modify it as if it was a group block with inner blocks. As the embed contains a lot of elements.

@paaljoachim while this sounds good, I believe it's something for an issue of its own. It seems to be another flow for how we try to transform links to embed blocks. Thanks for adding all these information and links, and I'll take a closer look as well (I haven't for now for all of them).

I think we should prioritize in this issue about fixing the bug to have front-end/back-end rendering parity.