Skip to content

Commit 15a1c8a

Browse files
oandregalntsekourasVrishabhsk
authored and
adamsilverstein
committed
DataForm: support disabled controls (#77090)
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
1 parent b5c4c59 commit 15a1c8a

21 files changed

Lines changed: 165 additions & 10 deletions

File tree

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Enhancements
6+
7+
- DataForm: support `isDisabled` field property. [#77090](https://github.com/WordPress/gutenberg/pull/77090)
8+
59
## 14.0.0 (2026-04-01)
610

711
### Breaking Changes

‎packages/dataviews/src/components/dataform-controls/array.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function ArrayControl< Item >( {
2424
}: DataFormControlProps< Item > ) {
2525
const { label, placeholder, getValue, setValue, isValid } = field;
2626
const value = getValue( { item: data } );
27+
const disabled = field.isDisabled( { item: data, field } );
2728

2829
const { elements, isLoading } = useElements( {
2930
elements: field.elements,
@@ -73,6 +74,7 @@ export default function ArrayControl< Item >( {
7374
onChange={ onChangeControl }
7475
placeholder={ placeholder }
7576
suggestions={ elements?.map( ( element ) => element.value ) }
77+
disabled={ disabled }
7678
__experimentalValidateInput={ ( token: string ) => {
7779
// If elements validation is required, check if token is valid
7880
if ( field.isValid?.elements && elements ) {

‎packages/dataviews/src/components/dataform-controls/checkbox.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function Checkbox< Item >( {
2222
validity,
2323
}: DataFormControlProps< Item > ) {
2424
const { getValue, setValue, label, description, isValid } = field;
25+
const disabled = field.isDisabled( { item: data, field } );
2526

2627
const onChangeControl = useCallback( () => {
2728
onChange(
@@ -39,6 +40,7 @@ export default function Checkbox< Item >( {
3940
help={ description }
4041
checked={ getValue( { item: data } ) }
4142
onChange={ onChangeControl }
43+
disabled={ disabled }
4244
/>
4345
);
4446
}

‎packages/dataviews/src/components/dataform-controls/color.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@ const { ValidatedInputControl } = unlock( privateApis );
3030
const ColorPickerDropdown = ( {
3131
color,
3232
onColorChange,
33+
disabled,
3334
}: {
3435
color: string;
3536
onColorChange: ( newColor: string ) => void;
37+
disabled?: boolean;
3638
} ) => {
3739
const validColor = color && colord( color ).isValid() ? color : '#ffffff';
3840

@@ -45,6 +47,8 @@ const ColorPickerDropdown = ( {
4547
onClick={ onToggle }
4648
aria-label={ __( 'Open color picker' ) }
4749
size="small"
50+
disabled={ disabled }
51+
accessibleWhenDisabled
4852
icon={ () => <ColorIndicator colorValue={ validColor } /> }
4953
/>
5054
) }
@@ -70,6 +74,7 @@ export default function Color< Item >( {
7074
validity,
7175
}: DataFormControlProps< Item > ) {
7276
const { label, placeholder, description, setValue, isValid } = field;
77+
const disabled = field.isDisabled( { item: data, field } );
7378
const value = field.getValue( { item: data } ) || '';
7479

7580
const handleColorChange = useCallback(
@@ -98,11 +103,13 @@ export default function Color< Item >( {
98103
onChange={ handleInputChange }
99104
hideLabelFromVision={ hideLabelFromVision }
100105
type="text"
106+
disabled={ disabled }
101107
prefix={
102108
<InputControlPrefixWrapper variant="control">
103109
<ColorPickerDropdown
104110
color={ value }
105111
onColorChange={ handleColorChange }
112+
disabled={ disabled }
106113
/>
107114
</InputControlPrefixWrapper>
108115
}

‎packages/dataviews/src/components/dataform-controls/date.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,7 @@ function CalendarDateControl< Item >( {
299299
isValid,
300300
format: fieldFormat,
301301
} = field;
302+
const disabled = field.isDisabled( { item: data, field } );
302303
const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
303304
null
304305
);
@@ -406,6 +407,8 @@ function CalendarDateControl< Item >( {
406407
variant="tertiary"
407408
isPressed={ isSelected }
408409
size="small"
410+
disabled={ disabled }
411+
accessibleWhenDisabled
409412
onClick={ () =>
410413
handlePresetClick( preset )
411414
}
@@ -419,8 +422,8 @@ function CalendarDateControl< Item >( {
419422
variant="tertiary"
420423
isPressed={ ! selectedPresetId }
421424
size="small"
422-
disabled={ !! selectedPresetId }
423-
accessibleWhenDisabled={ false }
425+
disabled={ !! selectedPresetId || disabled }
426+
accessibleWhenDisabled
424427
>
425428
{ __( 'Custom' ) }
426429
</Button>
@@ -436,6 +439,7 @@ function CalendarDateControl< Item >( {
436439
value={ value }
437440
onChange={ handleManualDateChange }
438441
required={ !! field.isValid?.required }
442+
disabled={ disabled }
439443
/>
440444

441445
{ /* Calendar widget */ }
@@ -449,6 +453,7 @@ function CalendarDateControl< Item >( {
449453
onMonthChange={ setCalendarMonth }
450454
timeZone={ timezoneString || undefined }
451455
weekStartsOn={ weekStartsOn }
456+
disabled={ disabled }
452457
/>
453458
</Stack>
454459
</BaseControl>
@@ -472,6 +477,7 @@ function CalendarDateRangeControl< Item >( {
472477
setValue,
473478
format: fieldFormat,
474479
} = field;
480+
const disabled = field.isDisabled( { item: data, field } );
475481
let value: DateRange;
476482
const fieldValue = getValue( { item: data } );
477483
if (
@@ -626,6 +632,8 @@ function CalendarDateRangeControl< Item >( {
626632
variant="tertiary"
627633
isPressed={ isSelected }
628634
size="small"
635+
disabled={ disabled }
636+
accessibleWhenDisabled
629637
onClick={ () =>
630638
handlePresetClick( preset )
631639
}
@@ -639,8 +647,8 @@ function CalendarDateRangeControl< Item >( {
639647
variant="tertiary"
640648
isPressed={ ! selectedPresetId }
641649
size="small"
642-
accessibleWhenDisabled={ false }
643-
disabled={ !! selectedPresetId }
650+
accessibleWhenDisabled
651+
disabled={ !! selectedPresetId || disabled }
644652
>
645653
{ __( 'Custom' ) }
646654
</Button>
@@ -664,6 +672,7 @@ function CalendarDateRangeControl< Item >( {
664672
handleManualDateChange( 'from', newValue )
665673
}
666674
required={ !! field.isValid?.required }
675+
disabled={ disabled }
667676
/>
668677
<InputControl
669678
__next40pxDefaultSize
@@ -676,6 +685,7 @@ function CalendarDateRangeControl< Item >( {
676685
handleManualDateChange( 'to', newValue )
677686
}
678687
required={ !! field.isValid?.required }
688+
disabled={ disabled }
679689
/>
680690
</Stack>
681691

@@ -687,6 +697,7 @@ function CalendarDateRangeControl< Item >( {
687697
onMonthChange={ setCalendarMonth }
688698
timeZone={ timezone.string || undefined }
689699
weekStartsOn={ weekStartsOn }
700+
disabled={ disabled }
690701
/>
691702
</Stack>
692703
</BaseControl>

‎packages/dataviews/src/components/dataform-controls/datetime.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function CalendarDateTimeControl< Item >( {
4141
}: DataFormControlProps< Item > ) {
4242
const { compact } = config || {};
4343
const { id, label, description, setValue, getValue, isValid } = field;
44+
const disabled = field.isDisabled( { item: data, field } );
4445
const fieldValue = getValue( { item: data } );
4546
const value = typeof fieldValue === 'string' ? fieldValue : undefined;
4647

@@ -179,6 +180,7 @@ function CalendarDateTimeControl< Item >( {
179180
hideLabelFromVision
180181
value={ formatDateTime( value ) }
181182
onChange={ handleManualDateTimeChange }
183+
disabled={ disabled }
182184
/>
183185
{ /* Calendar widget */ }
184186
{ ! compact && (
@@ -194,6 +196,7 @@ function CalendarDateTimeControl< Item >( {
194196
onMonthChange={ setCalendarMonth }
195197
timeZone={ timezoneString || undefined }
196198
weekStartsOn={ weekStartsOn }
199+
disabled={ disabled }
197200
/>
198201
) }
199202
</Stack>

‎packages/dataviews/src/components/dataform-controls/password.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default function Password< Item >( {
2323
validity,
2424
}: DataFormControlProps< Item > ) {
2525
const [ isVisible, setIsVisible ] = useState( false );
26+
const disabled = field.isDisabled( { item: data, field } );
2627

2728
const toggleVisibility = useCallback( () => {
2829
setIsVisible( ( prev ) => ! prev );
@@ -49,6 +50,8 @@ export default function Password< Item >( {
4950
? __( 'Hide password' )
5051
: __( 'Show password' )
5152
}
53+
disabled={ disabled }
54+
accessibleWhenDisabled
5255
/>
5356
</InputControlSuffixWrapper>
5457
),

‎packages/dataviews/src/components/dataform-controls/radio.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default function Radio< Item >( {
2323
validity,
2424
}: DataFormControlProps< Item > ) {
2525
const { label, description, getValue, setValue, isValid } = field;
26+
const disabled = field.isDisabled( { item: data, field } );
2627
const { elements, isLoading } = useElements( {
2728
elements: field.elements,
2829
getElements: field.getElements,
@@ -50,6 +51,7 @@ export default function Radio< Item >( {
5051
options={ elements }
5152
selected={ value }
5253
hideLabelFromVision={ hideLabelFromVision }
54+
disabled={ disabled }
5355
/>
5456
);
5557
}

‎packages/dataviews/src/components/dataform-controls/select.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default function Select< Item >( {
2323
validity,
2424
}: DataFormControlProps< Item > ) {
2525
const { type, label, description, getValue, setValue, isValid } = field;
26+
const disabled = field.isDisabled( { item: data, field } );
2627

2728
const isMultiple = type === 'array';
2829
const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
@@ -55,6 +56,7 @@ export default function Select< Item >( {
5556
__next40pxDefaultSize
5657
hideLabelFromVision={ hideLabelFromVision }
5758
multiple={ isMultiple }
59+
disabled={ disabled }
5860
/>
5961
);
6062
}

‎packages/dataviews/src/components/dataform-controls/textarea.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default function Textarea< Item >( {
2323
validity,
2424
}: DataFormControlProps< Item > ) {
2525
const { rows = 4 } = config || {};
26+
const disabled = field.isDisabled( { item: data, field } );
2627
const { label, placeholder, description, setValue, isValid } = field;
2728
const value = field.getValue( { item: data } );
2829

@@ -43,6 +44,7 @@ export default function Textarea< Item >( {
4344
help={ description }
4445
onChange={ onChangeControl }
4546
rows={ rows }
47+
disabled={ disabled }
4648
minLength={
4749
isValid.minLength ? isValid.minLength.constraint : undefined
4850
}

0 commit comments

Comments
 (0)