How to Create a Masonry Gallery in the WordPress Block Editor (Gutenberg)

Image Resolution

Choose between Thumbnail, Medium, Large, or Full resolution images, this gives you control over both image quality and page load speed.

Columns and Remove Image Gap

The Masonry Gallery Block is fully responsive. You can define separate column counts for Desktop, Tablet, and Mobile, ensuring your galleries always look balanced. You can also choose to disable the gaps entirely for a flush, edge-to-edge look.

Randomize Image Order

Allows you to shuffle image order dynamically, giving returning visitors a fresh viewing experience each time the page loads.

Enable Lightbox

Enable the built-in Lightbox to let visitors view your images full-screen when the user clicks on them.

It supports keyboard navigation and swipe gestures. When activated an additional toggle to show image captions within the Lightbox view is enabled.

Note: Show Caption in Lightbox control only displays when Enable Lightbox is active

Show Overlay on Hover

The Show Overlay on Hover toggle enables an overlay effect with the Image title to display when you hover over an image.

An additional Select Control allows you to set the Hover Style where you can select from a Blur, Fade, Gradient, Chip, or Color Overlay. With the Color Overlay selected you can additionally customize the color of the text and background on the Overlay.

You can edit each image’s Caption, Title, or Alt Text directly from the image block settings.

Note: Changes made to Image’s caption, title, or alt text currently do not sync back to the WordPress Media Library.

Enable Image Filtering

When filtering is enabled, you can assign categories to images (e.g., “Sports,” “Portraits,” “Events”) and allow visitors to toggle between them.

First you have the Filter Bar Alignment settings which allows you set the alignment of the bar with your added categories (e.g., “All, Sports, Portraits, Events”).

Then you have the Filter Categories input. Here you can add your filter categories (e.g. “Portraits, Events, Landscape”) separated by commas.

Once you have added your categories you can now select the individual images inside your Masonry Gallery Block and in their block settings there will be a new Filter Categories dropdown select control where you can apply one of the categories to the image.

Note: Additional style options for the Filter Bar are available in the blocks style settings panel.

Enable Image Downloads

Allows you to add a download icon to each image thumbnail and inside the Lightbox, allowing clients or visitors to save high-resolution versions of your work.

When enabled an extra drop-down select control is enabled which allows you to specify if you want to always display the download icon or display it only when the user hovers over the image.

Settings for setting the icon & background color of the Download icon can be found in the Masonry Gallery Block’s styles panel when the Enable Image Downloads setting is active.

Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.

Enable WooCommerce Integration

This toggle enables WooCommerce Integration allowing you to link gallery images with WooCommerce products on your website. Instructions for WooCommerce integration are included later in this tutorial.

Note: Toggle for Enable WooCommerce Integration will only display if WooCommerce plugin is installed and active on your website. Enable WooCommerce Integration can not be used when Enable Image Downloads is active.

Disable Right-Click on Page

Attempts to disable right-click on the page to discourage casual image downloads.

Note: The “Disable Right-Click” feature helps discourage casual users from saving your images, but it cannot fully prevent access to image files through browser tools or the page source.

Enable Lazy-Load of Images

When lazy load is enabled, images only load as the visitor scrolls, improving page load speed.

Background

The Background setting allows you to customize the backdrop behind your Modular Gallery block. You can choose any color from your theme palette or define a custom color to help your images stand out or blend seamlessly with the surrounding layout.

A subtle background tone can make white borders or drop shadows more visible, while a dark background often enhances contrast and gives a cinematic look.

Dimensions – Padding & Margin

The Padding and Margin controls give you fine-grained control over the spacing inside and around your Masonry Gallery block.

Use Padding to create breathing room between your gallery content and its edges — useful for highlighting the gallery within a colored background.

Use Margin to control the outer spacing between the gallery and adjacent blocks or page sections, ensuring perfect alignment and balance within your overall page design.

Border Color, Width, & Radius

These settings allow you to add custom borders to the images in your gallery. Select the color of your border and then adjust the border width slider to your liking.

The images in the editor update in real time so you can see how they look without having to visit the front end of the site.

Border Radius slider allows you to add a radius to the corner of the images to further create special effects.

Enable Drop Shadow

Enable Drop Shadow adds a subtle drop shadow to your images that helps them pop off the page.

When Enable Image Filtering is active the Filter Bar Styles panel will be present in the Grid Gallery Block’s style panel.

Font-Family, Font Size, Appearance, Line Height, Letter Spacing, Decoration, & Letter Case

When using a block based theme that uses theme.json FolioBlocks will detect available fonts and let you set the font for the Filter Bar. Additional controls allow you to set Font Size, Appearance, Line Height, Letter Spacing, Decoration, and Letter Case styles.

Active – Text Color & Active – Background Color

These two settings allow you to set the color and background color for the active term in the Filter Bar.

Inactive – Text Color & Inactive – Background Color

These two settings allow you to set the color and background color for the inactive terms in the Filter Bar.

Note: The font used in the Filter Bar for Active and Inactive terms is pulled from your theme’s body font.