DataForm: set spacing for regular and card layouts (#72249)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: dinhtungdu <dinhtungdu@git.wordpress.org>

Author: 3 people

packages/dataviews/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249).
+
 ## 10.1.0 (2025-10-21)
 
 ### Enhancements

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>
 		),

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

packages/dataviews/src/stories/dataform.story.tsx

@@ -1799,6 +1799,7 @@ const LayoutMixedComponent = () => {
 	} );
 
 	const form: Form = {
+		layout: { type: 'card' },
 		fields: [
 			{
 				id: 'title-and-status',

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',