Add New Gutenberg Blocks for Slideshow, Image Comparison, Google Maps, Progress Bar & More using GutenBee

The all new Gutenberg editor in WordPress has many new features, but one of its most useful functionality is the ability to add new blocks. These blocks allows us to do more, for example adding a heading, gallery, quote, and much more. If you’d like to add a few more blocks for slideshow, image comparison, Google maps, progress bar, countdown, accordion, justified grid layout galleries, icons, tabs and such, then here’s a very useful plugin – GutenBee that allows you to add all these blocks and do more.

Add new blocks to Gutenberg using GutenBee

GutenBee is a very useful plugin which allows you to add new blocks to Gutenberg, and extend its functionality. It will add many useful blocks that are not available by default. Lets take a look at how this plugin works and how you can use its functionality to add brand new blocks for Google maps, progress bar, countdown, and more. Don’t worry, using this plugin is very easy.

Installing and using GutenBee

You’d install GutenBee just as a normal WordPress plugin by going to Plugins > Add New, search for this plugin, install and activate it.

Once this plugin is installed and activated, its ready for use. The only requirement if you’re going to use Google Maps block will be to add a Google Maps API key but we’ll take a look at this later.

To start using your new blocks, you’d just open/edit any post or page, click on the + sign for adding a new block and then expand the section for “GutenBee”.

gutenbee gutenberg

As you can see here, it will add the ability for adding many new blocks such as:

  • Progress bar
  • Image comparison
  • Divider
  • Slideshow
  • Icon
  • Icon box
  • Image box
  • Countdown
  • Countup
  • Justified Gallery
  • Google Maps
  • Accordion
  • Tabs

Add Image Comparison Block

So just click on the block that you’d like to use and then configure it. For example, click on “GetenBee Image Comparison” and this block can be used to show your readers the comparison between two images, mostly used for displaying before/after pictures. Here’s how it will look like once you add both the images.

Add Progress Bar Block

You can add beautiful looking progress bar block in your Gutenberg editor using GutenBee. Just click on the + sign, then click on GutenBee Progress Bar.

Gutenberg block

The progress bar will be added, and you’d then edit it by selecting this block, and then click on “Block” from the right side. Same way, you can add other blocks and edit it.

GutenBee Settings

You can take a look at settings for GutenBee from Settings > GutenBee Settings page. There aren’t many settings, but you can hide/show various GutenBee blocks from here.

block settings

For example if you don’t want to show Accordion block, then you can simply remove the checkmark from here and save the settings. This will disable the Accordion block on your pages.

If you’re going to use the Google Maps block, which can be used to add Google maps, then you’ll need to enter the API key here and save the changes.

Conclusion

Overall GutenBee is a very simple and easy to use plugin, which can add quite useful functionality to your site. It will allow you to add new Gutenberg blocks which are ready to use, and you just need to start using them – not much configuration needed. Give it a try and let us know in the comments below how you find this plugin.

Leave a Comment

Your email address will not be published. Required fields are marked *