Gallery
Show a set of images in a masonry or grid layout.
The Gallery block lays out a set of images together, as a tidy grid or a masonry layout that fits pictures of different heights. Reach for it on portfolio pages, project showcases, or anywhere a collection of images benefits from a considered arrangement rather than a plain list.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "gallery".
- Pick the Gallery block, then add your images in the settings panel.
Settings
In the gallery's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Source | Chooses between a static hand-picked set or a dynamic source (WordPress field, ACF group and field) | Static for a curated set; dynamic when images come from post meta or a repeater |
| Layout | Switches between grid (uniform cells) and masonry (variable heights that pack together) | Masonry for photos of mixed proportions; grid for a consistent, structured look |
| Columns | Number of columns, set per breakpoint; defaults to 3 on large screens | Adjust for narrow viewports or when images need more breathing room |
| Height | Row height for grid layout; defaults to 300px | Taller for landscape-heavy sets, shorter for thumbnails |
| Horizontal gutter | Gap between columns; defaults to 10 | Match the surrounding layout rhythm |
| Vertical gutter | Gap between rows; defaults to 10 | Match the surrounding layout rhythm |
| Thumbnail size | WordPress image size to load (thumbnail, medium, large, full) | Smaller sizes load faster; use full only when the gallery is the main content |
| Lazy load | Defers offscreen images until they scroll into view | Almost always worth enabling on longer pages |
| Filter | Shows a row of category buttons above the gallery so visitors can narrow the set | Portfolio pages, project archives, any gallery with multiple categories |
| Show "All" button | Adds an "All" option to the filter bar | Leave on unless you want visitors to start with one category already selected |
| "All" label | Custom text for the "All" filter button | When "All" needs a language-specific or brand-specific label |
| Overlay | Adds a colour or gradient layer over each image | Useful when you show a title or description on top of the image |
| Title | Shows a per-image title from the gallery data | Portfolio piece names, project titles |
| Description | Shows a per-image description from the gallery data | A line of context below each title |
Styling
The Gallery block uses the shared design panel for spacing, colour, borders, and effects. Image-level styling (radius, border, overlay colour, per-image opacity and filters) is also in the gallery panel rather than the design tab. For hover states on the images themselves, see states.
Accessibility
Each image in the gallery takes its own alt text, set when you add images to the gallery data. Fill it in for every image; a gallery full of empty alt attributes is invisible to screen readers and unhelpful to search. If an image is purely decorative and carries no meaning of its own, an empty alt is acceptable, but that is rarely true for a portfolio or project gallery where each image is the content.
If you enable the filter bar, the category buttons are interactive controls. Give each category a clear, descriptive label so visitors using a keyboard or assistive technology know what they are filtering to before they activate it.