Blog · Gutenberg
Verdict Box block for WordPress
Final verdict block for product reviews with a score, pros & cons, verdict text, recommendation, and award badges.
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
Final verdict block for product reviews with a score, pros & cons, verdict text, recommendation, and award badges.
Inspector panels on this block: Product Info, Pros (, Cons (, Verdict & CTAs, Display, Header & Score Colors, Pros & Cons Colors, Verdict & CTA Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Score Display” options: Circle, Progress Bar, Numeric Only; “Verdict Badge” options: ⭐ Recommended, 💰 Best Value, 🏆 Top Pick, 🏅 Award Winner, 👎 Skip It; “Layout” options: Split (side by side), Stacked.
Where to find it
Gutenberg inserter → Blog → search “Verdict Box” (block name `blockenberg/verdict-box` in block.json). Style it in the sidebar after insert.
How to use Verdict Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Verdict Box”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Product Info. Set “Product Name”, “Show Tagline”, “Tagline”, “Overall Score”.
- 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 |
|---|---|
| Product Name | Text field in the inspector. block.json default: Acme Pro 5000. Saved as `productName`. |
| Show Tagline | On/off toggle in the inspector. On by default. Saved as `showTagline`. |
| Tagline | Text field in the inspector. block.json default: Wireless Noise-Cancelling Headphones. Saved as `productTagline`. |
| Overall Score | Numeric range control in the inspector. block.json default: 8.7. Saved as `overallScore`. |
| Score Max | Numeric range control in the inspector. Range 5–100. block.json default: 10. Saved as `scoreMax`. |
| Score Label | Text field in the inspector. block.json default: Overall Score. Saved as `scoreLabel`. |
| Score Display | Select control; the chosen value is saved on the block. Options: Circle; Progress Bar; Numeric Only. block.json default: circle. Saved as `scoreDisplay`. |
| Verdict Badge | Select control; the chosen value is saved on the block. Options: ⭐ Recommended; 💰 Best Value; 🏆 Top Pick; 🏅 Award Winner; 👎 Skip It; (None). block.json default: recommended. Saved as `badge`. |
| Pros Label | Text field in the inspector. block.json default: ✅ Pros. Saved as `prosLabel`. |
| Cons Label | Text field in the inspector. block.json default: ❌ Cons. Saved as `consLabel`. |
| Show Verdict Text | On/off toggle in the inspector. On by default. Saved as `showVerdict`. |
| Show Primary CTA | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Text | Text field in the inspector. block.json default: Check Price on Amazon. Saved as `ctaText`. |
| CTA URL | Text field in the inspector. block.json default: https://example.com. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. Off by default. Saved as `showSecondaryCta`. |
| Secondary CTA Text | Text field in the inspector. block.json default: Read Full Review. Saved as `ctaSecondaryText`. |
| Secondary CTA URL | Text field in the inspector. Saved as `ctaSecondaryUrl`. |
| Layout | Select control; the chosen value is saved on the block. Options: Split (side by side); Stacked. block.json default: split. Saved as `layout`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Header Background | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Score Circle Background | Color control in the inspector. block.json default: #6366f1. Saved as `scoreCircleBg`. |
| Score Circle Text | Color control in the inspector. block.json default: #ffffff. Saved as `scoreCircleColor`. |
| Block Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Border Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Pros Background | Color control in the inspector. block.json default: #f0fdf4. Saved as `prosBg`. |
| Pros Text Color | Color control in the inspector. block.json default: #14532d. Saved as `prosColor`. |
| Pros Icon Color | Color control in the inspector. block.json default: #22c55e. Saved as `prosIconColor`. |
| Cons Background | Color control in the inspector. block.json default: #fef2f2. Saved as `consBg`. |
| Cons Text Color | Color control in the inspector. block.json default: #7f1d1d. Saved as `consColor`. |
| Cons Icon Color | Color control in the inspector. block.json default: #ef4444. Saved as `consIconColor`. |
| Verdict Background | Color control in the inspector. block.json default: #f8fafc. Saved as `verdictBg`. |
| Verdict Text Color | Color control in the inspector. block.json default: #374151. Saved as `verdictColor`. |
| CTA Background | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Secondary CTA Color | Color control in the inspector. block.json default: #6366f1. Saved as `ctaSecondaryColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- JavaScript functions that perform the math: scoreFill, buildScore.
When this is the right block
- Final verdict block for product reviews with a score, pros & cons, verdict text, recommendation, and award badges — that is the job of Verdict Box, not a generic content block.
- Use it when you need the editor control labeled “Product Name”, which exists on this block’s inspector.
- It matches pages about verdict, review, score.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
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 Verdict Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Verdict Box”. It sits under Blog. After insert, open Product Info and set “Product Name”, “Show Tagline”, “Tagline”, “Overall Score”.
Does Verdict Box need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Verdict Box Gutenberg block free?
Yes. Verdict Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Verdict Box 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: Product Info, Pros (, Cons (, Verdict & CTAs).
Related blog blocks
Review Box
Professional review card with score, pros/cons, and Schema.org markup.
Pros & Cons
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.
Star Rating
Static visual star rating (1–5 stars) with optional label and numeric score. CSS-only, perfect inside testimonial cards.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Product Roundup
Ranked multi-product review section with ratings, pros/cons and CTAs.
Rating Summary
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Verdict Box from the Gutenberg inserter.