Dataform: Add new telephone field type and field control

packages/dataviews/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Features
 
 - Introduce a new `DataViewsPicker` component. [#70971](https://github.com/WordPress/gutenberg/pull/70971)
+- Dataform: Add new `telephone` field type and field control. [#71498](https://github.com/WordPress/gutenberg/pull/71498)
 
 ## 8.0.0 (2025-09-03)
 

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

@@ -391,6 +391,7 @@ const ValidationComponent = ( {
 	type ValidatedItem = {
 		text: string;
 		email: string;
+		telephone: string;
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
@@ -399,6 +400,7 @@ const ValidationComponent = ( {
 	const [ post, setPost ] = useState< ValidatedItem >( {
 		text: 'Can have letters and spaces',
 		email: 'hi@example.com',
+		telephone: '+306978241796',
 		integer: 2,
 		boolean: true,
 		customEdit: 'custom control',
@@ -418,6 +420,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customTelephoneRule = ( value: ValidatedItem ) => {
+		if ( ! /^\+30\d{10}$/.test( value.telephone ) ) {
+			return 'Telephone number must start with +30 and have 10 digits after.';
+		}
+
+		return null;
+	};
 	const customIntegerRule = ( value: ValidatedItem ) => {
 		if ( value.integer % 2 !== 0 ) {
 			return 'Integer must be an even number.';
@@ -451,6 +460,15 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customEmailRule ),
 			},
 		},
+		{
+			id: 'telephone',
+			type: 'telephone',
+			label: 'telephone',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customTelephoneRule ),
+			},
+		},
 		{
 			id: 'integer',
 			type: 'integer',
@@ -480,7 +498,14 @@ const ValidationComponent = ( {
 
 	const form = {
 		layout: { type },
-		fields: [ 'text', 'email', 'integer', 'boolean', 'customEdit' ],
+		fields: [
+			'text',
+			'email',
+			'telephone',
+			'integer',
+			'boolean',
+			'customEdit',
+		],
 	};
 
 	const canSave = isItemValid( post, _fields, form );

packages/dataviews/src/dataform-controls/email.tsx

@@ -1,72 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextControl } = unlock( privateApis );
+import ValidatedText from './utils/validated-text';
 
 export default function Email< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	return (
-		<ValidatedTextControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
-			} }
-			customValidity={ customValidity }
-			type="email"
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			help={ description }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
+		<ValidatedText
+			{ ...{ data, field, onChange, hideLabelFromVision, type: 'email' } }
 		/>
 	);
 }

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

@@ -15,6 +15,7 @@ import checkbox from './checkbox';
 import datetime from './datetime';
 import date from './date';
 import email from './email';
+import telephone from './telephone';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
@@ -34,6 +35,7 @@ const FORM_CONTROLS: FormControls = {
 	datetime,
 	date,
 	email,
+	telephone,
 	integer,
 	radio,
 	select,

packages/dataviews/src/dataform-controls/telephone.tsx

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedText from './utils/validated-text';
+
+export default function Telephone< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	return (
+		<ValidatedText
+			{ ...{ data, field, onChange, hideLabelFromVision, type: 'tel' } }
+		/>
+	);
+}

packages/dataviews/src/dataform-controls/text.tsx

@@ -1,71 +1,16 @@
-/**
- * WordPress dependencies
- */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextControl } = unlock( privateApis );
+import ValidatedText from './utils/validated-text';
 
 export default function Text< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	return (
-		<ValidatedTextControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
-			} }
-			customValidity={ customValidity }
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			help={ description }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
+		<ValidatedText { ...{ data, field, onChange, hideLabelFromVision } } />
 	);
 }

packages/dataviews/src/dataform-controls/utils/validated-text.tsx

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+const { ValidatedTextControl } = unlock( privateApis );
+
+export type DataFormValidatedTextControlProps< Item > =
+	DataFormControlProps< Item > & {
+		/**
+		 * The input type of the control.
+		 */
+		type?: 'text' | 'email' | 'tel';
+	};
+
+export default function ValidatedText< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	type,
+}: DataFormValidatedTextControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedTextControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<ValidatedTextControl
+			required={ !! field.isValid?.required }
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
+				}
+
+				setCustomValidity( undefined );
+			} }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			hideLabelFromVision={ hideLabelFromVision }
+			type={ type }
+		/>
+	);
+}

packages/dataviews/src/field-types/index.tsx

@@ -21,6 +21,7 @@ import { default as date } from './date';
 import { default as boolean } from './boolean';
 import { default as media } from './media';
 import { default as array } from './array';
+import { default as telephone } from './telephone';
 import { renderFromElements } from '../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
@@ -65,6 +66,10 @@ export default function getFieldTypeDefinition< Item >(
 		return array;
 	}
 
+	if ( 'telephone' === type ) {
+		return telephone;
+	}
+
 	// This is a fallback for fields that don't provide a type.
 	// It can be removed when the field.type is mandatory.
 	return {