New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from Nov 19, 2018

Conversation

Projects
None yet
7 participants
@Soean
Member

Soean commented Nov 4, 2018

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.

@mtias mtias added this to the 4.4 milestone Nov 12, 2018

@Soean

This comment has been minimized.

Member

Soean commented Nov 13, 2018

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

@Soean Soean requested a review from notnownikki Nov 14, 2018

@notnownikki

This comment has been minimized.

Member

notnownikki commented Nov 14, 2018

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

This comment has been minimized.

Member

Soean commented Nov 14, 2018

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

This comment has been minimized.

Member

Soean commented Nov 15, 2018

@tofumatt I opened #11901 for the tests

Soean added some commits Nov 15, 2018

@mtias

This comment has been minimized.

Contributor

mtias commented Nov 15, 2018

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

This comment has been minimized.

Member

karmatosed commented Nov 15, 2018

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

This comment has been minimized.

Member

Soean commented Nov 15, 2018

Audio like Soundcloud
Image like Instagram

@gziolo gziolo added the Priority Low label Nov 19, 2018

@karmatosed

This comment has been minimized.

Member

karmatosed commented Nov 19, 2018

@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

This comment has been minimized.

Contributor

mtias commented Nov 19, 2018

Going to merge this for 4.5.

@mtias mtias merged commit 1e5f885 into master Nov 19, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@mtias mtias deleted the update/audio-image-embed-url branch Nov 19, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Switch image and audio block to embed block if URL is embeddable (Wor…
…dPress#11472)

Allow transitioning from Audio and Image block to relevant embed when pasting a url in the insert URL field.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment