Commit a6663c06647 for woocommerce

commit a6663c066470f16499ddc37d179050145bb8ffac
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date:   Mon Sep 28 10:31:06 2026 +0200

    Add block spacing style support to the Chips block (#68946)

    * Add block spacing style support to the Chips block

    * Add changelog

    * Clean up CSS

    * Add default blockGap

    * Use blockGap for default controls

    * Make sure +N more button is correctly aligned

diff --git a/docs/block-development/reference/block-references.md b/docs/block-development/reference/block-references.md
index 3eaa00b1109..f13c8ef924f 100644
--- a/docs/block-development/reference/block-references.md
+++ b/docs/block-development/reference/block-references.md
@@ -1278,7 +1278,7 @@ Display filter options as chips.
 - **Name:** woocommerce/product-filter-chips
 - **Category:** woocommerce
 - **Ancestor:** woocommerce/product-filter-attribute, woocommerce/product-filter-taxonomy, woocommerce/product-filter-status, woocommerce/add-to-cart-with-options-variation-selector-attribute
-- **Supports:** interactivity, spacing (padding), typography (fontSize), woocommerce (innerBlockDisplayStyle)
+- **Supports:** interactivity, layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowJustification~~, ~~allowOrientation~~, ~~allowSizingOnChildren~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, padding), typography (fontSize), woocommerce (innerBlockDisplayStyle)
 - **Attributes:** chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText, customSelectedChipBackground, customSelectedChipBorder, customSelectedChipText, selectedChipBackground, selectedChipBorder, selectedChipText

 ## Clear filters - woocommerce/product-filter-clear-button
diff --git a/plugins/woocommerce/changelog/add-chips-block-gap b/plugins/woocommerce/changelog/add-chips-block-gap
new file mode 100644
index 00000000000..03a9f54c201
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-chips-block-gap
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add block spacing style support to the Chips block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/block.json
index a67f6c0d6f5..42ff44bf03e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/block.json
@@ -27,9 +27,32 @@
 			"radius": true,
 			"__experimentalSkipSerialization": true
 		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "wrap",
+				"orientation": "horizontal"
+			},
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"allowJustification": false,
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowSizingOnChildren": false
+		},
 		"spacing": {
 			"padding": true,
-			"__experimentalSkipSerialization": true
+			"blockGap": true,
+			"__experimentalSkipSerialization": [ "padding" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"blockGap": "0.5em"
+			}
 		}
 	},
 	"selectors": {
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 5a19a006e6f..6bf968f9fe0 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
@@ -9,6 +9,7 @@ import { getSetting } from '@woocommerce/settings';
 import {
 	InspectorControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	withColors,
 	// @ts-expect-error - no types.
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -105,6 +106,9 @@ const Edit = ( props: EditProps ): JSX.Element => {
 				undefined,
 		},
 	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		templateLock: 'all',
+	} );

 	if ( ! items ) {
 		return <></>;
@@ -137,7 +141,7 @@ const Edit = ( props: EditProps ): JSX.Element => {

 	return (
 		<>
-			<div { ...blockProps }>
+			<div { ...innerBlocksProps }>
 				<Disabled>
 					<div className="wc-block-product-filter-chips__items">
 						{ isLoading && loadingState }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
index c85cd2578a3..053b09eaa3e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
@@ -1,15 +1,14 @@
 :where(.wp-block-woocommerce-product-filter-chips) {
 	font-size: 0.8em;
-}

-:where(.wc-block-product-filter-chips__fieldset) {
-	display: contents;
+	> .components-disabled {
+		display: contents;
+	}
 }

+:where(.wc-block-product-filter-chips__fieldset),
 :where(.wc-block-product-filter-chips__items) {
-	display: flex;
-	flex-wrap: wrap;
-	gap: $gap-smallest;
+	display: contents;
 }

 .wc-block-product-filter-chips__item {
@@ -101,8 +100,10 @@
 	padding: 0;
 	font: inherit;
 	color: inherit;
+	text-align: start;
 	text-decoration: underline;
 	cursor: pointer;
+	width: 100%;

 	&:hover,
 	&:focus {
@@ -112,10 +113,6 @@

 // Swatch style — color circles only, no text labels.
 .is-style-swatch {
-	.wc-block-product-filter-chips__items {
-		gap: $gap-small;
-	}
-
 	.wc-block-product-filter-chips__item {
 		background: transparent;
 		padding: 2px;