Blocks: Add rating to grid previews (https://github.com/woocommerce/woocommerce-blocks/pull/472)

* Add rating stars to the product preview

* Add rating to the visibility controls

plugins/woocommerce-blocks/assets/css/style.scss

@@ -17,6 +17,12 @@
 		}
 	}
 
+	&.is-hidden-rating {
+		.star-rating {
+			display: none;
+		}
+	}
+
 	&.is-hidden-button {
 		.button[data-product_sku] {
 			display: none !important;

plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js

@@ -179,6 +179,7 @@ class ProductsBlock extends Component {
 			'is-not-found': loaded && ! hasSelectedProducts,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js

@@ -58,6 +58,7 @@ registerBlockType( 'woocommerce/handpicked-products', {
 			default: {
 				title: true,
 				price: true,
+				rating: true,
 				button: true,
 			},
 		},
@@ -101,6 +102,7 @@ registerBlockType( 'woocommerce/handpicked-products', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js

@@ -131,6 +131,7 @@ class ProductBestSellersBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js

@@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-best-sellers', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js

@@ -196,6 +196,7 @@ class ProductByCategoryBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js

@@ -84,6 +84,7 @@ registerBlockType( 'woocommerce/product-category', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js

@@ -133,6 +133,7 @@ class ProductNewestBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js

@@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-new', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js

@@ -145,6 +145,7 @@ class ProductOnSaleBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js

@@ -73,6 +73,7 @@ registerBlockType( 'woocommerce/product-on-sale', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js

@@ -133,6 +133,7 @@ class ProductTopRatedBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js

@@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-top-rated', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js

@@ -210,6 +210,7 @@ class ProductsByAttributeBlock extends Component {
 			'is-not-found': loaded && ! products.length,
 			'is-hidden-title': ! contentVisibility.title,
 			'is-hidden-price': ! contentVisibility.price,
+			'is-hidden-rating': ! contentVisibility.rating,
 			'is-hidden-button': ! contentVisibility.button,
 		} );
 

plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js

@@ -67,6 +67,7 @@ registerBlockType( 'woocommerce/products-by-attribute', {
 			default: {
 				title: true,
 				price: true,
+				rating: true,
 				button: true,
 			},
 		},
@@ -110,6 +111,7 @@ registerBlockType( 'woocommerce/products-by-attribute', {
 			{
 				'is-hidden-title': ! contentVisibility.title,
 				'is-hidden-price': ! contentVisibility.price,
+				'is-hidden-rating': ! contentVisibility.rating,
 				'is-hidden-button': ! contentVisibility.button,
 			}
 		);

plugins/woocommerce-blocks/assets/js/components/grid-content-control/index.js

@@ -10,7 +10,7 @@ import { ToggleControl } from '@wordpress/components';
  * A combination of range controls for product grid layout settings.
  */
 const GridContentControl = ( { onChange, settings } ) => {
-	const { button, price, title } = settings;
+	const { button, price, rating, title } = settings;
 	return (
 		<Fragment>
 			<ToggleControl
@@ -33,6 +33,16 @@ const GridContentControl = ( { onChange, settings } ) => {
 				checked={ price }
 				onChange={ () => onChange( { ...settings, price: ! price } ) }
 			/>
+			<ToggleControl
+				label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
+				help={
+					rating ?
+						__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
+						__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
+				}
+				checked={ rating }
+				onChange={ () => onChange( { ...settings, rating: ! rating } ) }
+			/>
 			<ToggleControl
 				label={ __( 'Add to Cart button', 'woo-gutenberg-products-block' ) }
 				help={

plugins/woocommerce-blocks/assets/js/components/product-preview/index.js

@@ -22,6 +22,12 @@ const ProductPreview = ( { product } ) => {
 		image = <img src={ placeholderImgSrc } alt="" />;
 	}
 
+	const rating = Number( product.average_rating );
+	let displayRating = false;
+	if ( rating > 0 ) {
+		displayRating = ( rating / 5 ) * 100;
+	}
+
 	return (
 		<div className="wc-product-preview">
 			{ image }
@@ -33,6 +39,13 @@ const ProductPreview = ( { product } ) => {
 				className="wc-product-preview__price"
 				dangerouslySetInnerHTML={ { __html: product.price_html } }
 			/>
+
+			{ displayRating && (
+				<div className="wc-product-preview__rating star-rating" role="img">
+					<span style={ { width: `${ displayRating }%` } } />
+				</div>
+			) }
+
 			<span className="wp-block-button">
 				<span className="wc-product-preview__add-to-cart wp-block-button__link">
 					{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }

plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss

@@ -3,10 +3,50 @@
 	margin-bottom: $gap;
 
 	.wc-product-preview__title,
-	.wc-product-preview__price {
+	.wc-product-preview__price,
+	.wc-product-preview__rating {
 		margin-top: $gap-smallest;
 	}
 
+	.star-rating {
+		overflow: hidden;
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		font-family: star;
+		font-weight: 400;
+
+		&::before {
+			content: '\53\53\53\53\53';
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.25;
+		}
+
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			padding-top: 1.5em;
+		}
+
+		span::before {
+			content: '\53\53\53\53\53';
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+		}
+	}
+
 	.wp-block-button {
 		margin-bottom: 0;
 	}
@@ -44,6 +84,12 @@
 		}
 	}
 
+	.is-hidden-rating & {
+		.wc-product-preview__rating {
+			display: none;
+		}
+	}
+
 	.is-hidden-button & {
 		.wp-block-button {
 			display: none;

plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js

@@ -48,6 +48,7 @@ export default {
 		default: {
 			title: true,
 			price: true,
+			rating: true,
 			button: true,
 		},
 	},