Gutenberg: Embeds: Facebook embed doesn't show preview

[alisterscott]

Steps to reproduce

1. Starting at URL: https://wpcalypso.wordpress.com/gutenberg/
2. Paste a Facebook post link such as https://www.facebook.com/hollybutcher90/posts/10213711745460694

Gutenberg in Calypso Result

Calypso Editor Result

Browser / OS version

Chrome 69 on macOS

Related

https://github.com/Automattic/wp-calypso/issues/27498

[JavonDavis]

Currently still behaves this way in wordpress.com in the editor. Is the intended behavior? If so we can close out this one.

[codebykat]

This is a Gutenberg core issue that is being tracked here: https://github.com/WordPress/gutenberg/issues/8360

Since the embed itself renders after publishing, I don't think there's anything we can or need to do here.

[gwwar]

Reopening to keep track of reports. If needed we can fix this ahead of core.

[jjchrisdiehl]

Another case here 9724873-hc

Customer tried embedding their facebook page and received Sorry, we cannot preview this embedded content in the editor.

[zdenys]

Another case 2089010-zen

Tested with a different Facebook Page. Embedding a page URL, like https://www.facebook.com/AutomatticInc/ doesn't work and shows Sorry, this content could not be embedded.:

Embedding an individual post, like https://www.facebook.com/AutomatticInc/posts/998273493676267 works

Is it expected behavior? It seems it is.

[taropaa]

I am running into the same issue. Embedding a generic facebook page will just display a text URL that is not even clickable. To make things worse, I can't paste a facebook page URL without it being converted into a broken embed. If default profiles can't be embedded, then just leave the URLs alone. In this particular instance, it works completely against the user and will drive a less experienced user insane, who just wants to paste a facebook link.

[formosattic]

+1 15689980-hc

The "Embedded content from facebook.com can't be previewed in the editor." message is viewed as an error which makes it sound like the embed is broken even though it'll still display on the site.

[gwwar]

This should be on the WP whitelist, though https://github.com/WordPress/gutenberg/issues/8360 is still open.

I'm still seeing the following on a standalone install. We'll need to make a core PR

Vanilla Install

wpcom

[davipontesblog]

@lancewillett do you think this is something we could prioritize in dotCom vs core, or help with efforts in core to fix the issue? Context: this used to be possible in the classic editor.

[lancewillett]

@davipontesblog Let's help push the fix "upstream" meaning in core first.

(CC @mtias as an example where WP.com can help make a core change, then merge it back to our platform later.)

[ockham]

Ran into this today on WP.com. Couldn't repro in Core however -- it seems to work there now :thinking:

WP.com (with GB 8.9.3):

Local vanilla GB install (master, >= 9.0):

The difference seems to lie in the previewable attribute, which isn't set in vanilla GB, but on WP.com is set to false.

[ockham]

Hmm, maybe that's expected/consistent. The FB embed hard-wires the previewable attribute to false here: https://github.com/WordPress/gutenberg/blob/f3cdac3726638604ecb9bef639db13a755acaf1b/packages/block-library/src/embed/variations.js#L70

But in 9.0, the FB embed was "removed": https://github.com/WordPress/gutenberg/pull/24472

This means that inserting an FB URL will now create a "generic" embed -- which doesn't have previewable set, thus displaying the preview.

cc/ @ntsekouras @mkaz (in case we'd like to change that -- not sure what the original motivation for setting previewable to false was)

[ntsekouras]

not sure what the original motivation for setting previewable to false was)

When I refactored embed to use block variations that setting (previewable: false) was there before. I don't have the context for that decision..

[mkaz]

@ntsekouras I'm not sure about the setting either.

[ntsekouras]

https://github.com/Automattic/wp-calypso/issues/27701#issuecomment-693373999

-cc @youknowriad @mcsf @ellatrix @jorgefilipecosta Do you have any context for the motivation for setting previewable to false for FB embed? Thanks!

[mcsf]

Do you have any context for the motivation for setting previewable to false for FB embed? Thanks!

I have no knowledge about this. Some of the people who did the most work on Embeds haven't been around in a while, either.

[ockham]

Could it be a privacy/GDPR thing? Do oEmbeds do any sort of non-GDPR compliant tracking? (Would be kinda surprising tho...)

[ockham]

Tracked it down to this PR, which seems to be where the FB embed block was first introduced (and added to a noPreview array, which seems to be the predecessor of the previewable attribute): https://github.com/WordPress/gutenberg/pull/816#issuecomment-305132046:

Also, previewing facebook embeds is disabled, because fb scripts want to change global things about the document they're running in (which the sandboxing iframe highlighted and wouldn't allow).

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[worldomonation]

Removing the Stale label as Facebook (among other media embeds) continue to provide less than ideal experience.

When embedding a link, the block turns to a simple paragraph of the embedded URL. The blocks do not render as expected in Preview nor in Published mode.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[worldomonation]

Removing Stale label.

However, upstream issue https://github.com/WordPress/gutenberg/issues/8360 is now closed with comment:

> This can be closed since facebook is no longer supported in the embed block because of their api changes. [87c4dc5](https://github.com/WordPress/gutenberg/commit/87c4dc536f52254975b4b5e192e36f7d98b6f0b7)

Given this development, either we develop our own fixes for this block, or remove the Facebook embed block entirely.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[danielbachhuber]

Given this development, either we develop our own fixes for this block, or remove the Facebook embed block entirely.

@vindl Given the above ^, did you have an opinion on how we'd resolve this issue?

[vindl]

@vindl Given the above ^, did you have an opinion on how we'd resolve this issue?

It would probably make more sense to develop our own fixes or version of this block. However, this falls into new feature development territory a bit, so I'll assign it back to the team that's owning the Blocks work. They might be in a better position to make this call.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[jeherve]

Closing this in favor of https://github.com/Automattic/jetpack/issues/35826 since the Facebook embed block is now part of Jetpack.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 2089010-zen