Rename 'Reviewer Picture' with 'Avatar'

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

@@ -65,12 +65,12 @@ class ReviewsByProduct extends Component {
 	render() {
 		const { attributes } = this.props;
 		const { reviews } = this.state;
-		const { className, showProductRating, showReviewerName, showReviewerPicture, showReviewDate } = attributes;
+		const { className, showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes;
 		const classes = classNames( 'wc-block-reviews-by-product', className, {
-			'has-picture': showReviewerPicture,
+			'has-avatar': showAvatar,
+			'has-date': showReviewDate,
 			'has-name': showReviewerName,
 			'has-rating': showProductRating,
-			'has-date': showReviewDate,
 		} );
 
 		return (

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

@@ -113,14 +113,14 @@ class ReviewsByProductEditor extends Component {
 						onChange={ () => setAttributes( { showReviewerName: ! attributes.showReviewerName } ) }
 					/>
 					<ToggleControl
-						label={ __( 'Reviewer picture', 'woo-gutenberg-products-block' ) }
+						label={ __( 'Avatar', 'woo-gutenberg-products-block' ) }
 						help={
-							attributes.showReviewerPicture ?
-								__( 'Reviewer picture is visible.', 'woo-gutenberg-products-block' ) :
-								__( 'Reviewer picture is hidden.', 'woo-gutenberg-products-block' )
+							attributes.showAvatar ?
+								__( 'Avatar is visible.', 'woo-gutenberg-products-block' ) :
+								__( 'Avatar is hidden.', 'woo-gutenberg-products-block' )
 						}
-						checked={ attributes.showReviewerPicture }
-						onChange={ () => setAttributes( { showReviewerPicture: ! attributes.showReviewerPicture } ) }
+						checked={ attributes.showAvatar }
+						onChange={ () => setAttributes( { showAvatar: ! attributes.showAvatar } ) }
 					/>
 					<ToggleControl
 						label={ __( 'Review date', 'woo-gutenberg-products-block' ) }

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

@@ -19,10 +19,10 @@ if ( containers.length ) {
 			orderby: el.dataset.orderby,
 			perPage: el.dataset.perPage,
 			productId: el.dataset.productId,
-			showReviewerPicture: el.classList.contains( 'has-picture' ),
-			showReviewerName: el.classList.contains( 'has-name' ),
+			showAvatar: el.classList.contains( 'has-avatar' ),
 			showProductRating: el.classList.contains( 'has-rating' ),
 			showReviewDate: el.classList.contains( 'has-date' ),
+			showReviewerName: el.classList.contains( 'has-name' ),
 		};
 
 		render( <Block attributes={ attributes } />, el );

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

@@ -61,33 +61,33 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 		},
 
 		/**
-		 * Show the product rating.
+		 * Show the reviewer avatar.
 		 */
-		showProductRating: {
+		showAvatar: {
 			type: 'boolean',
 			default: true,
 		},
 
 		/**
-		 * Show the reviewer name.
+		 * Show the product rating.
 		 */
-		showReviewerName: {
+		showProductRating: {
 			type: 'boolean',
 			default: true,
 		},
 
 		/**
-		 * Show the reviewer picture.
+		 * Show the review date.
 		 */
-		showReviewerPicture: {
+		showReviewDate: {
 			type: 'boolean',
 			default: true,
 		},
 
 		/**
-		 * Show the review date.
+		 * Show the reviewer name.
 		 */
-		showReviewDate: {
+		showReviewerName: {
 			type: 'boolean',
 			default: true,
 		},
@@ -104,13 +104,13 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 	 * Save the props to post content.
 	 */
 	save( { attributes } ) {
-		const { className, orderby, perPage, productId, showProductRating, showReviewerName, showReviewerPicture, showReviewDate } = attributes;
+		const { className, orderby, perPage, productId, showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes;
 
 		const classes = classNames( 'wc-block-reviews-by-product', className, {
-			'has-picture': showReviewerPicture,
+			'has-avatar': showAvatar,
+			'has-date': showReviewDate,
 			'has-name': showReviewerName,
 			'has-rating': showProductRating,
-			'has-date': showReviewDate,
 		} );
 
 		return (

assets/js/blocks/reviews-by-product/style.scss

@@ -119,7 +119,7 @@
 		}
 	}
 
-	&.has-picture {
+	&.has-avatar {
 		.wc-block-reviews-by-product__info {
 			grid-template-columns: #{48px + $gap-small} 1fr;
 		}

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

@@ -14,7 +14,7 @@ import classNames from 'classnames';
  * @return {Object} React JSx nodes of the block
  */
 export function renderReview( attributes, review = {} ) {
-	const { showProductRating, showReviewerName, showReviewerPicture, showReviewDate } = attributes;
+	const { showAvatar, showProductRating, 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;
 
@@ -36,9 +36,9 @@ export function renderReview( attributes, review = {} ) {
 					__html: text || '',
 				} }
 			/>
-			{ ( showReviewerPicture || showReviewerName || showProductRating || showReviewDate ) && (
+			{ ( showAvatar || showReviewerName || showProductRating || showReviewDate ) && (
 				<div className="wc-block-reviews-by-product__info">
-					{ showReviewerPicture && (
+					{ showAvatar && (
 						isLoading ? (
 							<div className="wc-block-reviews-by-product__avatar" width="48" height="48" />
 						) : (