Imgur Embed block doesn't work

[maddisondesigns]

Describe the bug I tried to embed two different Imgur URLs using the Imgur Embed block and both simply returned an error. I tried on two different sites and had the same issue.

URLS: https://imgur.com/gallery/q68SoCn https://imgur.com/gallery/FLsRjY2

To Reproduce Steps to reproduce the behavior:

1. Add Imgur Embed Block
2. Enter one of the above Imgur URLs
3. Click the Embed button
4. See error

Expected behavior Imgur Embed Block should allow you to embed an Imgur URL

Desktop (please complete the following information):

• macOS Sierra
• Firefox Quantum 63.0.3
• WP 5.0.1

[maddisondesigns]

Some more testing:

It looks like the Embed must've broken with WP 5.0. It doesn't work when using the Classic Editor either.

But it does work fine on a site running 4.9.9 (without Gutenberg but with the Classic Editor V0.5)

[adampatterson]

I noticed the same problem, If you use the embed code it will work but I am not able to center align it.

[skorasaurus]

I can confirm this; neither link will embed for me and I receive the same in-block message ("Sorry, this content could not be embedded.")

UPDATE: same behavior as of Gutenberg 8.1)

[oxyc]

Tested and it seems to work now. I can embed it by 1) pasting the URL, 2) using the embed block 3) using the imgur block.

Could you test it again and see if it works on your site too @maddisondesigns? I only tested the master branch of Gutenberg.

[maddisondesigns]

@oxyc Just tested Imgur Embed again;

With Gutenberg plugin activated (v8.3.0 ) https://share.getcloudapp.com/4guj1YYQ

Without Gutenberg plugin activated https://share.getcloudapp.com/OAuBgwE1

And neither option worked (on WP5.4.2).

Is the Master branch the same as the latest plugin version?

[skorasaurus]

@maddisondesigns

The master branch is always newer than the plugin version; it contains all commits of code that have been 'officially' approved to be included into Gutenberg. The master branch is typically updated several times every day and you can view an ongoing list of these at https://github.com/WordPress/gutenberg/commits/master

gutenberg.zip I built a zip file of the master branch (as of this commit https://github.com/WordPress/gutenberg/commit/3156d0bbec4983bab009f7fe5dd1b5282df37d18 ) you should be able to unzip this into your plugins directory, activate the plugin and begin to use it. (You'll need to delete the existing gutenberg directory in your plugins folder first)

The embedding now works for me on the master branch.

I embedded a couple different ways:

• copying and pasting an imgur url into an empty block https://imgur.com/gallery/vFKxujb\
• opening an embed block and pasting in the url https://imgur.com/gallery/vFKxujb
• opening an embed block and pasting in the direct url to an imgur mp4 video
• opening an imgur block and pasting in the direct url to a jpg.

In all of those cases, the content embedded on the front end for the user as intended; only thing of note is that within the editor itself, when opening an embed block and pasting in the direct url to an imgur mp4 video ; the video thumbnail didn't display, it just showed [video src="https://i.imgur.com/vV1O9tP.mp4" /] but I'm ok with that personally.

[oxyc]

If the master branch doesn't work for you:

When embedding there should also be an XHR request done to a /wp-json/oembed/1.0/proxy?... url. Could you check your developer tools if there's something there? Does it get some kind of error? This is what a successful request looks like (dont mind the timeline 😄, that's not successful)

Here's someone who got the same message for Youtube videos and the XHR request returned rest_forbidden.

I seem to remember at some point I had an issue with oembed requests timing out too early on a server with networking issues. You could try increasing the timeout limit with:

add_filter( 'http_request_timeout', function () {
  return 30;
} );

Also, I think oembed caches responses, so always try with a new imgur URL while debugging.

[maddisondesigns]

@skorasaurus Thanks for that zip file.

I replaced my existing Gutenberg plugin with the new zip contents, and still couldn't embed anything from Imgur (https://imgur.com/gallery/aXIPvRG). The same thing happened as previously.

Also tried a different browser (Chrome & Firefox) and clearing the browser cache, but no luck. Here's the updated plugin showing in the Dashboard.

I couldn't see any errors using the dev tools, and that XHR request didn't appear to return any errors either, although it does look different to @oxyc's example above .

[oxyc]

Have you tried disabling all plugins?

It's either that something has removed the imgur provider.

Or I guess more likely, that the HTTP request to imgur fails somehow.

If it was me, I'd add some debug statements (such as using a debugger or eg. var_dump would be visible in the XHR response) around those functions to see what gets returned from the HTTP request. I guess there are plugins that log HTTP requests also.

[maddisondesigns]

@oxyc Still no luck.

Have changed themes to a default theme (Twenty Seventeen) and deactivated all plugins except Gutenberg, and still couldn't embed Imgur.

I then installed that Log HTTP Requests plugin as suggested and it looks like it's getting a response of "Permission denied".

URL:

 https://api.imgur.com/oembed?maxwidth=600&maxheight=788&url=https%3A%2F%2Fimgur.com%2Fgallery%2FF04fLg1&dnt=1&format=json

Request:

{
  "method": "GET",
  "timeout": 5,
  "redirection": 5,
  "httpversion": "1.0",
  "user-agent": "WordPress/5.4.2; http://dev.wordpress-test.com",
  "reject_unsafe_urls": true,
  "blocking": true,
  "headers": [],
  "cookies": [],
  "body": null,
  "compress": false,
  "decompress": true,
  "sslverify": true,
  "sslcertificates": "/Users/anthonyhortin/Documents/sites/dev.wordpress-test.com/wp-includes/certificates/ca-bundle.crt",
  "stream": false,
  "filename": null,
  "limit_response_size": null,
  "_redirection": 5
}

Response:

{
  "headers": {},
  "body": "Permission denied",
  "response": {
    "code": 403,
    "message": "Forbidden"
  },
  "cookies": [],
  "filename": null,
  "http_response": {
    "data": null,
    "headers": null,
    "status": null
  }
}

When I enter that URL in a browser it returns the content as expected, so I know it's not my browser/computer that's blocking the request.

{

    "version": "1.0",
    "type": "rich",
    "provider_name": "Imgur",
    "provider_url": "https://imgur.com",
    "width": 600,
    "height": 788,
    "html": "<blockquote class=\"imgur-embed-pub\" lang=\"en\" data-id=\"a/F04fLg1\"><a href=\"https://imgur.com/a/F04fLg1\">Four stars</a></blockquote><script async src=\"//s.imgur.com/min/embed.js\" charset=\"utf-8\"></script>"

}

[oxyc]

Are you using any particular development environment for your local site? Is it a Virtual Machine? I could see if I can reproduce it using your environment.

If it's a VM I'm interested if running curl https://api.imgur.com/oembed?maxwidth=600&maxheight=788&url=https%3A%2F%2Fimgur.com%2Fgallery%2FF04fLg1&dnt=1&format=json to see if it's only in WP or if it happens for the host in general.

[maddisondesigns]

I'm just using MAMP Pro, running on a separate Mac Mini. Prior to WP 5.0, when this was originally raised, it used to work fine.

Here's an old site on my dev machine running WP 4.9.15. You can see it works. There's a Imgur Embed (https://imgur.com/gallery/F04fLg1) and a Tumblr embed, that I've just added now.

Since WP 5.0, it hasn't worked in the Block Editor, but other Embeds do.

And it doesn't work in the Classic Editor either, but other Embeds like Tumblr do.

So, it's very unlikely that it has to do with either my site, computer or environment.

[enriquesanchez]

Tested on master and I was able to embed the two links.

macOS 10.15.5 Firefox 78.0.1 WP 5.4.2 (localhost)

[maddisondesigns]

@enriquesanchez Can you please create me a plugin version of master so that I can try it as It's still not working with Gutenberg v8.5.1. Thanks.

[skorasaurus]

@maddisondesigns Try this build from today, 2020-07-20 it contains the 'master' whose most recent commit is https://github.com/WordPress/gutenberg/commit/8d64aa3092d5d9e841895bf2d495565c9a770238

[maddisondesigns]

Thanks for that plugin. Still no luck, I'm afraid though.

Same results as previously. Using that Log HTTP Requests plugin as suggested above...

URL:

[0] https://api.imgur.com/oembed?maxwidth=640&maxheight=960&url=https%3A%2F%2Fimgur.com%2Fgallery%2FF04fLg1&dnt=1&format=json 

Request:

{
  "method": "GET",
  "timeout": 5,
  "redirection": 5,
  "httpversion": "1.0",
  "user-agent": "WordPress/5.4.2; http://dev.wordpress-test.com",
  "reject_unsafe_urls": true,
  "blocking": true,
  "headers": [],
  "cookies": [],
  "body": null,
  "compress": false,
  "decompress": true,
  "sslverify": true,
  "sslcertificates": "/Users/anthonyhortin/Documents/sites/dev.wordpress-test.com/wp-includes/certificates/ca-bundle.crt",
  "stream": false,
  "filename": null,
  "limit_response_size": null,
  "_redirection": 5
}

Response:

{
  "headers": {},
  "body": "Permission denied",
  "response": {
    "code": 403,
    "message": "Forbidden"
  },
  "cookies": [],
  "filename": null,
  "http_response": {
    "data": null,
    "headers": null,
    "status": null
  }
}

[annezazu]

@maddisondesigns I wasn't able to replicate this using WordPress 5.5.1 and Gutenberg 9.0. Digging in a bit, I found a 403 response is referenced in Imgur's documentation along with this stackexchange thread that might be helpful. I'm going to close this out since I can't replicate and it seems to be related to Imgur's API rather than Gutenberg functionality. Feel free to re-open if you believe I'm incorrect!

[maddisondesigns]

@annezazu Can you please re-open this. It seems very strange that this stopped working with WP 5.0. As mentioned in my second Post above, it works fine in WP 4.9.x, but as soon as you upgrade to WP 5.0, it breaks. I have a test site that is running WP 4.9.15 that I just tried again now, and the Imgur embed still works fine. As soon as I try it on a site with 5.0+ though, it breaks.

This still seems like a WP and/or Gutenberg issue, not an Imgur issue. It's highly improbable that imgur has somehow managed to ban every single one of my local WP sites that happens to be WP5.0+, which is what that StackExchange thread talks about. Also, the 4.9.15 site that I just tried again now, is running http, not https, just like all my other local sites, which is the other thing mentioned in that StackExchange post.

[draganescu]

Hi @maddisondesigns :) Since:

• the response from Imgur clearly states a permission denied problem
• the embed works in the testing done by others in this thread

... it may be a super edge case you found. I noticed you use a local "dev" https cert, that might be the issue.

All in all, there seems to be no reason to reopen, because since this cannot be reproduced it cannot be fixed.

The only remaining course of action that I can think of is to inspect with "Log HTTP Requests", both WP installs, and see if between 4.9.x and 5.x the actual request to Imgur is different in a substantial way. If it is open another issue to discuss how we can find a reconciliation for that.