{"id":4995,"date":"2026-10-29T10:12:14","date_gmt":"2026-10-29T10:12:14","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/rating\/"},"modified":"2026-11-04T05:18:12","modified_gmt":"2026-11-04T05:18:12","password":"","slug":"rating","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/rating\/","title":{"rendered":"Rating"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add a Star Rating in WordPress Gutenberg | ShapeBlock Pro Rating\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qADtylDLu_o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Rating Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and set up the Rating Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Rating Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Rating<\/strong> under ShapeBlock Pro.<\/li>\n\n\n\n<li>Insert the block into your page. It starts with a 4.8 rating, the title <em>Excellent<\/em> and a sample caption.<\/li>\n\n\n\n<li>Select the block and change the rating, the title and the caption in the sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"260\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-1.webp\" alt=\"Rating block in the block inserter\" class=\"wp-image-4989\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-1-300x223.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Rating Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Rating Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the rating, the scale, the rounding and the shape, the layout and the texts, and the breakdown bars.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Set the alignment, the size of the stars, the space between them and between the bars, and the padding.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Style the stars, the box around the block, the score, the title, the caption and the bars.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Set the spacing, position and background of the whole block.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"1000\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2.webp\" alt=\"Rating block selected in the editor, with the Rating panel open in the sidebar\" class=\"wp-image-4990\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2-600x417.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2-300x208.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2-1024x711.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-2-768x533.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Rating<\/strong>, <strong>Content<\/strong> and <strong>Breakdown<\/strong> panels.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1094\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-3.webp\" alt=\"Rating block, Settings tab with the Rating, Content and Breakdown panels open\" class=\"wp-image-4991\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-3.webp 584w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-3-160x300.webp 160w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-3-547x1024.webp 547w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Rating<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rating:<\/strong> The score, for example <em>4.8<\/em>. 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.<\/li>\n\n\n\n<li><strong>Out Of:<\/strong> How many stars there are, from 1 to 10. Use 5 for a usual star rating and 10 for a score out of ten.<\/li>\n\n\n\n<li><strong>Round the Stars To:<\/strong> <strong>Exact (part of a star)<\/strong> fills the stars to the exact rating. <strong>Half Stars<\/strong> rounds the rating to the nearest half, so 4.7 shows 4.5. <strong>Whole Stars<\/strong> rounds it to a whole number, so 4.7 shows 5. The score text is rounded in the same way.<\/li>\n\n\n\n<li><strong>Shape:<\/strong> <strong>Star<\/strong>, <strong>Heart<\/strong>, <strong>Dot<\/strong> or <strong>Icon<\/strong>. With Icon, an <strong>Icon<\/strong> 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.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Content<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> <strong>Stars Only<\/strong> shows the stars with a small score after them, a good fit for cards and testimonials. <strong>Big Score Beside<\/strong> puts a large score to the left of the title, the stars and the caption. <strong>Big Score Above<\/strong> puts the large score on top and centers everything under it.<\/li>\n\n\n\n<li><strong>Show the Score:<\/strong> Turn the score on or off. Turn it off to show the stars alone, for example at the top of a testimonial.<\/li>\n\n\n\n<li><strong>Score:<\/strong> Show the score as <em>4.8<\/em>, or with the scale as <em>4.8\/5<\/em>.<\/li>\n\n\n\n<li><strong>Title:<\/strong> A short line above the stars, for example <em>Excellent<\/em> or <em>Guest rating<\/em>. Leave it empty to hide it.<\/li>\n\n\n\n<li><strong>Title HTML Tag:<\/strong> The HTML tag for the title: H2 to H6, P or DIV. The default is DIV. This option appears when there is a title.<\/li>\n\n\n\n<li><strong>Caption:<\/strong> A line under the stars, for example <em>Based on 1,284 reviews<\/em>. Leave it empty to hide it.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Breakdown<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show the Breakdown:<\/strong> Turn on bars that show the share of each rating, such as how many reviews gave 5 stars.<\/li>\n\n\n\n<li><strong>Position:<\/strong> <strong>Under the Rating<\/strong> puts the bars below the score. <strong>Beside the Rating<\/strong> 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.<\/li>\n\n\n\n<li><strong>After Each Bar:<\/strong> Show the <strong>Percent<\/strong> of all reviews, the <strong>Number<\/strong> of reviews, or <strong>Nothing<\/strong>.<\/li>\n\n\n\n<li><strong>Label and Reviews:<\/strong> Each bar has a label, such as <em>5<\/em> or <em>5 stars<\/em>, and the number of reviews for it. The bar lengths are worked out from these numbers. The trash icon removes a bar, and <strong>Add Bar<\/strong> adds one.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"803\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-4.webp\" alt=\"Rating block, Layout tab\" class=\"wp-image-4992\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-4-105x300.webp 105w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alignment:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Star Size:<\/strong> The size of the stars, hearts, dots or icons, for example <em>16px<\/em>. When empty, 20px. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Space Between Stars:<\/strong> The gap between the stars. When empty, 3px. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Space Between Bars:<\/strong> The gap between the breakdown bars. When empty, 10px. This option appears when the breakdown is on. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> The space inside the block, between the box border and the content. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Stars<\/strong>, <strong>Box<\/strong>, <strong>Score<\/strong>, <strong>Title<\/strong>, <strong>Caption<\/strong> and <strong>Breakdown<\/strong> panels.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1155\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-5.webp\" alt=\"Rating block, Style tab with all panels open\" class=\"wp-image-4993\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-5.webp 584w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-5-152x300.webp 152w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-5-518x1024.webp 518w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Stars<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Filled Color:<\/strong> The color of the filled part of the stars. When empty, a warm yellow.<\/li>\n\n\n\n<li><strong>Empty Color:<\/strong> The color of the empty stars and of the unfilled part of a star.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Box<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> A color or gradient behind the whole rating, to turn it into a card or a badge.<\/li>\n\n\n\n<li><strong>Border:<\/strong> The style, width and color of the outline.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Round the corners of the box.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> A shadow under the box.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Score<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color and Typography:<\/strong> The color and font of the score. This panel appears when the score is shown. Responsive settings are available for desktop, tablet and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Title and 5. Caption<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color and Typography:<\/strong> The color and font of the title, and of the caption. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Breakdown<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bar Color:<\/strong> The color of the filled bars. When empty, the Filled Color of the stars.<\/li>\n\n\n\n<li><strong>Track Color:<\/strong> The color of the bar background.<\/li>\n\n\n\n<li><strong>Text Color:<\/strong> The color of the labels and of the numbers after the bars.<\/li>\n\n\n\n<li><strong>Bar Height:<\/strong> The thickness of the bars. When empty, 8px.<\/li>\n\n\n\n<li><strong>Bar Radius:<\/strong> Round the ends of the bars. When empty, fully round. Use <em>0<\/em> for square ends.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when the breakdown is on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"939\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-rating-6.webp\" alt=\"Rating block, Advanced tab\" class=\"wp-image-4994\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab has the same panels as on every ShapeBlock block: <strong>Spacing<\/strong> (padding and margin per device), <strong>Position<\/strong> (place the rating with Absolute or Fixed, with offsets, width and z-index), and <strong>Background<\/strong> (a color or gradient behind the whole block). They are explained in <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/docs\/advanced-tab\/\">Advanced Tab: Spacing, Position and Background<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tips<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For a trust line in a hero section, use Stars Only with the score shown and a caption such as the number of reviews.<\/li>\n\n\n\n<li>For testimonial cards, use Stars Only, turn the score off and leave the title and the caption empty.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>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 <em>9.6\/10<\/em>.<\/li>\n\n\n\n<li>Use the same Filled Color for the stars across a page, so every rating reads as part of one design.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Rating Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/rating\/\">Rating demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-4995","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":1233,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4995"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4995\/revisions"}],"predecessor-version":[{"id":5526,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4995\/revisions\/5526"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4995"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4995"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}