Skip to content

DataForm: mark fields as required or optional automatically #74430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oandregal merged 16 commits into from
Feb 4, 2026
+104 −17
Merged

DataForm: mark fields as required or optional automatically #74430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
52c735b
DataViews: Add markWhenOptional prop to Field API
czarflix Jan 8, 2026
16e3fab
Add CHANGELOG entry for markWhenOptional
czarflix Jan 8, 2026
96cd4c7
Update CHANGELOG with PR link
czarflix Jan 8, 2026
1a7fdee
Add form-level labelMode for required/optional field labeling
czarflix Jan 9, 2026
ef94d75
Fix ESLint errors and update unit tests for labelMode
czarflix Jan 9, 2026
4c44414
Fix nested ternary and unused var ESLint errors
czarflix Jan 9, 2026
371100c
Fix ESLint errors: prettier formatting and remove unused vars
czarflix Jan 15, 2026
326a043
DataForm: Refactor to auto-only field labeling
czarflix Jan 26, 2026
3770a3c
DataViews: Move markWhenOptional to DataFormLayout, update validation…
czarflix Feb 3, 2026
c0e6ece
Merge branch 'trunk' into add/74417-optional-field-label
czarflix Feb 3, 2026
e6447c5
Fix formatting and add CHANGELOG after merge
czarflix Feb 3, 2026
5aa6ddb
Apply suggestions from code review
oandregal Feb 4, 2026
f0ed449
Remove duplicate changelog entry
oandregal Feb 4, 2026
03b5aaa
Remove unnecessary tests and nickname
oandregal Feb 4, 2026
a5fcf88
Update story
oandregal Feb 4, 2026
d4958d2
Revert changes to trunk
oandregal Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
- DataViews: Fix fields async validation. [#74948](https://github.com/WordPress/gutenberg/pull/74948)

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

Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/array.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function ArrayControl< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { label, placeholder, getValue, setValue, isValid } = field;
Expand Down Expand Up @@ -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 }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Checkbox< Item >( {
onChange,
data,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, label, description, isValid } = field;
Expand All @@ -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 }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export default function Color< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { label, placeholder, description, setValue, isValid } = field;
Expand All @@ -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 }
Expand Down
23 changes: 17 additions & 6 deletions packages/dataviews/src/components/dataform-controls/date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ function CalendarDateControl< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const {
Expand Down Expand Up @@ -365,9 +366,12 @@ function CalendarDateControl< Item >( {
timezone: { string: timezoneString },
} = getSettings();

const displayLabel = isValid?.required
? `${ label } (${ __( 'Required' ) })`
: label;
let displayLabel = label;
if ( isValid?.required && ! markWhenOptional ) {
displayLabel = `${ label } (${ __( 'Required' ) })`;
} else if ( ! isValid?.required && markWhenOptional ) {
displayLabel = `${ label } (${ __( 'Optional' ) })`;
}

return (
<ValidatedDateControl
Expand Down Expand Up @@ -455,6 +459,7 @@ function CalendarDateRangeControl< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { id, label, getValue, setValue, format: fieldFormat } = field;
Expand Down Expand Up @@ -573,9 +578,12 @@ function CalendarDateRangeControl< Item >( {

const { timezone } = getSettings();

const displayLabel = field.isValid?.required
? `${ label } (${ __( 'Required' ) })`
: label;
let displayLabel = label;
if ( field.isValid?.required && ! markWhenOptional ) {
displayLabel = `${ label } (${ __( 'Required' ) })`;
} else if ( ! field.isValid?.required && markWhenOptional ) {
displayLabel = `${ label } (${ __( 'Optional' ) })`;
}

return (
<ValidatedDateControl
Expand Down Expand Up @@ -681,6 +689,7 @@ export default function DateControl< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
operator,
validity,
}: DataFormControlProps< Item > ) {
Expand All @@ -704,6 +713,7 @@ export default function DateControl< Item >( {
field={ field }
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
markWhenOptional={ markWhenOptional }
validity={ validity }
/>
);
Expand All @@ -715,6 +725,7 @@ export default function DateControl< Item >( {
field={ field }
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
markWhenOptional={ markWhenOptional }
validity={ validity }
/>
);
Expand Down
17 changes: 13 additions & 4 deletions packages/dataviews/src/components/dataform-controls/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function CalendarDateTimeControl< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { id, label, description, setValue, getValue, isValid } = field;
Expand Down Expand Up @@ -155,10 +156,16 @@ function CalendarDateTimeControl< Item >( {
timezone: { string: timezoneString },
} = getSettings();

const displayLabel =
isValid?.required && ! hideLabelFromVision
? `${ label } (${ __( 'Required' ) })`
: label;
let displayLabel = label;
if ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {
displayLabel = `${ label } (${ __( 'Required' ) })`;
} else if (
! isValid?.required &&
markWhenOptional &&
! hideLabelFromVision
) {
displayLabel = `${ label } (${ __( 'Optional' ) })`;
}

return (
<BaseControl
Expand Down Expand Up @@ -208,6 +215,7 @@ export default function DateTime< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
operator,
validity,
}: DataFormControlProps< Item > ) {
Expand All @@ -230,6 +238,7 @@ export default function DateTime< Item >( {
field={ field }
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
markWhenOptional={ markWhenOptional }
validity={ validity }
/>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Email< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
return (
Expand All @@ -27,6 +28,7 @@ export default function Email< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
type: 'email',
prefix: (
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function Password< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const [ isVisible, setIsVisible ] = useState( false );
Expand All @@ -34,6 +35,7 @@ export default function Password< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
type: isVisible ? 'text' : 'password',
suffix: (
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function Radio< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
Expand All @@ -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 }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function Select< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { type, label, description, getValue, setValue, isValid } = field;
Expand All @@ -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 }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/telephone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Telephone< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
return (
Expand All @@ -27,6 +28,7 @@ export default function Telephone< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
type: 'tel',
prefix: (
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default function Text< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
config,
validity,
}: DataFormControlProps< Item > ) {
Expand All @@ -26,6 +27,7 @@ export default function Text< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
prefix: prefix ? createElement( prefix ) : undefined,
suffix: suffix ? createElement( suffix ) : undefined,
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Textarea< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
config,
validity,
}: DataFormControlProps< Item > ) {
Expand All @@ -34,6 +35,7 @@ export default function Textarea< Item >( {
return (
<ValidatedTextareaControl
required={ !! isValid.required }
markWhenOptional={ markWhenOptional }
customValidity={ getCustomValidity( isValid, validity ) }
label={ label }
placeholder={ placeholder }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/toggle-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default function ToggleGroup< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, isValid } = field;
Expand Down Expand Up @@ -51,6 +52,7 @@ export default function ToggleGroup< Item >( {
return (
<ValidatedToggleGroupControl
required={ !! field.isValid?.required }
markWhenOptional={ markWhenOptional }
customValidity={ getCustomValidity( isValid, validity ) }
__next40pxDefaultSize
isBlock
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Toggle< Item >( {
onChange,
data,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
Expand All @@ -31,6 +32,7 @@ export default function Toggle< Item >( {
return (
<ValidatedToggleControl
required={ !! isValid.required }
markWhenOptional={ markWhenOptional }
customValidity={ getCustomValidity( isValid, validity ) }
hidden={ hideLabelFromVision }
label={ label }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/url.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function Url< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: DataFormControlProps< Item > ) {
return (
Expand All @@ -27,6 +28,7 @@ export default function Url< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
type: 'url',
prefix: (
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function ValidatedText< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
type,
prefix,
suffix,
Expand All @@ -57,6 +58,7 @@ export default function ValidatedText< Item >( {
return (
<ValidatedInputControl
required={ !! isValid.required }
markWhenOptional={ markWhenOptional }
customValidity={ getCustomValidity( isValid, validity ) }
label={ label }
placeholder={ placeholder }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default function ValidatedNumber< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
operator,
validity,
}: DataFormControlProps< Item > ) {
Expand Down Expand Up @@ -149,6 +150,7 @@ export default function ValidatedNumber< Item >( {
return (
<ValidatedNumberControl
required={ !! isValid.required }
markWhenOptional={ markWhenOptional }
customValidity={ getCustomValidity( isValid, validity ) }
label={ label }
help={ description }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/components/dataform-layouts/card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export default function FormCardField< Item >( {
field,
onChange,
hideLabelFromVision,
markWhenOptional,
validity,
}: FieldLayoutProps< Item > ) {
const { fields } = useContext( DataFormContext );
Expand Down Expand Up @@ -347,6 +348,7 @@ export default function FormCardField< Item >( {
hideLabelFromVision={
hideLabelFromVision || withHeader
}
markWhenOptional={ markWhenOptional }
validity={ validity }
/>
</CardBody>
Expand Down
Loading
Loading