Switch image and audio block to embed block if URL is embeddable

[Soean]

Description

The PR #11410 implements a switch to an embed block, if the user adds an embeddable URL to the video block.
This PR adds the same logic for the audio and image block.

Fixes #11427

How has this been tested?

Add instagram URL to the Image block --> Instagram embed block
Add SoundCloud URL to the audio block --> SoundCloud embed block
Add URL to an image (JPG) to the image clock --> Image block
Add URL to an audio (mp3) to the audio block --> Audio block

[notnownikki]

Audio seems to work fine, but I think we need a bit more work on the Image block here.

The problem is with sites like Imgur where you can link directly to the image, and the image URLs are also handled by oEmbed.

If you try to insert https://i.imgur.com/AWJ2njK.jpg with an image block, the Imgur embed block will pick that up. However, you get Imgur's branding around the image, because now it's an embed. And you also don't have the resizing functionality of the Image block.

My suggestion would be that if the Image block does not recognise the URL as an image, it passes it on to the Embed code.

[Soean]

@notnownikki Thanks for the review, I updated the code.

[notnownikki]

Seems to work nicely! I'd like to get some more feedback on this though, as I'm not sure if we should be so keen to bounce the user to an embed block. Perhaps if we recognise the URL as an image, e.g. the resource ends in jpg, png, etc. then we keep the user in the image block even if the image doesn't load, so that they can edit the URL if they'd made an error.

cc @mtias @jasmussen @karmatosed

[Soean]

If the image block can't render the URL, it tries to render the URL as embed. If this is also not possible it keeps the user in the image block.

[notnownikki]

So that's mostly right :) What happens is that if we get an image error, we see if the URL has an embed handler. That embed handler might fail to embed the URL if it matches the handler's URL pattern, but is actually not a valid resource.

HOWEVER - the only providers that potentially hit this problem are Imgur and Photobucket, and they both return a placeholder image if you try to load an invalid image, so the error handling doesn't get triggered and the problem state doesn't happen.

I think we can rely on that good behaviour for this edge case.

Thanks for this!

[tofumatt]

I'm not going to block this from landing by requesting changing because I think it's a really good UX to try and ship for WP 5.0, but this should definitely have some E2E tests around it. Could you file a follow-up issue or add tests in a follow-up PR? ❤️

[Soean]

@tofumatt I opened #11901 for the tests

[mtias]

The image conversion throws me off a bit, as in most cases I'd just expect to make a local copy, not an embed.

[karmatosed]

Whilst I can see this making sense for videos like YouTube, I am not sure what benefit this has for every resource. Is there a use case or expectation?

[Soean]

Audio like Soundcloud
Image like Instagram

[karmatosed]

@Soean whilst I see that, for me I don't see the user need here. I've absolutely seen the video embed issue and need, just haven't seen it for audio or image. My concern is we are applying the same approach without thinking is it the right user case.

[mtias]

Going to merge this for 4.5.