---
title: Rating
description: "The Rating Block shows a score the way review sites do: a row of stars filled to the exact rating, so 4.3 fills four stars and a third of the fifth, with the score, a title and a short line…"
url: "https://shapekode.com/product/shapeblock/docs/rating/"
updated: "2026-11-04"
category: Content Block
---

# Rating

The Rating Block shows a score the way review sites do: a row of stars filled to the exact rating, so 4.3 fills four stars and a third of the fifth, with the score, a title and a short line such as the number of reviews. It can also show a breakdown in bars, for example how many reviews gave five stars, four stars and so on.

Use it for a review summary, a trust line in a hero section, the rating on a product, room or plan card, the stars at the top of a testimonial, scores from other review sites, or any score out of 5 or out of 10. The stars can also be hearts, dots or an icon of your choice.

[How to Add a Star Rating in WordPress Gutenberg | ShapeBlock Pro Rating](https://www.youtube.com/embed/qADtylDLu_o?feature=oembed)

## How to Add a Rating Block

Follow these steps to add and set up the Rating Block in the Gutenberg editor.

### Step 1: Add the Rating Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Rating** under ShapeBlock Pro.
4. Insert the block into your page. It starts with a 4.8 rating, the title *Excellent* and a sample caption.
5. Select the block and change the rating, the title and the caption in the sidebar.

![Rating block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-1.webp)

### Step 2: Configure the Rating Block

Select the Rating Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Set the rating, the scale, the rounding and the shape, the layout and the texts, and the breakdown bars.
- **Layout:** Set the alignment, the size of the stars, the space between them and between the bars, and the padding.
- **Style:** Style the stars, the box around the block, the score, the title, the caption and the bars.
- **Advanced:** Set the spacing, position and background of the whole block.

![Rating block selected in the editor, with the Rating panel open in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-2.webp)

## Settings Tab

The Settings tab contains the **Rating**, **Content** and **Breakdown** panels.

![Rating block, Settings tab with the Rating, Content and Breakdown panels open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-3.webp)

### 1. Rating

- **Rating:** The score, for example *4.8*. Decimals are allowed: the last star is filled by the fraction, so 4.3 fills a third of the fifth star. It cannot be higher than the Out Of value.
- **Out Of:** How many stars there are, from 1 to 10. Use 5 for a usual star rating and 10 for a score out of ten.
- **Round the Stars To:** **Exact (part of a star)** fills the stars to the exact rating. **Half Stars** rounds the rating to the nearest half, so 4.7 shows 4.5. **Whole Stars** rounds it to a whole number, so 4.7 shows 5. The score text is rounded in the same way.
- **Shape:** **Star**, **Heart**, **Dot** or **Icon**. With Icon, an **Icon** picker appears: choose any icon from the icon library, such as a cup or a thumbs up. Filled icons work best, because the fill is cut to the rating in the same way as a star.

### 2. Content

- **Layout:** **Stars Only** shows the stars with a small score after them, a good fit for cards and testimonials. **Big Score Beside** puts a large score to the left of the title, the stars and the caption. **Big Score Above** puts the large score on top and centers everything under it.
- **Show the Score:** Turn the score on or off. Turn it off to show the stars alone, for example at the top of a testimonial.
- **Score:** Show the score as *4.8*, or with the scale as *4.8/5*.
- **Title:** A short line above the stars, for example *Excellent* or *Guest rating*. Leave it empty to hide it.
- **Title HTML Tag:** The HTML tag for the title: H2 to H6, P or DIV. The default is DIV. This option appears when there is a title.
- **Caption:** A line under the stars, for example *Based on 1,284 reviews*. Leave it empty to hide it.

### 3. Breakdown

- **Show the Breakdown:** Turn on bars that show the share of each rating, such as how many reviews gave 5 stars.
- **Position:** **Under the Rating** puts the bars below the score. **Beside the Rating** puts them to the right of the score while there is room, and moves them under it in a narrow space such as a phone.
- **After Each Bar:** Show the **Percent** of all reviews, the **Number** of reviews, or **Nothing**.
- **Label and Reviews:** Each bar has a label, such as *5* or *5 stars*, and the number of reviews for it. The bar lengths are worked out from these numbers. The trash icon removes a bar, and **Add Bar** adds one.

## Layout Tab

![Rating block, Layout tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-4.webp)

- **Alignment:** Align the rating to the left, center or right. Responsive settings are available, so a rating can sit on the right on a desktop and on the left on a phone.
- **Star Size:** The size of the stars, hearts, dots or icons, for example *16px*. When empty, 20px. Responsive settings are available.
- **Space Between Stars:** The gap between the stars. When empty, 3px. Responsive settings are available.
- **Space Between Bars:** The gap between the breakdown bars. When empty, 10px. This option appears when the breakdown is on. Responsive settings are available.
- **Padding:** The space inside the block, between the box border and the content. Responsive settings are available.

## Style Tab

The Style tab contains the **Stars**, **Box**, **Score**, **Title**, **Caption** and **Breakdown** panels.

![Rating block, Style tab with all panels open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-5.webp)

### 1. Stars

- **Filled Color:** The color of the filled part of the stars. When empty, a warm yellow.
- **Empty Color:** The color of the empty stars and of the unfilled part of a star.

### 2. Box

- **Background:** A color or gradient behind the whole rating, to turn it into a card or a badge.
- **Border:** The style, width and color of the outline.
- **Border Radius:** Round the corners of the box.
- **Box Shadow:** A shadow under the box.

### 3. Score

- **Color and Typography:** The color and font of the score. This panel appears when the score is shown. Responsive settings are available for desktop, tablet and mobile.

### 4. Title and 5. Caption

- **Color and Typography:** The color and font of the title, and of the caption. Responsive settings are available.

### 6. Breakdown

- **Bar Color:** The color of the filled bars. When empty, the Filled Color of the stars.
- **Track Color:** The color of the bar background.
- **Text Color:** The color of the labels and of the numbers after the bars.
- **Bar Height:** The thickness of the bars. When empty, 8px.
- **Bar Radius:** Round the ends of the bars. When empty, fully round. Use *0* for square ends.

This panel appears when the breakdown is on.

## Advanced Tab

![Rating block, Advanced tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rating-6.webp)

The Advanced tab has the same panels as on every ShapeBlock block: **Spacing** (padding and margin per device), **Position** (place the rating with Absolute or Fixed, with offsets, width and z-index), and **Background** (a color or gradient behind the whole block). They are explained in [Advanced Tab: Spacing, Position and Background](https://shapekode.com/product/shapeblock/docs/advanced-tab/).

### Tips

- For a trust line in a hero section, use Stars Only with the score shown and a caption such as the number of reviews.
- For testimonial cards, use Stars Only, turn the score off and leave the title and the caption empty.
- For a review summary, use Big Score Beside with the breakdown beside it and the numbers after the bars, and give the box a white background, a thin border and a soft shadow.
- For a score out of ten, set Out Of to 10, choose the Dot shape with a small Star Size, and show the score as *9.6/10*.
- Use the same Filled Color for the stars across a page, so every rating reads as part of one design.

**Live demo:** see the Rating Block in action on the [Rating demo page](https://shapekode.com/product/shapeblock/rating/).