Commit 75e6590af6 for woocommerce
commit 75e6590af69cdc4df44dc6cc60cfff4bba91eec2
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Wed Jan 14 15:48:04 2026 +0530
Refactor Product Gallery Block to use ToolsPanel (#62724)
* Refactor Product Gallery Block Settings to use ToolsPanel
* Add changelog file
diff --git a/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-gallery-blocks b/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-gallery-blocks
new file mode 100644
index 0000000000..efa5bb8973
--- /dev/null
+++ b/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-gallery-blocks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Removes PanelBody and uses ToolsPanel for Product Gallery block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
index 4f13069eaa..c3378a4332 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
@@ -2,8 +2,14 @@
* External dependencies
*/
import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import {
+ ToggleControl,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
/**
* Internal dependencies
@@ -17,34 +23,61 @@ export const ProductGalleryBlockSettings = ( {
const { hoverZoom, fullScreenOnClick } = attributes;
return (
<InspectorControls>
- <PanelBody title={ __( 'Media Settings', 'woocommerce' ) }>
- <ToggleControl
+ <ToolsPanel
+ label={ __( 'Media Settings', 'woocommerce' ) }
+ resetAll={ () => {
+ setAttributes( {
+ hoverZoom: true,
+ fullScreenOnClick: true,
+ } );
+ } }
+ >
+ <ToolsPanelItem
+ hasValue={ () => hoverZoom !== true }
label={ __( 'Zoom while hovering', 'woocommerce' ) }
- help={ __(
- 'While hovering the image in the viewer will zoom in by 30%.',
- 'woocommerce'
- ) }
- checked={ hoverZoom }
- onChange={ () =>
- setAttributes( {
- hoverZoom: ! hoverZoom,
- } )
- }
- />
- <ToggleControl
+ onDeselect={ () => setAttributes( { hoverZoom: true } ) }
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __( 'Zoom while hovering', 'woocommerce' ) }
+ help={ __(
+ 'While hovering the image in the viewer will zoom in by 30%.',
+ 'woocommerce'
+ ) }
+ checked={ hoverZoom }
+ onChange={ () =>
+ setAttributes( {
+ hoverZoom: ! hoverZoom,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => fullScreenOnClick !== true }
label={ __( 'Open pop-up when clicked', 'woocommerce' ) }
- help={ __(
- 'Clicking on the image in the viewer will open a full-screen gallery experience.',
- 'woocommerce'
- ) }
- checked={ fullScreenOnClick }
- onChange={ () =>
- setAttributes( {
- fullScreenOnClick: ! fullScreenOnClick,
- } )
+ onDeselect={ () =>
+ setAttributes( { fullScreenOnClick: true } )
}
- />
- </PanelBody>
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __(
+ 'Open pop-up when clicked',
+ 'woocommerce'
+ ) }
+ help={ __(
+ 'Clicking on the image in the viewer will open a full-screen gallery experience.',
+ 'woocommerce'
+ ) }
+ checked={ fullScreenOnClick }
+ onChange={ () =>
+ setAttributes( {
+ fullScreenOnClick: ! fullScreenOnClick,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
</InspectorControls>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
index 310d366844..a8da7a48dd 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
@@ -8,7 +8,10 @@ import {
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis, @woocommerce/dependency-group
__experimentalUnitControl as UnitControl,
SelectControl,
- 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,
} from '@wordpress/components';
/**
@@ -81,70 +84,110 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
];
return (
- <PanelBody>
- <UnitControl
+ <ToolsPanel
+ label={ __( 'Settings', 'woocommerce' ) }
+ resetAll={ () => {
+ setAttributes( {
+ thumbnailSize: '25%',
+ aspectRatio: '1',
+ activeThumbnailStyle:
+ ProductGalleryActiveThumbnailStyle.OVERLAY,
+ } );
+ } }
+ >
+ <ToolsPanelItem
+ hasValue={ () => thumbnailSize !== '25%' }
label={ __( 'Thumbnail Size', 'woocommerce' ) }
- value={ thumbnailSize }
- onChange={ ( value: string | undefined ) => {
- const numberValue = Number(
- value?.replace( '%', '' ) || defaultValue
- );
- const validated = Math.min(
- Math.max( numberValue, minValue ),
- maxValue
- );
- setAttributes( {
- thumbnailSize: validated + '%',
- } );
- } }
- units={ [ { value: '%', label: '%' } ] }
- min={ minValue }
- max={ maxValue }
- step={ 1 }
- size="default"
- __next40pxDefaultSize
- help={ __(
- 'Choose the size of each thumbnail in respect to the product image. If thumbnails container size gets bigger than the product image, thumbnails will turn to slider.',
- 'woocommerce'
- ) }
- />
- <SelectControl
- __next40pxDefaultSize
- multiple={ false }
- value={ aspectRatio }
- options={ aspectRatioOptions }
+ onDeselect={ () => setAttributes( { thumbnailSize: '25%' } ) }
+ isShownByDefault
+ >
+ <UnitControl
+ label={ __( 'Thumbnail Size', 'woocommerce' ) }
+ value={ thumbnailSize }
+ onChange={ ( value: string | undefined ) => {
+ const numberValue = Number(
+ value?.replace( '%', '' ) || defaultValue
+ );
+ const validated = Math.min(
+ Math.max( numberValue, minValue ),
+ maxValue
+ );
+ setAttributes( {
+ thumbnailSize: validated + '%',
+ } );
+ } }
+ units={ [ { value: '%', label: '%' } ] }
+ min={ minValue }
+ max={ maxValue }
+ step={ 1 }
+ size="default"
+ __next40pxDefaultSize
+ help={ __(
+ 'Choose the size of each thumbnail in respect to the product image. If thumbnails container size gets bigger than the product image, thumbnails will turn to slider.',
+ 'woocommerce'
+ ) }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => aspectRatio !== '1' }
label={ __( 'Aspect Ratio', 'woocommerce' ) }
- onChange={ ( value ) => {
- setAttributes( {
- aspectRatio: value,
- } );
- } }
- help={ __(
- 'Applies the selected aspect ratio to product thumbnails.',
- 'woocommerce'
- ) }
- />
- <SelectControl
- __next40pxDefaultSize
- multiple={ false }
- value={ activeThumbnailStyle }
- options={ activeThumbnailStyleOptions }
- label={ __( 'Active Thumbnail Style', 'woocommerce' ) }
- onChange={ ( value ) => {
- if (
- value === ProductGalleryActiveThumbnailStyle.OVERLAY ||
- value === ProductGalleryActiveThumbnailStyle.OUTLINE
- ) {
+ onDeselect={ () => setAttributes( { aspectRatio: '1' } ) }
+ isShownByDefault
+ >
+ <SelectControl
+ __next40pxDefaultSize
+ multiple={ false }
+ value={ aspectRatio }
+ options={ aspectRatioOptions }
+ label={ __( 'Aspect Ratio', 'woocommerce' ) }
+ onChange={ ( value ) => {
setAttributes( {
- activeThumbnailStyle: value,
+ aspectRatio: value,
} );
- }
- } }
- help={ __(
- 'Choose how the active thumbnail is highlighted.',
- 'woocommerce'
- ) }
- />
- </PanelBody>
+ } }
+ help={ __(
+ 'Applies the selected aspect ratio to product thumbnails.',
+ 'woocommerce'
+ ) }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () =>
+ activeThumbnailStyle !==
+ ProductGalleryActiveThumbnailStyle.OVERLAY
+ }
+ label={ __( 'Active Thumbnail Style', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( {
+ activeThumbnailStyle:
+ ProductGalleryActiveThumbnailStyle.OVERLAY,
+ } )
+ }
+ isShownByDefault
+ >
+ <SelectControl
+ __next40pxDefaultSize
+ multiple={ false }
+ value={ activeThumbnailStyle }
+ options={ activeThumbnailStyleOptions }
+ label={ __( 'Active Thumbnail Style', 'woocommerce' ) }
+ onChange={ ( value ) => {
+ if (
+ value ===
+ ProductGalleryActiveThumbnailStyle.OVERLAY ||
+ value === ProductGalleryActiveThumbnailStyle.OUTLINE
+ ) {
+ setAttributes( {
+ activeThumbnailStyle: value,
+ } );
+ }
+ } }
+ help={ __(
+ 'Choose how the active thumbnail is highlighted.',
+ 'woocommerce'
+ ) }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
);
};