The Masonry Gallery Block in FolioBlocks lets you build stunning, Pinterest-style image grids directly inside the WordPress Block Editor (Gutenberg) — no shortcodes, no settings screens, no fuss.
Designed for photographers, designers, and creatives, it automatically arranges images in an organic, responsive layout that adapts beautifully across screen sizes.
Note: This guide covers features available in the Professional (Pro) version of FolioBlocks. Some options and settings described here may not be included in the free version.
Table of Contents
What Is the Masonry Gallery Block?
The Masonry Gallery Block is part of the FolioBlocks plugin, a professional suite of Gutenberg blocks for photographers and visual creators.
Unlike the default WordPress Gallery block, the Masonry layout doesn’t crop or resize your images to fit a strict grid. Instead, it stacks them naturally to preserve their original proportions, creating a dynamic visual rhythm that feels both modern and editorial.
Perfect for:
- Photography portfolios
- Editorial image collections
- Behind-the-scenes or event galleries
- Creative agency and artist websites
How to Add the Masonry Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button at the top left of your screen and search for “Masonry Gallery”. You’ll find it under the FolioBlocks section which should appear right after the Media section.
2. Upload or Select Images
With the block now added into the central editor use the Media Library or Upload option to add your images into the gallery. You can select multiple images at once, and reorder them later using drag and drop.
3. Adjust Gallery Width & Image Order
With your images added into the Masonry Gallery Block, use the Alignment button in the block’s toolbar to choose content width, wide width, or full width layouts to match your page design.
Since the Masonry Gallery Block renders images as inner blocks you can easily re-arrange images in the gallery by selecting them in the List View (on the left hand side) and dragging and dropping images into your preferred order.
General Gallery Settings
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 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.
Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.
Enable WooCommerce Integration
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.
Gallery Image Settings
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, swipe gestures, and the option to show image captions within the Lightbox view.
Note: Show Caption in Lightbox control only displays when Enable Lightbox is active.
Show Title on Hover
Use Show Title on Hover to provide context to your visitors adding a description or credit to the image.
By selecting any image that you added to your Masonry Gallery Block, you can update its Image Caption, Image Title, or Alt Text directly in the block editor.
Note: Changes made to Image’s caption, title, or alt text currently do not sync back to the WordPress Media Library.
Gallery Filter Settings
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.
Gallery Styles Panel
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.
Gallery Image Styles
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.
Filter Bar Styles
When Enable Image Filtering is active the Filter Bar Styles panel will be present in the Masonry Gallery Block’s style panel.
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.
WooCommerce Integration
Display Add To Cart icon
With Enable WooCommerce Integration turned on you will be presented with a new select control that lets you choose if you want to always display the Add To Cart button or Display it only Hover.
Gallery Image Settings for WooCommerce
Additional settings controls are added in Gallery Image Settings. If you Enable Lightbox you will now have the option to Show Image Caption or Product Info inside the Lightbox.
The same applies to Show Overlay on Hover, it now gives you the option to display the Image Title or to display the Product Name & Price.
These two options downgrade gracefully so there is no need for you to link every image in your gallery to a WooCommerce product. Image linked to products will display the Product Description in Lightbox or Product Name & Price on Hover and Images not linked to WooCommerce products will default to showing the Image Caption in the Lightbox and the Image Title on Hover.
Linking Images to WooCommerce Products
Linking your images to products is super simple, with Enable WooCommerce Integration turned on simply select one of the image blocks in your gallery and look in the block settings.
You will see a new setting available, Linked WooCommerce Products, with an input field that allows you to search through the all of the WooCommerce Products on your site.
Simply search for your product and select it to link it with the image.
Note: The settings for Linked WooCommerce Products only appear when Enable WooCommerce Integration is active on the parent gallery block.
Example Gallery
Below is an example of a Masonry Gallery created with FolioBlocks:
Common Questions
How many images can I add?
There are no limits on how many images you can add.
Can I reorder images after adding them?
Yes — simply drag and drop within the editor or rearrange via the List View panel.
Does it work with my theme?
For the best experience it is recommended to use a block based theme. However FolioBlocks does work with classic themes provided they support wp_block_styles and the block editor.
Can I use this with WordPress 6.x or newer?
Absolutely. All FolioBlocks are built for the WordPress Block Editor (Gutenberg) and are fully compatible with the latest WordPress versions.
Get Started
Ready to create your first masonry gallery? Get FolioBlocks and start building modern galleries in the WordPress Block Editor (Gutenberg) today.