Gutenberg: audit that we can render all embeds on the Jetpack and wpcom list

[gwwar]

Follow up to #27486. Let's make sure the oembed/1.0 namespace can serve all of our expected embeds, those whitelisted in core, wpcom and jetpack.

As @notnownikki noted:

if the 1.0 endpoint is the same as the proxy endpoint in core, then it might not work fully with all of Jetpack's embeds. Specifically, Pinterest.

Pinterest embed is implemented with a shortcode, and that shortcode enqueues scripts. The wp/v2 endpoint returns extra scripts metadata that Gutenberg uses to render the preview. In Gutenberg core, there's a wrapper to embed calls that logs any enqueued scripts and returns them in the same way that the wp/v2 endpoint does. Eventually, this wrapper will end up in WP core, but for now it's part of the plugin.

[alisterscott]

Hi @gwwar

I had a look at WP.com embeds both from the source and from en.support and tested against the wpcalypso.wordpress.com/gutenberg for a simple site comparing to regular calypso editor.

17 embeds behaved the same, 8 had issues or didn't behave the same, and 12 of them I wasn't sure about how to test or work out the expected behaviour.

The full list with example URLs/shortcodes is here:

oEmbeds Working same as Calypso Editor

1. Tweet - URL Alain de Botton on Twitter: “On Needing to Find Something to Worry About https://t.co/IITxuf4v4M”
2. Twitter Timeline - URL WordPress.com (@wordpressdotcom) | Twitter
3. Carto - example visits map
4. Codepen - example Banksy Shredder
5. Daily motion - The Office - S 2 E 20 - Video Dailymotion
6. Flickr - Home | It’s a beautiful valley located in the interior of Br… | Flickr
7. Houzz - example Street of Dreams - Joie de Vivre Home - Contemporary - Home Gym - Portland - by AV Awakenings
8. Slideshare - example Blitzscaling: Book Trailer
9. TED - example - Alex Honnold: How I climbed a 3,000-foot vertical cliff — without ropes | TED Talk
10. Vimeo: Coachelletta on Vimeo
11. YouTube DMA’S cover Cher ‘Believe’ for Like A Version - YouTube
12. Soundcloud - Wax Worx - Data Transmission Stage - Nozstock 2018 by Wax Worx | Free Listening on SoundCloud
13. Mixcloud Club Killers Radio #230 - JD Live by Club Killers | Mixcloud
14. Audiomack http://www.audiomack.com/song/your-music-fix/chimes-1
15. Issuu So Young Issue Seventeen by So Young Magazine - Issuu
16. Wistia automattic-2 - Login
17. Radiopublic Song Exploder on RadioPublic

oEmbeds Different to Calypso Editor or Not Working

1. Facebook - doesn’t show preview - URL Holly Butcher - A bit of life advice from Hol:It’s a… | Facebook
2. Pinterest - doesn’t embed - URL #UOHome Inspo | indoor garden | Pinterest | Plants, Interiors and Future
3. Google Maps iFrame code - doesn’t do anything <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d14158.742138514875!2d153.01188991977534!3d-27.47904779999999!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1539065953822" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
4. Google Plus - example - How to Embed a G+ Post on Your Site Here’s a quick tutorial on how to use thi… - This is being deprecated so do we care or low priority
5. Instagram - doesn’t load preview - 🐴 al on Instagram: “A sunset drive through some glorious countryside”
6. Vine - doesn’t load preview - does this matter since Vine is no more? Vine
7. Audio shortcode not working - [audio http://en-support.files.wordpress.com/2014/10/istock_audio.wav|loop=yes]
8. Archiveorg shortcode not displaying [archiveorg-book AnExperimentWithTime/Dunne-AnExperimentWithTime width=480 height=430]

Unknown oEmbeds

1. Upcoming events iCal - example - http://www.google.com/calendar/ical/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic.ics
2. Bandcamp embed - uses a shortcode from Bandcamp but this shows as shortcode block - example [bandcamp width=100% height=120 album=3600251511 size=large bgcol=ffffff linkcol=0687f5 tracklist=false artwork=small track=152025244]
3. Digg This? Is this a URL like: Wedding Photographer Shoves The Bride’s Stepmom Out Of The Way To Get The Shot - Digg
4. Flatio? Rent Prague from 2 297 €/month, Praha 8 (verified) | FLATIO
5. Google Video - is there such a thing anymore?
6. Mesh - I think this is disabled on WordPress.com editor now? WordPress.com and the Wine Tourism Conference 2015 | Mesh
7. Scribd Embed - uses a shortcode: [scribd id=2 key=key-cc76c346iolwc3nqfrq mode=scroll]
8. Untappd? [untappd-menu location=32 theme=25]
9. Wufoo - doesn’t show shortcode in editor - [wufoo username="exampleuser" formhash="x7w3w3" autoresize="true" height="458" header="show"]
10. Gettyimages? Tourist On A Rock Admiring Gljufrabui Waterfall Iceland Stock Photo | Getty Images
11. Archive.org [archiveorg id=Wonderfu1958]
12. Twitch [twitchtv url="https://www.twitch.tv/paperbat/b/323486192"]

[notnownikki]

Couple of things related to the embed block and endpoint it uses :)

Facebook - doesn’t show preview

This is because of the security settings on the sandboxing iframe. Facebook wants to change things in the top level window, and the iframe stops that.

Pinterest - doesn’t embed

Do you can the "this can't be embbeded" type error? Or do you see no preview? There might be a couple of different causes for this, as it's rendered by a Jetpack shortcode instead of one of the allowed providers.

Google Maps iFrame

This should work fine with the Custom HTML block?

Instagram

That's the scripts issue in #27486 (comment) If you're getting a blank preview for Pinterest too, it's the same issue. Although, I just had a report from someone on twitter saying her Pinterest embeds stopped working, so perhaps something else is going on with Jetpack here?

[notnownikki]

Further investigation into the Intsagram embed, and once the scripts element is returned we get a preview, but there's a javascript error in the preview, it can't find a body element. I'm wondering if some shortcodes enqueue scripts inline, rather than to be included in head? We do get a preview, but it's not the full thing that appears on the published post. So if you get the embed itself working, be prepared for that :)

[notnownikki]

Fix for the Instagram issue is at WordPress/gutenberg#10434

[notnownikki]

Fix for the Instagram issue has been merged.

[gwwar]

Thanks @alisterscott and @notnownikki this is super helpful!

We'll make cards for the remaining items.

[alisterscott]

@gwwar: would you like me to create cards? I’m happy to. Is it one card for each item that doesn’t work the same at present added to backlog in project?

[gwwar]

Oh sure if you like! Yes, one card per non-working embed. We can add them to https://github.com/orgs/Automattic/projects/34 in "Backlog" at normal priority.

Thanks @alisterscott 💖

[alisterscott]

Thanks for your feedback @notnownikki

This should work fine with the Custom HTML block?

I couldn't find this block, do you know what it's called?

[alisterscott]

@notnownikki I tried editing a normal block in HTML mode and adding the Google Maps code but it then shows a message to convert to block which then removes the block - raised as #27003

[alisterscott]

@gwwar on the audio block it says you can select a file from your media library - do you know how to actually do that though? I can't work out how and maybe it is obvious?

[alisterscott]

I've raised the following issues:

• Audio embeds - can't get these to work at all - Gutenberg: Embeds: Audio shortcodes/embed don't work #27706
• Google Maps: Gutenberg: Embeds: Google Maps embed doesn't work #27703
• Facebook doesn't show preview - sounds like a known limitation Gutenberg: Embeds: Facebook embed doesn't show preview #27701
• Pinterest - fixed in Gutenberg - Gutenberg: Embeds: Pinterest embed doesn't work #27702
• Low Priority (deprecated services) - Vine and Google+ Gutenberg: Embeds: Vine embed doesn't work #27705 and Gutenberg: Embeds: Google+ embed doesn't work #27704
• Getty Images: Gutenberg: Embeds: Getty Images embed doesn't work #27708

The following are known unknowns:

1. Google Videos?
2. Flatio?
3. Me.sh - deprecated?

The rest are testing well 👍

[alisterscott]

I worked through the list of supported oembed providers in Core: https://github.com/WordPress/WordPress/blob/56c162fbc9867f923862f64f1b4570d885f1ff03/wp-includes/class-oembed.php#L142

Imgur is the only one broken in Calypso Gutenberg but works in Core Gutenberg: https://imgur.com/gallery/23V9GWr

These don't work in Core Gutenberg nor Calypso Gutenberg even though they are supported oembed providers:

1. Photobucket http://i294.photobucket.com/albums/mm102/magiciansteven/hel512_22.jpg
2. CollegeHumor http://www.collegehumor.com/video/40004085/its-my-right-to-hold-this-turd
3. Reverbnation https://www.reverbnation.com/collection/186-mellow-beats
4. Amazon https://www.amazon.com/Maxboost-Protector-Tempered-Advanced-Accurate/dp/B073DLZWX7?fst=as%3Aoff&pf_rd_p=a9cf5e72-2152-4a49-b793-8f856c9701a9&pf_rd_r=1S6RJWHVTR1GFG1XNMD7&qid=1539151534&refinements=p_72%3A1248879011&rnid=1248877011&s=International+Shipping+Electronics&sr=1-2&ref=sr_1_2

@gwwar / @notnownikki would you like any of these raised as issues?

[notnownikki]

Going through that list @alisterscott

Photobucket: doesn't work in core at all. In the classic editor, Tinymce picks it up as an image URL and converts it to an image. However, the oEmbed endpoint at Photobucket no longer exists.

CollegeHumor: works for me? What are you seeing when you try to embed it? I get a video of two angry looking guys :)

Reverbnation: no longer supports oEmbed. Their endpoint, https://www.reverbnation.com/oembed , is no longer there.

Amazon: Doesn't work in the classic editor either, and Amazon is reporting that the oEmbed service is not available.

Really, the Photobucket, Reverbnation and Amazon providers shouldn't be in the supported list any more.

The case where oEmbed is not offered any more isn't covered by the block, and can result in an empty block with just a caption, so I'll take a look at that too. There are a whole bunch of different ways that the proxy API can tell us it can't be embedded, so... that's "fun" 😆

[notnownikki]

PR to properly report the "can't be embedded" message for cases where oEmbed has an invalid API: WordPress/gutenberg#10467

[alisterscott]

Hi @notnownikki

With collegehumour I get an empty block:

and a console error:

Mixed Content: The page at 'https://wpcalypso.wordpress.com/gutenberg/post/eatkibbeling6.wordpress.com' was loaded over HTTPS, but requested an insecure resource 'http://www.collegehumor.com/e/40004085'. This request has been blocked; the content must be served over HTTPS.

that happens on a self-hosted core site also so I think we can no worry about it

[alisterscott]

I went through the Jetpack list of shortcodes and embeds and these work the same as WordPress.com so nothing behaved differently: https://jetpack.com/support/shortcode-embeds/

[alisterscott]

GitHub Gist doesn't show preview in Gutenberg: #27782

[notnownikki]

@alisterscott GitHub embeds assume that jQuery is already loaded, and we only load the scripts that the embed response returns. I think either the response should include jQuery, or perhaps we make jQuery load for every embed preview. Either way, we could fix this on the API end by returning jQuery in scripts

[gwwar]

Closing this out, since it looks like folks did a great job.

If folks find issues with embeds, please file new issues!