Content · Gutenberg
Image Text Rows block for WordPress
Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases.
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
Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases.
Inspector panels on this block: Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Image Position” options: Alternate (image switches sides), Always Left, Always Right; “Image Ratio” options: 16:9 Wide, 4:3 Standard, 1:1 Square, 3:4 Portrait; “Vertical Alignment” options: Top, Center, Bottom.
Where to find it
Gutenberg inserter → Content → search “Image Text Rows” (block name `blockenberg/image-text-rows` in block.json). Style it in the sidebar after insert.
How to use Image Text Rows block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Text Rows”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Layout. Set “Image Position”, “Image Ratio”, “Image Width %”, “Image Radius”.
- 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 |
|---|---|
| Image Position | Select control; the chosen value is saved on the block. Options: Alternate (image switches sides); Always Left; Always Right. block.json default: alternate. Saved as `imagePosition`. |
| Image Ratio | Select control; the chosen value is saved on the block. Options: 16:9 Wide; 4:3 Standard; 1:1 Square; 3:4 Portrait. block.json default: 4:3. Saved as `imageRatio`. |
| Image Width % | Numeric range control in the inspector. Range 30–65. block.json default: 45. Saved as `imageWidth`. |
| Image Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `imageRadius`. |
| Image Shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Vertical Alignment | Select control; the chosen value is saved on the block. Options: Top; Center; Bottom. block.json default: center. Saved as `verticalAlign`. |
| Gap Between Rows | Numeric range control in the inspector. Range 20–160. block.json default: 80. Saved as `gap`. |
| Show Badges | On/off toggle in the inspector. On by default. Saved as `showBadges`. |
| Show Feature List | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Show Buttons | On/off toggle in the inspector. On by default. Saved as `showBtns`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Badge Background | Color control in the inspector. block.json default: #ede9fe. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #7c3aed. Saved as `badgeColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #374151. Saved as `descColor`. |
| Feature Text | Color control in the inspector. block.json default: #374151. Saved as `featureColor`. |
| Feature Dot | Color control in the inspector. block.json default: #7c3aed. Saved as `featureDot`. |
| Button Background | Color control in the inspector. block.json default: #7c3aed. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases — that is the job of Image Text Rows, not a generic content block.
- Use it when you need the editor control labeled “Image Position”, which exists on this block’s inspector.
- It matches pages about image text, alternating, rows.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Image Text Rows block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Text Rows”. It sits under Content. After insert, open Layout and set “Image Position”, “Image Ratio”, “Image Width %”, “Image Radius”.
What makes Image Text Rows different from other Blockenberg blocks?
Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases. Inspector labels on this block include “Image Position”, “Image Ratio”, “Image Width %”, “Image Radius”.
Is the Image Text Rows Gutenberg block free?
Yes. Image Text Rows ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Text Rows 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).
Related content blocks
Media & Text Rows
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Info Cards
Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles.
Styled List
Fully customizable list with icons, rich text, and flexible layout options.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Text Rows from the Gutenberg inserter.