Content · Gutenberg
Media & Text Rows block for WordPress
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
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
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
Inspector panels on this block: Layout, Button, Rows, Row accent. Those titles come from index.js, not from a shared template.
Behavior controls: “Button style” options: Solid fill, Outlined, Text link.
Media & Text Rows has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Content → search “Media & Text Rows” (block name `blockenberg/media-text` in block.json). Style it in the sidebar after insert.
How to use Media & Text Rows block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Media & Text Rows”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Layout. Set “Image width (%)”, “Column gap (px)”, “Row gap (px)”, “Image border radius (px)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Image width (%) | Numeric range control in the inspector. Range 30–70. block.json default: 50. Saved as `imageWidthPercent`. |
| Column gap (px) | Numeric range control in the inspector. Range 16–160. block.json default: 64. Saved as `columnGap`. |
| Row gap (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `rowGap`. |
| Image border radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 12. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Show eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show button | On/off toggle in the inspector. On by default. Saved as `showButton`. |
| Button style | Select control; the chosen value is saved on the block. Options: Solid fill; Outlined; Text link. block.json default: solid. Saved as `btnStyle`. |
| 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: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Eyebrow | Color control in the inspector. block.json default: #6c3fb5. Saved as `eyebrowColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #4b5563. Saved as `descColor`. |
| Button background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Flip (image on right) | On/off toggle in the inspector. |
| Eyebrow | Text field in the inspector. |
| Rows — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Button label | Text field in the inspector. |
| Button URL | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
| Accent / Button color | Color control in the inspector. |
When this is the right block
- Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling — that is the job of Media & Text Rows, not a generic content block.
- Use it when you need the editor control labeled “Image width (%)”, which exists on this block’s inspector.
- It matches pages about media, text, alternating.
- 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 Media & Text Rows block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Media & Text Rows”. It sits under Content. After insert, open Layout and set “Image width (%)”, “Column gap (px)”, “Row gap (px)”, “Image border radius (px)”.
What makes Media & Text Rows different from other Blockenberg blocks?
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling. Inspector labels on this block include “Image width (%)”, “Column gap (px)”, “Row gap (px)”, “Image border radius (px)”.
Is the Media & Text Rows Gutenberg block free?
Yes. Media & Text Rows ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Media & 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, Button, Rows, Row accent).
Related content blocks
Image Text Rows
Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases.
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.
Content Slider
Full-slide carousel with custom backgrounds per slide (color, gradient, or image) and rich text content.
Icon
Standalone styled icon with label, link, shape, animation, and rich customization.
Icon Box
Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column.
Styled Text Builder
Build a paragraph from mixed inline text segments — combine highlights, badges, code spans, gradient text, and bold or colored fragments in a single richly-styled sentence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Media & Text Rows from the Gutenberg inserter.