WordPress · oandregal · Sep 30, 2025 · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025
@@ -16,6 +16,7 @@
 
 - DataViews: Require at least one field to be visible. ([#71625](https://github.com/WordPress/gutenberg/pull/71625))
 - DataViews: Expose `DataViews.FiltersToggled` component to be used in free composition. [#71907](https://github.com/WordPress/gutenberg/pull/71907)
+- DataViews: Add `number` field and refactor `integer` field based on the `number` field. ([#71797](https://github.com/WordPress/gutenberg/pull/71797))
 
 ## 9.0.0 (2025-09-17)
 

@@ -939,7 +939,7 @@ Example:
 
 ### `type`
 
-Field type. One of `text`, `integer`, `datetime`.
+Field type. One of `text`, `integer`, `number`, `datetime`, `date`, `media`, `boolean`, `email`, `password`, `telephone`, `color`, `url`, `array`.
 
 If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions if no other values are specified.
 
@@ -1132,7 +1132,7 @@ Example:
 
 React component that renders the control to edit the field.
 
--   Type: React component | `string`. If it's a string, it needs to be one of `text`, `integer`, `datetime`, `radio`, `select`.
+-   Type: React component | `string`. If it's a string, it needs to be one of `array`, `checkbox`, `color`, `datetime`, `date`, `email`, `telephone`, `url`, `integer`, `number`, `password`, `radio`, `select`, `text`, `toggle`, `textarea`, `toggleGroup`.
 -   Required by DataForm. Optional if the field provided a `type`.
 -   Props:
     -   `data`: the item to be processed

@@ -19,6 +19,7 @@ import email from './email';
 import telephone from './telephone';
 import url from './url';
 import integer from './integer';
+import number from './number';
 import radio from './radio';
 import select from './select';
 import text from './text';
@@ -43,6 +44,7 @@ const FORM_CONTROLS: FormControls = {
 	telephone,
 	url,
 	integer,
+	number,
 	password,
 	radio,
 	select,

@@ -1,185 +1,9 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
-/**
- * WordPress dependencies
- */
-import {
-	Flex,
-	BaseControl,
-	__experimentalNumberControl as NumberControl,
-	privateApis,
-} from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedNumberControl } = unlock( privateApis );
-
-type IntegerBetween = [ number | string, number | string ];
-
-function BetweenControls( {
-	value,
-	onChange,
-	hideLabelFromVision,
-}: {
-	value: IntegerBetween;
-	onChange: ( [ min, max ]: IntegerBetween ) => void;
-	hideLabelFromVision?: boolean;
-} ) {
-	const [ min = '', max = '' ] = value;
-
-	const onChangeMin = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ Number( newValue ), max ] ),
-		[ onChange, max ]
-	);
-
-	const onChangeMax = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ min, Number( newValue ) ] ),
-		[ onChange, min ]
-	);
-
-	return (
-		<BaseControl
-			__nextHasNoMarginBottom
-			help={ __( 'The max. value must be greater than the min. value.' ) }
-		>
-			<Flex direction="row" gap={ 4 }>
-				<NumberControl
-					label={ __( 'Min.' ) }
-					value={ min }
-					max={ max ? Number( max ) - 1 : undefined }
-					onChange={ onChangeMin }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-				<NumberControl
-					label={ __( 'Max.' ) }
-					value={ max }
-					min={ min ? Number( min ) + 1 : undefined }
-					onChange={ onChangeMax }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-			</Flex>
-		</BaseControl>
-	);
-}
-
-export default function Integer< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-	operator,
-}: DataFormControlProps< Item > ) {
-	const { label, description, getValue, setValue } = field;
-	const value = getValue( { item: data } ) ?? '';
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedNumberControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string | undefined ) => {
-			onChange(
-				setValue( {
-					item: data,
-					// Do not convert an empty string or undefined to a number,
-					// otherwise there's a mismatch between the UI control (empty)
-					// and the data relied by onChange (0).
-					value: [ '', undefined ].includes( newValue )
-						? undefined
-						: Number( newValue ),
-				} )
-			);
-		},
-		[ data, onChange, setValue ]
-	);
-
-	const onChangeBetweenControls = useCallback(
-		( newValue: IntegerBetween ) => {
-			onChange(
-				setValue( {
-					item: data,
-					value: newValue,
-				} )
-			);
-		},
-		[ data, onChange, setValue ]
-	);
-
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: [ undefined, '', null ].includes( newValue )
-							? undefined
-							: Number( newValue ),
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
-	if ( operator === OPERATOR_BETWEEN ) {
-		let valueBetween: IntegerBetween = [ '', '' ];
-		if (
-			Array.isArray( value ) &&
-			value.length === 2 &&
-			value.every(
-				( element ) => typeof element === 'number' || element === ''
-			)
-		) {
-			valueBetween = value as IntegerBetween;
-		}
-		return (
-			<BetweenControls
-				value={ valueBetween }
-				onChange={ onChangeBetweenControls }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
+import ValidatedNumber from './utils/validated-number';
 
-	return (
-		<ValidatedNumberControl
-			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
-			label={ label }
-			help={ description }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	return <ValidatedNumber { ...props } decimals={ 0 } />;
 }
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedNumber from './utils/validated-number';
+
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	// TODO: remove this hardcoded value when the decimal number is configurable
+	return <ValidatedNumber { ...props } decimals={ 2 } />;
+}