Wp-calypso: Gutenberg: Embed Blocks: Unexpected behavior in various Embed Blocks

[JavonDavis]

Steps to reproduce

1. Starting at URL: https://wpcalypso.wordpress.com/gutenberg/post
   2.Select any site Simple or Jetpack
2. Create a new Block from under embed
3. Enter appropriate URL

What I expected

• Expected nothing to happen really until I click embed or maybe a preview before

What happened instead

An error message stating "Sorry, we could not embed that content." appeared.

Browser / OS version

Chrome v70
Gutenberg Version 4.0.0

Screenshot / Video

[correliebre]

Wanted to add that I tried it with different embeds and got different results:

1. Instagram link:

Error saying it can't be embed.

Front-end shows it correct, though:

2. Spotify link:

No error:

3. Facebook link:

Error too big to be displayed in the correct area.

Front-end shows it correct, though:

4. Twitter link:

No error:

Desktop:

OS: Mojave 10.14
Browser: Firefox
Version: 62.0.3

Additional context:

Atomic site with only Gutenberg installed, besides Jetpack

[JavonDavis]

Status update on all Embed Blocks

TLDR;

Working completely as Expected

YouTube
Twitter
Dailymotion
Flickr
Imgur
Issuu
Polldaddy
Reddit

Not working as expected(Problem): CNE - Could not embed

Embed (Not sure what other URL works here)
WordPress(Publish Only)
Facebook(Both)
Instagram(Both)
Spotify(CNE)
Soundcloud(Editor Only)
Vimeo(Both)
Animoto(Editor Only)
Cloudup(Editor Only)
College Humor(Both)
Kickstarter(Both)
Meetup(CNE)
Mixcloud(CNE)
Photobucket(CNE)
ReverbNation(CNE)
Scribd(CNE)
Slideshare(Editor Only)
SmugMug(Editor Only)
Speaker Deck(Console Error)
Ted(Editor Only)
Tumblr(Publish Only)
VideoPress(Editor Only)
WordPress.tv(Editor Only)

Noticed on a poor internet connection it blanks out like this for embeds in the editor

And the publish preview is empty

Also noticed this weird behavior sometimes

Editor Preview

Publish Preview

Youtube

Tested with URL: https://www.youtube.com/watch?v=5dsGWM5XGdg
Editor Preview:

Published Preview:

Twitter

Tested with URL: https://twitter.com/automattic
Editor Preview:

Published Preview:

Embed

Tested with URL: https://en.wikipedia.org/wiki/Cat
Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Couldn’t figure out a URL that could work here besides one valid for another more specific type of embed

WordPress

Tested with URL: https://testing201814.blog/
Tested with URL: https://testing201814.wordpress.com
Tested with URL: https://testing201814.blog/2018/10/23/

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Tested with URL: https://testing201814.blog/2018/10/23/gutenberg-tiled-gallery-block/

Editor Preview:

Published Preview:

This seems like it’s intentional but I expected embedded content similar to the Editor Preview from at least https://testing201814.blog/2018/10/23/

Dailymotion

Tested with URL: https://www.dailymotion.com/video/x6w7aph?playlist=x63q3a
Editor Preview:

Published Preview:

Facebook:

Tested with URL: https://web.facebook.com/WordPress/
Tested with URL: https://web.facebook.com/WordPress/posts/10156301634992911?__tn__=-R

Editor Preview:

Published Preview:

Instagram:

Tested with URL: https://www.instagram.com/_codingblog/
Tested with URL: https://www.instagram.com/p/BpiEuYRhsev/?utm_source=ig_web_button_share_sheet

Editor Preview

Publish Preview: N/A

Spotify:

Tested with URL: https://open.spotify.com/playlist/37i9dQZF1DX2A29LI7xHn1
Tested with URL: https://open.spotify.com/search/results/drake

Editor Preview:

Publish Preview: N/A

Soundcloud:

Tested with URL: https://soundcloud.com/lil_peep/lil-peep-ft-xxxtentacion-falling-down

Editor Preview:

Publish Preview:

Flickr:

Test with URL: https://flic.kr/p/2cpgoHs

Editor Preview:

Publish Preview:

Vimeo:

Tested with URL: https://vimeo.com/channels/staffpicks/295354277

Editor Preview:

Publish preview:

Animoto:

Tested with URL: https://animoto.com/play/WmGs0SgMeHvBMur0fL68rw

Editor Preview:

Publish Preview:

Cloudup:

Tested with URL: https://cloudup.com/if61tFHyBgA

Editor Preview

Publish Preview

College Humor

Tested with URL: http://www.collegehumor.com/video/40004082/the-girl-with-a-birthday-month

Editor Preview:

Publish Preview:

I think this one specifically fails due to the URL being not over https and suspect this would apply to any http embed URL.

Console log:

Mixed Content: The page at 'https://jetpack-gutenberg-testing.mystagingwebsite.com/?p=44&preview=true' was loaded over HTTPS, but requested an insecure resource 'http://www.collegehumor.com/e/40004082'. This request has been blocked; the content must be served over HTTPS.

Funny Or Die

Tested with URL: https://www.funnyordie.com/best-of-the-web
Tested with URL: https://www.funnyordie.com/best-of-the-web/2018/10/29/18040122/big-asian-naturals-supermarket-vice-parody-documentary-jamaal-sedayao
Tested with URL: https://www.funnyordie.com/2018/10/30/18040648/dumb-spanish-dubbing-halloween-silence-of-the-lambs-childs-play-it

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Imgur

Tested with URL: https://imgur.com/gallery/v7Qs8ND

Editor Preview:

Published Preview:

Issuu

Tested with URL: https://issuu.com/mymagazinebymollymy/docs/my_magazine_fall2017_finaloct18/34

Editor Preview:

Published Preview:

Kickstarter

Tested with URL: https://www.kickstarter.com/projects/1683809116/manjits-kitchen-and-bar?ref=discovery

Editor Preview:

Published Preview:

Meetup.com

Tested with URL: https://www.meetup.com/Kingston-WordPress-Meetup/events/smvthpyxpblb/

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Mixcloud

Tested with URL: https://www.mixcloud.com/melodicdistraction/born-to-roll-1st-birthday-special-october-18/

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Photobucket

Tested with URL: http://photobucket.com/gallery/user/bstevens2002/media/bWVkaWFJZDoxNjQ4MTUzNDA=/?ref=

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Polldaddy (Now Crowdsignal)

Tested with URL: https://poll.fm/10151656

Editor Preview:

Published Preview:

Reddit

Tested with URL: https://www.reddit.com/r/webdev

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Tested with URL: https://www.reddit.com/r/webdev/comments/9rkm4f/beginner_questions_october_26_2018/

Editor Preview:

Published Preview:

ReverbNation

Tested with URL: https://www.reverbnation.com/collection/186-mellow-beats

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Screencast

Did not test

Scribd

Site not working atm….

Tested with this URL: https://www.scribd.com/article/391724241/

Editor Preview: “Sorry, we could not embed that content.“
Published Preview: N/A

Slideshare

Tested with URL: https://www.slideshare.net/reidhoffman/blitzscaling-book-trailer-118631898

Editor Preview:

Published Preview:

SmugMug

Tested with URL: https://nelli.smugmug.com/Daily-photos/i-bXKH8bz

Editor Preview:

Published Preview:

Speaker Deck

Tested with URL: https://speakerdeck.com/maltzj/code-reviewing-like-a-champion

Editor Preview:

Published Preview:

TED

Tested with URL: https://www.ted.com/talks/ken_robinson_says_schools_kill_creativity?referrer=playlist-the_most_popular_talks_of_all

Editor Preview:

Published Preview:

Tumblr

Tested with URL: http://iglovequotes.net/post/179598785847/httpiglovequotesnet

Editor Preview:

Published Preview:

VideoPress

Tested with URL: https://videopress.com/v/kUJmAcSf

Editor Preview:

Published Preview:

WordPress.tv

Tested with URL: https://wordpress.tv/2018/07/04/matt-mullenweg-a-summertime-update-keynote-and-qa/

Editor Preview:

Published Preview:

[JavonDavis]

FYI youtube Embed not working in wpcalypso, Noted here -> https://github.com/Automattic/wp-e2e-tests/pull/1670

[cecoates]

Also added here:

https://github.com/Automattic/wp-calypso/issues/27708#issuecomment-445372797

But I have a user whose Getty images appear to all be broken by the recent update. And the only way to fix it is by manually updated each specific Getty embed.

After the 5.0 update and switching AT sites to Gutenberg, all of this site's Getty embeds are broken:

https://puck77.com/

Embeds are now all display an "Image not found" error like this:

To fix it, each individual image has to be edited in the Classic Editor and updated. Which is extremely labor intensive. For example, this is the process to fix the images in a single post:

https://d.pr/jQyPvV

8153499-hc

[gwwar]

Can we please open an issue per broken embed? For easier viewing I've also created a milestone to add this to. Reports are very much welcome if you're unable to find existing issues.

https://github.com/Automattic/wp-calypso/milestone/255

[JavonDavis]

Can we please open an issue per broken embed? For easier viewing I've also created a milestone to add this to. Reports are very much welcome if you're unable to find existing issues.

@gwwar sure, I'll work on this... We also still have -> https://gutenpackembeds.mystagingwebsite.com that has all the blocks, I'll try a put this somewhere for reference