Commit 4626b7c0f81 for woocommerce
commit 4626b7c0f8113989d0ccc306c11457c266dfd79a
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date: Fri May 15 11:29:50 2026 +0200
Align Images field label spacing in experimental products app (#64993)
Align Images field label spacing with other fields
The Images field renders inside a Fieldset.Root which uses a 4px gap
(--wpds-dimension-gap-xs), whereas every other form field uses
SelectControl (Field.Root with an 8px Stack gap). The result was a
visibly tighter label-to-control gap above the Images upload area
than every other field in the edit drawer. Override the Fieldset gap
to 8px so the spacing matches.
diff --git a/packages/js/experimental-products-app/changelog/fix-images-field-label-spacing b/packages/js/experimental-products-app/changelog/fix-images-field-label-spacing
new file mode 100644
index 00000000000..1d13139c0a1
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/fix-images-field-label-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Align the gap between the Images field label and its upload area with other form fields
diff --git a/packages/js/experimental-products-app/src/fields/images/field.tsx b/packages/js/experimental-products-app/src/fields/images/field.tsx
index a5edcb38351..3be88e163eb 100644
--- a/packages/js/experimental-products-app/src/fields/images/field.tsx
+++ b/packages/js/experimental-products-app/src/fields/images/field.tsx
@@ -233,7 +233,7 @@ export const fieldExtensions: Partial< Field< ProductEntityRecord > > = {
}, [ images, handleRemoveImage ] );
return (
- <Fieldset.Root>
+ <Fieldset.Root className="woocommerce-fields-control__images-fieldset">
<Fieldset.Legend>{ field.label }</Fieldset.Legend>
<DragDropProvider onDragEnd={ handleDragEnd }>
<div className="woocommerce-fields-control__featured-image">
diff --git a/packages/js/experimental-products-app/src/fields/images/style.scss b/packages/js/experimental-products-app/src/fields/images/style.scss
index 86a089aac78..47d84ad7992 100644
--- a/packages/js/experimental-products-app/src/fields/images/style.scss
+++ b/packages/js/experimental-products-app/src/fields/images/style.scss
@@ -1,3 +1,7 @@
+.woocommerce-fields-control__images-fieldset {
+ gap: 8px;
+}
+
.woocommerce-fields-control__featured-image {
display: grid;
gap: 8px;