wordpressinstagramoembedwordpress-gutenberggutenberg-blocks

Why won't my Gutenberg Instagram embed block work on front end when it works in the editor?


I'm embedding Instagram posts into the Wordpress Gutenberg editor using the Instagram block. Works fine in the editor, and the post embeds without any issues.

Back-end, all good!

On the front end, however, the Instagram link just sits there as text with no sign of any attempt to embed.

Front-end, not so good

A bit of digging led me to this article about {{unknown}} oEmbed cache entries in the database, which are present in my oEmbed database cache for the Instagram embeds that aren't working. However, I still can't figure out a solution, or a reason that this is happening.

There doesn't seem to be any issues with YouTube or Vimeo embeds on the site, it's only the Instagram one that's having problems. Again, the embed works absolutely fine in the back-end editor...

Has anyone else stumbled upon this odd front-end behaviour?


Solution

  • Found the solution to this thanks to @joshuaiz following this up in a separate thread:

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

    Removing $content_width = '100%'; from my theme's functions.php fixed the issue.