The Modular Gallery Block in FolioBlocks lets you create visually striking, magazine-style photo layouts directly inside the WordPress Block Editor (Gutenberg). It combines the precision of the Justified layout with the flexibility of custom image rows and image stacks, giving you complete creative control over how your images are arranged.
Note: The Modular Gallery Block is only included in the paid (Pro) version of FolioBlocks.
Table of Contents
What Is the Modular Gallery Block?
The Modular Gallery Block is a unique, row-based gallery system that allows you to build your gallery section by section. Each row is made up of images that automatically scale to fill the full width of the page, maintaining their original aspect ratios — much like a justified gallery — but with the added ability to group and design each row individually.
This layout style is inspired by editorial photo essays and magazine spreads, where visual storytelling depends on rhythm and structure. It’s ideal for photographers who want to build customized, narrative-driven galleries rather than uniform grids.
Perfect for:
- Portfolio showcases with varied image groupings
- Editorial or storytelling layouts
- Magazine or publication-style photo features
- Hero galleries and homepage sections
How to Add the Modular Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Modular Gallery.” You’ll find it under the FolioBlocks section.
2. Building the Gallery with Image Rows & Image Stacks
The Modular Gallery Block is unique in that you construct your gallery an image at a time. With the block added into the Editor you are prompted to select your first image.
When you have added your first image you will notice that it has filled out the entire width of the gallery as in the example bellow:
If you example the Modular Gallery Block’s structure in the List View you will see that your image has been added inside of an Image Row. An Image Row will always fill out edge to edge. Since we only have one image in our row it filled out the entire width of the row.
Lets add a second image into the Image Row:
With a second image added you see it and our original image have been resized in order to fill out the row edge to edge.
Now let’s take it a step further, inside of your Image Rows you can also add an Image Stack. An Image Stack is similar to an image row only that images place inside of it are stacked one on top of another. The Image Row views the Image Stack as a singular unit and resizes it so it can fill out the row with the other images.
In the example below we have added an Image Stack into our original Image Row and inside of the Image Stack with have added two images.
This combination of Image Rows and Image Stacks allows you to construct a wide variety of layouts where you give visual preference in terms of size to images of you see fit.
3. Arrange and Customize
Like all the other galleries in FolioBlocks, the Modular Gallery displays images as inner blocks this means that the List View makes it super easy to re-arrange your gallery and modify your layout. Images can be dragged and dropped in and out of Image Rows and Image Stacks. Image Stacks can also be dragged and dropped from one Image Row to another.
General Gallery Settings
Image Resolution
Choose between Thumbnail, Medium, Large, or Full image resolutions to optimize quality and performance.
Collapse layout on Mobile
The Modular Gallery Block by default will maintain it’s layout even on Mobile phones, the idea being that it might be often used on presentational galleries where the size of the image is meant to convey a message.
Activate this toogle if you prefer for it to collapse into a single column of images on mobile.
Remove Image Gap
Toggle removes gaps between images and rows.
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
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
Blocks right-click functionality to discourage casual saving or copying of your images.
Note: This feature helps deter casual downloads but cannot fully prevent access through browser developer tools or source code.
Enable Lazy-Load of Images
Loads images as they appear on screen to improve page performance on large galleries.
Gallery Image Settings
Built-In 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
Display image titles on hover to provide context or credits.
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.
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 Modular 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.
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 images in your gallery and look in it’s blocks 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.
Simple 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 Modular Gallery
Bellow is an example of the Modular Gallery created with FolioBlocks:
Common Questions
How many images can I add?
Image Rows support up to 8 images and Image Stacks support up to 4 images.
Can I reorder or replace images?
Yes — you can drag to reorder images within each row or rearrange entire rows via the List View panel. Images can be dragged from one row to another and in and out of Image Stacks.
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.
Is it compatible with WordPress 6.x or newer?
Yes. The Modular Gallery Block is built for the WordPress Block Editor (Gutenberg) and optimized for modern WordPress standards.
Get Started
Ready to design your first modular gallery? Get FolioBlocks and start building professional, story-driven photo layouts in the WordPress Block Editor today.