From 090d6b3f253bbad9fef992c023a5ad69932cafe0 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 10 Oct 2025 15:28:06 +0100 Subject: [PATCH 1/8] Make DataFormLayout spacing customisable --- .../dataviews/src/dataform-layouts/index.tsx | 4 ++++ .../dataform-layouts/normalize-form-fields.ts | 6 +++++- .../dataviews/src/stories/dataform.story.tsx | 1 + packages/dataviews/src/types/dataform.ts | 18 ++++++++++++++++++ 4 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx index 1f49d2f61d7f32..6bda95b44d1177 100644 --- a/packages/dataviews/src/dataform-layouts/index.tsx +++ b/packages/dataviews/src/dataform-layouts/index.tsx @@ -53,10 +53,14 @@ const FORM_FIELD_LAYOUTS = [ children: React.ReactNode; layout: Layout; } ) => ( +<<<<<<< HEAD +======= + +>>>>>>> 5da5e9b1f9 (Make DataFormLayout spacing customisable) { children } ), diff --git a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts index 7749165d3fade9..0e8e5f7b15546c 100644 --- a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts +++ b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts @@ -21,7 +21,8 @@ interface NormalizedFormField { export const DEFAULT_LAYOUT: NormalizedLayout = { type: 'regular', labelPosition: 'top', -}; + spacing: 4, +} as NormalizedRegularLayout; const normalizeCardSummaryField = ( sum: CardSummaryField @@ -50,6 +51,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { normalizedLayout = { type: 'regular', labelPosition: layout?.labelPosition ?? 'top', + spacing: ( layout as any )?.spacing ?? 4, } satisfies NormalizedRegularLayout; } else if ( layout?.type === 'panel' ) { const summary = layout.summary ?? []; @@ -72,6 +74,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { withHeader: false, isOpened: true, summary: [], + spacing: ( layout as any )?.spacing ?? 6, } satisfies NormalizedCardLayout; } else { const summary = layout.summary ?? []; @@ -84,6 +87,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { ? layout.isOpened : true, summary: normalizeCardSummaryField( summary ), + spacing: ( layout as any )?.spacing ?? 6, } satisfies NormalizedCardLayout; } } else if ( layout?.type === 'row' ) { diff --git a/packages/dataviews/src/stories/dataform.story.tsx b/packages/dataviews/src/stories/dataform.story.tsx index 9cf27f309bc15a..c6ec2bf5410fd2 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', spacing: 6 }, fields: [ { id: 'title-and-status', diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts index 733786e5bb2e16..45538df44228f7 100644 --- a/packages/dataviews/src/types/dataform.ts +++ b/packages/dataviews/src/types/dataform.ts @@ -15,10 +15,16 @@ export type NormalizedPanelSummaryField = string[]; export type RegularLayout = { type: 'regular'; labelPosition?: LabelPosition; + /** + * Spacing between individual fields when using the regular layout. + * Defaults to 4. + */ + spacing?: number; }; export type NormalizedRegularLayout = { type: 'regular'; labelPosition: LabelPosition; + spacing: number; }; export type PanelLayout = { @@ -56,12 +62,22 @@ export type CardLayout = // isOpened cannot be false if withHeader is false as well. // Otherwise, the card would not be visible. isOpened?: true; + /** + * Spacing between separate cards when using the card layout. + * Defaults to 4. + */ + spacing?: number; } | { type: 'card'; withHeader?: true | undefined; isOpened?: boolean; summary?: CardSummaryField; + /** + * Spacing between separate cards when using the card layout. + * Defaults to 4. + */ + spacing?: number; }; export type NormalizedCardLayout = | { @@ -72,12 +88,14 @@ export type NormalizedCardLayout = isOpened: true; // Summary is an empty array summary: []; + spacing: number; } | { type: 'card'; withHeader: true; isOpened: boolean; summary: NormalizedCardSummaryField; + spacing: number; }; export type RowLayout = { From 7b680b3e717dd18f8f7e6262afeb02529af6a374 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 15 Oct 2025 16:17:05 +0100 Subject: [PATCH 2/8] Update changelog --- packages/dataviews/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 36c5e7d2f13f6a..3a3fd65764d52c 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -8,6 +8,7 @@ - Consistently use font-weight 499 instead of 500 ([#72473](https://github.com/WordPress/gutenberg/pull/72473)). - Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417) +- DataForm: make layout spacing customizable. [#72249](https://github.com/WordPress/gutenberg/pull/72249). ## 10.0.0 (2025-10-17) From c19cc337b59bf5a6e6d7f52c325b6335ff9faeac Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 16 Oct 2025 13:18:07 +0100 Subject: [PATCH 3/8] Update test --- .../src/test/normalize-form-fields.ts | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/packages/dataviews/src/test/normalize-form-fields.ts b/packages/dataviews/src/test/normalize-form-fields.ts index 90cd810ffc0643..59e195a4fb94e1 100644 --- a/packages/dataviews/src/test/normalize-form-fields.ts +++ b/packages/dataviews/src/test/normalize-form-fields.ts @@ -28,11 +28,19 @@ describe( 'normalizeFormFields', () => { expect( result ).toEqual( [ { id: 'field1', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, { id: 'field2', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, ] ); } ); @@ -51,12 +59,20 @@ describe( 'normalizeFormFields', () => { expect( result ).toEqual( [ { id: 'field1', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, { id: 'field2', label: 'Field 2', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, ] ); } ); @@ -72,7 +88,11 @@ describe( 'normalizeFormFields', () => { expect( result ).toEqual( [ { id: 'field1', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, ] ); } ); @@ -86,7 +106,11 @@ describe( 'normalizeFormFields', () => { expect( result ).toEqual( [ { id: 'field1', - layout: { type: 'regular', labelPosition: 'side' }, + layout: { + type: 'regular', + labelPosition: 'side', + spacing: 4, + }, }, ] ); } ); @@ -143,6 +167,7 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: true, summary: [], + spacing: 6, }, }, ] ); @@ -169,6 +194,7 @@ describe( 'normalizeFormFields', () => { withHeader: false, isOpened: true, summary: [], + spacing: 6, }, }, ] ); @@ -193,6 +219,7 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: false, summary: [ { id: 'field1', visibility: 'always' } ], + spacing: 6, }, }, ] ); @@ -223,6 +250,7 @@ describe( 'normalizeFormFields', () => { { id: 'field2', visibility: 'when-collapsed' }, { id: 'field1', visibility: 'always' }, ], + spacing: 6, }, }, ] ); @@ -245,7 +273,11 @@ describe( 'normalizeFormFields', () => { expect( result ).toEqual( [ { id: 'field1', - layout: { type: 'regular', labelPosition: 'top' }, + layout: { + type: 'regular', + labelPosition: 'top', + spacing: 4, + }, }, { id: 'field2', @@ -279,6 +311,7 @@ describe( 'normalizeFormFields', () => { withHeader: false, isOpened: true, summary: [], + spacing: 6, }, }, { @@ -288,6 +321,7 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: false, summary: [], + spacing: 6, }, }, ] ); From 4ce27b5829bc652868150c844cbf086a8ae55f12 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 17 Oct 2025 13:27:09 +0100 Subject: [PATCH 4/8] Remove customisability --- packages/dataviews/src/dataform-layouts/index.tsx | 11 +---------- .../src/dataform-layouts/normalize-form-fields.ts | 9 ++++++--- packages/dataviews/src/stories/dataform.story.tsx | 2 +- packages/dataviews/src/types/dataform.ts | 15 --------------- 4 files changed, 8 insertions(+), 29 deletions(-) diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx index 6bda95b44d1177..8af85e27570e9a 100644 --- a/packages/dataviews/src/dataform-layouts/index.tsx +++ b/packages/dataviews/src/dataform-layouts/index.tsx @@ -21,15 +21,11 @@ const FORM_FIELD_LAYOUTS = [ component: FormRegularField, wrapper: ( { children, - layout, }: { children: React.ReactNode; layout: Layout; } ) => ( - + { children } ), @@ -48,19 +44,14 @@ const FORM_FIELD_LAYOUTS = [ component: FormCardField, wrapper: ( { children, - layout, }: { children: React.ReactNode; layout: Layout; } ) => ( -<<<<<<< HEAD -======= - ->>>>>>> 5da5e9b1f9 (Make DataFormLayout spacing customisable) { children } ), diff --git a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts index 0e8e5f7b15546c..c15c72940d82fe 100644 --- a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts +++ b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts @@ -51,7 +51,8 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { normalizedLayout = { type: 'regular', labelPosition: layout?.labelPosition ?? 'top', - spacing: ( layout as any )?.spacing ?? 4, + // Spacing is fixed for regular layout. + spacing: 4, } satisfies NormalizedRegularLayout; } else if ( layout?.type === 'panel' ) { const summary = layout.summary ?? []; @@ -74,7 +75,8 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { withHeader: false, isOpened: true, summary: [], - spacing: ( layout as any )?.spacing ?? 6, + // Spacing is fixed for card layout. + spacing: 6, } satisfies NormalizedCardLayout; } else { const summary = layout.summary ?? []; @@ -87,7 +89,8 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { ? layout.isOpened : true, summary: normalizeCardSummaryField( summary ), - spacing: ( layout as any )?.spacing ?? 6, + // Spacing is fixed for card layout. + spacing: 6, } satisfies NormalizedCardLayout; } } else if ( layout?.type === 'row' ) { diff --git a/packages/dataviews/src/stories/dataform.story.tsx b/packages/dataviews/src/stories/dataform.story.tsx index c6ec2bf5410fd2..1be8ad4efa70d0 100644 --- a/packages/dataviews/src/stories/dataform.story.tsx +++ b/packages/dataviews/src/stories/dataform.story.tsx @@ -1799,7 +1799,7 @@ const LayoutMixedComponent = () => { } ); const form: Form = { - layout: { type: 'card', spacing: 6 }, + layout: { type: 'card' }, fields: [ { id: 'title-and-status', diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts index 45538df44228f7..e197d2ffeb50c5 100644 --- a/packages/dataviews/src/types/dataform.ts +++ b/packages/dataviews/src/types/dataform.ts @@ -15,11 +15,6 @@ export type NormalizedPanelSummaryField = string[]; export type RegularLayout = { type: 'regular'; labelPosition?: LabelPosition; - /** - * Spacing between individual fields when using the regular layout. - * Defaults to 4. - */ - spacing?: number; }; export type NormalizedRegularLayout = { type: 'regular'; @@ -62,22 +57,12 @@ export type CardLayout = // isOpened cannot be false if withHeader is false as well. // Otherwise, the card would not be visible. isOpened?: true; - /** - * Spacing between separate cards when using the card layout. - * Defaults to 4. - */ - spacing?: number; } | { type: 'card'; withHeader?: true | undefined; isOpened?: boolean; summary?: CardSummaryField; - /** - * Spacing between separate cards when using the card layout. - * Defaults to 4. - */ - spacing?: number; }; export type NormalizedCardLayout = | { From 2da16b31c2060168d23aa7449b60afdc2df884ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 20 Oct 2025 17:34:45 +0200 Subject: [PATCH 5/8] Fix rebasing issues --- packages/dataviews/src/dataform-layouts/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx index 8af85e27570e9a..6f5b713a017f43 100644 --- a/packages/dataviews/src/dataform-layouts/index.tsx +++ b/packages/dataviews/src/dataform-layouts/index.tsx @@ -48,10 +48,7 @@ const FORM_FIELD_LAYOUTS = [ children: React.ReactNode; layout: Layout; } ) => ( - + { children } ), From 21437330d9791bb0c333665174944841ae24974c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 20 Oct 2025 18:34:36 +0200 Subject: [PATCH 6/8] Update changelog --- packages/dataviews/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 3a3fd65764d52c..10ded7062ffdc5 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -8,7 +8,7 @@ - Consistently use font-weight 499 instead of 500 ([#72473](https://github.com/WordPress/gutenberg/pull/72473)). - Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417) -- DataForm: make layout spacing customizable. [#72249](https://github.com/WordPress/gutenberg/pull/72249). +- DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249). ## 10.0.0 (2025-10-17) From 4c50413ceb2cad08901f4009fe90614a1ee4921c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 21 Oct 2025 08:24:07 +0200 Subject: [PATCH 7/8] Remove spacing from the normalized layouts --- packages/dataviews/src/dataform-layouts/index.tsx | 14 ++------------ .../src/dataform-layouts/normalize-form-fields.ts | 7 ------- .../dataviews/src/test/normalize-form-fields.ts | 13 ------------- packages/dataviews/src/types/dataform.ts | 3 --- 4 files changed, 2 insertions(+), 35 deletions(-) diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx index 6f5b713a017f43..6974d4952554d1 100644 --- a/packages/dataviews/src/dataform-layouts/index.tsx +++ b/packages/dataviews/src/dataform-layouts/index.tsx @@ -19,12 +19,7 @@ const FORM_FIELD_LAYOUTS = [ { type: 'regular', component: FormRegularField, - wrapper: ( { - children, - }: { - children: React.ReactNode; - layout: Layout; - } ) => ( + wrapper: ( { children }: { children: React.ReactNode } ) => ( { children } @@ -42,12 +37,7 @@ const FORM_FIELD_LAYOUTS = [ { type: 'card', component: FormCardField, - wrapper: ( { - children, - }: { - children: React.ReactNode; - layout: Layout; - } ) => ( + wrapper: ( { children }: { children: React.ReactNode } ) => ( { children } diff --git a/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts b/packages/dataviews/src/dataform-layouts/normalize-form-fields.ts index c15c72940d82fe..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,6 @@ interface NormalizedFormField { export const DEFAULT_LAYOUT: NormalizedLayout = { type: 'regular', labelPosition: 'top', - spacing: 4, } as NormalizedRegularLayout; const normalizeCardSummaryField = ( @@ -51,8 +50,6 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { normalizedLayout = { type: 'regular', labelPosition: layout?.labelPosition ?? 'top', - // Spacing is fixed for regular layout. - spacing: 4, } satisfies NormalizedRegularLayout; } else if ( layout?.type === 'panel' ) { const summary = layout.summary ?? []; @@ -75,8 +72,6 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { withHeader: false, isOpened: true, summary: [], - // Spacing is fixed for card layout. - spacing: 6, } satisfies NormalizedCardLayout; } else { const summary = layout.summary ?? []; @@ -89,8 +84,6 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout { ? layout.isOpened : true, summary: normalizeCardSummaryField( summary ), - // Spacing is fixed for card layout. - spacing: 6, } satisfies NormalizedCardLayout; } } else if ( layout?.type === 'row' ) { diff --git a/packages/dataviews/src/test/normalize-form-fields.ts b/packages/dataviews/src/test/normalize-form-fields.ts index 59e195a4fb94e1..889f7d06a250e3 100644 --- a/packages/dataviews/src/test/normalize-form-fields.ts +++ b/packages/dataviews/src/test/normalize-form-fields.ts @@ -31,7 +31,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, { @@ -39,7 +38,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, ] ); @@ -62,7 +60,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, { @@ -71,7 +68,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, ] ); @@ -91,7 +87,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, ] ); @@ -109,7 +104,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'side', - spacing: 4, }, }, ] ); @@ -167,7 +161,6 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: true, summary: [], - spacing: 6, }, }, ] ); @@ -194,7 +187,6 @@ describe( 'normalizeFormFields', () => { withHeader: false, isOpened: true, summary: [], - spacing: 6, }, }, ] ); @@ -219,7 +211,6 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: false, summary: [ { id: 'field1', visibility: 'always' } ], - spacing: 6, }, }, ] ); @@ -250,7 +241,6 @@ describe( 'normalizeFormFields', () => { { id: 'field2', visibility: 'when-collapsed' }, { id: 'field1', visibility: 'always' }, ], - spacing: 6, }, }, ] ); @@ -276,7 +266,6 @@ describe( 'normalizeFormFields', () => { layout: { type: 'regular', labelPosition: 'top', - spacing: 4, }, }, { @@ -311,7 +300,6 @@ describe( 'normalizeFormFields', () => { withHeader: false, isOpened: true, summary: [], - spacing: 6, }, }, { @@ -321,7 +309,6 @@ describe( 'normalizeFormFields', () => { withHeader: true, isOpened: false, summary: [], - spacing: 6, }, }, ] ); diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts index e197d2ffeb50c5..733786e5bb2e16 100644 --- a/packages/dataviews/src/types/dataform.ts +++ b/packages/dataviews/src/types/dataform.ts @@ -19,7 +19,6 @@ export type RegularLayout = { export type NormalizedRegularLayout = { type: 'regular'; labelPosition: LabelPosition; - spacing: number; }; export type PanelLayout = { @@ -73,14 +72,12 @@ export type NormalizedCardLayout = isOpened: true; // Summary is an empty array summary: []; - spacing: number; } | { type: 'card'; withHeader: true; isOpened: boolean; summary: NormalizedCardSummaryField; - spacing: number; }; export type RowLayout = { From 6615830c216f650c3ef09b8fb00e34a14d6b59b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 23 Oct 2025 09:42:31 +0200 Subject: [PATCH 8/8] Move changelog to the unreleased section --- packages/dataviews/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 10ded7062ffdc5..44861f027eec48 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,13 +2,16 @@ ## 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 - Consistently use font-weight 499 instead of 500 ([#72473](https://github.com/WordPress/gutenberg/pull/72473)). - Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417) -- DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249). ## 10.0.0 (2025-10-17)