Commit 85bfb99d51f for woocommerce
commit 85bfb99d51fa9a42de36f7a4e54273ea45a3cf78
Author: Devanshi Joshi <86941664+devanshijoshi9@users.noreply.github.com>
Date: Thu Jun 25 22:07:26 2026 +0530
[Issue -#59464] Migrate PanelBody to ToolsPanel (#65799)
* Replace legacy PanelBody with __experimentalToolsPanel and __experimentalToolsPanelItem in All Reviews, Reviews by Category, and Reviews by Product blocks to align with the modern Gutenberg inspector controls pattern.
* Fix missing spacing between review block settings in ToolsPanelIte
* Resolve coderabbitai feedbacks
* Fix: resolve eslinting errors and remove inline styles
* Fix: Align 2 strings with frontend in reviews block
---------
Co-authored-by: DevanshiPersonal <devanshijoshi1504@gmail.com>
diff --git a/plugins/woocommerce/changelog/fix-59464-migrate-reviews-panelbody-to-toolspanel b/plugins/woocommerce/changelog/fix-59464-migrate-reviews-panelbody-to-toolspanel
new file mode 100644
index 00000000000..8c59f873993
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-59464-migrate-reviews-panelbody-to-toolspanel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace PanelBody with ToolsPanel in All Reviews, Reviews by Category, and Reviews by Product inspector controls.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/all-reviews/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/all-reviews/block.tsx
index ff049a8cb4b..f508fe3f423 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/all-reviews/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/all-reviews/block.tsx
@@ -3,8 +3,14 @@
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
import { Icon, postComments } from '@wordpress/icons';
+import {
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
+ ToggleControl,
+} from '@wordpress/components';
/**
* Internal dependencies
@@ -31,24 +37,59 @@ const AllReviewsEditor = ( {
const getInspectorControls = () => {
return (
<InspectorControls key="inspector">
- <PanelBody title={ __( 'Content', 'woocommerce' ) }>
- <ToggleControl
+ <ToolsPanel
+ label={ __( 'Content', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showProductName: true,
+ showReviewRating: true,
+ showReviewerName: true,
+ showReviewImage: true,
+ showReviewDate: true,
+ showReviewContent: true,
+ imageType: 'reviewer',
+ } )
+ }
+ >
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showProductName }
label={ __( 'Product name', 'woocommerce' ) }
- checked={ attributes.showProductName }
- onChange={ () =>
- setAttributes( {
- showProductName: ! attributes.showProductName,
- } )
+ onDeselect={ () =>
+ setAttributes( { showProductName: true } )
}
- />
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Product name', 'woocommerce' ) }
+ checked={ attributes.showProductName }
+ onChange={ () =>
+ setAttributes( {
+ showProductName:
+ ! attributes.showProductName,
+ } )
+ }
+ />
+ </ToolsPanelItem>
{ getSharedReviewContentControls(
attributes,
setAttributes
) }
- </PanelBody>
- <PanelBody title={ __( 'List Settings', 'woocommerce' ) }>
+ </ToolsPanel>
+ <ToolsPanel
+ label={ __( 'List Settings', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showOrderby: true,
+ orderby: 'most-recent',
+ reviewsOnPageLoad: 10,
+ showLoadMore: true,
+ reviewsOnLoadMore: 10,
+ } )
+ }
+ >
{ getSharedReviewListControls( attributes, setAttributes ) }
- </PanelBody>
+ </ToolsPanel>
</InspectorControls>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/edit-utils.js b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/edit-utils.js
index 0c5fa39bf47..3b9f7c80133 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/edit-utils.js
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/edit-utils.js
@@ -15,6 +15,8 @@ import {
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
export const getBlockControls = ( editMode, setAttributes, buttonTitle ) => (
@@ -37,103 +39,31 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
const reviewRatingsEnabled = getSetting( 'reviewRatingsEnabled', true );
return (
<>
- <ToggleControl
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showReviewRating }
label={ __( 'Product rating', 'woocommerce' ) }
- checked={ attributes.showReviewRating }
- onChange={ () =>
- setAttributes( {
- showReviewRating: ! attributes.showReviewRating,
- } )
- }
- />
- { attributes.showReviewRating && ! reviewRatingsEnabled && (
- <Notice
- className="wc-block-base-control-notice"
- isDismissible={ false }
- >
- { createInterpolateElement(
- __(
- 'Product rating is disabled in your <a>store settings</a>.',
- 'woocommerce'
- ),
- {
- a: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
- <a
- href={ getAdminLink(
- 'admin.php?page=wc-settings&tab=products'
- ) }
- target="_blank"
- rel="noopener noreferrer"
- />
- ),
+ onDeselect={ () => setAttributes( { showReviewRating: true } ) }
+ isShownByDefault
+ >
+ <div className="wc-block-reviews__tools-panel-item-container">
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Product rating', 'woocommerce' ) }
+ checked={ attributes.showReviewRating }
+ onChange={ () =>
+ setAttributes( {
+ showReviewRating: ! attributes.showReviewRating,
+ } )
}
- ) }
- </Notice>
- ) }
- <ToggleControl
- label={ __( 'Reviewer name', 'woocommerce' ) }
- checked={ attributes.showReviewerName }
- onChange={ () =>
- setAttributes( {
- showReviewerName: ! attributes.showReviewerName,
- } )
- }
- />
- <ToggleControl
- label={ __( 'Image', 'woocommerce' ) }
- checked={ attributes.showReviewImage }
- onChange={ () =>
- setAttributes( {
- showReviewImage: ! attributes.showReviewImage,
- } )
- }
- />
- <ToggleControl
- label={ __( 'Review date', 'woocommerce' ) }
- checked={ attributes.showReviewDate }
- onChange={ () =>
- setAttributes( {
- showReviewDate: ! attributes.showReviewDate,
- } )
- }
- />
- <ToggleControl
- label={ __( 'Review content', 'woocommerce' ) }
- checked={ attributes.showReviewContent }
- onChange={ () =>
- setAttributes( {
- showReviewContent: ! attributes.showReviewContent,
- } )
- }
- />
- { attributes.showReviewImage && (
- <>
- <ToggleGroupControl
- label={ __( 'Review image', 'woocommerce' ) }
- isBlock
- value={ attributes.imageType }
- onChange={ ( value ) =>
- setAttributes( { imageType: value } )
- }
- >
- <ToggleGroupControlOption
- value="reviewer"
- label={ __( 'Reviewer photo', 'woocommerce' ) }
- />
- <ToggleGroupControlOption
- value="product"
- label={ __( 'Product', 'woocommerce' ) }
- />
- </ToggleGroupControl>
- { attributes.imageType === 'reviewer' && ! showAvatars && (
+ />
+ { attributes.showReviewRating && ! reviewRatingsEnabled && (
<Notice
className="wc-block-base-control-notice"
isDismissible={ false }
>
{ createInterpolateElement(
__(
- 'Reviewer photo is disabled in your <a>site settings</a>.',
+ 'Product rating is disabled in your <a>store settings</a>.',
'woocommerce'
),
{
@@ -141,7 +71,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ getAdminLink(
- 'options-discussion.php'
+ 'admin.php?page=wc-settings&tab=products'
) }
target="_blank"
rel="noopener noreferrer"
@@ -151,8 +81,138 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
) }
</Notice>
) }
- </>
- ) }
+ </div>
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showReviewerName }
+ label={ __( 'Reviewer name', 'woocommerce' ) }
+ onDeselect={ () => setAttributes( { showReviewerName: true } ) }
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Reviewer name', 'woocommerce' ) }
+ checked={ attributes.showReviewerName }
+ onChange={ () =>
+ setAttributes( {
+ showReviewerName: ! attributes.showReviewerName,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () =>
+ ! attributes.showReviewImage ||
+ attributes.imageType !== 'reviewer'
+ }
+ label={ __( 'Image', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( {
+ showReviewImage: true,
+ imageType: 'reviewer',
+ } )
+ }
+ isShownByDefault
+ >
+ <div className="wc-block-reviews__tools-panel-item-container">
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Image', 'woocommerce' ) }
+ checked={ attributes.showReviewImage }
+ onChange={ () =>
+ setAttributes( {
+ showReviewImage: ! attributes.showReviewImage,
+ } )
+ }
+ />
+ { attributes.showReviewImage && (
+ <>
+ <ToggleGroupControl
+ label={ __( 'Review image', 'woocommerce' ) }
+ isBlock
+ value={ attributes.imageType }
+ onChange={ ( value ) =>
+ setAttributes( { imageType: value } )
+ }
+ >
+ <ToggleGroupControlOption
+ value="reviewer"
+ label={ __(
+ 'Reviewer photo',
+ 'woocommerce'
+ ) }
+ />
+ <ToggleGroupControlOption
+ value="product"
+ label={ __( 'Product', 'woocommerce' ) }
+ />
+ </ToggleGroupControl>
+ { attributes.imageType === 'reviewer' &&
+ ! showAvatars && (
+ <Notice
+ className="wc-block-base-control-notice"
+ isDismissible={ false }
+ >
+ { createInterpolateElement(
+ __(
+ 'Reviewer photo is disabled in your <a>site settings</a>.',
+ 'woocommerce'
+ ),
+ {
+ a: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+ <a
+ href={ getAdminLink(
+ 'options-discussion.php'
+ ) }
+ target="_blank"
+ rel="noopener noreferrer"
+ />
+ ),
+ }
+ ) }
+ </Notice>
+ ) }
+ </>
+ ) }
+ </div>
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showReviewDate }
+ label={ __( 'Review date', 'woocommerce' ) }
+ onDeselect={ () => setAttributes( { showReviewDate: true } ) }
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Review date', 'woocommerce' ) }
+ checked={ attributes.showReviewDate }
+ onChange={ () =>
+ setAttributes( {
+ showReviewDate: ! attributes.showReviewDate,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showReviewContent }
+ label={ __( 'Review content', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( { showReviewContent: true } )
+ }
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Review content', 'woocommerce' ) }
+ checked={ attributes.showReviewContent }
+ onChange={ () =>
+ setAttributes( {
+ showReviewContent: ! attributes.showReviewContent,
+ } )
+ }
+ />
+ </ToolsPanelItem>
</>
);
};
@@ -163,50 +223,103 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
return (
<>
- <ToggleControl
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showOrderby }
label={ __( 'Order by', 'woocommerce' ) }
- checked={ attributes.showOrderby }
- onChange={ () =>
- setAttributes( { showOrderby: ! attributes.showOrderby } )
- }
- />
- <SelectControl
+ onDeselect={ () => setAttributes( { showOrderby: true } ) }
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Order by', 'woocommerce' ) }
+ checked={ attributes.showOrderby }
+ onChange={ () =>
+ setAttributes( {
+ showOrderby: ! attributes.showOrderby,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => attributes.orderby !== 'most-recent' }
label={ __( 'Order Product Reviews by', 'woocommerce' ) }
- value={ attributes.orderby }
- options={ [
- { label: 'Most recent', value: 'most-recent' },
- { label: 'Highest Rating', value: 'highest-rating' },
- { label: 'Lowest Rating', value: 'lowest-rating' },
- ] }
- onChange={ ( orderby ) => setAttributes( { orderby } ) }
- />
- <RangeControl
+ onDeselect={ () => setAttributes( { orderby: 'most-recent' } ) }
+ isShownByDefault
+ >
+ <SelectControl
+ label={ __( 'Order Product Reviews by', 'woocommerce' ) }
+ value={ attributes.orderby }
+ options={ [
+ {
+ label: __( 'Most recent', 'woocommerce' ),
+ value: 'most-recent',
+ },
+ {
+ label: __( 'Highest rating', 'woocommerce' ),
+ value: 'highest-rating',
+ },
+ {
+ label: __( 'Lowest rating', 'woocommerce' ),
+ value: 'lowest-rating',
+ },
+ ] }
+ onChange={ ( orderby ) => setAttributes( { orderby } ) }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => attributes.reviewsOnPageLoad !== 10 }
label={ __( 'Starting Number of Reviews', 'woocommerce' ) }
- value={ attributes.reviewsOnPageLoad }
- onChange={ ( reviewsOnPageLoad ) =>
- setAttributes( { reviewsOnPageLoad } )
- }
- max={ maxPerPage }
- min={ minPerPage }
- />
- <ToggleControl
- label={ __( 'Load more', 'woocommerce' ) }
- checked={ attributes.showLoadMore }
- onChange={ () =>
- setAttributes( { showLoadMore: ! attributes.showLoadMore } )
- }
- />
- { attributes.showLoadMore && (
+ onDeselect={ () => setAttributes( { reviewsOnPageLoad: 10 } ) }
+ isShownByDefault
+ >
<RangeControl
- label={ __( 'Load More Reviews', 'woocommerce' ) }
- value={ attributes.reviewsOnLoadMore }
- onChange={ ( reviewsOnLoadMore ) =>
- setAttributes( { reviewsOnLoadMore } )
+ label={ __( 'Starting Number of Reviews', 'woocommerce' ) }
+ value={ attributes.reviewsOnPageLoad }
+ onChange={ ( reviewsOnPageLoad ) =>
+ setAttributes( { reviewsOnPageLoad } )
}
max={ maxPerPage }
min={ minPerPage }
/>
- ) }
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () =>
+ ! attributes.showLoadMore ||
+ attributes.reviewsOnLoadMore !== 10
+ }
+ label={ __( 'Load more', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( {
+ showLoadMore: true,
+ reviewsOnLoadMore: 10,
+ } )
+ }
+ isShownByDefault
+ >
+ <div className="wc-block-reviews__tools-panel-item-container">
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Load more', 'woocommerce' ) }
+ checked={ attributes.showLoadMore }
+ onChange={ () =>
+ setAttributes( {
+ showLoadMore: ! attributes.showLoadMore,
+ } )
+ }
+ />
+ { attributes.showLoadMore && (
+ <RangeControl
+ label={ __( 'Load More Reviews', 'woocommerce' ) }
+ value={ attributes.reviewsOnLoadMore }
+ onChange={ ( reviewsOnLoadMore ) =>
+ setAttributes( { reviewsOnLoadMore } )
+ }
+ max={ maxPerPage }
+ min={ minPerPage }
+ />
+ ) }
+ </div>
+ </ToolsPanelItem>
</>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/editor.scss
index 6457371147c..cdcb813ac65 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/editor.scss
@@ -1,3 +1,9 @@
.wc-block-reviews__selection {
width: 100%;
}
+
+.wc-block-reviews__tools-panel-item-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-category/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-category/block.tsx
index 2dc80226e8a..d400b256428 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-category/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-category/block.tsx
@@ -3,15 +3,18 @@
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
+import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
+import { Icon, commentContent } from '@wordpress/icons';
import {
Button,
- PanelBody,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
Placeholder,
ToggleControl,
withSpokenMessages,
} from '@wordpress/components';
-import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
-import { Icon, commentContent } from '@wordpress/icons';
/**
* Internal dependencies
@@ -43,38 +46,84 @@ const ReviewsByCategoryEditor = ( {
const getInspectorControls = () => {
return (
<InspectorControls key="inspector">
- <PanelBody
- title={ __( 'Category', 'woocommerce' ) }
- initialOpen={ false }
+ <ToolsPanel
+ label={ __( 'Category', 'woocommerce' ) }
+ resetAll={ () => setAttributes( { categoryIds: [] } ) }
>
- <ProductCategoryControl
- selected={ attributes.categoryIds }
- onChange={ ( value = [] ) => {
- const ids = value.map( ( { id } ) => id );
- setAttributes( { categoryIds: ids } );
- } }
- isCompact={ true }
- showReviewCount={ true }
- />
- </PanelBody>
- <PanelBody title={ __( 'Content', 'woocommerce' ) }>
- <ToggleControl
+ <ToolsPanelItem
+ hasValue={ () =>
+ ( attributes.categoryIds || [] ).length > 0
+ }
+ label={ __( 'Category', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( { categoryIds: [] } )
+ }
+ isShownByDefault
+ >
+ <ProductCategoryControl
+ selected={ attributes.categoryIds }
+ onChange={ ( value = [] ) => {
+ const ids = value.map( ( { id } ) => id );
+ setAttributes( { categoryIds: ids } );
+ } }
+ isCompact={ true }
+ showReviewCount={ true }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
+ <ToolsPanel
+ label={ __( 'Content', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showProductName: true,
+ showReviewRating: true,
+ showReviewerName: true,
+ showReviewImage: true,
+ showReviewDate: true,
+ showReviewContent: true,
+ imageType: 'reviewer',
+ } )
+ }
+ >
+ <ToolsPanelItem
+ hasValue={ () => ! attributes.showProductName }
label={ __( 'Product name', 'woocommerce' ) }
- checked={ attributes.showProductName }
- onChange={ () =>
- setAttributes( {
- showProductName: ! attributes.showProductName,
- } )
+ onDeselect={ () =>
+ setAttributes( { showProductName: true } )
}
- />
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __( 'Product name', 'woocommerce' ) }
+ checked={ attributes.showProductName }
+ onChange={ () =>
+ setAttributes( {
+ showProductName:
+ ! attributes.showProductName,
+ } )
+ }
+ />
+ </ToolsPanelItem>
{ getSharedReviewContentControls(
attributes,
setAttributes
) }
- </PanelBody>
- <PanelBody title={ __( 'List Settings', 'woocommerce' ) }>
+ </ToolsPanel>
+ <ToolsPanel
+ label={ __( 'List Settings', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showOrderby: true,
+ orderby: 'most-recent',
+ reviewsOnPageLoad: 10,
+ showLoadMore: true,
+ reviewsOnLoadMore: 10,
+ } )
+ }
+ >
{ getSharedReviewListControls( attributes, setAttributes ) }
- </PanelBody>
+ </ToolsPanel>
</InspectorControls>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-product/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-product/edit.tsx
index c423479ab0d..24f136dd7c4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-product/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/reviews/reviews-by-product/edit.tsx
@@ -3,16 +3,19 @@
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
+import ProductControl from '@woocommerce/editor-components/product-control';
+import { commentContent, Icon } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
import {
Button,
- PanelBody,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
Placeholder,
withSpokenMessages,
} from '@wordpress/components';
-import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
-import ProductControl from '@woocommerce/editor-components/product-control';
-import { commentContent, Icon } from '@wordpress/icons';
-import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
@@ -73,29 +76,63 @@ const ReviewsByProductEditor = ( {
const getInspectorControls = () => {
return (
<InspectorControls key="inspector">
- <PanelBody
- title={ __( 'Product', 'woocommerce' ) }
- initialOpen={ false }
+ <ToolsPanel
+ label={ __( 'Product', 'woocommerce' ) }
+ resetAll={ () => setAttributes( { productId: 0 } ) }
+ >
+ <ToolsPanelItem
+ hasValue={ () => !! attributes.productId }
+ label={ __( 'Product', 'woocommerce' ) }
+ onDeselect={ () => setAttributes( { productId: 0 } ) }
+ isShownByDefault
+ >
+ <ProductControl
+ selected={
+ attributes.productId
+ ? [ attributes.productId ]
+ : []
+ }
+ onChange={ ( value = [] ) => {
+ const id = value[ 0 ] ? value[ 0 ].id : 0;
+ setAttributes( { productId: id } );
+ } }
+ renderItem={ renderProductControlItem }
+ isCompact={ true }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
+ <ToolsPanel
+ label={ __( 'Content', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showReviewRating: true,
+ showReviewerName: true,
+ showReviewImage: true,
+ showReviewDate: true,
+ showReviewContent: true,
+ imageType: 'reviewer',
+ } )
+ }
>
- <ProductControl
- selected={ attributes.productId || 0 }
- onChange={ ( value = [] ) => {
- const id = value[ 0 ] ? value[ 0 ].id : 0;
- setAttributes( { productId: id } );
- } }
- renderItem={ renderProductControlItem }
- isCompact={ true }
- />
- </PanelBody>
- <PanelBody title={ __( 'Content', 'woocommerce' ) }>
{ getSharedReviewContentControls(
attributes,
setAttributes
) }
- </PanelBody>
- <PanelBody title={ __( 'List Settings', 'woocommerce' ) }>
+ </ToolsPanel>
+ <ToolsPanel
+ label={ __( 'List Settings', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showOrderby: true,
+ orderby: 'most-recent',
+ reviewsOnPageLoad: 10,
+ showLoadMore: true,
+ reviewsOnLoadMore: 10,
+ } )
+ }
+ >
{ getSharedReviewListControls( attributes, setAttributes ) }
- </PanelBody>
+ </ToolsPanel>
</InspectorControls>
);
};
@@ -125,7 +162,9 @@ const ReviewsByProductEditor = ( {
) }
<div className="wc-block-reviews__selection">
<ProductControl
- selected={ attributes.productId || 0 }
+ selected={
+ attributes.productId ? [ attributes.productId ] : []
+ }
onChange={ ( value = [] ) => {
const id = value[ 0 ] ? value[ 0 ].id : 0;
setAttributes( { productId: id } );