Blog · Gutenberg
Product Roundup block for WordPress
Ranked multi-product review section with ratings, pros/cons and CTAs.
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
Ranked multi-product review section with ratings, pros/cons and CTAs.
Inspector panels on this block: Layout & Display. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: List (vertical), Grid (2 columns).
Where to find it
Gutenberg inserter → Blog → search “Product Roundup” (block name `blockenberg/product-roundup` in block.json). Style it in the sidebar after insert.
How to use Product Roundup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Product Roundup”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Layout & Display. Set “Show Subtitle”, “Show Rank Badge”, “Show Product Image”, “Show Star Rating”.
- 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 |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: List (vertical); Grid (2 columns). block.json default: list. Saved as `layout`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show Rank Badge | On/off toggle in the inspector. On by default. Saved as `showRank`. |
| Show Product Image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Show Star Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Show Pros | On/off toggle in the inspector. On by default. Saved as `showPros`. |
| Show Cons | On/off toggle in the inspector. On by default. Saved as `showCons`. |
| Show Price | On/off toggle in the inspector. On by default. Saved as `showPrice`. |
| Open Links in New Tab | On/off toggle in the inspector. On by default. Saved as `openInNewTab`. |
| Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 10. Saved as `borderRadius`. |
| Card Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `cardRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingBottom`. |
| Section Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtitleTypo`. |
| Product Name | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Summary | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `summaryTypo`. |
| Section Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Section Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Heading | Color control in the inspector. block.json default: #0f172a. Saved as `headingColor`. |
| Subtitle | Color control in the inspector. block.json default: #64748b. Saved as `subtitleColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Rank Badge BG | Color control in the inspector. block.json default: #0f172a. Saved as `rankBg`. |
| Rank Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `rankColor`. |
| Pick Badge BG | Color control in the inspector. block.json default: #f59e0b. Saved as `badgeBg`. |
| Pick Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Product Name | Color control in the inspector. block.json default: #0f172a. Saved as `nameColor`. |
| Rating Stars | Color control in the inspector. block.json default: #f59e0b. Saved as `ratingColor`. |
| Summary Text | Color control in the inspector. block.json default: #475569. Saved as `summaryColor`. |
| Pros Color | Color control in the inspector. block.json default: #16a34a. Saved as `prosColor`. |
| Cons Color | Color control in the inspector. block.json default: #dc2626. Saved as `consColor`. |
| Price | Color control in the inspector. block.json default: #0f172a. Saved as `priceColor`. |
| CTA Button BG | Color control in the inspector. block.json default: #0f172a. Saved as `ctaBg`. |
| CTA Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Badge | On/off toggle in the inspector. Saved as `products`. |
| Rating | Numeric range control in the inspector. Range 0–5. Saved as `products`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Ranked multi-product review section with ratings, pros/cons and CTAs — that is the job of Product Roundup, not a generic content block.
- Use it when you need the editor control labeled “Show Subtitle”, which exists on this block’s inspector.
- It matches pages about product, review, roundup.
- 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 Product Roundup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Product Roundup”. It sits under Blog. After insert, open Layout & Display and set “Show Subtitle”, “Show Rank Badge”, “Show Product Image”, “Show Star Rating”.
What makes Product Roundup different from other Blockenberg blocks?
Ranked multi-product review section with ratings, pros/cons and CTAs. Inspector labels on this block include “Show Subtitle”, “Show Rank Badge”, “Show Product Image”, “Show Star Rating”.
Is the Product Roundup Gutenberg block free?
Yes. Product Roundup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Product Roundup 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: Layout & Display).
Related blog blocks
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Review Box
Professional review card with score, pros/cons, and Schema.org markup.
Star Rating
Static visual star rating (1–5 stars) with optional label and numeric score. CSS-only, perfect inside testimonial cards.
Verdict Box
Final verdict block for product reviews with a score, pros & cons, verdict text, recommendation, and award badges.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Product Roundup from the Gutenberg inserter.