Gutenberg: Cannot embed a Facebook video url

[iamleese]

When I paste a facebook url to a video, the editor hangs up as it tries to parse the url.

I get the following on my console:
react-dom.min.82e21c65.js:142 Uncaught (in promise) Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Sg (react-dom.min.82e21c65.js:142) at m (react-dom.min.82e21c65.js:12) at ra (react-dom.min.82e21c65.js:123) at qb (react-dom.min.82e21c65.js:122) at jc (react-dom.min.82e21c65.js:135) at gc (react-dom.min.82e21c65.js:127) at vb (react-dom.min.82e21c65.js:126) at ub (react-dom.min.82e21c65.js:126) at zd (react-dom.min.82e21c65.js:124) at ra (react-dom.min.82e21c65.js:123)

[designsimply]

First, to clarify, you are using the video block (not a facebook block) and trying to add a facebook _video_ url into it? Are you able to post an example facebook url here for testing?

[iamleese]

I'm just using a regular text block. I also tried it on the facebook block. Both caused issues. Here the link:

https://www.facebook.com/sanluisreyparish/videos/10156123191928005/

[iamleese]

I just tried the embed block and the same thing happened.

[designsimply]

Tested and confirmed that pasting a Facebook video url such as https://www.facebook.com/sanluisreyparish/videos/10156123191928005/ into text blog or a Facebook block or an embed block results in an error that says:

This block has encountered an error and cannot be previewed.

Console error:

Objects are not valid as a React child (found: object with keys {foreground, src}).

^{Tested with WordPress 4.9.8 and Gutenberg 5a630c2cf (3.7-beta) and Chrome 68.0.3440.106 on macOS 10.13.6.}

[tofumatt]

Was that block designed to load Facebook videos? (This is where E2E tests outlining what was possible would be great 😅)

I would have thought this was for embedding content like an event, not a video, but I have no idea. The block description isn't very clear.

[iamleese]

Well, I'm not sure if it was designed for that, but it works in the classic editor as an automatic oEmbed function.

[notnownikki]

Taking a look at this now. We can't provide previews of Facebook URLs in the editor, because Facebook embeds will not run with the security restrictions we apply in the editor, but it should not error like this.

[notnownikki]

@tofumatt the block is for any facebook content, as we can't preview facebook content in the editor with the current sandbox security settings, it should show a placeholder instead. https://github.com/WordPress/gutenberg/pull/9466 has a fix. And yes, e2e tests are needed here, they're on my list.

[tofumatt]

Ah, ten four, thanks for the explanation! Sorry, I'm just unfamiliar with the block and asked newbie questions in case others were in my boat. 😅

[notnownikki]

Feel free to hit me with a giant foam bat that has "embed e2e tests" written on it :laughing:

[danielbachhuber]

This issue was fixed by #9466 but wasn't closed for some reason.