From 277606325ff128111d100fca41fcbf5e33051054 Mon Sep 17 00:00:00 2001
From: James Koster <jay.koster@automattic.com>
Date: Mon, 13 Oct 2025 11:38:29 +0100
Subject: [PATCH 1/3] Standardise DataForm Card typography

---
 .../src/dataform-layouts/card/style.scss      |  4 +++
 .../src/dataform-layouts/data-form-layout.tsx |  4 ++-
 .../dataviews/src/dataform-layouts/index.tsx  | 34 +++++++++++++++++--
 .../dataviews/src/dataform-layouts/style.scss |  3 ++
 packages/dataviews/src/style.scss             |  1 +
 5 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 packages/dataviews/src/dataform-layouts/style.scss

diff --git a/packages/dataviews/src/dataform-layouts/card/style.scss b/packages/dataviews/src/dataform-layouts/card/style.scss
index b6393373cf8d0d..6e238e09013783 100644
--- a/packages/dataviews/src/dataform-layouts/card/style.scss
+++ b/packages/dataviews/src/dataform-layouts/card/style.scss
@@ -1,3 +1,7 @@
+.dataforms-layouts-card__field-header-label {
+	@include heading-large();
+}
+
 .dataforms-layouts-card__field {
 	width: 100%;
 }
diff --git a/packages/dataviews/src/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/dataform-layouts/data-form-layout.tsx
index 14a5538a5ca3fd..ac73bb469335c7 100644
--- a/packages/dataviews/src/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/dataform-layouts/data-form-layout.tsx
@@ -14,7 +14,9 @@ import { isCombinedField } from './is-combined-field';
 import normalizeFormFields, { normalizeLayout } from './normalize-form-fields';
 
 const DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
-	<VStack spacing={ 4 }>{ children }</VStack>
+	<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
+		{ children }
+	</VStack>
 );
 
 export function DataFormLayout< Item >( {
diff --git a/packages/dataviews/src/dataform-layouts/index.tsx b/packages/dataviews/src/dataform-layouts/index.tsx
index 9d642783a16a6a..1f49d2f61d7f32 100644
--- a/packages/dataviews/src/dataform-layouts/index.tsx
+++ b/packages/dataviews/src/dataform-layouts/index.tsx
@@ -19,17 +19,47 @@ 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 }
+			>
+				{ children }
+			</VStack>
+		),
 	},
 	{
 		type: 'panel',
 		component: FormPanelField,
 		wrapper: ( { children }: { children: React.ReactNode } ) => (
-			<VStack spacing={ 2 }>{ children }</VStack>
+			<VStack className="dataforms-layouts__wrapper" spacing={ 2 }>
+				{ children }
+			</VStack>
 		),
 	},
 	{
 		type: 'card',
 		component: FormCardField,
+		wrapper: ( {
+			children,
+			layout,
+		}: {
+			children: React.ReactNode;
+			layout: Layout;
+		} ) => (
+			<VStack
+				className="dataforms-layouts__wrapper"
+				spacing={ ( layout as any )?.spacing ?? 6 }
+			>
+				{ children }
+			</VStack>
+		),
 	},
 	{
 		type: 'row',
@@ -41,7 +71,7 @@ const FORM_FIELD_LAYOUTS = [
 			children: React.ReactNode;
 			layout: Layout;
 		} ) => (
-			<VStack spacing={ 4 }>
+			<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
 				<div className="dataforms-layouts-row__field">
 					<HStack
 						spacing={ 4 }
diff --git a/packages/dataviews/src/dataform-layouts/style.scss b/packages/dataviews/src/dataform-layouts/style.scss
new file mode 100644
index 00000000000000..ee793210f7b153
--- /dev/null
+++ b/packages/dataviews/src/dataform-layouts/style.scss
@@ -0,0 +1,3 @@
+.dataforms-layouts__wrapper {
+	@include body-medium();
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index c56f0eadb9c4ec..0463ef74afb2b5 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -18,3 +18,4 @@
 @import "./dataform-layouts/regular/style.scss";
 @import "./dataform-layouts/card/style.scss";
 @import "./dataform-layouts/row/style.scss";
+@import "./dataform-layouts/style.scss";

From 0fbd9284ac16d3ebc3febbf7d5b51ffb225fb848 Mon Sep 17 00:00:00 2001
From: James Koster <jay.koster@automattic.com>
Date: Wed, 15 Oct 2025 15:08:45 +0100
Subject: [PATCH 2/3] 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 c72d31487731bf..cdf2b84f73d0b9 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Normalize search field styles ([#72072](https://github.com/WordPress/gutenberg/pull/72072)).
 - DataForm control for `date` supports `required` and `custom` validation [#72048](https://github.com/WordPress/gutenberg/pull/72048).
 - DataForm control for `datetime` supports `required` and `custom` validation. [#72060](https://github.com/WordPress/gutenberg/pull/72060).
+- Standardise DataForm typography. [#72284](https://github.com/WordPress/gutenberg/pull/72284).
 
 ### Breaking changes
 

From f1e34a21152aba1adcdb972208d4994a85f5b682 Mon Sep 17 00:00:00 2001
From: James Koster <jay.koster@automattic.com>
Date: Wed, 15 Oct 2025 15:15:51 +0100
Subject: [PATCH 3/3] import mixins

---
 packages/dataviews/src/dataform-layouts/card/style.scss | 1 +
 packages/dataviews/src/dataform-layouts/style.scss      | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/dataviews/src/dataform-layouts/card/style.scss b/packages/dataviews/src/dataform-layouts/card/style.scss
index da1beddf6ad53f..8ae2aa1d81bd41 100644
--- a/packages/dataviews/src/dataform-layouts/card/style.scss
+++ b/packages/dataviews/src/dataform-layouts/card/style.scss
@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
 
 .dataforms-layouts-card__field-header-label {
 	@include heading-large();
diff --git a/packages/dataviews/src/dataform-layouts/style.scss b/packages/dataviews/src/dataform-layouts/style.scss
index ee793210f7b153..726fe15055b7a4 100644
--- a/packages/dataviews/src/dataform-layouts/style.scss
+++ b/packages/dataviews/src/dataform-layouts/style.scss
@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/mixins" as *;
+
 .dataforms-layouts__wrapper {
 	@include body-medium();
 }