diff --git a/assets/js/blocks/reviews-by-product/block.js b/assets/js/blocks/reviews-by-product/block.js index 32e35c07e2e..f9ad2d0de0a 100644 --- a/assets/js/blocks/reviews-by-product/block.js +++ b/assets/js/blocks/reviews-by-product/block.js @@ -23,7 +23,7 @@ class ReviewsByProduct extends Component { super( ...arguments ); const { attributes } = this.props; this.state = { - order: attributes.orderby, + orderby: attributes.orderby, reviews: [], totalReviews: 0, }; @@ -59,16 +59,42 @@ class ReviewsByProduct extends Component { const newReviews = Math.min( totalReviews, perPage ); this.setState( { reviews: Array( newReviews ).fill( {} ), - order: event.target.value, + orderby: event.target.value, } ); this.getReviews( event.target.value ); } - getReviews( order, page = 1 ) { + getOrderParams( orderValue ) { + const { attributes, isPreview } = this.props; + const selectedOrder = isPreview ? attributes.orderby : + orderValue || this.state.orderby || attributes.orderby; + + if ( wc_product_block_data.enableReviewRating ) { + if ( selectedOrder === 'lowest-rating' ) { + return { + order: 'asc', + orderby: 'rating', + }; + } + if ( selectedOrder === 'highest-rating' ) { + return { + order: 'desc', + orderby: 'rating', + }; + } + } + + return { + order: 'desc', + orderby: 'date_gmt', + }; + } + + getReviews( orderValue, page = 1 ) { const { attributes } = this.props; const { perPage, productId } = attributes; const { reviews } = this.state; - const orderby = order || this.state.order || attributes.orderby; + const { order, orderby } = this.getOrderParams( orderValue ); if ( ! productId ) { // We've removed the selected product, or no product is selected yet. @@ -77,7 +103,8 @@ class ReviewsByProduct extends Component { apiFetch( { path: addQueryArgs( `/wc/blocks/products/reviews`, { - order_by: orderby, + order, + orderby, page, per_page: parseInt( perPage, 10 ) || 1, product_id: productId, @@ -118,66 +145,100 @@ class ReviewsByProduct extends Component { this.getReviews( null, page ); } - render() { + renderOrderBySelect() { + if ( ! wc_product_block_data.enableReviewRating ) { + return null; + } + const { attributes, instanceId, isPreview } = this.props; - const { order, reviews, totalReviews } = this.state; - const { className, showProductRating, showReviewDate, showReviewerName } = attributes; - const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar; - const classes = classNames( 'wc-block-reviews-by-product', className, { - 'has-avatar': showAvatar, - 'has-date': showReviewDate, - 'has-name': showReviewerName, - 'has-rating': showProductRating, - } ); - const attrs = { - ...attributes, - showAvatar, - }; + const { orderby } = this.state; const selectId = `wc-block-reviews-by-product__orderby__select-${ instanceId }`; const selectProps = isPreview ? { readOnly: true, value: attributes.orderby, } : { - defaultValue: order, - onBlur: this.onChangeOrderby, + defaultValue: orderby, + onChange: this.onChangeOrderby, + }; + + return ( +

+ + +

+ ); + } + + renderReviewsList( showAvatar, showProductRating ) { + const { attributes } = this.props; + const { reviews } = this.state; + const attrs = { + ...attributes, + showAvatar, + showProductRating, }; + return ( + + ); + } + + renderLoadMoreButton() { + const { isPreview } = this.props; + const { reviews, totalReviews } = this.state; + + if ( totalReviews <= reviews.length ) { + return null; + } + + return ( + + ); + } + + render() { + const { attributes } = this.props; + const { className, showReviewDate, showReviewerName } = attributes; + const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar; + const showProductRating = wc_product_block_data.enableReviewRating && attributes.showProductRating; + const classes = classNames( 'wc-block-reviews-by-product', className, { + 'has-avatar': showAvatar, + 'has-date': showReviewDate, + 'has-name': showReviewerName, + 'has-rating': showProductRating, + } ); + return (
-

- - -

- - { totalReviews > reviews.length && ( - - ) } + { this.renderOrderBySelect() } + { this.renderReviewsList( showAvatar, showProductRating ) } + { this.renderLoadMoreButton() }
); } diff --git a/assets/js/blocks/reviews-by-product/edit.js b/assets/js/blocks/reviews-by-product/edit.js index df67dc07da1..08fb00b3afe 100644 --- a/assets/js/blocks/reviews-by-product/edit.js +++ b/assets/js/blocks/reviews-by-product/edit.js @@ -99,16 +99,18 @@ class ReviewsByProductEditor extends Component { /> - setAttributes( { showProductRating: ! attributes.showProductRating } ) } - /> + { wc_product_block_data.enableReviewRating && ( + setAttributes( { showProductRating: ! attributes.showProductRating } ) } + /> + ) } ) : ( - + ) } ) } diff --git a/assets/js/blocks/reviews-by-product/utils.js b/assets/js/blocks/reviews-by-product/utils.js index 28c61a4dc5a..0575f5c9cf1 100644 --- a/assets/js/blocks/reviews-by-product/utils.js +++ b/assets/js/blocks/reviews-by-product/utils.js @@ -14,9 +14,10 @@ import classNames from 'classnames'; * @return {Object} React JSx nodes of the block */ export function renderReview( attributes, review = {}, i = 0 ) { - const { showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes; + const { showAvatar, showProductRating: showProductRatingAttr, showReviewDate, showReviewerName } = attributes; const { id = null, date_created: dateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review; const isLoading = ! Object.keys( review ).length > 0; + const showProductRating = Number.isFinite( rating ) && showProductRatingAttr; const classes = classNames( 'wc-block-reviews-by-product__item', { 'has-avatar': showAvatar, @@ -57,9 +58,7 @@ export function renderReview( attributes, review = {}, i = 0 ) { { showProductRating && (
- { Number.isFinite( rating ) && ( - { sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) } - ) } + { sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }
) } diff --git a/src/Assets.php b/src/Assets.php index 374990acdd7..be051f19495 100644 --- a/src/Assets.php +++ b/src/Assets.php @@ -127,20 +127,21 @@ public static function print_script_block_data() { // Global settings used in each block. $block_settings = array( - 'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ), - 'max_columns' => wc_get_theme_support( 'product_blocks::max_columns', 6 ), - 'default_columns' => wc_get_theme_support( 'product_blocks::default_columns', 3 ), - 'min_rows' => wc_get_theme_support( 'product_blocks::min_rows', 1 ), - 'max_rows' => wc_get_theme_support( 'product_blocks::max_rows', 6 ), - 'default_rows' => wc_get_theme_support( 'product_blocks::default_rows', 1 ), - 'thumbnail_size' => wc_get_theme_support( 'thumbnail_image_width', 300 ), - 'placeholderImgSrc' => wc_placeholder_img_src(), - 'min_height' => wc_get_theme_support( 'featured_block::min_height', 500 ), - 'default_height' => wc_get_theme_support( 'featured_block::default_height', 500 ), - 'isLargeCatalog' => $product_counts->publish > 200, - 'productCategories' => $product_categories, - 'homeUrl' => esc_js( home_url( '/' ) ), - 'showAvatars' => '1' === get_option( 'show_avatars' ), + 'min_columns' => wc_get_theme_support( 'product_blocks::min_columns', 1 ), + 'max_columns' => wc_get_theme_support( 'product_blocks::max_columns', 6 ), + 'default_columns' => wc_get_theme_support( 'product_blocks::default_columns', 3 ), + 'min_rows' => wc_get_theme_support( 'product_blocks::min_rows', 1 ), + 'max_rows' => wc_get_theme_support( 'product_blocks::max_rows', 6 ), + 'default_rows' => wc_get_theme_support( 'product_blocks::default_rows', 1 ), + 'thumbnail_size' => wc_get_theme_support( 'thumbnail_image_width', 300 ), + 'placeholderImgSrc' => wc_placeholder_img_src(), + 'min_height' => wc_get_theme_support( 'featured_block::min_height', 500 ), + 'default_height' => wc_get_theme_support( 'featured_block::default_height', 500 ), + 'isLargeCatalog' => $product_counts->publish > 200, + 'productCategories' => $product_categories, + 'homeUrl' => esc_js( home_url( '/' ) ), + 'showAvatars' => '1' === get_option( 'show_avatars' ), + 'enableReviewRating' => 'yes' === get_option( 'woocommerce_enable_review_rating' ), ); ?>