Media · Gutenberg
Before / After Grid block for WordPress
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
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
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Inspector panels on this block: Image Pairs (, Layout, Handle & Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Columns” options: 1 column, 2 columns, 3 columns; “Aspect Ratio” options: 16:9 (Widescreen), 4:3 (Standard), 3:2 (Photo), 1:1 (Square), 3:4 (Portrait); “Slider Orientation” options: Horizontal (left/right), Vertical (top/bottom); “Handle Style” options: Circle + Arrows, Circle only, Line (thin), Double arrow.
Where to find it
Gutenberg inserter → Media → search “Before / After Grid” (block name `blockenberg/before-after-grid` in block.json). Style it in the sidebar after insert.
How to use Before / After Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Before / After Grid”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image Pairs (. Set “Label”, “Label (Pairs)”, “Caption”, “Columns”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. Saved as `pairs`. |
| Label (Pairs) | Text field in the inspector. Saved as `pairs`. |
| Caption | Text field in the inspector. Saved as `pairs`. |
| Columns | Select control; the chosen value is saved on the block. Options: 1 column; 2 columns; 3 columns. block.json default: 2. Saved as `columns`. |
| Aspect Ratio | Select control; the chosen value is saved on the block. Options: 16:9 (Widescreen); 4:3 (Standard); 3:2 (Photo); 1:1 (Square); 3:4 (Portrait). block.json default: 4/3. Saved as `aspect`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `gap`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Slider Orientation | Select control; the chosen value is saved on the block. Options: Horizontal (left/right); Vertical (top/bottom). block.json default: horizontal. Saved as `orientation`. |
| Start Position (%) | Numeric range control in the inspector. Range 10–90. block.json default: 50. Saved as `startPosition`. |
| Handle Style | Select control; the chosen value is saved on the block. Options: Circle + Arrows; Circle only; Line (thin); Double arrow. block.json default: circle-arrows. Saved as `handleStyle`. |
| Handle Size (px) | Numeric range control in the inspector. Range 24–80. block.json default: 44. Saved as `handleSize`. |
| Line Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 2. Saved as `lineWidth`. |
| Show labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Show captions | On/off toggle in the inspector. On by default. Saved as `showCaptions`. |
| Label (Label Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Caption (Caption Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `captionTypo`. |
| Handle Background | Color control in the inspector. block.json default: #ffffff. Saved as `handleBg`. |
| Handle Icon | Color control in the inspector. block.json default: #374151. Saved as `handleColor`. |
| Divider Line | Color control in the inspector. block.json default: #ffffff. Saved as `lineColor`. |
| Label Background | Color control in the inspector. block.json default: rgba(0,0,0,0.55). Saved as `labelBg`. |
| Label Text | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
| Caption Background | Color control in the inspector. block.json default: #f8fafc. Saved as `captionBg`. |
| Caption Text | Color control in the inspector. block.json default: #374151. Saved as `captionColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout — that is the job of Before / After Grid, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about before after, comparison, slider.
- Inserter grouping: video, animation, and rich media sections.
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 Before / After Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Before / After Grid”. It sits under Media. After insert, open Image Pairs ( and set “Label”, “Label (Pairs)”, “Caption”, “Columns”.
What makes Before / After Grid different from other Blockenberg blocks?
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout. Inspector labels on this block include “Label”, “Label (Pairs)”, “Caption”, “Columns”.
Is the Before / After Grid Gutenberg block free?
Yes. Before / After Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Before / After 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: Image Pairs (, Layout, Handle & Labels).
Related media blocks
Before/After Slider
Compare two images with a draggable slider handle.
Image Slider
A responsive image carousel with captions, autoplay, arrows, dots and touch support.
Filter Gallery
Image grid with category filter buttons. Clicking a tag shows/hides matching items with animation.
Gallery Showcase
Featured image with a clickable thumbnail strip — click any thumbnail to swap the main large view. Perfect for portfolio details, product image galleries, and case study illustrations.
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Cards
A responsive grid of rich cards with images, category tag, title, description and CTA. Perfect for blog previews, portfolio, services or team showcases.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Before / After Grid from the Gutenberg inserter.