Marketing · Gutenberg
Comparison Wall block for WordPress
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
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
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Inspector panels on this block: Left Column, Right Column, Style & Layout, Header. Those titles come from index.js, not from a shared template.
Behavior controls: “Card style” options: Split cards, Flat (no card bg), Dark right column, Table comparison; “Header align” options: Left, Center.
Comparison Wall 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 → Marketing → search “Comparison Wall” (block name `blockenberg/comparison-swipe-wall` in block.json). Style it in the sidebar after insert.
How to use Comparison Wall block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Comparison Wall”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Left Column. Set “Left Column — Title”, “Right Column — Title”, “Card style”, “Show row icons”.
- 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 |
|---|---|
| Left Column — Title | Text field in the inspector. block.json default: Without us. Saved as `leftTitle`. |
| Right Column — Title | Text field in the inspector. block.json default: With us. Saved as `rightTitle`. |
| Card style | Select control; the chosen value is saved on the block. Options: Split cards; Flat (no card bg); Dark right column; Table comparison. block.json default: split-card. Saved as `cardStyle`. |
| Show row icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `gap`. |
| Show header | On/off toggle in the inspector. On by default. Saved as `showHeader`. |
| Show eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Eyebrow text | Text field in the inspector. block.json default: Comparison. Saved as `eyebrow`. |
| Header align | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: center. Saved as `headerAlign`. |
| Show CTA button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA label | Text field in the inspector. block.json default: Get started free. Saved as `ctaLabel`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 72. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 72. Saved as `paddingBottom`. |
| Section bg | Color control in the inspector. Saved as `sectionBg`. |
| Left card bg | Color control in the inspector. block.json default: #fff7f7. Saved as `leftCardBg`. |
| Right card bg | Color control in the inspector. block.json default: #f5f3ff. Saved as `rightCardBg`. |
| Left title | Color control in the inspector. block.json default: #dc2626. Saved as `leftTitleColor`. |
| Right title | Color control in the inspector. block.json default: #6c3fb5. Saved as `rightTitleColor`. |
| Left icon color | Color control in the inspector. block.json default: #dc2626. Saved as `leftIconColor`. |
| Right icon color | Color control in the inspector. block.json default: #10b981. Saved as `rightIconColor`. |
| Left item text | Color control in the inspector. block.json default: #475569. Saved as `leftItemColor`. |
| Right item text | Color control in the inspector. block.json default: #1e293b. Saved as `rightItemColor`. |
| Eyebrow bg | Color control in the inspector. block.json default: #f0ebff. Saved as `eyebrowBg`. |
| Eyebrow text | Color control in the inspector. block.json default: #6c3fb5. Saved as `eyebrowColor`. |
| Section title | Color control in the inspector. Saved as `sectionTitleColor`. |
| Section subtitle | Color control in the inspector. Saved as `sectionSubColor`. |
When this is the right block
- Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc — that is the job of Comparison Wall, not a generic content block.
- Use it when you need the editor control labeled “Left Column — Title”, which exists on this block’s inspector.
- It matches pages about comparison, table, before after.
- Inserter grouping: landing pages, campaign sections, and conversion 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 Comparison Wall block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Comparison Wall”. It sits under Marketing. After insert, open Left Column and set “Left Column — Title”, “Right Column — Title”, “Card style”, “Show row icons”.
What makes Comparison Wall different from other Blockenberg blocks?
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc. Inspector labels on this block include “Left Column — Title”, “Right Column — Title”, “Card style”, “Show row icons”.
Is the Comparison Wall Gutenberg block free?
Yes. Comparison Wall ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Comparison Wall 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: Left Column, Right Column, Style & Layout, Header).
Related marketing blocks
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Section
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Problem / Solution
Side-by-side problem vs solution section — two contrast columns each with icon, title, and feature lists. A classic landing page persuasion block.
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Comparison Wall from the Gutenberg inserter.