Gist URLs within Gutenberg causing a broken embed box

[dartiss]

Right now, Jetpack is affecting the embedding of Gists within Gutenberg, although I've been unable to narrow it down to a specific Jetpack module (although a default set-up of Jetpack does cause this, so it's either a default module or not a specific one at all).

To recreate...

With Jetpack and Gutenberg active, try embedding a Instagram profile - these are not set up to currently embed. For example... https://www.instagram.com/lauraartiss/

This will display as a box, with the URL showing and showing "Sorry, we could not embed that content". However, try a Gist, for example https://gist.github.com/dartiss/028c0065c06b0b84a26f40038fbf47b7. This shows, instead, as a totally empty block.

Switch off Jetpack and the Gist embed will now display correctly. The attached screenshot shows both of the examples.

I've tried this on 3 different sites, all hosted on different platforms, and the same issue occurs.

[kraftbj]

My guess without investigating is https://github.com/Automattic/jetpack/blob/master/modules/shortcodes/gist.php . Specifically, we're calling a custom oembed handler, which just calls our shortcode handler. The shortcode handler is enqueuing JS which, I presume, isn't happening with Gutenberg's way of doing it.

Are there any errors in the console?

[dartiss]

No errors @kraftbj

[BinaryMoon]

I was about to create this exact issue. The gists show in the blog post itself but don't display in the editor. However you can select and edit them.

[jeherve]

Update on this: WordPress/gutenberg#9734 has helped a bit by enqueuing the gist.min.js file our embed depends on, but we still run into a JavaScript error:

Uncaught ReferenceError: jQuery is not defined

[dartiss]

Unfortunately, the release of WordPress 5.0 has now made this worse, as Gist embeds no longer work at all.

With Jetpack installed under WP 5.0, I'm seeing the same behaviour as you'd expect if Jetpack wasn't installed (i.e. no support for Gist embeds). Adding a Gist URL to a post generates the "sorry, we could not embed that content” and displaying the pos then shows the Gist URL, unlinked.

This is a problem for users who have posts with Gist URLs embedded in them already, as this new behaviour breaks both new and existing posts as well.

I'm told Jetpack hasn't decommissioned Gist embeds, so it looks as if the embedding has simply broken entirely now.

[jeherve]

Related: #9331

Adding a Gist URL to a post generates the "sorry, we could not embed that content” and displaying the pos then shows the Gist URL, unlinked.

I can reproduce this, but the gist embeds actually seem to work on the frontend. Is it the same on your end?

I tested with this URL:
https://gist.github.com/sebastianbenz/1d449dee039202d8b7464f1131eae449

Here is how it looks in the editor:

and on the frontend:

[dartiss]

No, doesn't work for me on the front-end.

I'm testing with this Gist - https://gist.github.com/dartiss/d0d117f251cf6b9bd750c19ec9377c23

Here's my test post - https://artiss.uk/sandbox/uncategorized/new-gist-test/

[jeherve]

It seems you've disabled the Shortcodes module on your site; you'll want to enable it for this to work on the front-end.

[dartiss]

🤦 Yeah, you're right. I disabled it a little while ago to test a YouTube shortcode that was being overridden by the Jetpack version.

Odd. I only bought this up because a user on wp.org forums reported the same - I guess they must be in the same situation. I'll sort them out.

Thanks Jeremy.

[westonruter]

Just noticed this bug today when trying to embed a Gist.

Can the jQuery dependency just be eliminated here?

[ohmegasquared]

I am also experiencing this issue.