Reviews by category block

assets/js/base/components/review-list-item/index.js

@@ -61,41 +61,71 @@ function getReviewContent( review ) {
 	);
 }
 
-const ReviewListItem = ( { attributes, review = {} } ) => {
-	const { imageType, showReviewDate, showReviewerName, showReviewImage, showReviewRating: showReviewRatingAttr } = attributes;
-	const { date_created: dateCreated, formatted_date_created: formattedDateCreated, rating, reviewer = '' } = review;
+function getReviewProductName( review ) {
+	return (
+		<div className="wc-block-review-list-item__product">
+			<a href={ review.product_permalink }>
+				{ review.product_name }
+			</a>
+		</div>
+	);
+}
+
+function getReviewerName( review ) {
+	const { reviewer = '' } = review;
+	return (
+		<div className="wc-block-review-list-item__author">
+			{ reviewer }
+		</div>
+	);
+}
+
+function getReviewDate( review ) {
+	const { date_created: dateCreated, formatted_date_created: formattedDateCreated } = review;
+	return (
+		<time className="wc-block-review-list-item__published-date" dateTime={ dateCreated }>
+			{ formattedDateCreated }
+		</time>
+	);
+}
+
+function getReviewRating( review ) {
+	const { rating } = review;
+	const starStyle = {
+		width: ( rating / 5 * 100 ) + '%', /* stylelint-disable-line */
+	};
+	return (
+		<div className="wc-block-review-list-item__rating">
+			<div className="wc-block-review-list-item__rating__stars" role="img">
+				<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
+			</div>
+		</div>
+	);
+}
+
+const ReviewListItem = ( { attributes, review = {}, showProductName } ) => {
+	const { imageType, showReviewDate, showReviewerName, showReviewImage, showReviewRating: showReviewRatingAttr, showReviewContent } = attributes;
+	const { rating } = review;
 	const isLoading = ! Object.keys( review ).length > 0;
 	const showReviewRating = Number.isFinite( rating ) && showReviewRatingAttr;
 	const classes = getReviewClasses( isLoading );
-	const starStyle = {
-		width: ( rating / 5 * 100 ) + '%',
-	};
 
 	return (
 		<li className={ classes } aria-hidden={ isLoading }>
 			{ ( showReviewDate || showReviewerName || showReviewImage || showReviewRating ) && (
 				<div className="wc-block-review-list-item__info">
 					{ showReviewImage && getReviewImage( review, imageType, isLoading ) }
-					{ ( showReviewerName || showReviewRating || showReviewDate ) && (
+					{ ( showProductName || showReviewerName || showReviewRating || showReviewDate ) && (
 						<div className="wc-block-review-list-item__meta">
-							{ showReviewerName && (
-								<strong className="wc-block-review-list-item__author">{ reviewer }</strong>
-							) }
-							{ showReviewRating && (
-								<div className="wc-block-review-list-item__rating">
-									<div className="wc-block-review-list-item__rating__stars" role="img">
-										<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
-									</div>
-								</div>
-							) }
-							{ showReviewDate && (
-								<time className="wc-block-review-list-item__published-date" dateTime={ dateCreated }>{ formattedDateCreated }</time>
-							) }
+							{ showReviewRating && getReviewRating( review ) }
+							{ showProductName && getReviewProductName( review ) }
+							{ showReviewerName && getReviewerName( review ) }
+							{ showReviewDate && getReviewDate( review ) }
 						</div>
 					) }
 				</div>
 			) }
-			{ getReviewContent( review ) }
+			{ showReviewContent && getReviewContent( review ) }
 		</li>
 	);
 };

assets/js/base/components/review-list-item/style.scss

@@ -17,6 +17,10 @@
 				width: 80px;
 			}
 
+			.wc-block-review-list-item__product {
+				display: none;
+			}
+
 			.wc-block-review-list-item__rating {
 				.wc-block-review-list-item__rating__stars > span {
 					display: none;
@@ -32,6 +36,7 @@
 	}
 }
 
+.editor-styles-wrapper .wc-block-review-list-item__item,
 .wc-block-review-list-item__item {
 	margin: 0 0 $gap-large * 2;
 	list-style: none;
@@ -91,15 +96,56 @@
 	}
 }
 
+.wc-block-review-list-item__meta {
+	display: flex;
+	align-items: center;
+	flex-flow: row wrap;
+
+	&::after {
+		// Force wrap after star rating.
+		order: 3;
+		content: "";
+		flex-basis: 100%;
+	}
+}
+
+.wc-block-review-list-item__product {
+	display: block;
+	font-weight: bold;
+	order: 1;
+}
+
 .wc-block-review-list-item__author {
 	display: block;
+	font-weight: bold;
+	order: 1;
+}
+
+.wc-block-review-list-item__product + .wc-block-review-list-item__author {
+	font-weight: normal;
+	color: #808080;
+	order: 4;
+
+	&::after {
+		content: "";
+		display: inline-block;
+		margin-left: $gap/2;
+		margin-right: $gap/2;
+		border-right: 1px solid #ddd;
+		height: 1em;
+		vertical-align: middle;
+	}
+}
+
+.wc-block-review-list-item__published-date {
+	color: #808080;
+	order: 5;
 }
 
 .wc-block-review-list-item__rating {
-	display: inline-block;
-	vertical-align: middle;
-	margin-right: $gap;
+	margin-left: $gap;
 	height: 1em;
+	order: 2;
 
 	> .wc-block-review-list-item__rating__stars {
 		display: inline-block;
@@ -140,10 +186,3 @@
 		color: #e6a237;
 	}
 }
-
-.wc-block-review-list-item__published-date {
-	display: inline-block;
-	vertical-align: middle;
-	color: #808080;
-	font-size: 0.875em;
-}

assets/js/base/components/review-list/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import ReviewListItem from '../review-list-item';
 import './style.scss';
 
-const ReviewList = ( { attributes, componentId, reviews } ) => {
+const ReviewList = ( { attributes, componentId, reviews, showProductName } ) => {
 	const showReviewImage = ( wc_product_block_data.showAvatars || attributes.imageType === 'product' ) && attributes.showReviewImage;
 	const showReviewRating = wc_product_block_data.enableReviewRating && attributes.showReviewRating;
 	const attrs = {
@@ -28,7 +28,7 @@ const ReviewList = ( { attributes, componentId, reviews } ) => {
 					<ReviewListItem attributes={ attrs } />
 				) : (
 					reviews.map( ( review, i ) => (
-						<ReviewListItem key={ review.id || i } attributes={ attrs } review={ review } />
+						<ReviewListItem key={ review.id || i } attributes={ attrs } review={ review } showProductName={ showProductName } />
 					) )
 				)
 			}
@@ -40,6 +40,7 @@ ReviewList.propTypes = {
 	attributes: PropTypes.object.isRequired,
 	componentId: PropTypes.number.isRequired,
 	reviews: PropTypes.array.isRequired,
+	showProductName: PropTypes.bool,
 };
 
 export default ReviewList;