From 52c735bcb6905f063a68e1d7de961064f86ad7fb Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Thu, 8 Jan 2026 10:02:41 +0530
Subject: [PATCH 01/15] DataViews: Add markWhenOptional prop to Field API

---
 .../src/components/dataform-controls/array.tsx      |  2 ++
 .../src/components/dataform-controls/checkbox.tsx   |  2 ++
 .../src/components/dataform-controls/color.tsx      |  2 ++
 .../src/components/dataform-controls/date.tsx       | 13 +++++++++++--
 .../src/components/dataform-controls/datetime.tsx   |  7 ++++++-
 .../src/components/dataform-controls/email.tsx      |  2 ++
 .../src/components/dataform-controls/password.tsx   |  2 ++
 .../src/components/dataform-controls/radio.tsx      |  2 ++
 .../src/components/dataform-controls/select.tsx     |  2 ++
 .../src/components/dataform-controls/telephone.tsx  |  2 ++
 .../src/components/dataform-controls/text.tsx       |  2 ++
 .../src/components/dataform-controls/textarea.tsx   |  2 ++
 .../components/dataform-controls/toggle-group.tsx   |  2 ++
 .../src/components/dataform-controls/toggle.tsx     |  2 ++
 .../src/components/dataform-controls/url.tsx        |  2 ++
 .../dataform-controls/utils/validated-input.tsx     |  2 ++
 .../dataform-controls/utils/validated-number.tsx    |  2 ++
 .../src/components/dataform-layouts/card/index.tsx  |  2 ++
 .../dataform-layouts/data-form-layout.tsx           |  1 +
 .../components/dataform-layouts/details/index.tsx   |  1 +
 .../src/components/dataform-layouts/panel/index.tsx |  1 +
 .../components/dataform-layouts/regular/index.tsx   |  3 +++
 .../src/components/dataform-layouts/row/index.tsx   |  3 +++
 packages/dataviews/src/types/dataform.ts            |  1 +
 packages/dataviews/src/types/field-api.ts           |  4 ++++
 25 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-controls/array.tsx b/packages/dataviews/src/components/dataform-controls/array.tsx
index a70f8a72634996..e122f3cfa577d1 100644
--- a/packages/dataviews/src/components/dataform-controls/array.tsx
+++ b/packages/dataviews/src/components/dataform-controls/array.tsx
@@ -19,6 +19,7 @@ export default function ArrayControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, getValue, setValue, isValid } = field;
@@ -65,6 +66,7 @@ export default function ArrayControl< Item >( {
 	return (
 		<ValidatedFormTokenField
 			required={ !! isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ hideLabelFromVision ? undefined : label }
 			value={ arrayValueAsElements }
diff --git a/packages/dataviews/src/components/dataform-controls/checkbox.tsx b/packages/dataviews/src/components/dataform-controls/checkbox.tsx
index 10c03d038add04..9e2637675969dc 100644
--- a/packages/dataviews/src/components/dataform-controls/checkbox.tsx
+++ b/packages/dataviews/src/components/dataform-controls/checkbox.tsx
@@ -18,6 +18,7 @@ export default function Checkbox< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, label, description, isValid } = field;
@@ -31,6 +32,7 @@ export default function Checkbox< Item >( {
 	return (
 		<ValidatedCheckboxControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }
diff --git a/packages/dataviews/src/components/dataform-controls/color.tsx b/packages/dataviews/src/components/dataform-controls/color.tsx
index b6ef590c4f5341..94225da8884243 100644
--- a/packages/dataviews/src/components/dataform-controls/color.tsx
+++ b/packages/dataviews/src/components/dataform-controls/color.tsx
@@ -75,6 +75,7 @@ export default function Color< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, description, setValue, isValid } = field;
@@ -97,6 +98,7 @@ export default function Color< Item >( {
 	return (
 		<ValidatedInputControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
diff --git a/packages/dataviews/src/components/dataform-controls/date.tsx b/packages/dataviews/src/components/dataform-controls/date.tsx
index bdbb121587b94c..318f2ad6b075ae 100644
--- a/packages/dataviews/src/components/dataform-controls/date.tsx
+++ b/packages/dataviews/src/components/dataform-controls/date.tsx
@@ -255,6 +255,7 @@ function CalendarDateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const {
@@ -333,8 +334,10 @@ function CalendarDateControl< Item >( {
 		timezone: { string: timezoneString },
 	} = getSettings();
 
-	const displayLabel = isValid?.required
+	const displayLabel = isValid?.required && ! markWhenOptional
 		? `${ label } (${ __( 'Required' ) })`
+		: ! isValid?.required && markWhenOptional
+		? `${ label } (${ __( 'Optional' ) })`
 		: label;
 
 	return (
@@ -423,6 +426,7 @@ function CalendarDateRangeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, getValue, setValue, format: fieldFormat } = field;
@@ -541,8 +545,10 @@ function CalendarDateRangeControl< Item >( {
 
 	const { timezone } = getSettings();
 
-	const displayLabel = field.isValid?.required
+	const displayLabel = field.isValid?.required && ! markWhenOptional
 		? `${ label } (${ __( 'Required' ) })`
+		: ! field.isValid?.required && markWhenOptional
+		? `${ label } (${ __( 'Optional' ) })`
 		: label;
 
 	return (
@@ -649,6 +655,7 @@ export default function DateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -672,6 +679,7 @@ export default function DateControl< Item >( {
 				field={ field }
 				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
+				markWhenOptional={ markWhenOptional }
 				validity={ validity }
 			/>
 		);
@@ -683,6 +691,7 @@ export default function DateControl< Item >( {
 			field={ field }
 			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			markWhenOptional={ markWhenOptional }
 			validity={ validity }
 		/>
 	);
diff --git a/packages/dataviews/src/components/dataform-controls/datetime.tsx b/packages/dataviews/src/components/dataform-controls/datetime.tsx
index 28adaf75f6e3eb..74ce6af47497f3 100644
--- a/packages/dataviews/src/components/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/components/dataform-controls/datetime.tsx
@@ -43,6 +43,7 @@ function CalendarDateTimeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, description, setValue, getValue, isValid } = field;
@@ -156,8 +157,10 @@ function CalendarDateTimeControl< Item >( {
 	} = getSettings();
 
 	const displayLabel =
-		isValid?.required && ! hideLabelFromVision
+		isValid?.required && ! markWhenOptional && ! hideLabelFromVision
 			? `${ label } (${ __( 'Required' ) })`
+			: ! isValid?.required && markWhenOptional && ! hideLabelFromVision
+			? `${ label } (${ __( 'Optional' ) })`
 			: label;
 
 	return (
@@ -208,6 +211,7 @@ export default function DateTime< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -230,6 +234,7 @@ export default function DateTime< Item >( {
 			field={ field }
 			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			markWhenOptional={ markWhenOptional }
 			validity={ validity }
 		/>
 	);
diff --git a/packages/dataviews/src/components/dataform-controls/email.tsx b/packages/dataviews/src/components/dataform-controls/email.tsx
index 96b20dfcf2480e..5e0e01acc96707 100644
--- a/packages/dataviews/src/components/dataform-controls/email.tsx
+++ b/packages/dataviews/src/components/dataform-controls/email.tsx
@@ -18,6 +18,7 @@ export default function Email< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Email< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'email',
 				prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/password.tsx b/packages/dataviews/src/components/dataform-controls/password.tsx
index 155c7b3544d070..5b8c75639e7ba2 100644
--- a/packages/dataviews/src/components/dataform-controls/password.tsx
+++ b/packages/dataviews/src/components/dataform-controls/password.tsx
@@ -19,6 +19,7 @@ export default function Password< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -34,6 +35,7 @@ export default function Password< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
diff --git a/packages/dataviews/src/components/dataform-controls/radio.tsx b/packages/dataviews/src/components/dataform-controls/radio.tsx
index 42a45c45c6441e..599f009146f88e 100644
--- a/packages/dataviews/src/components/dataform-controls/radio.tsx
+++ b/packages/dataviews/src/components/dataform-controls/radio.tsx
@@ -19,6 +19,7 @@ export default function Radio< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
@@ -41,6 +42,7 @@ export default function Radio< Item >( {
 	return (
 		<ValidatedRadioControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }
diff --git a/packages/dataviews/src/components/dataform-controls/select.tsx b/packages/dataviews/src/components/dataform-controls/select.tsx
index fbecde88d2271c..19211840ce2926 100644
--- a/packages/dataviews/src/components/dataform-controls/select.tsx
+++ b/packages/dataviews/src/components/dataform-controls/select.tsx
@@ -19,6 +19,7 @@ export default function Select< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { type, label, description, getValue, setValue, isValid } = field;
@@ -44,6 +45,7 @@ export default function Select< Item >( {
 	return (
 		<ValidatedSelectControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			value={ value }
diff --git a/packages/dataviews/src/components/dataform-controls/telephone.tsx b/packages/dataviews/src/components/dataform-controls/telephone.tsx
index d075394e03b841..1b65183fefb38d 100644
--- a/packages/dataviews/src/components/dataform-controls/telephone.tsx
+++ b/packages/dataviews/src/components/dataform-controls/telephone.tsx
@@ -18,6 +18,7 @@ export default function Telephone< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Telephone< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'tel',
 				prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/text.tsx b/packages/dataviews/src/components/dataform-controls/text.tsx
index 158db52e5d4f32..24ca7c0e102bda 100644
--- a/packages/dataviews/src/components/dataform-controls/text.tsx
+++ b/packages/dataviews/src/components/dataform-controls/text.tsx
@@ -14,6 +14,7 @@ export default function Text< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -26,6 +27,7 @@ export default function Text< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				prefix: prefix ? createElement( prefix ) : undefined,
 				suffix: suffix ? createElement( suffix ) : undefined,
diff --git a/packages/dataviews/src/components/dataform-controls/textarea.tsx b/packages/dataviews/src/components/dataform-controls/textarea.tsx
index df64dd636757b7..6a1785a0376e73 100644
--- a/packages/dataviews/src/components/dataform-controls/textarea.tsx
+++ b/packages/dataviews/src/components/dataform-controls/textarea.tsx
@@ -18,6 +18,7 @@ export default function Textarea< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -34,6 +35,7 @@ export default function Textarea< Item >( {
 	return (
 		<ValidatedTextareaControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
diff --git a/packages/dataviews/src/components/dataform-controls/toggle-group.tsx b/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
index c0b63bb93b39bb..58ec8883337ff9 100644
--- a/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
+++ b/packages/dataviews/src/components/dataform-controls/toggle-group.tsx
@@ -23,6 +23,7 @@ export default function ToggleGroup< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, isValid } = field;
@@ -51,6 +52,7 @@ export default function ToggleGroup< Item >( {
 	return (
 		<ValidatedToggleGroupControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			__next40pxDefaultSize
 			isBlock
diff --git a/packages/dataviews/src/components/dataform-controls/toggle.tsx b/packages/dataviews/src/components/dataform-controls/toggle.tsx
index 3cfeabff549125..045e46384625fe 100644
--- a/packages/dataviews/src/components/dataform-controls/toggle.tsx
+++ b/packages/dataviews/src/components/dataform-controls/toggle.tsx
@@ -18,6 +18,7 @@ export default function Toggle< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
@@ -31,6 +32,7 @@ export default function Toggle< Item >( {
 	return (
 		<ValidatedToggleControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }
diff --git a/packages/dataviews/src/components/dataform-controls/url.tsx b/packages/dataviews/src/components/dataform-controls/url.tsx
index 98580b95dbc06b..a2c460eac46842 100644
--- a/packages/dataviews/src/components/dataform-controls/url.tsx
+++ b/packages/dataviews/src/components/dataform-controls/url.tsx
@@ -18,6 +18,7 @@ export default function Url< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Url< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'url',
 				prefix: (
diff --git a/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx b/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
index b30f8eaba497e2..cc2f1f3055a564 100644
--- a/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
+++ b/packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
@@ -34,6 +34,7 @@ export default function ValidatedText< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	type,
 	prefix,
 	suffix,
@@ -57,6 +58,7 @@ export default function ValidatedText< Item >( {
 	return (
 		<ValidatedInputControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
diff --git a/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx b/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
index 35ba5223a8b4da..f5fbb24c9a137a 100644
--- a/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
+++ b/packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
@@ -88,6 +88,7 @@ export default function ValidatedNumber< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -149,6 +150,7 @@ export default function ValidatedNumber< Item >( {
 	return (
 		<ValidatedNumberControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }
diff --git a/packages/dataviews/src/components/dataform-layouts/card/index.tsx b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
index 64679d57846370..e078a228fdee25 100644
--- a/packages/dataviews/src/components/dataform-layouts/card/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
@@ -170,6 +170,7 @@ export default function FormCardField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
@@ -312,6 +313,7 @@ export default function FormCardField< Item >( {
 						hideLabelFromVision={
 							hideLabelFromVision || withHeader
 						}
+						markWhenOptional={ markWhenOptional }
 						validity={ validity }
 					/>
 				</CardBody>
diff --git a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
index c8caa7259c7fd1..517a915300415f 100644
--- a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
@@ -40,6 +40,7 @@ export function DataFormLayout< Item >( {
 			field: NormalizedFormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
+			markWhenOptional?: boolean;
 			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
 		childField: NormalizedFormField,
diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index 47f497b6a2a4df..8ed0f42b1b7140 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -20,6 +20,7 @@ export default function FormDetailsField< Item >( {
 	data,
 	field,
 	onChange,
+	markWhenOptional,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
index 4e33267985a04a..33d49bca281de9 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
@@ -136,6 +136,7 @@ export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
diff --git a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
index 5d4b0ed58adfb2..c23e14bc365aeb 100644
--- a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
@@ -46,6 +46,7 @@ export default function FormRegularField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
@@ -112,6 +113,7 @@ export default function FormRegularField< Item >( {
 							field={ fieldDefinition }
 							onChange={ onChange }
 							hideLabelFromVision
+							markWhenOptional={ markWhenOptional }
 							validity={ validity }
 						/>
 					) }
@@ -144,6 +146,7 @@ export default function FormRegularField< Item >( {
 					hideLabelFromVision={
 						labelPosition === 'none' ? true : hideLabelFromVision
 					}
+					markWhenOptional={ markWhenOptional }
 					validity={ validity }
 				/>
 			) }
diff --git a/packages/dataviews/src/components/dataform-layouts/row/index.tsx b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
index 13ae1137b41b23..2f6cc69132fc35 100644
--- a/packages/dataviews/src/components/dataform-layouts/row/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
@@ -42,6 +42,7 @@ export default function FormRowField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const layout = field.layout as NormalizedRowLayout;
@@ -76,6 +77,7 @@ export default function FormRowField< Item >( {
 									field={ childField }
 									onChange={ onChange }
 									hideLabelFromVision={ hideLabelFromVision }
+									markWhenOptional={ markWhenOptional }
 									validity={ childFieldValidity }
 								/>
 							</div>
@@ -98,6 +100,7 @@ export default function FormRowField< Item >( {
 					data={ data }
 					field={ field }
 					onChange={ onChange }
+					markWhenOptional={ markWhenOptional }
 					validity={ validity }
 				/>
 			</div>
diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts
index 62aa7ed7b5b7bb..db568f5e432fad 100644
--- a/packages/dataviews/src/types/dataform.ts
+++ b/packages/dataviews/src/types/dataform.ts
@@ -165,5 +165,6 @@ export interface FieldLayoutProps< Item > {
 	field: NormalizedFormField;
 	onChange: ( value: any ) => void;
 	hideLabelFromVision?: boolean;
+	markWhenOptional?: boolean;
 	validity?: FieldValidity;
 }
diff --git a/packages/dataviews/src/types/field-api.ts b/packages/dataviews/src/types/field-api.ts
index bdea28b55a55b3..fb5719ec7afc05 100644
--- a/packages/dataviews/src/types/field-api.ts
+++ b/packages/dataviews/src/types/field-api.ts
@@ -417,6 +417,10 @@ export type DataFormControlProps< Item > = {
 	field: NormalizedField< Item >;
 	onChange: ( value: DeepPartial< Item > ) => void;
 	hideLabelFromVision?: boolean;
+	/**
+	 * Label the control as "optional" when _not_ required, instead of showing "required".
+	 */
+	markWhenOptional?: boolean;
 	/**
 	 * The currently selected filter operator for this field.
 	 *

From 16e3fab15ef63c089228e32a42d57cd52397e7b0 Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Thu, 8 Jan 2026 10:16:23 +0530
Subject: [PATCH 02/15] Add CHANGELOG entry for markWhenOptional

---
 packages/dataviews/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 2758211c0353e3..341f74d96281a3 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -25,6 +25,7 @@
 
 ### Enhancements
 
+- DataForm: Add `markWhenOptional` prop to the Field API Edit configuration, allowing fields to display "(Optional)" labels instead of "(Required)". [#74417](https://github.com/WordPress/gutenberg/issues/74417)
 - DataViewsPicker: Ensure checkbox column in table picker layout is always `48px` wide. [#74181](https://github.com/WordPress/gutenberg/pull/74181)
 - DataViews: improve how hierarchy is displayed in table layout. [#74199](https://github.com/WordPress/gutenberg/pull/74199)
 - DataViews: Add `groupBy.showLabel` config option to control whether the field label is shown in group headers. [#74161](https://github.com/WordPress/gutenberg/pull/74161)

From 96cd4c7d7dbec7108563ccd9abc2152228fc0c0e Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Thu, 8 Jan 2026 10:18:50 +0530
Subject: [PATCH 03/15] Update CHANGELOG with PR link

---
 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 341f74d96281a3..70e412b82205c1 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -25,7 +25,7 @@
 
 ### Enhancements
 
-- DataForm: Add `markWhenOptional` prop to the Field API Edit configuration, allowing fields to display "(Optional)" labels instead of "(Required)". [#74417](https://github.com/WordPress/gutenberg/issues/74417)
+- DataForm: Add `markWhenOptional` prop to the Field API Edit configuration, allowing fields to display "(Optional)" labels instead of "(Required)". [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViewsPicker: Ensure checkbox column in table picker layout is always `48px` wide. [#74181](https://github.com/WordPress/gutenberg/pull/74181)
 - DataViews: improve how hierarchy is displayed in table layout. [#74199](https://github.com/WordPress/gutenberg/pull/74199)
 - DataViews: Add `groupBy.showLabel` config option to control whether the field label is shown in group headers. [#74161](https://github.com/WordPress/gutenberg/pull/74161)

From 1a7fdeeaeb1b5af4600786a3755edda49f889bf9 Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Fri, 9 Jan 2026 15:26:42 +0530
Subject: [PATCH 04/15] Add form-level labelMode for required/optional field
 labeling

---
 .../dataform-layouts/card/index.tsx           |  1 +
 .../dataform-layouts/data-form-layout.tsx     |  1 +
 .../dataform-layouts/details/index.tsx        |  1 +
 .../dataform-layouts/normalize-form.ts        |  1 +
 .../dataform-layouts/panel/dropdown.tsx       |  1 +
 .../dataform-layouts/panel/modal.tsx          |  1 +
 .../dataform-layouts/regular/index.tsx        |  1 +
 .../components/dataform-layouts/row/index.tsx |  1 +
 packages/dataviews/src/dataform/index.tsx     | 25 ++++++++++++++++++-
 .../src/dataform/stories/index.story.tsx      |  6 +++++
 .../src/dataform/stories/validation.tsx       |  7 +++++-
 packages/dataviews/src/types/dataform.ts      |  2 ++
 12 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-layouts/card/index.tsx b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
index e078a228fdee25..9c9d3c133edf25 100644
--- a/packages/dataviews/src/components/dataform-layouts/card/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
@@ -180,6 +180,7 @@ export default function FormCardField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT as NormalizedLayout,
 			fields: field.children ?? [],
+			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
index 517a915300415f..44dbf305a0add9 100644
--- a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
@@ -97,6 +97,7 @@ export function DataFormLayout< Item >( {
 						data={ data }
 						field={ formField }
 						onChange={ onChange }
+						markWhenOptional={ form.labelMode === 'showOptional' }
 						validity={ validity?.[ formField.id ] }
 					/>
 				);
diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index 8ed0f42b1b7140..ccd63420399d0f 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -28,6 +28,7 @@ export default function FormDetailsField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT,
 			fields: field.children ?? [],
+			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/normalize-form.ts b/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
index a7b6515d4759be..5417948e9623b0 100644
--- a/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
+++ b/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
@@ -142,6 +142,7 @@ function normalizeForm( form: Form ): NormalizedForm {
 	return {
 		layout: normalizedFormLayout,
 		fields: normalizedFields,
+		labelMode: 'showRequired',
 	};
 }
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
index 0fbd63f9ea2572..f364350189b766 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
@@ -90,6 +90,7 @@ function PanelDropdown< Item >( {
 				? field.children
 				: // If not explicit children return the field id itself.
 				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
+			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
index ee15fea15c0543..10488631cf33e4 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
@@ -59,6 +59,7 @@ function ModalContent< Item >( {
 				? field.children
 				: // If not explicit children return the field id itself.
 				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
+			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
index c23e14bc365aeb..a4d47e65e04c1a 100644
--- a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
@@ -56,6 +56,7 @@ export default function FormRegularField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT,
 			fields: !! field.children ? field.children : [],
+			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/row/index.tsx b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
index 2f6cc69132fc35..559fc30c391829 100644
--- a/packages/dataviews/src/components/dataform-layouts/row/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
@@ -51,6 +51,7 @@ export default function FormRowField< Item >( {
 		const form: NormalizedForm = {
 			layout: DEFAULT_LAYOUT as NormalizedLayout,
 			fields: field.children,
+			labelMode: 'showRequired',
 		};
 
 		return (
diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index a634f43fa4b6bc..7b7d9d0641c4af 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -25,6 +25,29 @@ export default function DataForm< Item >( {
 		[ fields ]
 	);
 
+	// Calculate required count for stable dependency
+	const requiredCount = useMemo(
+		() => normalizedFields.filter( ( f ) => !! f.isValid?.required ).length,
+		[ normalizedFields ]
+	);
+
+	// Resolve labelMode (handles 'auto')
+	const effectiveLabelMode: 'showRequired' | 'showOptional' = useMemo( () => {
+		if ( form.labelMode === 'showOptional' ) return 'showOptional';
+		if ( form.labelMode === 'showRequired' ) return 'showRequired';
+		if ( form.labelMode === 'auto' ) {
+			const optionalCount = normalizedFields.length - requiredCount;
+			return requiredCount >= optionalCount ? 'showOptional' : 'showRequired';
+		}
+		return 'showRequired';
+	}, [ form.labelMode, requiredCount, normalizedFields.length ] );
+
+	// Merge resolved labelMode into form
+	const formWithResolvedLabelMode = useMemo(
+		() => ( { ...normalizedForm, labelMode: effectiveLabelMode } ),
+		[ normalizedForm, effectiveLabelMode ]
+	);
+
 	if ( ! form.fields ) {
 		return null;
 	}
@@ -33,7 +56,7 @@ export default function DataForm< Item >( {
 		<DataFormProvider fields={ normalizedFields }>
 			<DataFormLayout
 				data={ data }
-				form={ normalizedForm }
+				form={ formWithResolvedLabelMode }
 				onChange={ onChange }
 				validity={ validity }
 			/>
diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index 3f5323578fb66d..c84844debe8269 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -102,6 +102,11 @@ export const Validation = {
 			description: 'Choose the form layout type.',
 			options: [ 'regular', 'panel', 'card', 'details' ],
 		},
+		labelMode: {
+			control: { type: 'select' },
+			description: 'How to label required/optional fields.',
+			options: [ 'showRequired', 'showOptional', 'auto' ],
+		},
 		required: {
 			control: { type: 'boolean' },
 			description:
@@ -131,6 +136,7 @@ export const Validation = {
 	},
 	args: {
 		layout: 'regular',
+		labelMode: 'showRequired',
 		required: true,
 		elements: 'sync',
 		custom: 'sync',
diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx
index 59158c5c2ebaff..65d2a115fd9f00 100644
--- a/packages/dataviews/src/dataform/stories/validation.tsx
+++ b/packages/dataviews/src/dataform/stories/validation.tsx
@@ -80,6 +80,7 @@ const ValidationComponent = ( {
 	pattern,
 	minMax,
 	layout,
+	labelMode,
 }: {
 	required: boolean;
 	elements: 'sync' | 'async' | 'none';
@@ -87,6 +88,7 @@ const ValidationComponent = ( {
 	pattern: boolean;
 	minMax: boolean;
 	layout: 'regular' | 'panel' | 'card' | 'details';
+	labelMode: 'showRequired' | 'showOptional' | 'auto';
 } ) => {
 	type ValidatedItem = {
 		text: string;
@@ -805,6 +807,7 @@ const ValidationComponent = ( {
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {
 			return {
+				labelMode,
 				fields: [
 					'text',
 					{ id: 'customEdit' },
@@ -903,6 +906,7 @@ const ValidationComponent = ( {
 
 		if ( layout === 'panel' ) {
 			return {
+				labelMode,
 				layout: { type: 'panel' as const },
 				fields: groupedFields,
 			};
@@ -916,10 +920,11 @@ const ValidationComponent = ( {
 		}
 
 		return {
+			labelMode,
 			layout: { type: 'card' as const },
 			fields: groupedFields,
 		};
-	}, [ layout ] );
+	}, [ layout, labelMode ] );
 
 	const { validity, isValid } = useFormValidity( post, _fields, form );
 
diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts
index db568f5e432fad..619e17e2257e5d 100644
--- a/packages/dataviews/src/types/dataform.ts
+++ b/packages/dataviews/src/types/dataform.ts
@@ -144,10 +144,12 @@ export type NormalizedFormField = {
 export type Form = {
 	layout?: Layout;
 	fields?: Array< FormField | string >;
+	labelMode?: 'showRequired' | 'showOptional' | 'auto';
 };
 export type NormalizedForm = {
 	layout: NormalizedLayout;
 	fields: NormalizedFormField[];
+	labelMode: 'showRequired' | 'showOptional';
 };
 
 export interface DataFormProps< Item > {

From ef94d7511f1caa153807181d0f9c7d3fe041a455 Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Sat, 10 Jan 2026 04:09:21 +0530
Subject: [PATCH 05/15] Fix ESLint errors and update unit tests for labelMode

---
 .../dataform-layouts/details/index.tsx        |  1 +
 .../dataform-layouts/panel/index.tsx          |  1 +
 .../dataform-layouts/test/normalize-form.ts   | 23 ++++++++++++++++---
 packages/dataviews/src/dataform/index.tsx     | 12 +++++++---
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index ccd63420399d0f..992be1866720f6 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -20,6 +20,7 @@ export default function FormDetailsField< Item >( {
 	data,
 	field,
 	onChange,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	markWhenOptional,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
index 33d49bca281de9..34c699a2074325 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
@@ -136,6 +136,7 @@ export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
diff --git a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
index 86be7cd94f6612..79b84544700278 100644
--- a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
+++ b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
@@ -11,6 +11,7 @@ describe( 'normalizeFormFields', () => {
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
 				fields: [],
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 			} );
 		} );
@@ -20,6 +21,7 @@ describe( 'normalizeFormFields', () => {
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
 				fields: [],
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 			} );
 		} );
@@ -32,6 +34,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -64,6 +67,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -94,6 +98,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -114,6 +119,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: { labelPosition: 'side', type: 'regular' },
 				fields: [
 					{
@@ -134,6 +140,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					labelPosition: 'side',
 					type: 'panel',
@@ -161,6 +168,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					labelPosition: 'top',
 					type: 'panel',
@@ -188,6 +196,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: true,
@@ -224,6 +233,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: false,
@@ -258,6 +268,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: true,
@@ -296,6 +307,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					withHeader: true,
@@ -339,9 +351,10 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				layout: {
-					type: 'regular',
-					labelPosition: 'top',
+			labelMode: 'showRequired',
+			layout: {
+				type: 'regular',
+				labelPosition: 'top',
 				},
 				fields: [
 					{
@@ -377,6 +390,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
+				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: false,
@@ -427,6 +441,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
+				labelMode: 'showRequired',
 				layout: { type: 'regular', labelPosition: 'top' },
 				fields: [
 					{
@@ -479,6 +494,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
+				labelMode: 'showRequired',
 				layout: { type: 'regular', labelPosition: 'top' },
 				fields: [
 					{
@@ -544,6 +560,7 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
+				labelMode: 'showRequired',
 				layout: CARD,
 				fields: [
 					{
diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index 7b7d9d0641c4af..563a3589890ea2 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -33,11 +33,17 @@ export default function DataForm< Item >( {
 
 	// Resolve labelMode (handles 'auto')
 	const effectiveLabelMode: 'showRequired' | 'showOptional' = useMemo( () => {
-		if ( form.labelMode === 'showOptional' ) return 'showOptional';
-		if ( form.labelMode === 'showRequired' ) return 'showRequired';
+		if ( form.labelMode === 'showOptional' ) {
+			return 'showOptional';
+		}
+		if ( form.labelMode === 'showRequired' ) {
+			return 'showRequired';
+		}
 		if ( form.labelMode === 'auto' ) {
 			const optionalCount = normalizedFields.length - requiredCount;
-			return requiredCount >= optionalCount ? 'showOptional' : 'showRequired';
+			return requiredCount >= optionalCount
+				? 'showOptional'
+				: 'showRequired';
 		}
 		return 'showRequired';
 	}, [ form.labelMode, requiredCount, normalizedFields.length ] );

From 4c44414192cb804cc241ca5cfe8686543e4c4fb9 Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Sat, 10 Jan 2026 04:27:58 +0530
Subject: [PATCH 06/15] Fix nested ternary and unused var ESLint errors

---
 .../src/components/dataform-controls/date.tsx | 22 ++++++++++---------
 .../components/dataform-controls/datetime.tsx | 12 +++++-----
 .../dataform-layouts/details/index.tsx        |  3 +--
 .../dataform-layouts/panel/index.tsx          |  3 +--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-controls/date.tsx b/packages/dataviews/src/components/dataform-controls/date.tsx
index 318f2ad6b075ae..d5edbb26a8acc5 100644
--- a/packages/dataviews/src/components/dataform-controls/date.tsx
+++ b/packages/dataviews/src/components/dataform-controls/date.tsx
@@ -334,11 +334,12 @@ function CalendarDateControl< Item >( {
 		timezone: { string: timezoneString },
 	} = getSettings();
 
-	const displayLabel = isValid?.required && ! markWhenOptional
-		? `${ label } (${ __( 'Required' ) })`
-		: ! isValid?.required && markWhenOptional
-		? `${ label } (${ __( 'Optional' ) })`
-		: label;
+	let displayLabel = label;
+	if ( isValid?.required && ! markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if ( ! isValid?.required && markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<ValidatedDateControl
@@ -545,11 +546,12 @@ function CalendarDateRangeControl< Item >( {
 
 	const { timezone } = getSettings();
 
-	const displayLabel = field.isValid?.required && ! markWhenOptional
-		? `${ label } (${ __( 'Required' ) })`
-		: ! field.isValid?.required && markWhenOptional
-		? `${ label } (${ __( 'Optional' ) })`
-		: label;
+	let displayLabel = label;
+	if ( field.isValid?.required && ! markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if ( ! field.isValid?.required && markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<ValidatedDateControl
diff --git a/packages/dataviews/src/components/dataform-controls/datetime.tsx b/packages/dataviews/src/components/dataform-controls/datetime.tsx
index 74ce6af47497f3..e7accb834c658c 100644
--- a/packages/dataviews/src/components/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/components/dataform-controls/datetime.tsx
@@ -156,12 +156,12 @@ function CalendarDateTimeControl< Item >( {
 		timezone: { string: timezoneString },
 	} = getSettings();
 
-	const displayLabel =
-		isValid?.required && ! markWhenOptional && ! hideLabelFromVision
-			? `${ label } (${ __( 'Required' ) })`
-			: ! isValid?.required && markWhenOptional && ! hideLabelFromVision
-			? `${ label } (${ __( 'Optional' ) })`
-			: label;
+	let displayLabel = label;
+	if ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if ( ! isValid?.required && markWhenOptional && ! hideLabelFromVision ) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<BaseControl
diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index 992be1866720f6..0d7df8e6c2b733 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -20,8 +20,7 @@ export default function FormDetailsField< Item >( {
 	data,
 	field,
 	onChange,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	markWhenOptional,
+	markWhenOptional: _markWhenOptional,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
index 34c699a2074325..5a9a7e9eb5f784 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
@@ -136,8 +136,7 @@ export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	markWhenOptional,
+	markWhenOptional: _markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );

From 371100c5156eb1f274243d11b6c8efdb6281c89c Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Thu, 15 Jan 2026 11:10:38 +0530
Subject: [PATCH 07/15] Fix ESLint errors: prettier formatting and remove
 unused vars

---
 .../src/components/dataform-controls/datetime.tsx         | 6 +++++-
 .../src/components/dataform-layouts/details/index.tsx     | 1 -
 .../src/components/dataform-layouts/panel/index.tsx       | 1 -
 .../components/dataform-layouts/test/normalize-form.ts    | 8 ++++----
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-controls/datetime.tsx b/packages/dataviews/src/components/dataform-controls/datetime.tsx
index e7accb834c658c..469e412e9843ba 100644
--- a/packages/dataviews/src/components/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/components/dataform-controls/datetime.tsx
@@ -159,7 +159,11 @@ function CalendarDateTimeControl< Item >( {
 	let displayLabel = label;
 	if ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {
 		displayLabel = `${ label } (${ __( 'Required' ) })`;
-	} else if ( ! isValid?.required && markWhenOptional && ! hideLabelFromVision ) {
+	} else if (
+		! isValid?.required &&
+		markWhenOptional &&
+		! hideLabelFromVision
+	) {
 		displayLabel = `${ label } (${ __( 'Optional' ) })`;
 	}
 
diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index 0d7df8e6c2b733..196364563e1ab7 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -20,7 +20,6 @@ export default function FormDetailsField< Item >( {
 	data,
 	field,
 	onChange,
-	markWhenOptional: _markWhenOptional,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
index 5a9a7e9eb5f784..4e33267985a04a 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/index.tsx
@@ -136,7 +136,6 @@ export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
-	markWhenOptional: _markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
diff --git a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
index 79b84544700278..b39ca0dda75de5 100644
--- a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
+++ b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
@@ -351,10 +351,10 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-			labelMode: 'showRequired',
-			layout: {
-				type: 'regular',
-				labelPosition: 'top',
+				labelMode: 'showRequired',
+				layout: {
+					type: 'regular',
+					labelPosition: 'top',
 				},
 				fields: [
 					{

From 326a043ef6cb24530f5fcf3759ac5b0d9637dc71 Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Mon, 26 Jan 2026 19:48:46 +0530
Subject: [PATCH 08/15] DataForm: Refactor to auto-only field labeling

- Remove configurable form.labelMode prop
- Add markWhenOptional to DataFormContext (auto-computed)
- Fix nested forms to inherit labeling via Context
- Mark minority of fields (required OR optional) to reduce noise

Addresses feedback from @ntsekouras and @jameskoster:
- Auto-only behavior, no configurable prop
- Nested forms now correctly inherit labeling
---
 packages/dataviews/CHANGELOG.md               |  2 +-
 .../src/components/dataform-context/index.tsx | 13 +++++-
 .../dataform-layouts/card/index.tsx           |  1 -
 .../dataform-layouts/data-form-layout.tsx     |  5 ++-
 .../dataform-layouts/details/index.tsx        |  1 -
 .../dataform-layouts/normalize-form.ts        |  1 -
 .../dataform-layouts/panel/dropdown.tsx       |  1 -
 .../dataform-layouts/panel/modal.tsx          |  1 -
 .../dataform-layouts/regular/index.tsx        |  1 -
 .../components/dataform-layouts/row/index.tsx |  1 -
 .../dataform-layouts/test/normalize-form.ts   | 17 -------
 packages/dataviews/src/dataform/index.tsx     | 44 ++++++-------------
 .../src/dataform/stories/index.story.tsx      |  6 ---
 .../src/dataform/stories/validation.tsx       |  7 +--
 packages/dataviews/src/types/dataform.ts      |  2 -
 15 files changed, 30 insertions(+), 73 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 70e412b82205c1..92adcc094d0b03 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -25,7 +25,7 @@
 
 ### Enhancements
 
-- DataForm: Add `markWhenOptional` prop to the Field API Edit configuration, allowing fields to display "(Optional)" labels instead of "(Required)". [#74430](https://github.com/WordPress/gutenberg/pull/74430)
+- DataForm: Add automatic field labeling - forms now automatically mark the minority of fields (required or optional) to reduce visual noise. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViewsPicker: Ensure checkbox column in table picker layout is always `48px` wide. [#74181](https://github.com/WordPress/gutenberg/pull/74181)
 - DataViews: improve how hierarchy is displayed in table layout. [#74199](https://github.com/WordPress/gutenberg/pull/74199)
 - DataViews: Add `groupBy.showLabel` config option to control whether the field label is shown in group headers. [#74161](https://github.com/WordPress/gutenberg/pull/74161)
diff --git a/packages/dataviews/src/components/dataform-context/index.tsx b/packages/dataviews/src/components/dataform-context/index.tsx
index b0ab74661f1edc..fc97b9a7af329a 100644
--- a/packages/dataviews/src/components/dataform-context/index.tsx
+++ b/packages/dataviews/src/components/dataform-context/index.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -10,21 +10,30 @@ import type { NormalizedField } from '../../types';
 
 type DataFormContextType< Item > = {
 	fields: NormalizedField< Item >[];
+	markWhenOptional: boolean;
 };
 
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
+	markWhenOptional: false,
 } );
 DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,
+	markWhenOptional,
 	children,
 }: React.PropsWithChildren< {
 	fields: NormalizedField< Item >[];
+	markWhenOptional: boolean;
 } > ) {
+	// Memoize to prevent unnecessary re-renders
+	const value = useMemo(
+		() => ( { fields, markWhenOptional } ),
+		[ fields, markWhenOptional ]
+	);
 	return (
-		<DataFormContext.Provider value={ { fields } }>
+		<DataFormContext.Provider value={ value }>
 			{ children }
 		</DataFormContext.Provider>
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/card/index.tsx b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
index 9c9d3c133edf25..e078a228fdee25 100644
--- a/packages/dataviews/src/components/dataform-layouts/card/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/card/index.tsx
@@ -180,7 +180,6 @@ export default function FormCardField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT as NormalizedLayout,
 			fields: field.children ?? [],
-			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
index 44dbf305a0add9..32388763e3a98c 100644
--- a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
@@ -48,7 +48,8 @@ export function DataFormLayout< Item >( {
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
-	const { fields: fieldDefinitions } = useContext( DataFormContext );
+	const { fields: fieldDefinitions, markWhenOptional } =
+		useContext( DataFormContext );
 
 	function getFieldDefinition( field: NormalizedFormField ) {
 		return fieldDefinitions.find(
@@ -97,7 +98,7 @@ export function DataFormLayout< Item >( {
 						data={ data }
 						field={ formField }
 						onChange={ onChange }
-						markWhenOptional={ form.labelMode === 'showOptional' }
+						markWhenOptional={ markWhenOptional }
 						validity={ validity?.[ formField.id ] }
 					/>
 				);
diff --git a/packages/dataviews/src/components/dataform-layouts/details/index.tsx b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
index 196364563e1ab7..47f497b6a2a4df 100644
--- a/packages/dataviews/src/components/dataform-layouts/details/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/details/index.tsx
@@ -27,7 +27,6 @@ export default function FormDetailsField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT,
 			fields: field.children ?? [],
-			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/normalize-form.ts b/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
index 5417948e9623b0..a7b6515d4759be 100644
--- a/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
+++ b/packages/dataviews/src/components/dataform-layouts/normalize-form.ts
@@ -142,7 +142,6 @@ function normalizeForm( form: Form ): NormalizedForm {
 	return {
 		layout: normalizedFormLayout,
 		fields: normalizedFields,
-		labelMode: 'showRequired',
 	};
 }
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
index f364350189b766..0fbd63f9ea2572 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
@@ -90,7 +90,6 @@ function PanelDropdown< Item >( {
 				? field.children
 				: // If not explicit children return the field id itself.
 				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
-			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
index 10488631cf33e4..ee15fea15c0543 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
@@ -59,7 +59,6 @@ function ModalContent< Item >( {
 				? field.children
 				: // If not explicit children return the field id itself.
 				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
-			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
index a4d47e65e04c1a..c23e14bc365aeb 100644
--- a/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/regular/index.tsx
@@ -56,7 +56,6 @@ export default function FormRegularField< Item >( {
 		() => ( {
 			layout: DEFAULT_LAYOUT,
 			fields: !! field.children ? field.children : [],
-			labelMode: 'showRequired',
 		} ),
 		[ field ]
 	);
diff --git a/packages/dataviews/src/components/dataform-layouts/row/index.tsx b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
index 559fc30c391829..2f6cc69132fc35 100644
--- a/packages/dataviews/src/components/dataform-layouts/row/index.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/row/index.tsx
@@ -51,7 +51,6 @@ export default function FormRowField< Item >( {
 		const form: NormalizedForm = {
 			layout: DEFAULT_LAYOUT as NormalizedLayout,
 			fields: field.children,
-			labelMode: 'showRequired',
 		};
 
 		return (
diff --git a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
index b39ca0dda75de5..86be7cd94f6612 100644
--- a/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
+++ b/packages/dataviews/src/components/dataform-layouts/test/normalize-form.ts
@@ -11,7 +11,6 @@ describe( 'normalizeFormFields', () => {
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
 				fields: [],
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 			} );
 		} );
@@ -21,7 +20,6 @@ describe( 'normalizeFormFields', () => {
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
 				fields: [],
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 			} );
 		} );
@@ -34,7 +32,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -67,7 +64,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -98,7 +94,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'top', type: 'regular' },
 				fields: [
 					{
@@ -119,7 +114,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: { labelPosition: 'side', type: 'regular' },
 				fields: [
 					{
@@ -140,7 +134,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					labelPosition: 'side',
 					type: 'panel',
@@ -168,7 +161,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					labelPosition: 'top',
 					type: 'panel',
@@ -196,7 +188,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: true,
@@ -233,7 +224,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: false,
@@ -268,7 +258,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: true,
@@ -307,7 +296,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					withHeader: true,
@@ -351,7 +339,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'regular',
 					labelPosition: 'top',
@@ -390,7 +377,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toEqual( {
-				labelMode: 'showRequired',
 				layout: {
 					type: 'card',
 					isCollapsible: false,
@@ -441,7 +427,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
-				labelMode: 'showRequired',
 				layout: { type: 'regular', labelPosition: 'top' },
 				fields: [
 					{
@@ -494,7 +479,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
-				labelMode: 'showRequired',
 				layout: { type: 'regular', labelPosition: 'top' },
 				fields: [
 					{
@@ -560,7 +544,6 @@ describe( 'normalizeFormFields', () => {
 			};
 			const result = normalizeForm( form );
 			expect( result ).toStrictEqual( {
-				labelMode: 'showRequired',
 				layout: CARD,
 				fields: [
 					{
diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index 563a3589890ea2..6a00aae7cc2a29 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -25,44 +25,28 @@ export default function DataForm< Item >( {
 		[ fields ]
 	);
 
-	// Calculate required count for stable dependency
-	const requiredCount = useMemo(
-		() => normalizedFields.filter( ( f ) => !! f.isValid?.required ).length,
-		[ normalizedFields ]
-	);
-
-	// Resolve labelMode (handles 'auto')
-	const effectiveLabelMode: 'showRequired' | 'showOptional' = useMemo( () => {
-		if ( form.labelMode === 'showOptional' ) {
-			return 'showOptional';
-		}
-		if ( form.labelMode === 'showRequired' ) {
-			return 'showRequired';
-		}
-		if ( form.labelMode === 'auto' ) {
-			const optionalCount = normalizedFields.length - requiredCount;
-			return requiredCount >= optionalCount
-				? 'showOptional'
-				: 'showRequired';
-		}
-		return 'showRequired';
-	}, [ form.labelMode, requiredCount, normalizedFields.length ] );
-
-	// Merge resolved labelMode into form
-	const formWithResolvedLabelMode = useMemo(
-		() => ( { ...normalizedForm, labelMode: effectiveLabelMode } ),
-		[ normalizedForm, effectiveLabelMode ]
-	);
+	// Auto-compute: mark the minority of fields
+	// When counts are equal, mark optional fields (arbitrary but consistent)
+	const markWhenOptional = useMemo( () => {
+		const requiredCount = normalizedFields.filter(
+			( f ) => !! f.isValid?.required
+		).length;
+		const optionalCount = normalizedFields.length - requiredCount;
+		return requiredCount >= optionalCount;
+	}, [ normalizedFields ] );
 
 	if ( ! form.fields ) {
 		return null;
 	}
 
 	return (
-		<DataFormProvider fields={ normalizedFields }>
+		<DataFormProvider
+			fields={ normalizedFields }
+			markWhenOptional={ markWhenOptional }
+		>
 			<DataFormLayout
 				data={ data }
-				form={ formWithResolvedLabelMode }
+				form={ normalizedForm }
 				onChange={ onChange }
 				validity={ validity }
 			/>
diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index c84844debe8269..3f5323578fb66d 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -102,11 +102,6 @@ export const Validation = {
 			description: 'Choose the form layout type.',
 			options: [ 'regular', 'panel', 'card', 'details' ],
 		},
-		labelMode: {
-			control: { type: 'select' },
-			description: 'How to label required/optional fields.',
-			options: [ 'showRequired', 'showOptional', 'auto' ],
-		},
 		required: {
 			control: { type: 'boolean' },
 			description:
@@ -136,7 +131,6 @@ export const Validation = {
 	},
 	args: {
 		layout: 'regular',
-		labelMode: 'showRequired',
 		required: true,
 		elements: 'sync',
 		custom: 'sync',
diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx
index 65d2a115fd9f00..59158c5c2ebaff 100644
--- a/packages/dataviews/src/dataform/stories/validation.tsx
+++ b/packages/dataviews/src/dataform/stories/validation.tsx
@@ -80,7 +80,6 @@ const ValidationComponent = ( {
 	pattern,
 	minMax,
 	layout,
-	labelMode,
 }: {
 	required: boolean;
 	elements: 'sync' | 'async' | 'none';
@@ -88,7 +87,6 @@ const ValidationComponent = ( {
 	pattern: boolean;
 	minMax: boolean;
 	layout: 'regular' | 'panel' | 'card' | 'details';
-	labelMode: 'showRequired' | 'showOptional' | 'auto';
 } ) => {
 	type ValidatedItem = {
 		text: string;
@@ -807,7 +805,6 @@ const ValidationComponent = ( {
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {
 			return {
-				labelMode,
 				fields: [
 					'text',
 					{ id: 'customEdit' },
@@ -906,7 +903,6 @@ const ValidationComponent = ( {
 
 		if ( layout === 'panel' ) {
 			return {
-				labelMode,
 				layout: { type: 'panel' as const },
 				fields: groupedFields,
 			};
@@ -920,11 +916,10 @@ const ValidationComponent = ( {
 		}
 
 		return {
-			labelMode,
 			layout: { type: 'card' as const },
 			fields: groupedFields,
 		};
-	}, [ layout, labelMode ] );
+	}, [ layout ] );
 
 	const { validity, isValid } = useFormValidity( post, _fields, form );
 
diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts
index 619e17e2257e5d..db568f5e432fad 100644
--- a/packages/dataviews/src/types/dataform.ts
+++ b/packages/dataviews/src/types/dataform.ts
@@ -144,12 +144,10 @@ export type NormalizedFormField = {
 export type Form = {
 	layout?: Layout;
 	fields?: Array< FormField | string >;
-	labelMode?: 'showRequired' | 'showOptional' | 'auto';
 };
 export type NormalizedForm = {
 	layout: NormalizedLayout;
 	fields: NormalizedFormField[];
-	labelMode: 'showRequired' | 'showOptional';
 };
 
 export interface DataFormProps< Item > {

From 3770a3c10a3537042777db96f57d2958f59d87db Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Tue, 3 Feb 2026 23:48:35 +0530
Subject: [PATCH 09/15] DataViews: Move markWhenOptional to DataFormLayout,
 update validation story

- Move markWhenOptional computation from DataForm to DataFormLayout
- Remove markWhenOptional from context (per @ntsekouras)
- Change tie-breaker: equal counts now show required labels (>)
- Fix panel/dropdown and panel/modal to pass markWhenOptional
- Wire up validation story with fieldDistribution control
- Add unit tests for auto-compute logic
---
 .../src/components/dataform-context/index.tsx |  9 +--
 .../dataform-layouts/data-form-layout.tsx     | 21 ++++--
 .../dataform-layouts/panel/dropdown.tsx       |  4 +-
 .../dataform-layouts/panel/modal.tsx          |  8 +-
 packages/dataviews/src/dataform/index.tsx     | 15 +---
 .../src/dataform/stories/index.story.tsx      | 11 ++-
 .../src/dataform/stories/validation.tsx       | 73 +++++++++++-------
 .../src/dataform/test/auto-compute.ts         | 75 +++++++++++++++++++
 8 files changed, 157 insertions(+), 59 deletions(-)
 create mode 100644 packages/dataviews/src/dataform/test/auto-compute.ts

diff --git a/packages/dataviews/src/components/dataform-context/index.tsx b/packages/dataviews/src/components/dataform-context/index.tsx
index fc97b9a7af329a..6f3c094f0c74a1 100644
--- a/packages/dataviews/src/components/dataform-context/index.tsx
+++ b/packages/dataviews/src/components/dataform-context/index.tsx
@@ -10,28 +10,21 @@ import type { NormalizedField } from '../../types';
 
 type DataFormContextType< Item > = {
 	fields: NormalizedField< Item >[];
-	markWhenOptional: boolean;
 };
 
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
-	markWhenOptional: false,
 } );
 DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,
-	markWhenOptional,
 	children,
 }: React.PropsWithChildren< {
 	fields: NormalizedField< Item >[];
-	markWhenOptional: boolean;
 } > ) {
 	// Memoize to prevent unnecessary re-renders
-	const value = useMemo(
-		() => ( { fields, markWhenOptional } ),
-		[ fields, markWhenOptional ]
-	);
+	const value = useMemo( () => ( { fields } ), [ fields ] );
 	return (
 		<DataFormContext.Provider value={ value }>
 			{ children }
diff --git a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
index 32388763e3a98c..e632e0741c4eb6 100644
--- a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -44,12 +44,22 @@ export function DataFormLayout< Item >( {
 			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
 		childField: NormalizedFormField,
-		childFieldValidity?: FieldValidity
+		childFieldValidity?: FieldValidity,
+		markWhenOptional?: boolean
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
-	const { fields: fieldDefinitions, markWhenOptional } =
-		useContext( DataFormContext );
+	const { fields: fieldDefinitions } = useContext( DataFormContext );
+
+	// Auto-compute: mark the minority of fields
+	// When counts are equal, mark required fields (per @ntsekouras feedback)
+	const markWhenOptional = useMemo( () => {
+		const requiredCount = fieldDefinitions.filter(
+			( f ) => !! f.isValid?.required
+		).length;
+		const optionalCount = fieldDefinitions.length - requiredCount;
+		return requiredCount > optionalCount;
+	}, [ fieldDefinitions ] );
 
 	function getFieldDefinition( field: NormalizedFormField ) {
 		return fieldDefinitions.find(
@@ -88,7 +98,8 @@ export function DataFormLayout< Item >( {
 					return children(
 						FieldLayout,
 						formField,
-						validity?.[ formField.id ]
+						validity?.[ formField.id ],
+						markWhenOptional
 					);
 				}
 
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
index 0fbd63f9ea2572..fb5629e805ac2d 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/dropdown.tsx
@@ -159,7 +159,8 @@ function PanelDropdown< Item >( {
 							{ (
 								FieldLayout,
 								childField,
-								childFieldValidity
+								childFieldValidity,
+								markWhenOptional
 							) => (
 								<FieldLayout
 									key={ childField.id }
@@ -169,6 +170,7 @@ function PanelDropdown< Item >( {
 									hideLabelFromVision={
 										( form?.fields ?? [] ).length < 2
 									}
+									markWhenOptional={ markWhenOptional }
 									validity={ childFieldValidity }
 								/>
 							) }
diff --git a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
index ee15fea15c0543..9116db8f77de1d 100644
--- a/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/panel/modal.tsx
@@ -108,13 +108,19 @@ function ModalContent< Item >( {
 					onChange={ handleOnChange }
 					validity={ validity }
 				>
-					{ ( FieldLayout, childField, childFieldValidity ) => (
+					{ (
+						FieldLayout,
+						childField,
+						childFieldValidity,
+						markWhenOptional
+					) => (
 						<FieldLayout
 							key={ childField.id }
 							data={ modalData }
 							field={ childField }
 							onChange={ handleOnChange }
 							hideLabelFromVision={ form.fields.length < 2 }
+							markWhenOptional={ markWhenOptional }
 							validity={ childFieldValidity }
 						/>
 					) }
diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index 6a00aae7cc2a29..a634f43fa4b6bc 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -25,25 +25,12 @@ export default function DataForm< Item >( {
 		[ fields ]
 	);
 
-	// Auto-compute: mark the minority of fields
-	// When counts are equal, mark optional fields (arbitrary but consistent)
-	const markWhenOptional = useMemo( () => {
-		const requiredCount = normalizedFields.filter(
-			( f ) => !! f.isValid?.required
-		).length;
-		const optionalCount = normalizedFields.length - requiredCount;
-		return requiredCount >= optionalCount;
-	}, [ normalizedFields ] );
-
 	if ( ! form.fields ) {
 		return null;
 	}
 
 	return (
-		<DataFormProvider
-			fields={ normalizedFields }
-			markWhenOptional={ markWhenOptional }
-		>
+		<DataFormProvider fields={ normalizedFields }>
 			<DataFormLayout
 				data={ data }
 				form={ normalizedForm }
diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index 3f5323578fb66d..e859469a0e4c3e 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -100,12 +100,18 @@ export const Validation = {
 		layout: {
 			control: { type: 'select' },
 			description: 'Choose the form layout type.',
-			options: [ 'regular', 'panel', 'card', 'details' ],
+			options: [ 'regular', 'panel', 'card' ],
+		},
+		fieldDistribution: {
+			control: { type: 'select' },
+			description:
+				'Field distribution for demonstrating markWhenOptional behavior. Use this to see how the minority of fields gets labeled.',
+			options: [ 'allSame', 'mostlyRequired', 'mostlyOptional' ],
 		},
 		required: {
 			control: { type: 'boolean' },
 			description:
-				'Whether or not the required validation rule is active.',
+				'Whether or not the required validation rule is active (only applies when fieldDistribution is allSame).',
 		},
 		elements: {
 			control: { type: 'select' },
@@ -131,6 +137,7 @@ export const Validation = {
 	},
 	args: {
 		layout: 'regular',
+		fieldDistribution: 'allSame',
 		required: true,
 		elements: 'sync',
 		custom: 'sync',
diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx
index 59158c5c2ebaff..367e4b6c13e0f1 100644
--- a/packages/dataviews/src/dataform/stories/validation.tsx
+++ b/packages/dataviews/src/dataform/stories/validation.tsx
@@ -21,6 +21,11 @@ import { unlock } from '../../lock-unlock';
 
 const { ValidatedTextControl } = unlock( privateApis );
 
+// Module-level constants for field distribution demo
+// These define which fields are optional/required in the demo scenarios
+const OPTIONAL_FIELDS = [ 'color', 'toggle', 'toggleGroup' ];
+const REQUIRED_ONLY_FIELDS = [ 'text', 'email', 'password' ];
+
 function getCustomValidity< Item >(
 	isValid: NormalizedRules< Item >,
 	validity: FieldValidity | undefined
@@ -75,6 +80,7 @@ function CustomEditControl< Item >( {
 
 const ValidationComponent = ( {
 	required,
+	fieldDistribution,
 	elements,
 	custom,
 	pattern,
@@ -82,11 +88,12 @@ const ValidationComponent = ( {
 	layout,
 }: {
 	required: boolean;
+	fieldDistribution: 'allSame' | 'mostlyRequired' | 'mostlyOptional';
 	elements: 'sync' | 'async' | 'none';
 	custom: 'sync' | 'async' | 'none';
 	pattern: boolean;
 	minMax: boolean;
-	layout: 'regular' | 'panel' | 'card' | 'details';
+	layout: 'regular' | 'panel' | 'card';
 } ) => {
 	type ValidatedItem = {
 		text: string;
@@ -134,6 +141,23 @@ const ValidationComponent = ( {
 		datetime: undefined,
 	} );
 
+	// Helper to determine if a field should be required based on fieldDistribution
+	// Uses module-level OPTIONAL_FIELDS and REQUIRED_ONLY_FIELDS constants
+	const getIsRequired = useCallback(
+		( fieldId: string ): boolean => {
+			switch ( fieldDistribution ) {
+				case 'mostlyRequired':
+					return ! OPTIONAL_FIELDS.includes( fieldId );
+				case 'mostlyOptional':
+					return REQUIRED_ONLY_FIELDS.includes( fieldId );
+				case 'allSame':
+				default:
+					return required;
+			}
+		},
+		[ fieldDistribution, required ]
+	);
+
 	// Cache for getElements functions - ensures promises are only created once
 	const getElements = useMemo( () => {
 		const promiseCache: Record< string, Promise< any > > = {};
@@ -488,7 +512,7 @@ const ValidationComponent = ( {
 					'Letters, numbers, underscores only AND 5-20 characters'
 				),
 				isValid: {
-					required,
+					required: getIsRequired( 'text' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextRule ),
 					pattern: pattern ? '^[a-zA-Z0-9_]+$' : undefined,
@@ -510,7 +534,7 @@ const ValidationComponent = ( {
 				getElements:
 					elements === 'async' ? getElements( 'select' ) : undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'select' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customSelectRule ),
 				},
@@ -532,7 +556,7 @@ const ValidationComponent = ( {
 						? getElements( 'textWithRadio' )
 						: undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'textWithRadio' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextRadioRule ),
 				},
@@ -547,7 +571,7 @@ const ValidationComponent = ( {
 					? 'Must be between 10 and 200 characters'
 					: undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'textarea' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextareaRule ),
 					minLength: minMax ? 10 : undefined,
@@ -569,7 +593,7 @@ const ValidationComponent = ( {
 					'Must be @company.com domain AND 15-100 characters'
 				),
 				isValid: {
-					required,
+					required: getIsRequired( 'email' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customEmailRule ),
 					pattern: pattern
@@ -594,7 +618,7 @@ const ValidationComponent = ( {
 					'US format +1-XXX... AND 10-20 characters'
 				),
 				isValid: {
-					required,
+					required: getIsRequired( 'telephone' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTelephoneRule ),
 					pattern: pattern ? '^\\+1-\\d{3}-[0-9-]*$' : undefined,
@@ -617,7 +641,7 @@ const ValidationComponent = ( {
 					'GitHub repository URL AND 25-255 characters'
 				),
 				isValid: {
-					required,
+					required: getIsRequired( 'url' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customUrlRule ),
 					pattern: pattern
@@ -632,7 +656,7 @@ const ValidationComponent = ( {
 				type: 'color',
 				label: 'Color',
 				isValid: {
-					required,
+					required: getIsRequired( 'color' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customColorRule ),
 				},
@@ -644,7 +668,7 @@ const ValidationComponent = ( {
 				placeholder: minMax ? 'Min 10, max 100' : undefined,
 				description: minMax ? 'Must be between 10 and 100' : undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'integer' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customIntegerRule ),
 					min: minMax ? 10 : undefined,
@@ -658,7 +682,7 @@ const ValidationComponent = ( {
 				placeholder: minMax ? 'Min 10, max 100' : undefined,
 				description: minMax ? 'Must be between 0 and 100' : undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'number' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customNumberRule ),
 					min: minMax ? 10 : undefined,
@@ -670,7 +694,7 @@ const ValidationComponent = ( {
 				type: 'boolean',
 				label: 'Boolean',
 				isValid: {
-					required,
+					required: getIsRequired( 'boolean' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customBooleanRule ),
 				},
@@ -682,7 +706,7 @@ const ValidationComponent = ( {
 				placeholder: 'Select countries',
 				description: 'Countries you have visited',
 				isValid: {
-					required,
+					required: getIsRequired( 'array' ),
 					elements: elements !== 'none' ? true : false,
 				},
 				elements:
@@ -707,7 +731,7 @@ const ValidationComponent = ( {
 				label: 'Custom Control',
 				Edit: CustomEditControl,
 				isValid: {
-					required,
+					required: getIsRequired( 'customEdit' ),
 					elements: elements !== 'none' ? true : false,
 				},
 			},
@@ -726,7 +750,7 @@ const ValidationComponent = ( {
 					'alphanumeric chars AND 10-20 characters'
 				),
 				isValid: {
-					required,
+					required: getIsRequired( 'password' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customPasswordRule ),
 					pattern: pattern ? '^[a-zA-Z0-9]{8,}$' : undefined,
@@ -740,7 +764,7 @@ const ValidationComponent = ( {
 				label: 'Toggle',
 				Edit: 'toggle',
 				isValid: {
-					required,
+					required: getIsRequired( 'toggle' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customToggleRule ),
 				},
@@ -763,7 +787,7 @@ const ValidationComponent = ( {
 						? getElements( 'toggleGroup' )
 						: undefined,
 				isValid: {
-					required,
+					required: getIsRequired( 'toggleGroup' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customToggleGroupRule ),
 				},
@@ -773,7 +797,7 @@ const ValidationComponent = ( {
 				type: 'date',
 				label: 'Date',
 				isValid: {
-					required,
+					required: getIsRequired( 'date' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRule ),
 				},
@@ -784,7 +808,7 @@ const ValidationComponent = ( {
 				label: 'Date Range',
 				Edit: DateRangeEdit,
 				isValid: {
-					required,
+					required: getIsRequired( 'dateRange' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRangeRule ),
 				},
@@ -794,13 +818,13 @@ const ValidationComponent = ( {
 				type: 'datetime',
 				label: 'Date Time',
 				isValid: {
-					required,
+					required: getIsRequired( 'datetime' ),
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateTimeRule ),
 				},
 			},
 		];
-	}, [ elements, custom, required, pattern, minMax, getElements ] );
+	}, [ elements, custom, pattern, minMax, getElements, getIsRequired ] );
 
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {
@@ -908,13 +932,6 @@ const ValidationComponent = ( {
 			};
 		}
 
-		if ( layout === 'details' ) {
-			return {
-				layout: { type: 'details' as const },
-				fields: groupedFields,
-			};
-		}
-
 		return {
 			layout: { type: 'card' as const },
 			fields: groupedFields,
diff --git a/packages/dataviews/src/dataform/test/auto-compute.ts b/packages/dataviews/src/dataform/test/auto-compute.ts
new file mode 100644
index 00000000000000..6b9e913fe801cc
--- /dev/null
+++ b/packages/dataviews/src/dataform/test/auto-compute.ts
@@ -0,0 +1,75 @@
+/**
+ * Unit Test: Verify auto-compute behavior for field labeling
+ */
+
+type TestField = {
+	id: string;
+	isValid?: { required?: boolean };
+};
+
+describe( 'Auto-compute markWhenOptional logic', () => {
+	// Simulate the DataForm auto-compute logic
+	function computeMarkWhenOptional( fields: TestField[] ): boolean {
+		const requiredCount = fields.filter(
+			( f ) => !! f.isValid?.required
+		).length;
+		const optionalCount = fields.length - requiredCount;
+		return requiredCount > optionalCount;
+	}
+
+	it( 'should mark optional when mostly required (6 req, 2 opt)', () => {
+		const fields = [
+			{ id: 'text', isValid: { required: true } },
+			{ id: 'email', isValid: { required: true } },
+			{ id: 'password', isValid: { required: true } },
+			{ id: 'number', isValid: { required: true } },
+			{ id: 'integer', isValid: { required: true } },
+			{ id: 'boolean', isValid: { required: true } },
+			{ id: 'color' }, // optional
+			{ id: 'textarea' }, // optional
+		];
+		expect( computeMarkWhenOptional( fields ) ).toBe( true );
+	} );
+
+	it( 'should mark required when mostly optional (2 req, 6 opt)', () => {
+		const fields = [
+			{ id: 'text', isValid: { required: true } },
+			{ id: 'email', isValid: { required: true } },
+			{ id: 'password' },
+			{ id: 'number' },
+			{ id: 'integer' },
+			{ id: 'boolean' },
+			{ id: 'color' },
+			{ id: 'textarea' },
+		];
+		expect( computeMarkWhenOptional( fields ) ).toBe( false );
+	} );
+
+	it( 'should mark required on tie (4 req, 4 opt)', () => {
+		const fields = [
+			{ id: 'a', isValid: { required: true } },
+			{ id: 'b', isValid: { required: true } },
+			{ id: 'c', isValid: { required: true } },
+			{ id: 'd', isValid: { required: true } },
+			{ id: 'e' },
+			{ id: 'f' },
+			{ id: 'g' },
+			{ id: 'h' },
+		];
+		expect( computeMarkWhenOptional( fields ) ).toBe( false );
+	} );
+
+	it( 'should return true when all required (marking optional = nothing)', () => {
+		const fields = [
+			{ id: 'text', isValid: { required: true } },
+			{ id: 'email', isValid: { required: true } },
+			{ id: 'password', isValid: { required: true } },
+		];
+		expect( computeMarkWhenOptional( fields ) ).toBe( true );
+	} );
+
+	it( 'should return false when all optional (marking required = nothing)', () => {
+		const fields = [ { id: 'text' }, { id: 'email' }, { id: 'password' } ];
+		expect( computeMarkWhenOptional( fields ) ).toBe( false );
+	} );
+} );

From e6447c5873a82706435914b86927fb487367614f Mon Sep 17 00:00:00 2001
From: Ayaan Ahmad <ahmadayaan00@gmail.com>
Date: Wed, 4 Feb 2026 00:23:16 +0530
Subject: [PATCH 10/15] Fix formatting and add CHANGELOG after merge

- Fixed prettier formatting issues from GitHub merge
- Added missing 'required' dependency to useMemo (for combobox field)
- Added CHANGELOG entry for markWhenOptional feature
---
 packages/dataviews/CHANGELOG.md                        |  2 ++
 .../dataviews/src/dataform/stories/index.story.tsx     |  2 +-
 packages/dataviews/src/dataform/stories/validation.tsx | 10 +++++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index d9431d0f4d2e21..f41ce3f2f2b0c2 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -9,6 +9,8 @@
 - DataViews: Fix fields async validation. [#74948](https://github.com/WordPress/gutenberg/pull/74948)
 
 ### Enhancements
+
+- DataForm: Add `markWhenOptional` auto-compute logic to show minority field labels. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViews: Add details form layout validation. [#74996](https://github.com/WordPress/gutenberg/pull/74996)
 - DataViews: Consistent rendering of selection checkbox and actions in grid layout. [#75056](https://github.com/WordPress/gutenberg/pull/75056)
 
diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index 5212d1594f4b7d..d5ce5d81ded32a 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -100,7 +100,7 @@ export const Validation = {
 		layout: {
 			control: { type: 'select' },
 			description: 'Choose the form layout type.',
-      options: [
+			options: [
 				'regular',
 				'panel-dropdown',
 				'panel-modal',
diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx
index cb132afdbd258d..f13169ead3e6ef 100644
--- a/packages/dataviews/src/dataform/stories/validation.tsx
+++ b/packages/dataviews/src/dataform/stories/validation.tsx
@@ -901,7 +901,15 @@ const ValidationComponent = ( {
 				},
 			},
 		];
-	}, [ elements, custom, pattern, minMax, getElements, getIsRequired ] );
+	}, [
+		elements,
+		custom,
+		pattern,
+		minMax,
+		getElements,
+		getIsRequired,
+		required,
+	] );
 
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {

From 5aa6ddbc032d2990f408bc4b4f022e99173a7ecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:38:33 +0100
Subject: [PATCH 11/15] Apply suggestions from code review

---
 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 f41ce3f2f2b0c2..7c445e6dc6763c 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -10,7 +10,7 @@
 
 ### Enhancements
 
-- DataForm: Add `markWhenOptional` auto-compute logic to show minority field labels. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
+- DataForm: Add automatic field labeling - forms now automatically mark the minority of fields (required or optional) to reduce visual noise. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViews: Add details form layout validation. [#74996](https://github.com/WordPress/gutenberg/pull/74996)
 - DataViews: Consistent rendering of selection checkbox and actions in grid layout. [#75056](https://github.com/WordPress/gutenberg/pull/75056)
 

From f0ed4490b827b0619b12b60fbd3880107b8f15c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:40:49 +0100
Subject: [PATCH 12/15] Remove duplicate changelog entry

---
 packages/dataviews/CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 7c445e6dc6763c..98495fb726b6ad 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -67,7 +67,6 @@
 
 ### Enhancements
 
-- DataForm: Add automatic field labeling - forms now automatically mark the minority of fields (required or optional) to reduce visual noise. [#74430](https://github.com/WordPress/gutenberg/pull/74430)
 - DataViewsPicker: Ensure checkbox column in table picker layout is always `48px` wide. [#74181](https://github.com/WordPress/gutenberg/pull/74181)
 - DataViews: improve how hierarchy is displayed in table layout. [#74199](https://github.com/WordPress/gutenberg/pull/74199)
 - DataViews: Add `groupBy.showLabel` config option to control whether the field label is shown in group headers. [#74161](https://github.com/WordPress/gutenberg/pull/74161)

From 03b5aaa849c975e9ef4c15bc6d4b1aad23f9bdd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:45:47 +0100
Subject: [PATCH 13/15] Remove unnecessary tests and nickname

---
 .../dataform-layouts/data-form-layout.tsx     |  2 +-
 .../src/dataform/test/auto-compute.ts         | 75 -------------------
 2 files changed, 1 insertion(+), 76 deletions(-)
 delete mode 100644 packages/dataviews/src/dataform/test/auto-compute.ts

diff --git a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
index 33d5f3a78e349a..98a9980a587803 100644
--- a/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
@@ -52,7 +52,7 @@ export function DataFormLayout< Item >( {
 	const { fields: fieldDefinitions } = useContext( DataFormContext );
 
 	// Auto-compute: mark the minority of fields
-	// When counts are equal, mark required fields (per @ntsekouras feedback)
+	// When counts are equal, mark required fields
 	const markWhenOptional = useMemo( () => {
 		const requiredCount = fieldDefinitions.filter(
 			( f ) => !! f.isValid?.required
diff --git a/packages/dataviews/src/dataform/test/auto-compute.ts b/packages/dataviews/src/dataform/test/auto-compute.ts
deleted file mode 100644
index 6b9e913fe801cc..00000000000000
--- a/packages/dataviews/src/dataform/test/auto-compute.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Unit Test: Verify auto-compute behavior for field labeling
- */
-
-type TestField = {
-	id: string;
-	isValid?: { required?: boolean };
-};
-
-describe( 'Auto-compute markWhenOptional logic', () => {
-	// Simulate the DataForm auto-compute logic
-	function computeMarkWhenOptional( fields: TestField[] ): boolean {
-		const requiredCount = fields.filter(
-			( f ) => !! f.isValid?.required
-		).length;
-		const optionalCount = fields.length - requiredCount;
-		return requiredCount > optionalCount;
-	}
-
-	it( 'should mark optional when mostly required (6 req, 2 opt)', () => {
-		const fields = [
-			{ id: 'text', isValid: { required: true } },
-			{ id: 'email', isValid: { required: true } },
-			{ id: 'password', isValid: { required: true } },
-			{ id: 'number', isValid: { required: true } },
-			{ id: 'integer', isValid: { required: true } },
-			{ id: 'boolean', isValid: { required: true } },
-			{ id: 'color' }, // optional
-			{ id: 'textarea' }, // optional
-		];
-		expect( computeMarkWhenOptional( fields ) ).toBe( true );
-	} );
-
-	it( 'should mark required when mostly optional (2 req, 6 opt)', () => {
-		const fields = [
-			{ id: 'text', isValid: { required: true } },
-			{ id: 'email', isValid: { required: true } },
-			{ id: 'password' },
-			{ id: 'number' },
-			{ id: 'integer' },
-			{ id: 'boolean' },
-			{ id: 'color' },
-			{ id: 'textarea' },
-		];
-		expect( computeMarkWhenOptional( fields ) ).toBe( false );
-	} );
-
-	it( 'should mark required on tie (4 req, 4 opt)', () => {
-		const fields = [
-			{ id: 'a', isValid: { required: true } },
-			{ id: 'b', isValid: { required: true } },
-			{ id: 'c', isValid: { required: true } },
-			{ id: 'd', isValid: { required: true } },
-			{ id: 'e' },
-			{ id: 'f' },
-			{ id: 'g' },
-			{ id: 'h' },
-		];
-		expect( computeMarkWhenOptional( fields ) ).toBe( false );
-	} );
-
-	it( 'should return true when all required (marking optional = nothing)', () => {
-		const fields = [
-			{ id: 'text', isValid: { required: true } },
-			{ id: 'email', isValid: { required: true } },
-			{ id: 'password', isValid: { required: true } },
-		];
-		expect( computeMarkWhenOptional( fields ) ).toBe( true );
-	} );
-
-	it( 'should return false when all optional (marking required = nothing)', () => {
-		const fields = [ { id: 'text' }, { id: 'email' }, { id: 'password' } ];
-		expect( computeMarkWhenOptional( fields ) ).toBe( false );
-	} );
-} );

From a5fcf8823cfb6c9d42c3aacd8c26f294f6fc58a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Feb 2026 10:02:24 +0100
Subject: [PATCH 14/15] Update story

---
 .../src/dataform/stories/index.story.tsx      |  7 --
 .../src/dataform/stories/validation.tsx       | 72 ++++++-------------
 2 files changed, 20 insertions(+), 59 deletions(-)

diff --git a/packages/dataviews/src/dataform/stories/index.story.tsx b/packages/dataviews/src/dataform/stories/index.story.tsx
index d5ce5d81ded32a..c6cf2e068b097f 100644
--- a/packages/dataviews/src/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/dataform/stories/index.story.tsx
@@ -109,12 +109,6 @@ export const Validation = {
 				'details',
 			],
 		},
-		fieldDistribution: {
-			control: { type: 'select' },
-			description:
-				'Field distribution for demonstrating markWhenOptional behavior. Use this to see how the minority of fields gets labeled.',
-			options: [ 'allSame', 'mostlyRequired', 'mostlyOptional' ],
-		},
 		required: {
 			control: { type: 'boolean' },
 			description:
@@ -144,7 +138,6 @@ export const Validation = {
 	},
 	args: {
 		layout: 'regular',
-		fieldDistribution: 'allSame',
 		required: true,
 		elements: 'sync',
 		custom: 'sync',
diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx
index f13169ead3e6ef..d131d7f48e55c4 100644
--- a/packages/dataviews/src/dataform/stories/validation.tsx
+++ b/packages/dataviews/src/dataform/stories/validation.tsx
@@ -21,11 +21,6 @@ import { unlock } from '../../lock-unlock';
 
 const { ValidatedTextControl } = unlock( privateApis );
 
-// Module-level constants for field distribution demo
-// These define which fields are optional/required in the demo scenarios
-const OPTIONAL_FIELDS = [ 'color', 'toggle', 'toggleGroup' ];
-const REQUIRED_ONLY_FIELDS = [ 'text', 'email', 'password' ];
-
 function getCustomValidity< Item >(
 	isValid: NormalizedRules< Item >,
 	validity: FieldValidity | undefined
@@ -80,7 +75,6 @@ function CustomEditControl< Item >( {
 
 const ValidationComponent = ( {
 	required,
-	fieldDistribution,
 	elements,
 	custom,
 	pattern,
@@ -88,7 +82,6 @@ const ValidationComponent = ( {
 	layout,
 }: {
 	required: boolean;
-	fieldDistribution: 'allSame' | 'mostlyRequired' | 'mostlyOptional';
 	elements: 'sync' | 'async' | 'none';
 	custom: 'sync' | 'async' | 'none';
 	pattern: boolean;
@@ -149,23 +142,6 @@ const ValidationComponent = ( {
 		datetime: undefined,
 	} );
 
-	// Helper to determine if a field should be required based on fieldDistribution
-	// Uses module-level OPTIONAL_FIELDS and REQUIRED_ONLY_FIELDS constants
-	const getIsRequired = useCallback(
-		( fieldId: string ): boolean => {
-			switch ( fieldDistribution ) {
-				case 'mostlyRequired':
-					return ! OPTIONAL_FIELDS.includes( fieldId );
-				case 'mostlyOptional':
-					return REQUIRED_ONLY_FIELDS.includes( fieldId );
-				case 'allSame':
-				default:
-					return required;
-			}
-		},
-		[ fieldDistribution, required ]
-	);
-
 	// Cache for getElements functions - ensures promises are only created once
 	const getElements = useMemo( () => {
 		const promiseCache: Record< string, Promise< any > > = {};
@@ -547,7 +523,7 @@ const ValidationComponent = ( {
 					'Letters, numbers, underscores only AND 5-20 characters'
 				),
 				isValid: {
-					required: getIsRequired( 'text' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextRule ),
 					pattern: pattern ? '^[a-zA-Z0-9_]+$' : undefined,
@@ -569,7 +545,7 @@ const ValidationComponent = ( {
 				getElements:
 					elements === 'async' ? getElements( 'select' ) : undefined,
 				isValid: {
-					required: getIsRequired( 'select' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customSelectRule ),
 				},
@@ -591,7 +567,7 @@ const ValidationComponent = ( {
 						? getElements( 'textWithRadio' )
 						: undefined,
 				isValid: {
-					required: getIsRequired( 'textWithRadio' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextRadioRule ),
 				},
@@ -606,7 +582,7 @@ const ValidationComponent = ( {
 					? 'Must be between 10 and 200 characters'
 					: undefined,
 				isValid: {
-					required: getIsRequired( 'textarea' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTextareaRule ),
 					minLength: minMax ? 10 : undefined,
@@ -628,7 +604,7 @@ const ValidationComponent = ( {
 					'Must be @company.com domain AND 15-100 characters'
 				),
 				isValid: {
-					required: getIsRequired( 'email' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customEmailRule ),
 					pattern: pattern
@@ -653,7 +629,7 @@ const ValidationComponent = ( {
 					'US format +1-XXX... AND 10-20 characters'
 				),
 				isValid: {
-					required: getIsRequired( 'telephone' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customTelephoneRule ),
 					pattern: pattern ? '^\\+1-\\d{3}-[0-9-]*$' : undefined,
@@ -676,7 +652,7 @@ const ValidationComponent = ( {
 					'GitHub repository URL AND 25-255 characters'
 				),
 				isValid: {
-					required: getIsRequired( 'url' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customUrlRule ),
 					pattern: pattern
@@ -691,7 +667,7 @@ const ValidationComponent = ( {
 				type: 'color',
 				label: 'Color',
 				isValid: {
-					required: getIsRequired( 'color' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customColorRule ),
 				},
@@ -703,7 +679,7 @@ const ValidationComponent = ( {
 				placeholder: minMax ? 'Min 10, max 100' : undefined,
 				description: minMax ? 'Must be between 10 and 100' : undefined,
 				isValid: {
-					required: getIsRequired( 'integer' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customIntegerRule ),
 					min: minMax ? 10 : undefined,
@@ -717,7 +693,7 @@ const ValidationComponent = ( {
 				placeholder: minMax ? 'Min 10, max 100' : undefined,
 				description: minMax ? 'Must be between 0 and 100' : undefined,
 				isValid: {
-					required: getIsRequired( 'number' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customNumberRule ),
 					min: minMax ? 10 : undefined,
@@ -729,7 +705,7 @@ const ValidationComponent = ( {
 				type: 'boolean',
 				label: 'Boolean',
 				isValid: {
-					required: getIsRequired( 'boolean' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customBooleanRule ),
 				},
@@ -741,7 +717,7 @@ const ValidationComponent = ( {
 				placeholder: 'Select countries',
 				description: 'Countries you have visited',
 				isValid: {
-					required: getIsRequired( 'array' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 				},
 				elements:
@@ -766,7 +742,7 @@ const ValidationComponent = ( {
 				label: 'Custom Control',
 				Edit: CustomEditControl,
 				isValid: {
-					required: getIsRequired( 'customEdit' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 				},
 			},
@@ -785,7 +761,7 @@ const ValidationComponent = ( {
 					'alphanumeric chars AND 10-20 characters'
 				),
 				isValid: {
-					required: getIsRequired( 'password' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customPasswordRule ),
 					pattern: pattern ? '^[a-zA-Z0-9]{8,}$' : undefined,
@@ -799,7 +775,7 @@ const ValidationComponent = ( {
 				label: 'Toggle',
 				Edit: 'toggle',
 				isValid: {
-					required: getIsRequired( 'toggle' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customToggleRule ),
 				},
@@ -822,7 +798,7 @@ const ValidationComponent = ( {
 						? getElements( 'toggleGroup' )
 						: undefined,
 				isValid: {
-					required: getIsRequired( 'toggleGroup' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customToggleGroupRule ),
 				},
@@ -874,7 +850,7 @@ const ValidationComponent = ( {
 				type: 'date',
 				label: 'Date',
 				isValid: {
-					required: getIsRequired( 'date' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRule ),
 				},
@@ -885,7 +861,7 @@ const ValidationComponent = ( {
 				label: 'Date Range',
 				Edit: DateRangeEdit,
 				isValid: {
-					required: getIsRequired( 'dateRange' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRangeRule ),
 				},
@@ -895,21 +871,13 @@ const ValidationComponent = ( {
 				type: 'datetime',
 				label: 'Date Time',
 				isValid: {
-					required: getIsRequired( 'datetime' ),
+					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateTimeRule ),
 				},
 			},
 		];
-	}, [
-		elements,
-		custom,
-		pattern,
-		minMax,
-		getElements,
-		getIsRequired,
-		required,
-	] );
+	}, [ elements, custom, pattern, minMax, getElements, required ] );
 
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {

From d4958d241d1414d404bd13efb7652c28127e8834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Feb 2026 10:02:59 +0100
Subject: [PATCH 15/15] Revert changes to trunk

---
 .../dataviews/src/components/dataform-context/index.tsx     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/components/dataform-context/index.tsx b/packages/dataviews/src/components/dataform-context/index.tsx
index 6f3c094f0c74a1..b0ab74661f1edc 100644
--- a/packages/dataviews/src/components/dataform-context/index.tsx
+++ b/packages/dataviews/src/components/dataform-context/index.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createContext, useMemo } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,10 +23,8 @@ export function DataFormProvider< Item >( {
 }: React.PropsWithChildren< {
 	fields: NormalizedField< Item >[];
 } > ) {
-	// Memoize to prevent unnecessary re-renders
-	const value = useMemo( () => ( { fields } ), [ fields ] );
 	return (
-		<DataFormContext.Provider value={ value }>
+		<DataFormContext.Provider value={ { fields } }>
 			{ children }
 		</DataFormContext.Provider>
 	);