Commit 1baa3349707 for woocommerce
commit 1baa3349707d1c2f27875245a9848de0d670b53c
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Wed May 27 08:30:53 2026 +0200
Fix Variation Selector inner blocks showing duplicate attributes in the sidebar (#65300)
* Add changelog
* Fix Variation Selector inner blocks showing duplicate attributes in the sidebar
* Disable hover styles in color swatches when in the editor
* Disable unnecessary roles
diff --git a/plugins/woocommerce/changelog/fix-duplicated-attributes-variation-selector b/plugins/woocommerce/changelog/fix-duplicated-attributes-variation-selector
new file mode 100644
index 00000000000..996ba0ed6db
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-duplicated-attributes-variation-selector
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fix Variation Selector inner blocks showing duplicate attributes in the sidebar
+
+
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/edit.tsx
index 55426286387..654ebe24a31 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/grouped-product-selector/product-item/edit.tsx
@@ -55,7 +55,7 @@ const ProductItem = ( {
blocks,
} );
const innerBlocksProps = useInnerBlocksProps(
- { role: 'listitem' },
+ {},
{ templateLock: 'insert' }
);
@@ -64,20 +64,12 @@ const ProductItem = ( {
{ isSelected ? (
<div { ...innerBlocksProps } />
) : (
- <div role="listitem">
- <div
- { ...blockPreviewProps }
- role="button"
- tabIndex={ 0 }
- onClick={ onSelect }
- onKeyDown={ ( e ) => {
- if ( e.key === 'Enter' || e.key === ' ' ) {
- e.preventDefault();
- onSelect();
- }
- } }
- />
- </div>
+ // We don't need this element to be interactive with the
+ // keyboard because the first child row is always editable.
+ // We allow clicking on the blocks of other children rows
+ // but it's not critical, so we disable the keyboard events.
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+ <div { ...blockPreviewProps } onClick={ onSelect } />
) }
</ProductDataContextProvider>
);
@@ -227,7 +219,7 @@ export default function ProductItemTemplateEdit(
return (
<div { ...blockProps }>
<InnerBlockLayoutContextProvider parentName="woocommerce/add-to-cart-with-options-grouped-product-item">
- <div role="list">{ productList }</div>
+ { productList }
</InnerBlockLayoutContextProvider>
</div>
);
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/edit.tsx
index d442058dd77..ea1225b097e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/variation-selector/attribute/edit.tsx
@@ -107,7 +107,7 @@ function AttributeItem( { blocks, isSelected, onSelect }: AttributeItemProps ) {
const blockPreviewProps = useBlockPreview( {
blocks,
} );
- const innerBlocksProps = useInnerBlocksProps( { role: 'listitem' } );
+ const innerBlocksProps = useInnerBlocksProps();
if ( ! attribute ) {
return null;
@@ -127,13 +127,7 @@ function AttributeItem( { blocks, isSelected, onSelect }: AttributeItemProps ) {
// editable. We allow clicking on the blocks of other attributes
// but it's not critical, so we disable the keyboard events.
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
- <div
- { ...blockPreviewProps }
- tabIndex={ 0 }
- onClick={ onSelect }
- >
- <div { ...innerBlocksProps } />
- </div>
+ <div { ...blockPreviewProps } onClick={ onSelect } />
) }
</BlockContextProvider>
);
@@ -283,7 +277,7 @@ export default function AttributeItemTemplateEdit(
</ToolsPanel>
</InspectorControls>
- <div { ...blockProps } role="list">
+ <div { ...blockProps }>
{ productAttributes.map( ( attribute ) => (
<CustomDataProvider
key={ attribute.id }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
index 54496e8e607..167673a3050 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
@@ -3,6 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
+import { Disabled } from '@wordpress/components';
import clsx from 'clsx';
import { decodeHtmlEntities } from '@woocommerce/utils';
import { getSetting } from '@woocommerce/settings';
@@ -107,56 +108,60 @@ const Edit = ( props: EditProps ): JSX.Element => {
return (
<>
<div { ...blockProps }>
- <div className="wc-block-product-filter-chips__items">
- { isLoading && loadingState }
- { ! isLoading &&
- ( isLongList
- ? items.slice( 0, threshold )
- : items
- ).map( ( item, index ) => (
- <div
- key={ index }
- className="wc-block-product-filter-chips__item"
- aria-checked={ !! item.selected }
- >
- <span className="wc-block-product-filter-chips__label">
- <span
- className={ clsx(
- 'wc-block-product-filter-chips__swatch',
- {
- 'wc-block-product-filter-chips__swatch--no-color':
- ! item.color,
+ <Disabled>
+ <div className="wc-block-product-filter-chips__items">
+ { isLoading && loadingState }
+ { ! isLoading &&
+ ( isLongList
+ ? items.slice( 0, threshold )
+ : items
+ ).map( ( item, index ) => (
+ <div
+ key={ index }
+ className="wc-block-product-filter-chips__item"
+ aria-checked={ !! item.selected }
+ >
+ <span className="wc-block-product-filter-chips__label">
+ <span
+ className={ clsx(
+ 'wc-block-product-filter-chips__swatch',
+ {
+ 'wc-block-product-filter-chips__swatch--no-color':
+ ! item.color,
+ }
+ ) }
+ style={
+ item.color
+ ? {
+ backgroundColor:
+ item.color,
+ }
+ : undefined
}
+ aria-hidden="true"
+ />
+ <span className="wc-block-product-filter-chips__text">
+ { typeof item.label === 'string'
+ ? decodeHtmlEntities(
+ item.label
+ )
+ : item.label }
+ </span>
+ { item.count !== undefined && (
+ <span className="wc-block-product-filter-chips__count">
+ { ` (${ item.count })` }
+ </span>
) }
- style={
- item.color
- ? {
- backgroundColor:
- item.color,
- }
- : undefined
- }
- aria-hidden="true"
- />
- <span className="wc-block-product-filter-chips__text">
- { typeof item.label === 'string'
- ? decodeHtmlEntities( item.label )
- : item.label }
</span>
- { item.count !== undefined && (
- <span className="wc-block-product-filter-chips__count">
- { ` (${ item.count })` }
- </span>
- ) }
- </span>
- </div>
- ) ) }
- </div>
- { ! isLoading && isLongList && (
- <button className="wc-block-product-filter-chips__show-more">
- { __( 'Show more…', 'woocommerce' ) }
- </button>
- ) }
+ </div>
+ ) ) }
+ </div>
+ { ! isLoading && isLongList && (
+ <button className="wc-block-product-filter-chips__show-more">
+ { __( 'Show more…', 'woocommerce' ) }
+ </button>
+ ) }
+ </Disabled>
</div>
<InspectorControls group="color">
{ colorGradientSettings.hasColorsOrGradients && (