Blocks: Add rating to grid previews (#472)

ryelle · web-flow · commit 01b3b28b0c45 · 2019-03-06T13:50:32.000-05:00
* Add rating stars to the product preview

* Add rating to the visibility controls
diff --git a/assets/css/style.scss b/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;
diff --git a/assets/js/blocks/handpicked-products/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/handpicked-products/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/product-best-sellers/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/product-best-sellers/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/product-category/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/product-category/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/product-new/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/product-new/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/product-on-sale/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/product-on-sale/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/product-top-rated/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/product-top-rated/index.js b/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,
 			}
 		);
diff --git a/assets/js/blocks/products-by-attribute/block.js b/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,
 		} );
 
diff --git a/assets/js/blocks/products-by-attribute/index.js b/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,
 			}
 		);
diff --git a/assets/js/components/grid-content-control/index.js b/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={
diff --git a/assets/js/components/product-preview/index.js b/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' ) }
diff --git a/assets/js/components/product-preview/style.scss b/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;
diff --git a/assets/js/utils/shared-attributes.js b/assets/js/utils/shared-attributes.js
@@ -48,6 +48,7 @@ export default {
 		default: {
 			title: true,
 			price: true,
+			rating: true,
 			button: true,
 		},
 	},

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,12 @@`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`
	`20`	`+ &.is-hidden-rating {`
	`21`	`+ .star-rating {`
	`22`	`+ display: none;`
	`23`	`+ }`
	`24`	`+ }`
	`25`	`+`
`20`	`26`	`&.is-hidden-button {`
`21`	`27`	`.button[data-product_sku] {`
`22`	`28`	`display: none !important;`
Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ registerBlockType( 'woocommerce/product-best-sellers', {`
`65`	`65`	`{`
`66`	`66`	`'is-hidden-title': ! contentVisibility.title,`
`67`	`67`	`'is-hidden-price': ! contentVisibility.price,`
	`68`	`+ 'is-hidden-rating': ! contentVisibility.rating,`
`68`	`69`	`'is-hidden-button': ! contentVisibility.button,`
`69`	`70`	`}`
`70`	`71`	`);`
Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@ registerBlockType( 'woocommerce/product-category', {`
`84`	`84`	`{`
`85`	`85`	`'is-hidden-title': ! contentVisibility.title,`
`86`	`86`	`'is-hidden-price': ! contentVisibility.price,`
	`87`	`+ 'is-hidden-rating': ! contentVisibility.rating,`
`87`	`88`	`'is-hidden-button': ! contentVisibility.button,`
`88`	`89`	`}`
`89`	`90`	`);`