Instagram block embeds not displaying on front end.

[joshuaiz]

Steps to reproduce

1. Added Instagram Embed Gutenberg block
2. Entered this test URL from previous Gutenberg Instagram block thread (Gutenberg: Instagram embeds broken on Atomic sites #28314): https://www.instagram.com/p/BnOcZz1l_T9/
3. Embed works in Gutenberg editor in admin but only shows link on front end.
4. Using my Plate starter theme: https://github.com/joshuaiz/plate

What I expected

The Instagram Embed Gutenberg block to display on the front end

What happened instead

Only the included link is displayed

Browser / OS version

macOS 10.14.2/Chrome (latest)

There are no JavaScript or PHP errors whatsoever so I have no idea what in Plate is causing this or what I am missing to display Instagram embed blocks on the front end. I do not have Jetpack installed.

I looked at all of the other threads on the Instagram Embed block and could not find a solution:
WordPress/gutenberg#3499
#28314
#28126

What's different in this issue is embedding an Instagram picture is working in the back end on the Post edit screen but not displaying on the front end at all.

[joshuaiz]

Just a follow up, I have everything Gutenberg-related in the theme's add_theme_support() function and every other block I've tested works. Is there anything special I need for this block?

[gruffvaughan]

I'm also struggling with this issue using @joshuaiz's great starter theme. Very frustrating!

[gruffvaughan]

As a workaround until this is fixed, I'm having to throw Instagram's (very long) embed codes into a custom HTML block, which displays as intended. Does anyone have any thoughts on this issue?

[joshuaiz]

Tested this again with WordPress 5.1 and still not working. Since there are no errors (js/php/apache) anywhere, I have no idea what is causing this or how to fix.

I re-tested every other default block with Plate and every other block works.

[arunsathiya]

@joshuaiz I am able to see this working now. Possibly due to the new approach named Gutenframe (#31196) as @kwight hinted here - #28314 (comment). Could you try again?

[joshuaiz]

Hi @arunsathiya - still not working. See screenshots below.

In the editor (working):

On the front end (not working):

[kwight]

Hi @joshuaiz , I'm not sure I understand – how is this related to Calypso or WordPress.com? Being your own theme, with no Jetpack connection, it sounds like your talking about a standalone WordPress install on another host somewhere? Just want to make sure I know the environment we're talking about here.

If that is the case, it sounds like there may be Gutenberg scripts not getting enqueued to the front-end somehow?

[kwight]

Noting I've confirmed the Instagram block is fully part of the core block editor, and not Jetpack or Calypso at all.

[joshuaiz]

@kwight Sorry if this is in the wrong place...this is just an issue with the Instagram Gutenberg block and not with WordPress.com.

I can repost this issue again at the appropriate place, I'm just not sure where.

But yes, Plate is a starter theme that is in use on thousands of projects and we are just trying to make sure all the default blocks are working. For whatever reason, the Instagram block is not displaying on the front end.

I agree, I think some Gutenberg scripts may not be getting enqueued so I'm trying to figure out what we need to adjust/add to the theme to get the Instagram block working.

As mentioned above, there are no errors (js/php or otherwise) that help in isolating the issue.

Is there anything special via add_theme_support() we need for this block?

Thanks for looking into this.

[kwight]

@joshuaiz Hm, you could try posting to the Gutenberg repo: https://github.com/WordPress/gutenberg, but looking through that repo, there doesn't seem to be much that's Instagram-specific. I took a quick look myself, and it does seem to be an issue with the theme, so I'm not sure how much they'll be able to help (the issue can be turned off and on by toggling between Plate and any other default theme). Your next steps might be the laborious process of commenting out script enqueues in functions.php, and/or comparing scripts loaded on the front-end with a default theme. It's interesting that Twitter embeds work just fine in Plate (hence your confusion, I'm guessing 🙃). Good luck!

Closing as unrelated to WordPress.com or Calypso.