Blog · Gutenberg
Review Box block for WordPress
Professional review card with score, pros/cons, and Schema.org markup.
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
Professional review card with score, pros/cons, and Schema.org markup.
Inspector panels on this block: Product Details, Score, Button, Image, Sizing, Schema & Style, Pros, Cons. Those titles come from index.js, not from a shared template.
Behavior controls: “Button Style” options: Primary, Outline, Ghost; “Schema Type” options: Product, Software Application, Book, Local Business; “Skin” options: Bordered, Shadow, Gradient, Flat.
Where to find it
Gutenberg inserter → Blog → search “Review Box” (block name `blockenberg/review-box` in block.json). Style it in the sidebar after insert.
How to use Review Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Review Box”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Product Details. Set “Product Name”, “Review Title”, “Summary / Verdict”, “Price”.
- Check the published page. The view script reads HTML data attributes: data-schema. 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: Product Name. Saved as `productName`. |
| Review Title | Text field in the inspector. block.json default: Our Verdict. Saved as `reviewTitle`. |
| Summary / Verdict | Multiline text field in the inspector. Saved as `summary`. |
| Price | Text field in the inspector. Saved as `price`. |
| Price Label | Text field in the inspector. block.json default: Price. Saved as `priceLabel`. |
| Score | Numeric range control in the inspector. block.json default: 4.5. Saved as `score`. |
| Max Score | Numeric range control in the inspector. Range 5–10. block.json default: 5. Saved as `maxScore`. |
| Score Label | Text field in the inspector. block.json default: Overall Score. Saved as `scoreLabel`. |
| Button Label | Text field in the inspector. block.json default: Buy Now. Saved as `buttonLabel`. |
| Button URL | Text field in the inspector. Saved as `buttonUrl`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Primary; Outline; Ghost. block.json default: primary. Saved as `buttonStyle`. |
| Product Name (Title Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Body Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Score Badge Size | Numeric range control in the inspector. Range 32–80. block.json default: 48. Saved as `scoreSize`. |
| Score Label Size (px) | Numeric range control in the inspector. Range 8–18. block.json default: 10. Saved as `scoreLabelSize`. |
| Price Size (px) | Numeric range control in the inspector. Range 10–32. block.json default: 14. Saved as `priceSize`. |
| Price Label Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 14. Saved as `priceLabelSize`. |
| Enable Schema.org markup | On/off toggle in the inspector. On by default. Saved as `schemaEnabled`. |
| Schema Type | Select control; the chosen value is saved on the block. Options: Product; Software Application; Book; Local Business. block.json default: Product. Saved as `schemaType`. |
| Skin | Select control; the chosen value is saved on the block. Options: Bordered; Shadow; Gradient; Flat. block.json default: bordered. Saved as `skin`. |
| Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `borderRadius`. |
| Card BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header BG | Color control in the inspector. block.json default: #f9fafb. Saved as `headerBg`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Star Color | Color control in the inspector. block.json default: #f59e0b. Saved as `starColor`. |
| Pro Color | Color control in the inspector. block.json default: #10b981. Saved as `proColor`. |
| Con Color | Color control in the inspector. block.json default: #ef4444. Saved as `conColor`. |
| Score Badge BG | Color control in the inspector. block.json default: #2563eb. Saved as `scoreBg`. |
| Score Text | Color control in the inspector. block.json default: #ffffff. Saved as `scoreColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-schema.
- When schema is on, the script injects FAQPage JSON-LD into the document.
When this is the right block
- Professional review card with score, pros/cons, and Schema.org markup — that is the job of Review 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 review, rating, pros.
- Pick this when you want FAQPage JSON-LD from the same markup visitors click.
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 Review Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Review Box”. It sits under Blog. After insert, open Product Details and set “Product Name”, “Review Title”, “Summary / Verdict”, “Price”.
Does Review Box output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the Review Box Gutenberg block free?
Yes. Review Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Review 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 Details, Score, Button, Image).
Related blog blocks
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.
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.
Product Roundup
Ranked multi-product review section with ratings, pros/cons and CTAs.
Star Rating
Static visual star rating (1–5 stars) with optional label and numeric score. CSS-only, perfect inside testimonial cards.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Review Box from the Gutenberg inserter.