Previews for Embeddable Facebook Content are not displayed

[7studio]

Describe the bug
When I try to use the Facebook Embed Block, the preview of a valid embeddable content is not displayed.
Plus, when I try the same thing with the classic editor, it works very well.

Maybe this issue is relative to the #5530 one.

To Reproduce
Steps to reproduce the behaviour:

1. Create a new content.
2. Add a Facebook Embed Block.
3. Paste a valid content URL. E.g.: https://www.facebook.com/oohmyworld/videos/2324195200940031/
4. See the error message "Previews for this are unavailable in the editor, sorry!".

Expected behaviour
Gutenberg should display a preview of the embedable Facebook content or at least its HTML fallback.
E.g.:

<div class="fb-post" data-href="https://www.facebook.com/oohmyworld/posts/1882552011810839" data-width="552">
	<blockquote cite="https://www.facebook.com/oohmyworld/posts/1882552011810839" class="fb-xfbml-parse-ignore">
		<p>Une petite rétrospective sur notre vie en Ecosse...</p>
		Publiée par <a href="https://www.facebook.com/oohmyworld/">Ooh My World - En Écosse et ailleurs</a> 
		sur&nbsp;<a href="https://www.facebook.com/oohmyworld/posts/1882552011810839">Dimanche 29 juillet 2018</a>
	</blockquote>
</div>

If for some security issues, you don't want to embed external scripts into Embeds Block Previews, you are able to add the omitscript parameter to the Facebook API endpoint: https://developers.facebook.com/docs/plugins/oembed-endpoints?locale=en_GB#parameters

Screenshots

Additional note

• I have no error message in browser console;
• The response of the REST route /oembed/1.0/proxy is valid;
• The transient to cache the REST response is correctly saved.

[danielbachhuber]

Related #8361 (comment)

I think there's some difference between how Facebook posts are embedded within the Classic Editor vs. Gutenberg, which makes them not work in Gutenberg.

[7studio]

Thank you for your answer Daniel ☺️

I'm not sure there is a difference between the Classic Editor and Gutenberg about Facebook oEmbed insertion. Plus, it is really stange that other services work and Facebook doesn't 😕

I hope Facebook oEmbeds will work when Gutenberg will be inserted in WordPress core.

[7studio]

I took the time to look into core-blocks/embed and the Sandbox component and now I understand why Facebook contents can't be included. There are so many differences between Gutenberg and Classic editor. I'm sorry for my quick previous answer.

Can you explain to me why the embeds are sandboxed? They are not in the classic editor and in front-end.

[danielbachhuber]

I took the time to look into core-blocks/embed and the Sandbox component and now I understand why Facebook contents can't be included. There are so many differences between Gutenberg and Classic editor. I'm sorry for my quick previous answer.

No worries! Glad you were able to come to some understanding.

Can you explain to me why the embeds are sandboxed? They are not in the classic editor and in front-end.

I don't know off the top of my head, to be honest. It may be related to admin authentication cookies; the Classic Editor TinyMCE instance exists within an <iframe>, and frontend rendering doesn't have access to /wp-admin/ cookies. I'm sure there's some rationale for it though.

[danielbachhuber]

Removing the REST API Interaction label because this doesn't need any changes from the REST API.

[thebud15]

Reported in #10653779-hc with follow up at #1913555-zen

[renatonascalves]

@danielbachhuber Just to confirm, the preview is a no-no?

[danielbachhuber]

@renatonascalves I don't recall exactly. If I were to look into this again, I'd first see if it was possible to cleanly sandbox the embed within an <iframe> (keeping in mind that it will need to resize responsively). If it doesn't look like it would be feasible, then I'd look at clarifying the error message (specifically for Facebook) to explain why the embed doesn't work within the editor.

[skorasaurus]

This can be closed since facebook is no longer supported in the embed block because of their api changes. 87c4dc5