How To Use FooGallery With Gutenberg

FooGallery is compatible with Gutenberg.

The WordPress block editor is now part of the WordPress core. While you can still use the classic editor with WordPress, it is likely that this will fall away after a while. 

So if you’re not already using Gutenberg, it won’t be to be too long before you are. Luckily for you, FooGallery works with Gutenberg, giving you a live preview of the gallery in the editor itself.

As Gutenberg has such a strong emphasis on visual composition, seeing your gallery in the post will be a huge advantage. The live preview will help you design your post or page around your gallery. It will also save you the hassle of constantly previewing your post while you’re working on it.

Using FooGallery with Gutenberg

The first thing you’ll need to do is ensure FooGallery has been updated to the latest version. Once this is done, you’ll be able to access your galleries from within the block menu. Simply click on the Add Block icon, find the FooGallery block and click on it.

FooGallery displays in Gutenberg block menu

Your FooGallery block will appear as below. To add your gallery, click on the Select Gallery button. 

FooGallery block

A menu of your galleries will appear, from which you can select and add the gallery you want.

If you haven’t yet created your gallery, go to the Add Gallery option under FooGallery in your dashboard. Once you have created your gallery there, you can hit the refresh button in the gallery menu block. Click on your new gallery and hit Insert.

Menu of galleries

Your gallery will now appear as a live preview within your post. If you want to edit your gallery, no problem. You can click on the edit icon either at the top of the gallery block, or in the menu on the right hand side of your page.

This will open your gallery in a new tab, allowing you to make the changes you want to make. Once you have finished editing, save the changes, then click on the refresh icon in the top block menu. Your gallery will update with the changes you have made.

Block that displays when using FooGallery with Gutenberg

Using FooGallery with Gutenberg is now as simple as using Gutenberg itself. You’ll still have beautiful galleries, which will now display as you work on your post. 

Follow us on Facebook and Twitter to get the latest on FooGallery updates.

3 thoughts on “How To Use FooGallery With Gutenberg”

  1. The option to override the wp gallert shortcode does not work with Gutenberg any more as Gutenberg does not add a shortcode but HTML.
    So as soon as you do not use the classic editor but Gutenberg, you cannot add galleries “on the fly” any more, you have to manually create galleries in FooGallery and then add that gallery into your post. Cumbersome if you are gallery centric blog poster.

    • Since the start of FooGallery, we have used a separate interface on which you build your galleries. Given the variety of settings available this has been the best option, but we are working on expanding our block capabilities. We have also tested the shortcode and it works if pasted into the HTML block provided by Gutenberg. Alternatively, you can use the FooGallery block to add your galleries.
      If you are experiencing technical issues though, please get in touch with our support team.

Leave a Comment

How To Use FooGallery With Gutenberg