Skip to content
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

Add a giphy gutenberg block. #13426

Open
spacedmonkey opened this issue Jan 22, 2019 · 9 comments
Open

Add a giphy gutenberg block. #13426

spacedmonkey opened this issue Jan 22, 2019 · 9 comments
Assignees
Labels
[Block] Embed Affects the Embed Block New Block Suggestion for a new block [Type] Enhancement A suggestion for improvement.

Comments

@spacedmonkey
Copy link
Member

Add a giphy block to make embedding gifs easily.
Already added ticket in core for the oembed piece.

@Soean Soean added New Block Suggestion for a new block [Block] Embed Affects the Embed Block [Type] WP Core Ticket Requires an upstream change from WordPress. Core Trac ticket should be linked. labels Jan 22, 2019
@Soean Soean self-assigned this Jan 26, 2019
@spacedmonkey
Copy link
Member Author

Worth noting that Jetpack as add a giphy block, but this doesn't use Omebed like others. But it does show the demand for the block.

See Automattic/jetpack#10989

@peterwilsoncc
Copy link
Contributor

It looks like the underlying cause is the oembed auto-discovery for the photo data type doesn't correctly process on the first attempt.

As you'll see in the attached gif, on the first instance it displays the title text but on the second instance it displays correctly.

From WordPress/wordpress-develop@83275aa

giphy

@spacedmonkey
Copy link
Member Author

The error happens because the oembed endpoint provided by giphy doesn't return the thumbnail_url field. According to the oembed spec, thumbnail_url it is not a required field for type photo. However URL is required. So the help function getPhotoHtml needs to be changed to reflect this.

So

const photoPreview = <p><img src={ photo.thumbnail_url } alt={ photo.title } width="100%" /></p>;

needs to change to

 const imageUrl = (photo.thumbnail_url) ? photo.thumbnail_url : photo.url;
 const photoPreview = <p><img src={ imageUrl } alt={ photo.title } width="100%" /></p>;

@notnownikki
Copy link
Member

#13825 is merged now (thanks @spacedmonkey!) which fixes the rendering issue with giphy in the default embed block.

@spacedmonkey
Copy link
Member Author

@notnownikki Thanks.

This doesn't mean that we can't go forward with a giphy block. The block is more for people that don't know or understand auto embedding. Giphy is a part of every messaging app people use. Gifs are part of communication now. I think it should be part of gutenberg.

screenshot from 2019-01-22 21-39-33

@notnownikki
Copy link
Member

I think it should be part of gutenberg.

Agreed!

@maheshwaghmare
Copy link
Contributor

+1 - Gif is also used to make articles interactive.

@kathrynwp kathrynwp removed the [Type] WP Core Ticket Requires an upstream change from WordPress. Core Trac ticket should be linked. label Jul 20, 2022
@kathrynwp
Copy link

I've removed the "WP Core Bug" tag since it looks like the upstream blocker was fixed a while ago.

If there's still a desire to add a Giphy block in addition to the core embed block, any developer is free to pick this up, though it doesn't look like there's been much momentum within a couple of years.

@jeffpaul
Copy link
Member

Looks like there's an "official" Giphy plugin as well as another that adds a block, I'd recommend looking to see if those two developers want to work together and get the block into the "official" plugin for this

@skorasaurus skorasaurus removed the New Block Suggestion for a new block label Nov 29, 2022
@jordesign jordesign added [Type] Enhancement A suggestion for improvement. New Block Suggestion for a new block labels Aug 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Embed Affects the Embed Block New Block Suggestion for a new block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

9 participants