Marketing · Gutenberg
Comparison Guide block for WordPress
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
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
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Inspector panels on this block: Guide Info, Item A, Item B, Criteria, Verdict, Layout Colors, Item & Badge Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Winner” options: A wins, B wins, Tie; “Recommended Winner” options: A is recommended, B is recommended, Tie / Depends.
Where to find it
Gutenberg inserter → Marketing → search “Comparison Guide” (block name `blockenberg/comparison-guide` in block.json). Style it in the sidebar after insert.
How to use Comparison Guide block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Comparison Guide”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Guide Info. Set “Guide Title”, “Show Introduction”, “Introduction”, “Name”.
- 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 |
|---|---|
| Guide Title | Text field in the inspector. block.json default: React vs Vue: Which Framework Should You Choose in 2026?. Saved as `guideTitle`. |
| Show Introduction | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Introduction | Multiline text field in the inspector. block.json default: Both React and Vue are excellent choices for modern web development. This guide breaks down the key decision criteria so you can choose the right tool for your project.. Saved as `intro`. |
| Name | Text field in the inspector. block.json default: React. Saved as `nameA`. |
| Description | Multiline text field in the inspector. block.json default: A JavaScript library for building user interfaces, maintained by Meta.. Saved as `descA`. |
| Show Overall Scores | On/off toggle in the inspector. On by default. Saved as `showScores`. |
| Score A (out of 100) | Numeric range control in the inspector. Range 0–100. block.json default: 87. Saved as `scoreA`. |
| Name (Name B) | Text field in the inspector. block.json default: Vue. Saved as `nameB`. |
| Description (Desc B) | Multiline text field in the inspector. block.json default: The progressive JavaScript framework for building web interfaces, created by Evan You.. Saved as `descB`. |
| Score B (out of 100) | Numeric range control in the inspector. Range 0–100. block.json default: 84. Saved as `scoreB`. |
| Show Scores | On/off toggle in the inspector. On by default. Saved as `showCritScores`. |
| Show Notes | On/off toggle in the inspector. On by default. Saved as `showNotes`. |
| Name (Criteria) | Text field in the inspector. Saved as `criteria`. |
| Winner | Select control; the chosen value is saved on the block. Options: A wins; B wins; Tie. Saved as `criteria`. |
| Notes | Multiline text field in the inspector. Saved as `criteria`. |
| Show Verdict | On/off toggle in the inspector. On by default. Saved as `showVerdict`. |
| Recommended Winner | Select control; the chosen value is saved on the block. Options: A is recommended; B is recommended; Tie / Depends. block.json default: A. Saved as `verdictWinner`. |
| Verdict Summary | Multiline text field in the inspector. block.json default: React is the better choice for teams prioritizing employability, ecosystem depth, and mobile development via React Native. Choose Vue if you value a gentler learning curve, tighter official tooling, or are building smaller to mid-size SPAs.. Saved as `verdictSummary`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Layout Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Layout Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Header BG | Color control in the inspector. block.json default: #f8fafc. Saved as `headerBg`. |
| Layout Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Intro Text | Color control in the inspector. block.json default: #374151. Saved as `introColor`. |
| Row Alt BG | Color control in the inspector. block.json default: #f8fafc. Saved as `rowAltBg`. |
| Notes Text | Color control in the inspector. block.json default: #6b7280. Saved as `notesColor`. |
| A Column BG | Color control in the inspector. block.json default: #eff6ff. Saved as `colABg`. |
| A Column Text | Color control in the inspector. block.json default: #1e3a8a. Saved as `colAColor`. |
| B Column BG | Color control in the inspector. block.json default: #f0fdf4. Saved as `colBBg`. |
| B Column Text | Color control in the inspector. block.json default: #14532d. Saved as `colBColor`. |
| Winner Badge BG | Color control in the inspector. block.json default: #fef9c3. Saved as `winnerBadgeBg`. |
| Winner Badge Text | Color control in the inspector. block.json default: #713f12. Saved as `winnerBadgeColor`. |
| Tie Badge BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `tieBg`. |
| Tie Badge Text | Color control in the inspector. block.json default: #475569. Saved as `tieColor`. |
| Verdict BG | Color control in the inspector. block.json default: #0f172a. Saved as `verdictBg`. |
| Verdict Text | Color control in the inspector. block.json default: #ffffff. Saved as `verdictColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons — that is the job of Comparison Guide, not a generic content block.
- Use it when you need the editor control labeled “Guide Title”, which exists on this block’s inspector.
- It matches pages about comparison, versus, guide.
- 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 Guide block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Comparison Guide”. It sits under Marketing. After insert, open Guide Info and set “Guide Title”, “Show Introduction”, “Introduction”, “Name”.
What makes Comparison Guide different from other Blockenberg blocks?
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons. Inspector labels on this block include “Guide Title”, “Show Introduction”, “Introduction”, “Name”.
Is the Comparison Guide Gutenberg block free?
Yes. Comparison Guide ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Comparison Guide 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: Guide Info, Item A, Item B, Criteria).
Related marketing blocks
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
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 Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
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 Announcement
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Comparison Guide from the Gutenberg inserter.