diff --git a/assets/js/base/components/reviews/review-list-item/index.js b/assets/js/base/components/reviews/review-list-item/index.js
index b8522d65180..b0daeeab8c2 100644
--- a/assets/js/base/components/reviews/review-list-item/index.js
+++ b/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 (
-
+
);
}
@@ -34,8 +30,7 @@ function getReviewImage( review, imageType, isLoading ) {
) }
{ review.verified && (
diff --git a/assets/js/base/components/reviews/review-list-item/style.scss b/assets/js/base/components/reviews/review-list-item/style.scss
index 055695dacf2..e89be2191d3 100644
--- a/assets/js/base/components/reviews/review-list-item/style.scss
+++ b/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;
+}
diff --git a/assets/js/base/components/reviews/review-list/style.scss b/assets/js/base/components/reviews/review-list/style.scss
index 39581d04331..0dba384868a 100644
--- a/assets/js/base/components/reviews/review-list/style.scss
+++ b/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;
}
diff --git a/assets/js/base/components/sort-select/style.scss b/assets/js/base/components/sort-select/style.scss
index e46442b1ab4..2c65b4f2f24 100644
--- a/assets/js/base/components/sort-select/style.scss
+++ b/assets/js/base/components/sort-select/style.scss
@@ -9,5 +9,6 @@
}
.wc-block-components-sort-select__select {
+ font-size: inherit;
width: max-content;
}
diff --git a/assets/js/blocks/reviews/all-reviews/index.js b/assets/js/blocks/reviews/all-reviews/index.js
index 270ab01eca4..422390722e5 100644
--- a/assets/js/blocks/reviews/all-reviews/index.js
+++ b/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: ,
@@ -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 ;
- },
-
- /**
- * Save the props to post content.
- */
+ edit,
save,
} );
diff --git a/assets/js/blocks/reviews/editor-container-block.js b/assets/js/blocks/reviews/editor-container-block.js
index 77354a7693e..9e98a134680 100644
--- a/assets/js/blocks/reviews/editor-container-block.js
+++ b/assets/js/blocks/reviews/editor-container-block.js
@@ -2,10 +2,10 @@
* 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
@@ -13,13 +13,37 @@ import { Placeholder } from '@wordpress/components';
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 (
{ __(
@@ -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 (
-
- debounce( callback, 400 ) }
- noReviewsPlaceholder={ noReviewsPlaceholder }
- orderby={ orderby }
- order={ order }
- productId={ productId }
- reviewsToDisplay={ reviewsOnPageLoad }
- />
-
- );
- }
-}
+ return (
+
+ debounce( callback, 400 ) }
+ noReviewsPlaceholder={ noReviewsPlaceholder }
+ orderby={ orderby }
+ order={ order }
+ productId={ productId }
+ reviewsToDisplay={ reviewsOnPageLoad }
+ />
+
+ );
+};
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,
};
diff --git a/assets/js/blocks/reviews/reviews-by-category/index.js b/assets/js/blocks/reviews/reviews-by-category/index.js
index 1bf37f1407b..ed9b51be645 100644
--- a/assets/js/blocks/reviews/reviews-by-category/index.js
+++ b/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: ,
@@ -30,6 +31,12 @@ registerBlockType( 'woocommerce/reviews-by-category', {
),
supports: {
html: false,
+ color: {
+ background: false,
+ },
+ typography: {
+ fontSize: true,
+ },
},
example: {
...example,
diff --git a/assets/js/blocks/reviews/reviews-by-product/index.js b/assets/js/blocks/reviews/reviews-by-product/index.js
index 49418974a3a..145e24d0ba3 100644
--- a/assets/js/blocks/reviews/reviews-by-product/index.js
+++ b/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: ,
@@ -30,6 +31,12 @@ registerBlockType( 'woocommerce/reviews-by-product', {
),
supports: {
html: false,
+ color: {
+ background: false,
+ },
+ typography: {
+ fontSize: true,
+ },
},
example: {
...example,
diff --git a/assets/js/blocks/reviews/save.js b/assets/js/blocks/reviews/save.js
index 11336bcb46a..5e112bca53a 100644
--- a/assets/js/blocks/reviews/save.js
+++ b/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 (
);