Blog · Gutenberg
Rating Summary block for WordPress
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge.
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
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge.
Inspector panels on this block: Rating Settings, Star Breakdown, Layout & Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Platform” options: Google, G2, Capterra, Trustpilot, Yelp; “Layout” options: Horizontal (score left, bars right), Vertical (score top, bars below), Compact (inline); “Bar style” options: Rounded, Flat.
Where to find it
Gutenberg inserter → Blog → search “Rating Summary” (block name `blockenberg/rating-summary` in block.json). Style it in the sidebar after insert.
How to use Rating Summary block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Rating Summary”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Rating Settings. Set “Score”, “Max score”, “Total reviews”, “Reviews label”.
- Check the published page. The view script reads HTML data attributes: data-pct. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Score | Numeric range control in the inspector. block.json default: 4.3. Saved as `overallScore`. |
| Max score | Numeric range control in the inspector. Range 3–10. block.json default: 5. Saved as `maxScore`. |
| Total reviews | Numeric range control in the inspector. Range 0–100000. block.json default: 124. Saved as `totalReviews`. |
| Reviews label | Text field in the inspector. block.json default: reviews. Saved as `totalReviewsLabel`. |
| Show overall score number | On/off toggle in the inspector. On by default. Saved as `showOverallScore`. |
| Show stars | On/off toggle in the inspector. On by default. Saved as `showStars`. |
| Show total reviews | On/off toggle in the inspector. On by default. Saved as `showTotalReviews`. |
| Show platform badge | On/off toggle in the inspector. Off by default. Saved as `showPlatformBadge`. |
| Platform | Select control; the chosen value is saved on the block. Options: Google; G2; Capterra; Trustpilot; Yelp; Amazon. block.json default: Google. Saved as `platformName`. |
| Count | Numeric range control in the inspector. Range 0–9999. |
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal (score left, bars right); Vertical (score top, bars below); Compact (inline). block.json default: horizontal. Saved as `layout`. |
| Bar style | Select control; the chosen value is saved on the block. Options: Rounded; Flat. block.json default: rounded. Saved as `barStyle`. |
| Bar height (px) | Numeric range control in the inspector. Range 4–24. block.json default: 8. Saved as `barHeight`. |
| Bar radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 99. Saved as `barRadius`. |
| Row gap (px) | Numeric range control in the inspector. Range 2–24. block.json default: 6. Saved as `gap`. |
| Score (Score Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `scoreTypo`. |
| Labels | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Star size (px) | Numeric range control in the inspector. Range 12–40. block.json default: 20. Saved as `starSize`. |
| Bar fill | Color control in the inspector. block.json default: #f59e0b. Saved as `barColor`. |
| Bar track | Color control in the inspector. block.json default: #e5e7eb. Saved as `barTrackColor`. |
| Stars | Color control in the inspector. block.json default: #f59e0b. Saved as `starColor`. |
| Score number | Color control in the inspector. block.json default: #1e293b. Saved as `scoreColor`. |
| Labels | Color control in the inspector. block.json default: #6b7280. Saved as `labelColor`. |
| Counts / % | Color control in the inspector. block.json default: #6b7280. Saved as `countColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-pct.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge — that is the job of Rating Summary, not a generic content block.
- Use it when you need the editor control labeled “Score”, which exists on this block’s inspector.
- It matches pages about rating, reviews, summary.
- 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 Rating Summary block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Rating Summary”. It sits under Blog. After insert, open Rating Settings and set “Score”, “Max score”, “Total reviews”, “Reviews label”.
What makes Rating Summary different from other Blockenberg blocks?
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge. Inspector labels on this block include “Score”, “Max score”, “Total reviews”, “Reviews label”.
Is the Rating Summary Gutenberg block free?
Yes. Rating Summary ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Rating Summary 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: Rating Settings, Star Breakdown, Layout & Style).
Related blog blocks
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 Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Event Recap
Post-event summary with key stats, highlights and next event info.
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.
Media Quote
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Rating Summary from the Gutenberg inserter.