Gutenberg Star Ratings Block Tutorial

Introduction

Gutenberg Star Ratings Block by Premium Blocks makes it simple to add and customize a star rating system on your WordPress website. This block is designed purely for visual rating displays—it does not collect user reviews or feedback. Instead, it helps you showcase ratings, highlight quality, or visually enhance your pages with star icons, the Star Rating Block offers a range of customization options, including score, star icons, colors, alignment, and more.
Follow this guide to learn how to create, customize, and style star ratings that seamlessly integrate into your content.

Free Download

Requirements to Get You Started

To start using this block, make sure the required WordPress plugin is installed and activated.

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

Early Steps: Where to Find Star Ratings Block?

Add New Page: From WordPress dashboard, start by adding a new page, then give it a name, and you will be ready to go.
Adding Star Rating Block: From the panel on the left side, you can search for Star Rating block or scroll down the blocks list until you see it, then add it.

Layout Settings

Display Title: Toggle to show or hide the title.
Number Of Stars: Set the maximum number of stars. You can set it between 0 to 10 depending on your preference.
Rating Score: The number of stars based on your rating.
Star Icon Type: Choose the type of star. Options include an icon or SVG.

Select Icon: Choose an icon for ratings.
Select SVG: Upload an SVG from your device for ratings.
Star Position: Set the position of the star rating icon. You can set it to the left, right, top or bottom of your rating title, when title is displayed.
Title and Stars Gap: Adjust the spacing between the rating title and the stars, when title is displayed.
Gap Between Stars: Sets horizontal spacing between each star icon.
Alignment: Set the star rating alignment on the page with options for left, center, or right alignment.

How to Style the Star Rating Block?

Icon Style

Size: Set the icon or SVG ratings type size.
Color: Set the color of your filled star rating.
Unmarked Color: set the color of the unmarked star rating.

Title Style

Typography: Customize the font settings for the rating title.
Color: Set the color of your rating title.

Conclusion

Premium Star Ratings Block for Gutenberg editor is a powerful tool that allows you to add meaningful, styled, and engaging ratings to your WordPress website. By customizing the block’s style and layout, you can ensure ratings match your site’s design. Use them in product showcases, service highlights, testimonials, or anywhere you want to emphasize quality with a clean, professional look.
Now that you know how to set up and customize Gutenberg Star Ratings Block, why not try it yourself? Download Premium Blocks Free Plugin to get started.

Free Download

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group