Marketing · Gutenberg
Comparison Section block for WordPress
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
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
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Inspector panels on this block: Heading, Columns, Feature Rows, CTA, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Highlight Column” options: Col 1 (You), Col 2 (Others), None.
Where to find it
Gutenberg inserter → Marketing → search “Comparison Section” (block name `blockenberg/comparison-section` in block.json). Style it in the sidebar after insert.
How to use Comparison Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Comparison Section”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Heading. Set “Show Heading”, “Col 1 Label (You)”, “Col 2 Label (Others)”, “Show Icons”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Col 1 Label (You) | Text field in the inspector. block.json default: Us. Saved as `col1Label`. |
| Col 2 Label (Others) | Text field in the inspector. block.json default: Others. Saved as `col2Label`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showColIcons`. |
| Highlight Column | Select control; the chosen value is saved on the block. Options: Col 1 (You); Col 2 (Others); None. block.json default: col1. Saved as `highlightCol`. |
| Feature | Text field in the inspector. |
| Show CTA | 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`. |
| Table Max Width (px) | Text field in the inspector. block.json default: 720. Saved as `tableWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Outer Max Width (px) | Numeric range control in the inspector. Range 600–1600. block.json default: 1200. Saved as `maxWidth`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Highlight Column BG | Color control in the inspector. block.json default: #7c3aed. Saved as `highlightBg`. |
| Highlight Column Text | Color control in the inspector. block.json default: #ffffff. Saved as `highlightColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Feature Text | Color control in the inspector. block.json default: #374151. Saved as `featureColor`. |
| Yes / checkmark | Color control in the inspector. block.json default: #16a34a. Saved as `yesColor`. |
| No / cross | Color control in the inspector. block.json default: #dc2626. Saved as `noColor`. |
| Partial | Color control in the inspector. block.json default: #d97706. Saved as `partialColor`. |
| Table Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| CTA Background | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls — that is the job of Comparison Section, not a generic content block.
- Use it when you need the editor control labeled “Show Heading”, which exists on this block’s inspector.
- It matches pages about comparison, table, features.
- 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 Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Comparison Section”. It sits under Marketing. After insert, open Heading and set “Show Heading”, “Col 1 Label (You)”, “Col 2 Label (Others)”, “Show Icons”.
What makes Comparison Section different from other Blockenberg blocks?
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls. Inspector labels on this block include “Show Heading”, “Col 1 Label (You)”, “Col 2 Label (Others)”, “Show Icons”.
Is the Comparison Section Gutenberg block free?
Yes. Comparison Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Comparison Section 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: Heading, Columns, Feature Rows, CTA).
Related marketing blocks
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table 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.
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.
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 Section from the Gutenberg inserter.