Developers · Gutenberg
Text Comparison block for WordPress
Two-column narrative comparison block for Before/After, Problem/Solution, Old Way/New Way contrasts using styled bullet lists.
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
Two-column narrative comparison block for Before/After, Problem/Solution, Old Way/New Way contrasts using styled bullet lists.
Inspector panels on this block: Layout, Left column, Right column, Divider & Background. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout — Style” options: Cards (bordered), Flat (no border), Filled; “Header align” options: Center, Left; “Divider style” options: Line, VS Badge, Arrow →, None.
Where to find it
Gutenberg inserter → Developers → search “Text Comparison” (block name `blockenberg/text-comparison` in block.json). Style it in the sidebar after insert.
How to use Text Comparison block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Comparison”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Layout. Set “Layout — Style”, “Header align”, “Show icons”, “Show descriptions”.
- Check the published page. An IntersectionObserver starts work when the block enters the viewport. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout — Style | Select control; the chosen value is saved on the block. Options: Cards (bordered); Flat (no border); Filled. block.json default: cards. Saved as `style`. |
| Header align | Select control; the chosen value is saved on the block. Options: Center; Left. block.json default: center. Saved as `headerAlign`. |
| Show icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show descriptions | On/off toggle in the inspector. On by default. Saved as `showDescriptions`. |
| Show divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Divider style | Select control; the chosen value is saved on the block. Options: Line; VS Badge; Arrow →; None. block.json default: line. Saved as `dividerStyle`. |
| Max width (px) | Numeric range control in the inspector. Range 480–1400. block.json default: 960. Saved as `maxWidth`. |
| Column gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 0. Saved as `gap`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–64. block.json default: 32. Saved as `cardPadding`. |
| Icon size (px) | Numeric range control in the inspector. Range 18–60. block.json default: 32. Saved as `iconSize`. |
| Item icon (px) | Numeric range control in the inspector. Range 12–24. block.json default: 16. Saved as `itemIconSize`. |
| 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`. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Two-column narrative comparison block for Before/After, Problem/Solution, Old Way/New Way contrasts using styled bullet lists — that is the job of Text Comparison, not a generic content block.
- Use it when you need the editor control labeled “Layout — Style”, which exists on this block’s inspector.
- Inserter grouping: docs sites, utilities, and developer landing pages.
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 Text Comparison block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Comparison”. It sits under Developers. After insert, open Layout and set “Layout — Style”, “Header align”, “Show icons”, “Show descriptions”.
What makes Text Comparison different from other Blockenberg blocks?
Two-column narrative comparison block for Before/After, Problem/Solution, Old Way/New Way contrasts using styled bullet lists. Inspector labels on this block include “Layout — Style”, “Header align”, “Show icons”, “Show descriptions”.
Is the Text Comparison Gutenberg block free?
Yes. Text Comparison ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Comparison 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, Left column, Right column, Divider & Background).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Comparison from the Gutenberg inserter.