From 525a47218d6e41fdea3873eff6b5acc3b8cb53a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 24 Oct 2025 12:26:20 +0200
Subject: [PATCH] DataForm: set spacing for regular and card layouts (#72249)

---
 packages/dataviews/CHANGELOG.md               |  6 ++++
 .../dataviews/src/dataform-layouts/index.tsx  | 26 +++-----------
 .../dataform-layouts/normalize-form-fields.ts |  2 +-
 .../dataviews/src/stories/dataform.story.tsx  |  1 +
 .../src/test/normalize-form-fields.ts         | 35 +++++++++++++++----
 5 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 1cafda631abf14..ba363474a97f94 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -4,6 +4,12 @@
 
 ### Enhancements
 
+- DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249).
+
+## 10.1.0 (2025-10-21)
+
+### Enhancements
+
 - Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417)
 
 ## 10.0.0 (2025-10-17)
diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx
index 1f49d2f61d7f32..6974d4952554d1 100644
--- a/packages/dataviews/src/dataform-layouts/index.tsx
+++ b/packages/dataviews/src/dataform-layouts/index.tsx
@@ -19,17 +19,8 @@ const FORM_FIELD_LAYOUTS = [
 	{
 		type: 'regular',
 		component: FormRegularField,
-		wrapper: ( {
-			children,
-			layout,
-		}: {
-			children: React.ReactNode;
-			layout: Layout;
-		} ) => (
-			<VStack
-				className="dataforms-layouts__wrapper"
-				spacing={ ( layout as any )?.spacing ?? 4 }
-			>
+		wrapper: ( { children }: { children: React.ReactNode } ) => (
+			<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
 				{ children }
 			</VStack>
 		),
@@ -46,17 +37,8 @@ const FORM_FIELD_LAYOUTS = [
 	{
 		type: 'card',
 		component: FormCardField,
-		wrapper: ( {
-			children,
-			layout,
-		}: {
-			children: React.ReactNode;
-			layout: Layout;
-		} ) => (
-			<VStack
-				className="dataforms-layouts__wrapper"
-				spacing={ ( layout as any )?.spacing ?? 6 }
-			>
+		wrapper: ( { children }: { children: React.ReactNode } ) => (
+			<VStack className="dataforms-layouts__wrapper" spacing={ 6 }>
 				{ children }
 			</VStack>
 		),
diff --git a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts
index 7749165d3fade9..a874fb2a00d4ec 100644
--- a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts
+++ b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts
@@ -21,7 +21,7 @@ interface NormalizedFormField {
 export const DEFAULT_LAYOUT: NormalizedLayout = {
 	type: 'regular',
 	labelPosition: 'top',
-};
+} as NormalizedRegularLayout;
 
 const normalizeCardSummaryField = (
 	sum: CardSummaryField
diff --git a/packages/dataviews/src/stories/dataform.story.tsx b/packages/dataviews/src/stories/dataform.story.tsx
index 9cf27f309bc15a..1be8ad4efa70d0 100644
--- a/packages/dataviews/src/stories/dataform.story.tsx
+++ b/packages/dataviews/src/stories/dataform.story.tsx
@@ -1799,6 +1799,7 @@ const LayoutMixedComponent = () => {
 	} );
 
 	const form: Form = {
+		layout: { type: 'card' },
 		fields: [
 			{
 				id: 'title-and-status',
diff --git a/packages/dataviews/src/test/normalize-form-fields.ts b/packages/dataviews/src/test/normalize-form-fields.ts
index 90cd810ffc0643..889f7d06a250e3 100644
--- a/packages/dataviews/src/test/normalize-form-fields.ts
+++ b/packages/dataviews/src/test/normalize-form-fields.ts
@@ -28,11 +28,17 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 				{
 					id: 'field2',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 			] );
 		} );
@@ -51,12 +57,18 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 				{
 					id: 'field2',
 					label: 'Field 2',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 			] );
 		} );
@@ -72,7 +84,10 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 			] );
 		} );
@@ -86,7 +101,10 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'regular', labelPosition: 'side' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'side',
+					},
 				},
 			] );
 		} );
@@ -245,7 +263,10 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'regular', labelPosition: 'top' },
+					layout: {
+						type: 'regular',
+						labelPosition: 'top',
+					},
 				},
 				{
 					id: 'field2',