Blog · Gutenberg
Pros & Cons block for WordPress
A two-column pros and cons comparison block for reviews and articles. Supports editable items, custom icons, heading, and full color control for each column.
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 two-column pros and cons comparison block for reviews and articles. Supports editable items, custom icons, heading, and full color control for each column.
Inspector panels on this block: Content, Layout, Pros Colors, Cons Colors, General Colors, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Two Columns (side by side), Stacked (pros then cons).
Where to find it
Gutenberg inserter → Blog → search “Pros & Cons” (block name `blockenberg/pros-cons` in block.json). Style it in the sidebar after insert.
How to use Pros & Cons block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pros & Cons”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Content. Set “Show Block Heading”, “Heading”, “Pros Column Heading”, “Cons Column Heading”.
- 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 Block Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Heading | Text field in the inspector. block.json default: Pros & Cons. Saved as `heading`. |
| Pros Column Heading | Text field in the inspector. block.json default: Pros. Saved as `prosHeading`. |
| Cons Column Heading | Text field in the inspector. block.json default: Cons. Saved as `consHeading`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Layout | Select control; the chosen value is saved on the block. Options: Two Columns (side by side); Stacked (pros then cons). block.json default: two-col. Saved as `layout`. |
| Column Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 16. Saved as `columnGap`. |
| Heading (Heading Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Column Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `colHeadTypo`. |
| Item Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `itemTypo`. |
| Header Background | Color control in the inspector. block.json default: #dcfce7. Saved as `prosHeadBg`. |
| Header Text Color | Color control in the inspector. block.json default: #15803d. Saved as `prosHeadColor`. |
| Column Background | Color control in the inspector. block.json default: #f0fdf4. Saved as `prosBg`. |
| Border Color | Color control in the inspector. block.json default: #bbf7d0. Saved as `prosBorder`. |
| Bullet Color | Color control in the inspector. block.json default: #16a34a. Saved as `prosBulletColor`. |
| Item Text Color | Color control in the inspector. block.json default: #166534. Saved as `prosItemColor`. |
| Header Background | Color control in the inspector. block.json default: #fee2e2. Saved as `consHeadBg`. |
| Header Text Color | Color control in the inspector. block.json default: #b91c1c. Saved as `consHeadColor`. |
| Column Background | Color control in the inspector. block.json default: #fef2f2. Saved as `consBg`. |
| Border Color | Color control in the inspector. block.json default: #fecaca. Saved as `consBorder`. |
| Bullet Color | Color control in the inspector. block.json default: #dc2626. Saved as `consBulletColor`. |
| Item Text Color | Color control in the inspector. block.json default: #991b1b. Saved as `consItemColor`. |
| Heading Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `headingColor`. |
| Block Background | Color control in the inspector. Saved as `cardBg`. |
| Item Gap (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `itemGap`. |
| Column Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `colRadius`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 0–80. block.json default: 0. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 0–80. block.json default: 0. Saved as `paddingH`. |
| Max Width (px) | Numeric range control in the inspector. Range 320–1400. block.json default: 860. Saved as `maxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A two-column pros and cons comparison block for reviews and articles. Supports editable items, custom icons, heading, and full color control for each column — that is the job of Pros & Cons, not a generic content block.
- Use it when you need the editor control labeled “Show Block Heading”, which exists on this block’s inspector.
- It matches pages about pros, cons, advantages.
- Inserter grouping: posts, magazines, and editorial WordPress 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 Pros & Cons block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pros & Cons”. It sits under Blog. After insert, open Content and set “Show Block Heading”, “Heading”, “Pros Column Heading”, “Cons Column Heading”.
What makes Pros & Cons different from other Blockenberg blocks?
A two-column pros and cons comparison block for reviews and articles. Supports editable items, custom icons, heading, and full color control for each column. Inspector labels on this block include “Show Block Heading”, “Heading”, “Pros Column Heading”, “Cons Column Heading”.
Is the Pros & Cons Gutenberg block free?
Yes. Pros & Cons ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pros & Cons 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: Content, Layout, Pros Colors, Cons Colors).
Related blog blocks
Review Box
Professional review card with score, pros/cons, and Schema.org markup.
Verdict Box
Final verdict block for product reviews with a score, pros & cons, verdict text, recommendation, and award badges.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Decision Matrix
Weighted criteria scoring matrix to compare options and surface the best decision with totals and a winner highlight.
Key Takeaways
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pros & Cons from the Gutenberg inserter.