Embed for Medium posts doesn't preview in admin

[bph]

Describe the bug
When embedding a medium.com post in the editor, the preview in the admin screen is invisible, although the "Edit HTML" view shows content and it also works on front-end view.

To Reproduce
Steps to reproduce the behavior:

1. create a new post
2. embed a medium article (Example)

Expected behavior
... that I see the preview of the embedded article in my admin screen.

Screenshots
Video: http://recordit.co/wS2LI2pFNf
(don't worry about duplicate displays on the front-end, I didn't delete the previously added embed blocks until I noticed that there is a bug)

Error message in browser console:
post.php?post=6258&action=edit:1 Invalid 'X-Frame-Options' header encountered when loading 'https://api.medium.com/embed?type=story&path=%2Fstudio24%2Fwe-tried-converting-a-bespoke-website-design-in-wordpress-with-gutenberg-42e11986b05a&id=0&collapsed=': '' is not a recognized directive. The header will be ignored.

Desktop (please complete the following information):

• OS: Mac desktop
• Browser: Google Chrome
• Version 67.0.3396.62
• Gutenberg 3.0.1

[swissspidy]

I thought Medium has disabled their oEmbed API some time ago…?

[bph]

@mtias what kind of test are you looking for?
here is another screen recording with Firefox:
http://recordit.co/abUl42T1xB

[notnownikki]

Stock WordPress + Gutenberg can't embed Medium posts, I'm guessing that there's a plugin that handles Medium posts with a shortcode. If so, #9734 would have fixed that, and will be in the 4.0 release.

[bph]

That's interesting. It's embedded in the front end, just not visible in the editor. I can even look at the htm in the editor it's just a white space otherwise. Screenshot is from this published post:

And Here is what it looks like in the Editor a white space in an embed block

When using the HTML View it looks like this:

It looks to me like a default Gutenberg Embed block, doesn't it?

[notnownikki]

Ah, that's exactly the same symptom as when an embed is handled by a shortcode, which #9734 fixes :)

What happens is that oEmbed can't embed the URL with any of its default providers, so it tries to do it with a shortcode. The shortcode enqueues scripts, which show up fine on the front end because that loads all the scripts, but the embed preview only receives the HTML, and not the enqueued scripts. So if you inspect the preview, you'd see an iframe with some HTML in it, but the scripts that transform it into the embedded post aren't there.

The Pinterest embed provided by Jetpack did the same. 4.0 should be a rocking release :)

[bph]

Woohoo! You might have explained this to me before, but I only got it now. Thanks for the patience.

[notnownikki]

My pleasure! Let's leave this one open until it's been tested with 4.0

[iamgabrielma]

I'm testing this with 4.0 and is funny how it behaves:

If we add the Medium URL to the embed block, we get a Sorry, we could not embed that content. message , however if we paste that URL on a shortcode block we get a View story at Medium.com link in the front-end that redirects to the article:

Editor:

Front end:

[swissspidy]

A shortcode block expects some kind of shortcode, not just a URL... 🤔

[notnownikki]

What are you using to add support for embedding Medium? This isn't supported by WordPress core.

If you're using Jetpack, I'm seeing something different with the latest Jetpack and G4.0. The embed block tries to preview Medium, but there are javascript errors coming from the Medium javascript, which is why the preview fails. Also, it doesn't work in the classic editor either, so this might not a Gutenberg issue.

[iamgabrielma]

A shortcode block expects some kind of shortcode, not just a URL...

Should I open a new issue regarding the validation of the shortcode input? Is not really related to this and would make more sense separately.

[swissspidy]

@iamgabrielma That would be great, just so we can keep track of things. I'm not sure whether or how it can be fixed though. The reason why it works is simple I think: the shortcode block passes the string to do_shortcode(), which obviously doesn't do anything. But later on, the embed handler parses the URL and turns it into an embed.

[youknowriad]

Is this still an issue, since WordPress don't support Medium by default, should we just close?

[swissspidy]

I think so