Skip to content

fix: Facebook embed in Gutenberg block fails for reel URLs (fbs-82016)#269

Open
AmitPaul-akp wants to merge 1 commit into
WPDevelopers:mainfrom
AmitPaul-akp:fb-embed-gutenberg-fix
Open

fix: Facebook embed in Gutenberg block fails for reel URLs (fbs-82016)#269
AmitPaul-akp wants to merge 1 commit into
WPDevelopers:mainfrom
AmitPaul-akp:fb-embed-gutenberg-fix

Conversation

@AmitPaul-akp
Copy link
Copy Markdown

Affected version: 4.5.4
Severity: Medium

Summary

The EmbedPress Gutenberg block shows "Sorry, we could not embed that content." for Facebook reel URLs (e.g. https://www.facebook.com/reel/2408092022903533), even though the same URL renders correctly via the Elementor EmbedPress widget. The block consumes a REST response that carries both a valid embed field and a stale error field from a failed FB Graph API call; the block's JS guard rejects anything with error set, dropping a perfectly good iframe.

Reproduction (before fix)

Environment used to reproduce:

  • WordPress latest (any recent version), PHP 8.2
  • EmbedPress Free 4.5.4 (vanilla, no FB app token configured)
  • Reproduced on Local by Flywheel

Steps:

  1. Open any post in the block editor.
  2. Add an EmbedPress Gutenberg block.
  3. Paste https://www.facebook.com/reel/2408092022903533 and click Embed.
  4. Observed: "Sorry, we could not embed that content." (cannotEmbed: true).
  5. Expected: Inline Facebook iframe preview, same as facebook.com/{user}/videos/{id} and facebook.com/{user}/posts/{id} URLs in the same block.

Why it's reel-specific: WP_oEmbed::get_provider() performs HTTP discovery on facebook.com/reel/... and resolves it to graph.facebook.com/v25.0/oembed_video?.... Calling that endpoint without an FB app token returns (#200) Provide valid app ID. WP_oEmbed::fetch() attaches the error payload to $urlData. Embera's local Facebook provider then runs as a fallback and fills in a valid static iframe in $parsedContent, but the error from $urlData is preserved through array_merge into the final response. Regular FB video/post URLs aren't affected because get_provider() returns false for them and the Graph API call never happens.

The block JS guard (assets/js/blocks.build.js) reads:

if ( status === 404 || ! response.embed || response.error ) {
    setAttributes({ cannotEmbed: true, editingURL: true });
}

So any non-empty error field nukes an otherwise-valid embed.

Fix

File: EmbedPress/Shortcode.php — inside parseContent(), just before the final array_merge (~ line 581)

$urlDataArr = (array) $urlData;
// Drop upstream provider errors when the fallback produced a real
// embed. FB reel URLs surface a Graph API OAuth error via WP core's
// oEmbed, and the Gutenberg block rejects responses that carry an
// `error` field even when `embed` is valid.
if (isset($urlDataArr['error']) && preg_match('~<(iframe|embed|script|blockquote|video|object)\b~i', $parsedContent)) {
    unset($urlDataArr['error']);
}

$embed = (object) array_merge($urlDataArr, [
    'attributes'    => (object) self::get_oembed_attributes(),
    'embed'         => $parsedContent,
    'url'           => $url,
    'provider_name' => $provider_name,
]);

Why it's safe:

  • Only strips error when the assembled embed HTML actually contains an embeddable element (<iframe> / <embed> / <script> / <blockquote> / <video> / <object>). If the fallback produced nothing, error still propagates and the block correctly shows the "cannot embed" state.
  • No change for providers that never set error in the first place.
  • Embera fallback path itself is unchanged — the iframe HTML emitted is identical to what was already being produced.
  • No public API / hook changes, no migration, no version bump.

Test plan

  • Add EmbedPress Gutenberg block → paste https://www.facebook.com/reel/2408092022903533 → expect inline iframe preview (no "could not embed" error)
  • Same block with https://www.facebook.com/{user}/videos/{id} → still renders correctly (regression check)
  • Same block with https://www.facebook.com/{user}/posts/{id} → still renders correctly (regression check)
  • Same reel URL via Elementor EmbedPress widget → still renders correctly (unchanged path)
  • Bogus URL (e.g. https://example.com/nope) in Gutenberg block → still shows "Sorry, we could not embed that content." (negative regression check — error must still propagate when no embed HTML is produced)
  • Frontend render of a saved reel embed → iframe present, no console errors

Build artifacts

Hotfix zip built from this branch (fb-embed-gutenberg-fix), version kept at 4.5.4 (no version bump per internal convention) — attached to the Fluent Boards card linked below.

Related

  • Fluent Boards card: Board 17 / Task 82016
  • Reported by client; surfaced via internal QA on EmbedPress 4.5.4

WP core's oEmbed discovery resolves facebook.com/reel/{id} URLs to
the Graph API endpoint, which then fails with "Provide valid app ID"
when no FB app token is configured. The OAuth error gets merged into
the response object alongside the valid iframe HTML produced by
Embera's local Facebook provider fallback.

The Gutenberg block JS rejects any response with an `error` field
even when `embed` is populated, so the editor shows "Sorry, we could
not embed that content." Elementor's widget consumes the server-
rendered `embed` directly and has no such guard, which is why the
same URL renders there.

Strip `error` from the merged response when the fallback produced
real embed HTML (iframe / embed / script / blockquote / video /
object). No behaviour change for any provider where `error` wasn't
present, and the fallback iframe itself is unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant