Skip to content

DataForm: support disabled controls #77090

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 9 commits into from
Apr 7, 2026
Merged

DataForm: support disabled controls #77090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
260d810
Support disabled prop in DataForm controls
oandregal Apr 7, 2026
1f560e5
Add changelog
oandregal Apr 7, 2026
c616933
password: disable suffix
oandregal Apr 7, 2026
772836f
Improve stories
oandregal Apr 7, 2026
5613289
Switch implementation to field.isDisabled
oandregal Apr 7, 2026
eb71d70
Fix story
oandregal Apr 7, 2026
06515fb
Filter controls are always visible and enabled
oandregal Apr 7, 2026
2c39a1c
Date: improve
oandregal Apr 7, 2026
01a199b
Revert changes from cherry-pick
oandregal Apr 7, 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
4 changes: 4 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- DataForm: support `isDisabled` field property. [#77090](https://github.com/WordPress/gutenberg/pull/77090)

## 14.0.0 (2026-04-01)

### Breaking Changes
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 @@ -24,6 +24,7 @@ export default function ArrayControl< Item >( {
}: DataFormControlProps< Item > ) {
const { label, placeholder, getValue, setValue, isValid } = field;
const value = getValue( { item: data } );
const disabled = field.isDisabled( { item: data, field } );

const { elements, isLoading } = useElements( {
elements: field.elements,
Expand Down Expand Up @@ -73,6 +74,7 @@ export default function ArrayControl< Item >( {
onChange={ onChangeControl }
placeholder={ placeholder }
suggestions={ elements?.map( ( element ) => element.value ) }
disabled={ disabled }
__experimentalValidateInput={ ( token: string ) => {
// If elements validation is required, check if token is valid
if ( field.isValid?.elements && elements ) {
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 @@ -22,6 +22,7 @@ export default function Checkbox< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, label, description, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );

const onChangeControl = useCallback( () => {
onChange(
Expand All @@ -39,6 +40,7 @@ export default function Checkbox< Item >( {
help={ description }
checked={ getValue( { item: data } ) }
onChange={ onChangeControl }
disabled={ disabled }
Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's something wrong with the checkbok. It disappears when disabled?

Screen.Recording.2026-04-07.at.10.47.14.mov

Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was hidden due to a bug in the story that it's now fixed. Though it has the same issue than radio and textarea: it's disabled but the styles do not reflect that state

Screen.Recording.2026-04-07.at.13.20.41.mov

Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix at #77132

/>
);
}
7 changes: 7 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 @@ -30,9 +30,11 @@ const { ValidatedInputControl } = unlock( privateApis );
const ColorPickerDropdown = ( {
color,
onColorChange,
disabled,
}: {
color: string;
onColorChange: ( newColor: string ) => void;
disabled?: boolean;
} ) => {
const validColor = color && colord( color ).isValid() ? color : '#ffffff';

Expand All @@ -45,6 +47,8 @@ const ColorPickerDropdown = ( {
onClick={ onToggle }
aria-label={ __( 'Open color picker' ) }
size="small"
disabled={ disabled }
accessibleWhenDisabled
icon={ () => <ColorIndicator colorValue={ validColor } /> }
/>
) }
Expand All @@ -70,6 +74,7 @@ export default function Color< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { label, placeholder, description, setValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );
const value = field.getValue( { item: data } ) || '';

const handleColorChange = useCallback(
Expand Down Expand Up @@ -98,11 +103,13 @@ export default function Color< Item >( {
onChange={ handleInputChange }
hideLabelFromVision={ hideLabelFromVision }
type="text"
disabled={ disabled }
prefix={
<InputControlPrefixWrapper variant="control">
<ColorPickerDropdown
color={ value }
onColorChange={ handleColorChange }
disabled={ disabled }
/>
</InputControlPrefixWrapper>
}
Expand Down
19 changes: 15 additions & 4 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 @@ -299,6 +299,7 @@ function CalendarDateControl< Item >( {
isValid,
format: fieldFormat,
} = field;
const disabled = field.isDisabled( { item: data, field } );
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
null
);
Expand Down Expand Up @@ -406,6 +407,8 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -419,8 +422,8 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ ! selectedPresetId }
size="small"
disabled={ !! selectedPresetId }
accessibleWhenDisabled={ false }
disabled={ !! selectedPresetId || disabled }
accessibleWhenDisabled
>
{ __( 'Custom' ) }
</Button>
Expand All @@ -436,6 +439,7 @@ function CalendarDateControl< Item >( {
value={ value }
onChange={ handleManualDateChange }
required={ !! field.isValid?.required }
disabled={ disabled }
/>

{ /* Calendar widget */ }
Expand All @@ -449,6 +453,7 @@ function CalendarDateControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -472,6 +477,7 @@ function CalendarDateRangeControl< Item >( {
setValue,
format: fieldFormat,
} = field;
const disabled = field.isDisabled( { item: data, field } );
let value: DateRange;
const fieldValue = getValue( { item: data } );
if (
Expand Down Expand Up @@ -626,6 +632,8 @@ function CalendarDateRangeControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -639,8 +647,8 @@ function CalendarDateRangeControl< Item >( {
variant="tertiary"
isPressed={ ! selectedPresetId }
size="small"
accessibleWhenDisabled={ false }
disabled={ !! selectedPresetId }
accessibleWhenDisabled
disabled={ !! selectedPresetId || disabled }
>
{ __( 'Custom' ) }
</Button>
Expand All @@ -664,6 +672,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'from', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
<InputControl
__next40pxDefaultSize
Expand All @@ -676,6 +685,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'to', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
</Stack>

Expand All @@ -687,6 +697,7 @@ function CalendarDateRangeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezone.string || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand Down
3 changes: 3 additions & 0 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 @@ -41,6 +41,7 @@ function CalendarDateTimeControl< Item >( {
}: DataFormControlProps< Item > ) {
const { compact } = config || {};
const { id, label, description, setValue, getValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );
const fieldValue = getValue( { item: data } );
const value = typeof fieldValue === 'string' ? fieldValue : undefined;

Expand Down Expand Up @@ -179,6 +180,7 @@ function CalendarDateTimeControl< Item >( {
hideLabelFromVision
value={ formatDateTime( value ) }
onChange={ handleManualDateTimeChange }
disabled={ disabled }
/>
{ /* Calendar widget */ }
{ ! compact && (
Expand All @@ -194,6 +196,7 @@ function CalendarDateTimeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
) }
</Stack>
Expand Down
3 changes: 3 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 @@ -23,6 +23,7 @@ export default function Password< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const [ isVisible, setIsVisible ] = useState( false );
const disabled = field.isDisabled( { item: data, field } );

const toggleVisibility = useCallback( () => {
setIsVisible( ( prev ) => ! prev );
Expand All @@ -49,6 +50,8 @@ export default function Password< Item >( {
? __( 'Hide password' )
: __( 'Show password' )
}
disabled={ disabled }
accessibleWhenDisabled
/>
</InputControlSuffixWrapper>
),
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 @@ -23,6 +23,7 @@ export default function Radio< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );
const { elements, isLoading } = useElements( {
elements: field.elements,
getElements: field.getElements,
Expand Down Expand Up @@ -50,6 +51,7 @@ export default function Radio< Item >( {
options={ elements }
selected={ value }
hideLabelFromVision={ hideLabelFromVision }
disabled={ disabled }
Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While the control is disabled, they styles don't communicate that:

Regular layout story Field text story
Image Image

Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR for this at #77127

/>
);
}
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 @@ -23,6 +23,7 @@ export default function Select< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { type, label, description, getValue, setValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );

const isMultiple = type === 'array';
const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
Expand Down Expand Up @@ -55,6 +56,7 @@ export default function Select< Item >( {
__next40pxDefaultSize
hideLabelFromVision={ hideLabelFromVision }
multiple={ isMultiple }
disabled={ disabled }
/>
);
}
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 @@ -23,6 +23,7 @@ export default function Textarea< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { rows = 4 } = config || {};
const disabled = field.isDisabled( { item: data, field } );
const { label, placeholder, description, setValue, isValid } = field;
const value = field.getValue( { item: data } );

Expand All @@ -43,6 +44,7 @@ export default function Textarea< Item >( {
help={ description }
onChange={ onChangeControl }
rows={ rows }
disabled={ disabled }
Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While the control is actually disabled, the styles do not communicate the state:

Screen.Recording.2026-04-07.at.10.56.46.mov

Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix for the styles at #77129

minLength={
isValid.minLength ? isValid.minLength.constraint : undefined
}
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 @@ -27,6 +27,7 @@ export default function ToggleGroup< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );
const value = getValue( { item: data } );

const onChangeControl = useCallback(
Expand Down Expand Up @@ -67,6 +68,7 @@ export default function ToggleGroup< Item >( {
key={ el.value }
label={ el.label }
value={ el.value }
disabled={ disabled }
/>
) ) }
</ValidatedToggleGroupControl>
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 @@ -22,6 +22,7 @@ export default function Toggle< Item >( {
validity,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
const disabled = field.isDisabled( { item: data, field } );

const onChangeControl = useCallback( () => {
onChange(
Expand All @@ -39,6 +40,7 @@ export default function Toggle< Item >( {
help={ description }
checked={ getValue( { item: data } ) }
onChange={ onChangeControl }
disabled={ disabled }
/>
);
}
3 changes: 3 additions & 0 deletions packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export default function RelativeDateControl< Item >( {
];

const { id, label, description, getValue, setValue } = field;
const disabled = field.isDisabled( { item: data, field } );
const fieldValue = getValue( { item: data } );
const { value: relValue = '', unit = options[ 0 ].value } =
fieldValue && typeof fieldValue === 'object' ? fieldValue : {};
Expand Down Expand Up @@ -102,6 +103,7 @@ export default function RelativeDateControl< Item >( {
step={ 1 }
value={ relValue }
onChange={ onChangeValue }
disabled={ disabled }
/>
<SelectControl
className="dataviews-controls__relative-date-unit"
Expand All @@ -111,6 +113,7 @@ export default function RelativeDateControl< Item >( {
options={ options }
onChange={ onChangeUnit }
hideLabelFromVision
disabled={ disabled }
/>
</Stack>
</BaseControl>
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 @@ -43,6 +43,7 @@ export default function ValidatedText< Item >( {
const { label, placeholder, description, getValue, setValue, isValid } =
field;
const value = getValue( { item: data } );
const disabled = field.isDisabled( { item: data, field } );

const onChangeControl = useCallback(
( newValue: string ) =>
Expand All @@ -69,6 +70,7 @@ export default function ValidatedText< Item >( {
type={ type }
prefix={ prefix }
suffix={ suffix }
disabled={ disabled }
pattern={ isValid.pattern ? isValid.pattern.constraint : undefined }
minLength={
isValid.minLength ? isValid.minLength.constraint : undefined
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 @@ -96,6 +96,7 @@ export default function ValidatedNumber< Item >( {
const step = Math.pow( 10, Math.abs( decimals ) * -1 );
const { label, description, getValue, setValue, isValid } = field;
const value = getValue( { item: data } ) ?? '';
const disabled = field.isDisabled( { item: data, field } );

const onChangeControl = useCallback(
( newValue: string | undefined ) => {
Expand Down Expand Up @@ -161,6 +162,7 @@ export default function ValidatedNumber< Item >( {
step={ step }
min={ isValid.min ? isValid.min.constraint : undefined }
max={ isValid.max ? isValid.max.constraint : undefined }
disabled={ disabled }
/>
);
}
4 changes: 4 additions & 0 deletions packages/dataviews/src/components/dataviews-filters/input-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ export default function InputWidget( {
...currentField,
// Deactivate validation for filters.
isValid: {} satisfies NormalizedRules< any >,
// Filter controls are always enabled.
isDisabled: () => false,
// Filter controls are always visible.
isVisible: () => true,
// Configure getValue/setValue as if Item was a plain object.
getValue: ( { item }: { item: any } ) =>
item[ currentField.id ],
Expand Down
7 changes: 7 additions & 0 deletions packages/dataviews/src/dataform/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,13 @@ export const LayoutRegular = {
description: 'Chooses the label position.',
options: [ 'default', 'top', 'side', 'none' ],
},
disabled: {
control: { type: 'boolean' },
description: 'Disable all fields in the form.',
},
},
args: {
disabled: false,
},
};

Expand Down
Loading
Loading