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 4 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 disabled controls. [#77090](https://github.com/WordPress/gutenberg/pull/77090)

## 14.0.0 (2026-04-01)

### Breaking Changes
Expand Down
3 changes: 3 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 @@ -21,9 +21,11 @@ export default function ArrayControl< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, getValue, setValue, isValid } = field;
const value = getValue( { item: data } );
const { disabled = false } = config || {};

const { elements, isLoading } = useElements( {
elements: field.elements,
Expand Down Expand Up @@ -73,6 +75,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
3 changes: 3 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 @@ -20,8 +20,10 @@ export default function Checkbox< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { getValue, setValue, label, description, isValid } = field;
const { disabled = false } = config || {};

const onChangeControl = useCallback( () => {
onChange(
Expand All @@ -39,6 +41,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

/>
);
}
8 changes: 8 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 @@ -68,8 +72,10 @@ export default function Color< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, placeholder, description, setValue, isValid } = field;
const { disabled = false } = config || {};
const value = field.getValue( { item: data } ) || '';

const handleColorChange = useCallback(
Expand Down Expand Up @@ -98,11 +104,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
21 changes: 19 additions & 2 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 @@ -289,6 +289,7 @@ function CalendarDateControl< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const {
id,
Expand All @@ -299,6 +300,7 @@ function CalendarDateControl< Item >( {
isValid,
format: fieldFormat,
} = field;
const { disabled = false } = config || {};
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
null
);
Expand Down Expand Up @@ -406,6 +408,8 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -419,7 +423,7 @@ function CalendarDateControl< Item >( {
variant="tertiary"
isPressed={ ! selectedPresetId }
size="small"
disabled={ !! selectedPresetId }
disabled={ !! selectedPresetId || disabled }
accessibleWhenDisabled={ false }
>
{ __( 'Custom' ) }
Expand All @@ -436,6 +440,7 @@ function CalendarDateControl< Item >( {
value={ value }
onChange={ handleManualDateChange }
required={ !! field.isValid?.required }
disabled={ disabled }
/>

{ /* Calendar widget */ }
Expand All @@ -449,6 +454,7 @@ function CalendarDateControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezoneString || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -463,6 +469,7 @@ function CalendarDateRangeControl< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const {
id,
Expand All @@ -472,6 +479,7 @@ function CalendarDateRangeControl< Item >( {
setValue,
format: fieldFormat,
} = field;
const { disabled = false } = config || {};
let value: DateRange;
const fieldValue = getValue( { item: data } );
if (
Expand Down Expand Up @@ -626,6 +634,8 @@ function CalendarDateRangeControl< Item >( {
variant="tertiary"
isPressed={ isSelected }
size="small"
disabled={ disabled }
accessibleWhenDisabled={ false }
onClick={ () =>
handlePresetClick( preset )
}
Expand All @@ -640,7 +650,7 @@ function CalendarDateRangeControl< Item >( {
isPressed={ ! selectedPresetId }
size="small"
accessibleWhenDisabled={ false }
disabled={ !! selectedPresetId }
disabled={ !! selectedPresetId || disabled }
>
{ __( 'Custom' ) }
</Button>
Expand All @@ -664,6 +674,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'from', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
<InputControl
__next40pxDefaultSize
Expand All @@ -676,6 +687,7 @@ function CalendarDateRangeControl< Item >( {
handleManualDateChange( 'to', newValue )
}
required={ !! field.isValid?.required }
disabled={ disabled }
/>
</Stack>

Expand All @@ -687,6 +699,7 @@ function CalendarDateRangeControl< Item >( {
onMonthChange={ setCalendarMonth }
timeZone={ timezone.string || undefined }
weekStartsOn={ weekStartsOn }
disabled={ disabled }
/>
</Stack>
</BaseControl>
Expand All @@ -702,6 +715,7 @@ export default function DateControl< Item >( {
markWhenOptional,
operator,
validity,
config,
}: DataFormControlProps< Item > ) {
if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
return (
Expand All @@ -712,6 +726,7 @@ export default function DateControl< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
config={ config }
/>
);
}
Expand All @@ -725,6 +740,7 @@ export default function DateControl< Item >( {
hideLabelFromVision={ hideLabelFromVision }
markWhenOptional={ markWhenOptional }
validity={ validity }
config={ config }
/>
);
}
Expand All @@ -737,6 +753,7 @@ export default function DateControl< Item >( {
hideLabelFromVision={ hideLabelFromVision }
markWhenOptional={ markWhenOptional }
validity={ validity }
config={ config }
/>
);
}
4 changes: 4 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 = false } = config || {};
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 All @@ -220,6 +223,7 @@ export default function DateTime< Item >( {
onChange={ onChange }
hideLabelFromVision={ hideLabelFromVision }
operator={ operator }
config={ config }
/>
);
}
Expand Down
3 changes: 3 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 @@ -20,7 +20,9 @@ export default function Email< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { disabled = false } = config || {};
return (
<ValidatedText
{ ...{
Expand All @@ -30,6 +32,7 @@ export default function Email< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
disabled,
type: 'email',
prefix: (
<InputControlPrefixWrapper variant="icon">
Expand Down
7 changes: 6 additions & 1 deletion packages/dataviews/src/components/dataform-controls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,12 @@ function createConfiguredControl( config: EditConfig ) {
return function ConfiguredControl< Item >(
props: DataFormControlProps< Item >
) {
return <BaseControlType { ...props } config={ controlConfig } />;
return (
<BaseControlType
{ ...props }
config={ { ...controlConfig, ...props.config } }
/>
);
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataform-controls/number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ import type { DataFormControlProps } from '../../types';
import ValidatedNumber from './utils/validated-number';

export default function Number< Item >( props: DataFormControlProps< Item > ) {
return <ValidatedNumber { ...props } />;
return <ValidatedNumber { ...props } config={ props.config } />;
}
5 changes: 5 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 @@ -21,8 +21,10 @@ export default function Password< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const [ isVisible, setIsVisible ] = useState( false );
const { disabled = false } = config || {};

const toggleVisibility = useCallback( () => {
setIsVisible( ( prev ) => ! prev );
Expand All @@ -37,6 +39,7 @@ export default function Password< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
disabled,
type: isVisible ? 'text' : 'password',
suffix: (
<InputControlSuffixWrapper variant="control">
Expand All @@ -49,6 +52,8 @@ export default function Password< Item >( {
? __( 'Hide password' )
: __( 'Show password' )
}
disabled={ disabled }
accessibleWhenDisabled
/>
</InputControlSuffixWrapper>
),
Expand Down
3 changes: 3 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 @@ -21,8 +21,10 @@ export default function Radio< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { label, description, getValue, setValue, isValid } = field;
const { disabled = false } = config || {};
const { elements, isLoading } = useElements( {
elements: field.elements,
getElements: field.getElements,
Expand Down Expand Up @@ -50,6 +52,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

/>
);
}
3 changes: 3 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 @@ -21,8 +21,10 @@ export default function Select< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { type, label, description, getValue, setValue, isValid } = field;
const { disabled = false } = config || {};

const isMultiple = type === 'array';
const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
Expand Down Expand Up @@ -55,6 +57,7 @@ export default function Select< Item >( {
__next40pxDefaultSize
hideLabelFromVision={ hideLabelFromVision }
multiple={ isMultiple }
disabled={ disabled }
/>
);
}
3 changes: 3 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 @@ -20,7 +20,9 @@ export default function Telephone< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
config,
}: DataFormControlProps< Item > ) {
const { disabled = false } = config || {};
return (
<ValidatedText
{ ...{
Expand All @@ -30,6 +32,7 @@ export default function Telephone< Item >( {
hideLabelFromVision,
markWhenOptional,
validity,
disabled,
type: 'tel',
prefix: (
<InputControlPrefixWrapper variant="icon">
Expand Down
Loading
Loading