Update Reviews blocks so they use block styles

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

@@ -14,11 +14,7 @@ import './style.scss';
 function getReviewImage( review, imageType, isLoading ) {
 	if ( isLoading || ! review ) {
 		return (
-			<div
-				className="wc-block-review-list-item__image wc-block-components-review-list-item__image"
-				width="48"
-				height="48"
-			/>
+			<div className="wc-block-review-list-item__image wc-block-components-review-list-item__image" />
 		);
 	}
 
@@ -34,8 +30,7 @@ function getReviewImage( review, imageType, isLoading ) {
 				<img
 					aria-hidden="true"
 					alt=""
-					src={ review.reviewer_avatar_urls[ '48' ] || '' }
-					srcSet={ review.reviewer_avatar_urls[ '96' ] + ' 2x' }
+					src={ review.reviewer_avatar_urls[ '96' ] || '' }
 				/>
 			) }
 			{ review.verified && (

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

@@ -59,7 +59,7 @@
 
 .has-image {
 	.wc-block-components-review-list-item__info {
-		grid-template-columns: #{48px + $gap} 1fr;
+		grid-template-columns: calc(3em + #{$gap}) 1fr;
 	}
 	.wc-block-components-review-list-item__meta {
 		grid-column: 2;
@@ -69,19 +69,17 @@
 .wc-block-components-review-list-item__image {
 	align-items: center;
 	display: flex;
-	height: 48px;
+	height: 3em;
 	grid-column: 1;
 	grid-row: 1 / 3;
 	justify-content: center;
 	position: relative;
-	width: 48px;
+	width: 3em;
 
 	> img {
 		display: block;
-		height: auto;
 		max-height: 100%;
-		max-width: 100%;
-		width: auto;
+		object-fit: contain;
 	}
 }
 
@@ -134,23 +132,28 @@
 
 .wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author {
 	font-weight: normal;
-	color: #808080;
 	order: 4;
 }
 
 .wc-block-components-review-list-item__published-date {
-	color: #808080;
 	order: 5;
 }
 
-.wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
+.wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
+	padding-left: $gap/2;
+	position: relative;
+
 	&::before {
 		content: "";
 		display: inline-block;
-		margin-right: $gap*0.5;
-		border-right: 1px solid #ddd;
+		margin-left: -$gap*0.5;
+		border-right: 1px solid currentColor;
+		opacity: 0.5;
 		height: 1em;
 		vertical-align: middle;
+		position: absolute;
+		top: calc(50% + 0.1em);
+		transform: translateY(-50%);
 	}
 }
 
@@ -166,16 +169,15 @@
 
 	> .wc-block-components-review-list-item__rating__stars {
 		@include font-size(regular);
-		display: inline-block;
+		display: block;
 		top: 0;
 		overflow: hidden;
 		position: relative;
-		height: 1.618em;
-		line-height: 1.618;
+		height: 1em;
+		line-height: 1;
 		width: 5.3em;
 		font-family: star; /* stylelint-disable-line */
 		font-weight: 400;
-		vertical-align: top;
 	}
 
 	> .wc-block-components-review-list-item__rating__stars::before {
@@ -204,3 +206,7 @@
 		color: #e6a237;
 	}
 }
+
+.wc-block-components-review-list-item__text p {
+	font-size: inherit;
+}

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

@@ -1,4 +1,4 @@
-.wc-block-components-review-list,
-.editor-styles .wc-block-components-review-list {
+// Duplicate class for specificity in the editor.
+.wc-block-components-review-list.wc-block-components-review-list {
 	margin: 0;
 }

assets/js/base/components/sort-select/style.scss

@@ -9,5 +9,6 @@
 }
 
 .wc-block-components-sort-select__select {
+	font-size: inherit;
 	width: max-content;
 }

assets/js/blocks/reviews/all-reviews/index.js

@@ -9,7 +9,7 @@ import { Icon, discussion } from '@woocommerce/icons';
  * Internal dependencies
  */
 import '../editor.scss';
-import Editor from './edit';
+import edit from './edit';
 import sharedAttributes from '../attributes';
 import save from '../save.js';
 import { example } from '../example';
@@ -19,6 +19,7 @@ import { example } from '../example';
  * This block lists all product reviews.
  */
 registerBlockType( 'woocommerce/all-reviews', {
+	apiVersion: 2,
 	title: __( 'All Reviews', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: <Icon srcElement={ discussion } />,
@@ -32,6 +33,12 @@ registerBlockType( 'woocommerce/all-reviews', {
 	),
 	supports: {
 		html: false,
+		color: {
+			background: false,
+		},
+		typography: {
+			fontSize: true,
+		},
 	},
 	example: {
 		...example,
@@ -72,17 +79,6 @@ registerBlockType( 'woocommerce/all-reviews', {
 		],
 	},
 
-	/**
-	 * Renders and manages the block.
-	 *
-	 * @param {Object} props Props to pass to block.
-	 */
-	edit( props ) {
-		return <Editor { ...props } />;
-	},
-
-	/**
-	 * Save the props to post content.
-	 */
+	edit,
 	save,
 } );

assets/js/blocks/reviews/editor-container-block.js

@@ -2,24 +2,48 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { Placeholder } from '@wordpress/components';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import EditorBlock from './editor-block.js';
 import { getBlockClassName, getSortArgs } from './utils.js';
 
-/**
- * Container of the block rendered in the editor.
- */
-class EditorContainerBlock extends Component {
-	renderHiddenContentPlaceholder() {
-		const { icon, name } = this.props;
+const EditorContainerBlock = ( {
+	attributes,
+	icon,
+	name,
+	noReviewsPlaceholder,
+} ) => {
+	const {
+		categoryIds,
+		productId,
+		reviewsOnPageLoad,
+		showProductName,
+		showReviewDate,
+		showReviewerName,
+		showReviewContent,
+		showReviewImage,
+		showReviewRating,
+	} = attributes;
+	const { order, orderby } = getSortArgs( attributes.orderby );
+	const isAllContentHidden =
+		! showReviewContent &&
+		! showReviewRating &&
+		! showReviewDate &&
+		! showReviewerName &&
+		! showReviewImage &&
+		! showProductName;
+
+	const blockProps = useBlockProps( {
+		className: getBlockClassName( attributes ),
+	} );
 
+	if ( isAllContentHidden ) {
 		return (
 			<Placeholder icon={ icon } label={ name }>
 				{ __(
@@ -30,54 +54,27 @@ class EditorContainerBlock extends Component {
 		);
 	}
 
-	render() {
-		const { attributes, noReviewsPlaceholder } = this.props;
-		const {
-			categoryIds,
-			productId,
-			reviewsOnPageLoad,
-			showProductName,
-			showReviewDate,
-			showReviewerName,
-			showReviewContent,
-			showReviewImage,
-			showReviewRating,
-		} = attributes;
-		const { order, orderby } = getSortArgs( attributes.orderby );
-		const isAllContentHidden =
-			! showReviewContent &&
-			! showReviewRating &&
-			! showReviewDate &&
-			! showReviewerName &&
-			! showReviewImage &&
-			! showProductName;
-
-		if ( isAllContentHidden ) {
-			return this.renderHiddenContentPlaceholder();
-		}
-
-		return (
-			<div className={ getBlockClassName( attributes ) }>
-				<EditorBlock
-					attributes={ attributes }
-					categoryIds={ categoryIds }
-					delayFunction={ ( callback ) => debounce( callback, 400 ) }
-					noReviewsPlaceholder={ noReviewsPlaceholder }
-					orderby={ orderby }
-					order={ order }
-					productId={ productId }
-					reviewsToDisplay={ reviewsOnPageLoad }
-				/>
-			</div>
-		);
-	}
-}
+	return (
+		<div { ...blockProps }>
+			<EditorBlock
+				attributes={ attributes }
+				categoryIds={ categoryIds }
+				delayFunction={ ( callback ) => debounce( callback, 400 ) }
+				noReviewsPlaceholder={ noReviewsPlaceholder }
+				orderby={ orderby }
+				order={ order }
+				productId={ productId }
+				reviewsToDisplay={ reviewsOnPageLoad }
+			/>
+		</div>
+	);
+};
 
 EditorContainerBlock.propTypes = {
 	attributes: PropTypes.object.isRequired,
 	icon: PropTypes.node.isRequired,
 	name: PropTypes.string.isRequired,
-	noReviewsPlaceholder: PropTypes.func.isRequired,
+	noReviewsPlaceholder: PropTypes.element.isRequired,
 	className: PropTypes.string,
 };
 

assets/js/blocks/reviews/reviews-by-category/index.js

@@ -17,6 +17,7 @@ import { example } from '../example';
  * Register and run the "Reviews by category" block.
  */
 registerBlockType( 'woocommerce/reviews-by-category', {
+	apiVersion: 2,
 	title: __( 'Reviews by Category', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: <Icon srcElement={ review } />,
@@ -30,6 +31,12 @@ registerBlockType( 'woocommerce/reviews-by-category', {
 	),
 	supports: {
 		html: false,
+		color: {
+			background: false,
+		},
+		typography: {
+			fontSize: true,
+		},
 	},
 	example: {
 		...example,

assets/js/blocks/reviews/reviews-by-product/index.js

@@ -17,6 +17,7 @@ import { example } from '../example';
  * Register and run the "Reviews by Product" block.
  */
 registerBlockType( 'woocommerce/reviews-by-product', {
+	apiVersion: 2,
 	title: __( 'Reviews by Product', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: <Icon srcElement={ comment } />,
@@ -30,6 +31,12 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 	),
 	supports: {
 		html: false,
+		color: {
+			background: false,
+		},
+		typography: {
+			fontSize: true,
+		},
 	},
 	example: {
 		...example,

assets/js/blocks/reviews/save.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
@@ -7,7 +12,9 @@ import { getBlockClassName, getDataAttrs } from './utils.js';
 export default ( { attributes } ) => {
 	return (
 		<div
-			className={ getBlockClassName( attributes ) }
+			{ ...useBlockProps.save( {
+				className: getBlockClassName( attributes ),
+			} ) }
 			{ ...getDataAttrs( attributes ) }
 		/>
 	);