Bold Bento Grid

Bold Bento Grid brings the modern “bento box” layout to WordPress with a single, high-performance CSS Grid engine that renders identically in the block editor and on the front end.

Choose a curated preset, drop in your tiles, and the grid takes care of the geometry. Every tile can show an image with an overlay, text above or below its image, or a free-form stack of inner blocks.

Layout

• Curated presets for 2 to 5 tiles: Split 50/50, Asymmetric 70/30, Hero Focus, Triple Row, Balanced Quad, Showcase 4, Feature 5, Asymmetric 5, and Strip 5.
• The preset list follows the tile count, and the number of tiles is controlled with a single slider.
• One 12-column CSS Grid engine — no per-block inline layout hacks.

Tiles

• Content modes: image overlay (with an adjustable dark scrim), text on top, text below, or custom inner blocks.
• Per-tile design controls: background colour or CSS gradient, text colour, border width and colour.
• Opt-in hover micro-interactions: lift, glow, image zoom, or a pointer-tracking 3D tilt.

Responsive

• Under 768px every layout collapses to a single stacked column.
• Between 768px and 1024px the 4- and 5-tile presets step down to two columns.
• The same breakpoints apply inside the editor canvas, so what you see is what you publish.

Built for real sites

• Works identically in the Gutenberg block editor and the Elementor page builder (widget lives under the “Bento Engine” category).
• All markup is wrapped in a .bold-bento-wrapper namespace so active themes and Elementor global styles cannot override the grid gap, tile padding, or typography.
• Accessibility: tiles expose an aria-label from their title, and all motion respects prefers-reduced-motion.
• Security-first: every URL is passed through esc_url(), CSS values are filtered, and numeric ranges are clamped before output.
• Translation-ready with the bold-bento-grid text domain.

Source Code

This plugin ships compiled JavaScript and CSS in the build/ directory. The
human-readable sources — TypeScript and SCSS under src/, the block metadata,
and the full build pipeline — live in the public development repository:

https://github.com/boldspantechnologies/Bold-Bento-Grid

Build tools: Node.js 18+ and npm, with
@wordpress/scripts (webpack).

• npm install — install the build toolchain.
• npm run build — compile src/ into build/ (bold-bento/grid block, tile block, front-end runtime, stylesheet).
• npm run package — clean, build, and produce dist/bold-bento-grid.zip containing only the files WordPress needs.

The text domain is bold-bento-grid throughout (plugin header, every __() /
_e() call, both block.json files, and wp_set_script_translations()).
Translations are handled by translate.wordpress.org.