DataForm: support disabled controls

packages/dataviews/CHANGELOG.md

@@ -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

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

@@ -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,
@@ -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 ) {

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

@@ -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(
@@ -39,6 +40,7 @@ export default function Checkbox< Item >( {
 			help={ description }
 			checked={ getValue( { item: data } ) }
 			onChange={ onChangeControl }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -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';
 
@@ -45,6 +47,8 @@ const ColorPickerDropdown = ( {
 					onClick={ onToggle }
 					aria-label={ __( 'Open color picker' ) }
 					size="small"
+					disabled={ disabled }
+					accessibleWhenDisabled
 					icon={ () => <ColorIndicator colorValue={ validColor } /> }
 				/>
 			) }
@@ -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(
@@ -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>
 			}

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

@@ -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
 	);
@@ -406,6 +407,8 @@ function CalendarDateControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled={ false }
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -419,7 +422,7 @@ function CalendarDateControl< Item >( {
 							variant="tertiary"
 							isPressed={ ! selectedPresetId }
 							size="small"
-							disabled={ !! selectedPresetId }
+							disabled={ !! selectedPresetId || disabled }
 							accessibleWhenDisabled={ false }
 						>
 							{ __( 'Custom' ) }
@@ -436,6 +439,7 @@ function CalendarDateControl< Item >( {
 						value={ value }
 						onChange={ handleManualDateChange }
 						required={ !! field.isValid?.required }
+						disabled={ disabled }
 					/>
 
 					{ /* Calendar widget */ }
@@ -449,6 +453,7 @@ function CalendarDateControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				</Stack>
 			</BaseControl>
@@ -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 (
@@ -626,6 +632,8 @@ function CalendarDateRangeControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled={ false }
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -640,7 +648,7 @@ function CalendarDateRangeControl< Item >( {
 							isPressed={ ! selectedPresetId }
 							size="small"
 							accessibleWhenDisabled={ false }
-							disabled={ !! selectedPresetId }
+							disabled={ !! selectedPresetId || disabled }
 						>
 							{ __( 'Custom' ) }
 						</Button>
@@ -664,6 +672,7 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'from', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
 						/>
 						<InputControl
 							__next40pxDefaultSize
@@ -676,6 +685,7 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'to', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
 						/>
 					</Stack>
 
@@ -687,6 +697,7 @@ function CalendarDateRangeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				</Stack>
 			</BaseControl>

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

@@ -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;
 
@@ -179,6 +180,7 @@ function CalendarDateTimeControl< Item >( {
 					hideLabelFromVision
 					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
+					disabled={ disabled }
 				/>
 				{ /* Calendar widget */ }
 				{ ! compact && (
@@ -194,6 +196,7 @@ function CalendarDateTimeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				) }
 			</Stack>

packages/dataviews/src/components/dataform-controls/index.tsx

@@ -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 } }
+			/>
+		);
 	};
 }
 

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

@@ -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 );
@@ -49,6 +50,8 @@ export default function Password< Item >( {
 									? __( 'Hide password' )
 									: __( 'Show password' )
 							}
+							disabled={ disabled }
+							accessibleWhenDisabled
 						/>
 					</InputControlSuffixWrapper>
 				),

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

@@ -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,
@@ -50,6 +51,7 @@ export default function Radio< Item >( {
 			options={ elements }
 			selected={ value }
 			hideLabelFromVision={ hideLabelFromVision }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -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 ? [] : '' );
@@ -55,6 +56,7 @@ export default function Select< Item >( {
 			__next40pxDefaultSize
 			hideLabelFromVision={ hideLabelFromVision }
 			multiple={ isMultiple }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -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 } );
 
@@ -43,6 +44,7 @@ export default function Textarea< Item >( {
 			help={ description }
 			onChange={ onChangeControl }
 			rows={ rows }
+			disabled={ disabled }
 			minLength={
 				isValid.minLength ? isValid.minLength.constraint : undefined
 			}

packages/dataviews/src/components/dataform-controls/toggle-group.tsx

@@ -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(
@@ -67,6 +68,7 @@ export default function ToggleGroup< Item >( {
 					key={ el.value }
 					label={ el.label }
 					value={ el.value }
+					disabled={ disabled }
 				/>
 			) ) }
 		</ValidatedToggleGroupControl>

packages/dataviews/src/components/dataform-controls/toggle.tsx

@@ -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(
@@ -39,6 +40,7 @@ export default function Toggle< Item >( {
 			help={ description }
 			checked={ getValue( { item: data } ) }
 			onChange={ onChangeControl }
+			disabled={ disabled }
 		/>
 	);
 }

packages/dataviews/src/components/dataform-controls/utils/relative-date-control.tsx

@@ -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 : {};
@@ -102,6 +103,7 @@ export default function RelativeDateControl< Item >( {
 					step={ 1 }
 					value={ relValue }
 					onChange={ onChangeValue }
+					disabled={ disabled }
 				/>
 				<SelectControl
 					className="dataviews-controls__relative-date-unit"
@@ -111,6 +113,7 @@ export default function RelativeDateControl< Item >( {
 					options={ options }
 					onChange={ onChangeUnit }
 					hideLabelFromVision
+					disabled={ disabled }
 				/>
 			</Stack>
 		</BaseControl>

packages/dataviews/src/components/dataform-controls/utils/validated-input.tsx

@@ -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 ) =>
@@ -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

packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx

@@ -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 ) => {
@@ -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 }
 		/>
 	);
 }

packages/dataviews/src/components/dataviews-filters/input-widget.tsx

@@ -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 ],

packages/dataviews/src/dataform/stories/index.story.tsx

@@ -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,
 	},
 };