Content · Gutenberg
Debate Block block for WordPress
Two-column argument block for presenting Pro vs Con, Side A vs Side B, or any two-position debate.
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 argument block for presenting Pro vs Con, Side A vs Side B, or any two-position debate.
Inspector panels on this block: Title, Side Labels & Icons, Verdict, Display, Spacing & Shape, Side Colors, General. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Two columns, Stacked; “Display — Style” options: Card (shadow), Bordered, Minimal.
Where to find it
Gutenberg inserter → Content → search “Debate Block” (block name `blockenberg/debate-block` in block.json). Style it in the sidebar after insert.
How to use Debate Block block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Debate Block”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Title. Set “Show title”, “Title — Title”, “Show subtitle”, “Subtitle”.
- 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 |
|---|---|
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Title — Title | Text field in the inspector. block.json default: The Great Debate. Saved as `blockTitle`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: Explore both sides of the argument. Saved as `blockSubtitle`. |
| Left side icon | Text field in the inspector. block.json default: 👍. Saved as `leftIcon`. |
| Left side label | Text field in the inspector. block.json default: For. Saved as `leftLabel`. |
| Right side icon | Text field in the inspector. block.json default: 👎. Saved as `rightIcon`. |
| Right side label | Text field in the inspector. block.json default: Against. Saved as `rightLabel`. |
| Show verdict | On/off toggle in the inspector. On by default. Saved as `showVerdict`. |
| Verdict label | Text field in the inspector. block.json default: 💡 Verdict. Saved as `verdictLabel`. |
| Verdict text | Multiline text field in the inspector. block.json default: The answer depends on your specific context. For most growing businesses, the long-term productivity gains outweigh the initial investment — but careful change management is essential.. Saved as `verdict`. |
| Layout | Select control; the chosen value is saved on the block. Options: Two columns; Stacked. block.json default: columns. Saved as `layout`. |
| Display — Style | Select control; the chosen value is saved on the block. Options: Card (shadow); Bordered; Minimal. block.json default: card. Saved as `style`. |
| Show icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show ✓/✗ bullets | On/off toggle in the inspector. On by default. Saved as `showBullets`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Gap / padding | Numeric range control in the inspector. Range 8–48. block.json default: 20. Saved as `gap`. |
| Left header | Color control in the inspector. block.json default: #22c55e. Saved as `leftColor`. |
| Left body bg | Color control in the inspector. block.json default: #f0fdf4. Saved as `leftBg`. |
| Right header | Color control in the inspector. block.json default: #ef4444. Saved as `rightColor`. |
| Right body bg | Color control in the inspector. block.json default: #fef2f2. Saved as `rightBg`. |
| Block background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| General — Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Header text | Color control in the inspector. block.json default: #ffffff. Saved as `headerTextColor`. |
| General — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #64748b. Saved as `subtitleColor`. |
| Verdict background | Color control in the inspector. block.json default: #fffbeb. Saved as `verdictBg`. |
| Verdict text | Color control in the inspector. block.json default: #92400e. Saved as `verdictColor`. |
| Verdict border | Color control in the inspector. block.json default: #fcd34d. Saved as `verdictBorderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Two-column argument block for presenting Pro vs Con, Side A vs Side B, or any two-position debate — that is the job of Debate Block, not a generic content block.
- Use it when you need the editor control labeled “Show title”, which exists on this block’s inspector.
- It matches pages about debate, pro, con.
- Inserter grouping: articles, cards, lists, and long-form 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 Debate Block block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Debate Block”. It sits under Content. After insert, open Title and set “Show title”, “Title — Title”, “Show subtitle”, “Subtitle”.
What makes Debate Block different from other Blockenberg blocks?
Two-column argument block for presenting Pro vs Con, Side A vs Side B, or any two-position debate. Inspector labels on this block include “Show title”, “Title — Title”, “Show subtitle”, “Subtitle”.
Is the Debate Block Gutenberg block free?
Yes. Debate Block ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Debate Block 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: Title, Side Labels & Icons, Verdict, Display).
Related content blocks
Content Switcher
Two-panel toggle block — a pill/tab switch with a label for each state, each panel containing its own headline, body text, bullet list, image, and CTA. Great for Individual/Team, Starter/Pro, Before/After content.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Alert / Notice
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Big Stat
Display a single large impactful statistic with prefix, suffix, label, and multiple visual styles.
Blockquote / Pull Quote
Stylish quote block with accent line or decorative marks, author name, role and photo.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Debate Block from the Gutenberg inserter.