Layout · Gutenberg
Bento Grid block for WordPress
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
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
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Inspector panels on this block: Layout, Section Background, Cells, Cell Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Grid Layout” options: Classic (1 large + 2 + 2), Spotlight (1 large + 3 small), Even 2×3 grid; “Cells — Size” options: Large (2 col), Medium (1.5 col), Small (1 col); “Cell type” options: Text + Button, Statistic, Image + Overlay.
Where to find it
Gutenberg inserter → Layout → search “Bento Grid” (block name `blockenberg/bento-grid` in block.json). Style it in the sidebar after insert.
How to use Bento Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Bento Grid”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Layout. Set “Grid Layout”, “Gap (px)”, “Cell border radius (px)”, “Min row height (px)”.
- Check the published page. The view script reads HTML data attributes: data-animate. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Grid Layout | Select control; the chosen value is saved on the block. Options: Classic (1 large + 2 + 2); Spotlight (1 large + 3 small); Even 2×3 grid. block.json default: classic. Saved as `layout`. |
| Gap (px) | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `gap`. |
| Cell border radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 20. Saved as `borderRadius`. |
| Min row height (px) | Numeric range control in the inspector. Range 100–500. block.json default: 200. Saved as `minRowHeight`. |
| Hover lift effect | On/off toggle in the inspector. On by default. Saved as `hoverLift`. |
| Animate in on scroll | On/off toggle in the inspector. On by default. Saved as `animateIn`. |
| Eyebrow | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `eyebrowTypo`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Button border radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btnBorderRadius`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingBottom`. |
| Section Background — Background | Color control in the inspector. Saved as `bgColor`. |
| Cells — Size | Select control; the chosen value is saved on the block. Options: Large (2 col); Medium (1.5 col); Small (1 col). |
| Cell type | Select control; the chosen value is saved on the block. Options: Text + Button; Statistic; Image + Overlay. |
| Eyebrow / label | Text field in the inspector. |
| Title / Value | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Show button | On/off toggle in the inspector. |
| Button label | Text field in the inspector. |
| Button URL | Text field in the inspector. |
| Cell Colors — Background | Color control in the inspector. |
| Cell Colors — Text | Color control in the inspector. |
| Accent / Button | Color control in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights — that is the job of Bento Grid, not a generic content block.
- Use it when you need the editor control labeled “Grid Layout”, which exists on this block’s inspector.
- It matches pages about bento, grid, mosaic.
- 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 Bento Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Bento Grid”. It sits under Layout. After insert, open Layout and set “Grid Layout”, “Gap (px)”, “Cell border radius (px)”, “Min row height (px)”.
What makes Bento Grid different from other Blockenberg blocks?
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights. Inspector labels on this block include “Grid Layout”, “Gap (px)”, “Cell border radius (px)”, “Min row height (px)”.
Is the Bento Grid Gutenberg block free?
Yes. Bento Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Bento 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: Layout, Section Background, Cells, Cell Colors).
Related layout blocks
Masonry Grid
Responsive masonry layout for images with hover effects.
Rich Columns
Multi-column layout with icons, headings, rich text, and optional links — ideal for features, benefits, or service descriptions.
Section
A container section for organizing content with rows and columns.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Sticky Two Column
One column scrolls through feature highlights; the other stays sticky showing the active image — perfect for product tours and feature pages.
Video Hero
Hero section with video preview or background video, headline, CTA buttons and optional social proof.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Bento Grid from the Gutenberg inserter.