Commit 986cbe8f72 for woocommerce
commit 986cbe8f7229d3c8bf04dc0fe5744493310ea5cb
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Wed Dec 10 11:38:34 2025 +0100
Product Gallery: Add additional active thumbnail state (overlay vs outline) (#62253)
* Create attribute for active thumbanils state
* Add inspector controls
* Add two CSS variants
* Add changelog
* Improve types reliability
diff --git a/plugins/woocommerce/changelog/woothme-207-active-thumbnail-states b/plugins/woocommerce/changelog/woothme-207-active-thumbnail-states
new file mode 100644
index 0000000000..ecaa026631
--- /dev/null
+++ b/plugins/woocommerce/changelog/woothme-207-active-thumbnail-states
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Product Gallery: add active Thumbnails outline style to existing overlay
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 182851f093..310d366844 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
@@ -14,7 +14,10 @@ import {
/**
* Internal dependencies
*/
-import type { ProductGalleryThumbnailsSettingsProps } from '../types';
+import {
+ type ProductGalleryThumbnailsSettingsProps,
+ ProductGalleryActiveThumbnailStyle,
+} from '../types';
const minValue = 10;
const maxValue = 50;
@@ -24,7 +27,7 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
attributes,
setAttributes,
}: ProductGalleryThumbnailsSettingsProps ) => {
- const { thumbnailSize, aspectRatio } = attributes;
+ const { thumbnailSize, aspectRatio, activeThumbnailStyle } = attributes;
const aspectRatioOptions = [
{
@@ -66,6 +69,17 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
},
];
+ const activeThumbnailStyleOptions = [
+ {
+ value: ProductGalleryActiveThumbnailStyle.OVERLAY,
+ label: __( 'Overlay', 'woocommerce' ),
+ },
+ {
+ value: ProductGalleryActiveThumbnailStyle.OUTLINE,
+ label: __( 'Outline', 'woocommerce' ),
+ },
+ ];
+
return (
<PanelBody>
<UnitControl
@@ -110,6 +124,27 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
'woocommerce'
) }
/>
+ <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'
+ ) }
+ />
</PanelBody>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json
index f087c1b8eb..d406b20071 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json
@@ -17,6 +17,10 @@
"aspectRatio": {
"type": "string",
"default": "1"
+ },
+ "activeThumbnailStyle": {
+ "type": "string",
+ "default": "overlay"
}
},
"supports": {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
index 86b02cb34b..55c2db1ba2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
@@ -45,7 +45,7 @@ export const Edit = ( {
postId?: string;
};
} ) => {
- const { thumbnailSize, aspectRatio } = attributes;
+ const { thumbnailSize, aspectRatio, activeThumbnailStyle } = attributes;
const { product } = useProduct( context.postId );
@@ -89,12 +89,16 @@ export const Edit = ( {
}, [ thumbnailSize ] );
const thumbnailSizeValue = Number( thumbnailSize.replace( '%', '' ) );
- const className = clsx( 'wc-block-product-gallery-thumbnails', {
- 'wc-block-product-gallery-thumbnails--overflow-right':
- overflowState.right,
- 'wc-block-product-gallery-thumbnails--overflow-bottom':
- overflowState.bottom,
- } );
+ const className = clsx(
+ 'wc-block-product-gallery-thumbnails',
+ `wc-block-product-gallery-thumbnails--active-${ activeThumbnailStyle }`,
+ {
+ 'wc-block-product-gallery-thumbnails--overflow-right':
+ overflowState.right,
+ 'wc-block-product-gallery-thumbnails--overflow-bottom':
+ overflowState.bottom,
+ }
+ );
const blockProps = useBlockProps( {
className,
style: {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/types.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/types.ts
index 0d2711af27..6857533eb6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/types.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/types.ts
@@ -1,6 +1,12 @@
+export enum ProductGalleryActiveThumbnailStyle {
+ OVERLAY = 'overlay',
+ OUTLINE = 'outline',
+}
+
export type ProductGalleryThumbnailsBlockAttributes = {
thumbnailSize: string;
aspectRatio: string;
+ activeThumbnailStyle: ProductGalleryActiveThumbnailStyle;
};
export type ProductGalleryThumbnailsSettingsProps = {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
index c1d7371fc3..84e62fabb1 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
@@ -259,9 +259,20 @@ $dialog-padding: 20px;
:where(.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
pointer-events: none;
cursor: default;
+}
+
+// Overlay style: darkens the active thumbnail
+:where(.wc-block-product-gallery-thumbnails--active-overlay .wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
filter: brightness(0.8);
}
+// Outline style: adds a border around the active thumbnail
+:where(.wc-block-product-gallery-thumbnails--active-outline .wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
+ border: 1px solid currentColor;
+ padding: 2px;
+ box-sizing: border-box;
+}
+
:where(.is-vertical .wc-block-product-gallery-thumbnails) {
@include horizontal-thumbnails;
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php
index 14ffc058a4..4096c37d14 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php
@@ -65,14 +65,15 @@ class ProductGalleryThumbnails extends AbstractBlock {
return '';
}
- $thumbnail_size = str_replace( '%', '', $attributes['thumbnailSize'] ?? '25%' );
+ $thumbnail_size = str_replace( '%', '', $attributes['thumbnailSize'] ?? '25%' );
+ $active_thumbnail_style = $attributes['activeThumbnailStyle'] ?? 'overlay';
$img_class = 'wc-block-product-gallery-thumbnails__thumbnail__image';
ob_start();
?>
<div
- class="wc-block-product-gallery-thumbnails <?php echo esc_attr( $classes_and_styles['classes'] ); ?>"
+ class="wc-block-product-gallery-thumbnails wc-block-product-gallery-thumbnails--active-<?php echo esc_attr( $active_thumbnail_style ); ?> <?php echo esc_attr( $classes_and_styles['classes'] ); ?>"
style="<?php echo '--wc-block-product-gallery-thumbnails-size:' . absint( $thumbnail_size ) . ';' . esc_attr( $classes_and_styles['styles'] ); ?>"
data-wp-interactive="woocommerce/product-gallery"
data-wp-class--wc-block-product-gallery-thumbnails--overflow-top="context.thumbnailsOverflow.top"