From 270861123c23e3807b1ee98b965fa66d4a664444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Mon, 7 Jun 2021 17:28:16 +0200 Subject: [PATCH 1/3] Update Reviews blocks so they use block styles --- .../reviews/review-list-item/style.scss | 26 +++-- .../components/reviews/review-list/style.scss | 4 +- .../js/base/components/sort-select/style.scss | 1 + assets/js/blocks/reviews/all-reviews/index.js | 23 ++--- .../blocks/reviews/editor-container-block.js | 97 +++++++++---------- .../reviews/reviews-by-category/index.js | 8 ++ .../reviews/reviews-by-product/index.js | 7 ++ assets/js/blocks/reviews/save.js | 9 +- 8 files changed, 100 insertions(+), 75 deletions(-) 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..fa3cf73fca5 100644 --- a/assets/js/base/components/reviews/review-list-item/style.scss +++ b/assets/js/base/components/reviews/review-list-item/style.scss @@ -134,23 +134,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 +171,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 +208,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..00e271ba5fe 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,13 @@ registerBlockType( 'woocommerce/all-reviews', { ), supports: { html: false, + color: { + background: false, + link: true, + }, + typography: { + fontSize: true, + }, }, example: { ...example, @@ -72,17 +80,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..b929f6d2bea 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,13 @@ registerBlockType( 'woocommerce/reviews-by-category', { ), supports: { html: false, + color: { + background: false, + link: true, + }, + 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 (
); From 3278522034b9c07f09103d135142cb21a44deff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Fri, 10 Sep 2021 16:53:53 +0200 Subject: [PATCH 2/3] Don't allow changing link color in Reviews blocks --- assets/js/blocks/reviews/all-reviews/index.js | 1 - assets/js/blocks/reviews/reviews-by-category/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/assets/js/blocks/reviews/all-reviews/index.js b/assets/js/blocks/reviews/all-reviews/index.js index 00e271ba5fe..422390722e5 100644 --- a/assets/js/blocks/reviews/all-reviews/index.js +++ b/assets/js/blocks/reviews/all-reviews/index.js @@ -35,7 +35,6 @@ registerBlockType( 'woocommerce/all-reviews', { html: false, color: { background: false, - link: true, }, typography: { fontSize: true, diff --git a/assets/js/blocks/reviews/reviews-by-category/index.js b/assets/js/blocks/reviews/reviews-by-category/index.js index b929f6d2bea..ed9b51be645 100644 --- a/assets/js/blocks/reviews/reviews-by-category/index.js +++ b/assets/js/blocks/reviews/reviews-by-category/index.js @@ -33,7 +33,6 @@ registerBlockType( 'woocommerce/reviews-by-category', { html: false, color: { background: false, - link: true, }, typography: { fontSize: true, From a65715548d6d44e5d9436d7f8dbe677bd95c1f50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 16 Sep 2021 11:10:29 +0200 Subject: [PATCH 3/3] Resize review image based on font size --- .../base/components/reviews/review-list-item/index.js | 9 ++------- .../components/reviews/review-list-item/style.scss | 10 ++++------ 2 files changed, 6 insertions(+), 13 deletions(-) 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 fa3cf73fca5..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; } }