Skip to content

A Gutenberg block for searching and inserting GIFs from Giphy

Notifications You must be signed in to change notification settings

coreymcollins/giphenberg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Giphenberg

Search for and display GIFs from Giphy in a Gutenberg block

Powered by Giphy logo

Giphenberg is a Giphy-integrated Gutenberg block to search for and display GIFs in your pages and posts. Simply enter a search term, select your GIF, and you're off to the races!

How To Use It

Add The Block

Animated GIF displaying how to add a Giphenberg block

Just like any other Gutenberg block, you can add this block when creating the layout of your page.

Search and Select

Animated GIF displaying how to search for and insert a GIF from Giphy

Search for the GIFs you want by keyword. Results are returned as still images which animate upon hover. Select the GIF you would like to use by clicking on it and it will receive a green border.

Clicking outside of the block will display the GIF as it will be seen on the frontend.

Clicking back into the block will allow you to deselect the current GIF, select another GIF, or start over with a fresh search.

Setup Your Own App

For now, you'll need to setup your own Giphy API Key to power this plugin.

To setup Giphy API Keys, follow their instructions at this link.

In the /src/components/index.js file, you'll find this line:

const url = `https://api.giphy.com/v1/gifs/search?q=${ searchTerm }&api_key=YOURAPIKEY&limit=15`;

Replace YOURAPIKEY with your Giphy API key. Please refer to Giphy's documentation for usage restrictions and terms of service. I am not responsible for anything that happens with the use of your API key. Be smart!

Once you've entered your own Giphy API key, run npm run build and you're good to go!

Read more here: Giphenberg: The Gutenberg Giphy Block.


This project was bootstrapped with Create Guten Block.

Below you will find some information on how to run scripts.

You can find the most recent version of this guide here.

👉 npm start

  • Use to compile and run the block in development mode.
  • Watches for any changes and reports back any errors in your code.

👉 npm run build

  • Use to build production code for your block inside dist folder.
  • Runs once and reports back the gzip file sizes of the produced code.

👉 npm run eject

  • Use to eject your plugin out of create-guten-block.
  • Provides all the configurations so you can customize the project as you want.
  • It's a one-way street, eject and you have to maintain everything yourself.
  • You don't normally have to eject a project because by ejecting you lose the connection with create-guten-block and from there onwards you have to update and maintain all the dependencies on your own.

Feel free to tweet and say 👋 at me @MrAhmadAwais

npm npm license Tweet for help GitHub stars GitHub followers

About

A Gutenberg block for searching and inserting GIFs from Giphy

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published