Giphenberg

Search for and display GIFs from Giphy in a Gutenberg block

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

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

Search and Select

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