Layout · Gutenberg
Masonry Grid block for WordPress
Responsive masonry layout for images with hover effects.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Responsive masonry layout for images with hover effects.
Inspector panels on this block: Items, Grid Layout, Overlay & Caption. Those titles come from index.js, not from a shared template.
Behavior controls: “Hover Effect” options: Zoom, Fade, Lift (shadow), None.
Where to find it
Gutenberg inserter → Layout → search “Masonry Grid” (block name `blockenberg/masonry-grid` in block.json). Style it in the sidebar after insert.
How to use Masonry Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Masonry Grid”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Items. Set “Caption”, “Link URL”, “Columns”, “Gap (px)”.
- Check the published page. The view script reads HTML data attributes: data-lightbox. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Caption | Text field in the inspector. |
| Link URL | Text field in the inspector. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 16. Saved as `gap`. |
| Image Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `imageRadius`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Zoom; Fade; Lift (shadow); None. block.json default: zoom. Saved as `hoverEffect`. |
| Show Overlay on Hover | On/off toggle in the inspector. On by default. Saved as `showOverlay`. |
| Show Caption | On/off toggle in the inspector. On by default. Saved as `showCaption`. |
| Overlay Opacity % | Numeric range control in the inspector. Range 10–100. block.json default: 70. Saved as `overlayOpacity`. |
| Lightbox on Click | On/off toggle in the inspector. On by default. Saved as `lightbox`. |
| Overlay Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `overlayColor`. |
| Caption Color | Color control in the inspector. block.json default: #ffffff. Saved as `captionColor`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-lightbox.
- Keyboard handlers move focus between items.
When this is the right block
- Responsive masonry layout for images with hover effects — that is the job of Masonry Grid, not a generic content block.
- Use it when you need the editor control labeled “Caption”, which exists on this block’s inspector.
- It matches pages about masonry, grid, gallery.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Masonry Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Masonry Grid”. It sits under Layout. After insert, open Items and set “Caption”, “Link URL”, “Columns”, “Gap (px)”.
What makes Masonry Grid different from other Blockenberg blocks?
Responsive masonry layout for images with hover effects. Inspector labels on this block include “Caption”, “Link URL”, “Columns”, “Gap (px)”.
Is the Masonry Grid Gutenberg block free?
Yes. Masonry Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Masonry Grid to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Items, Grid Layout, Overlay & Caption).
Related layout blocks
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Rich Columns
Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Section
A container section for organizing content with rows and columns.
Text Columns
Magazine-style multi-column text layout with drop cap, column rule / divider, pull quote spanning all columns and per-column WYSIWYG editing.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Masonry Grid from the Gutenberg inserter.