Forms: add number input

projects/packages/forms/changelog/add-forms-number-input

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms block: add number input

projects/packages/forms/src/blocks/README.md

@@ -8,6 +8,7 @@
 - `jetpack/field-date`
 - `jetpack/field-email`
 - `jetpack/field-name`
+- `jetpack/field-number`
 - `jetpack/field-option-checkbox`
 - `jetpack/field-option-radio`
 - `jetpack/field-radio`

projects/packages/forms/src/blocks/contact-form/child-blocks.js

@@ -114,6 +114,11 @@ const FieldDefaults = {
 	},
 	transforms: {
 		to: [
+			{
+				type: 'block',
+				blocks: [ 'jetpack/field-number' ],
+				transform: attributes => createBlock( 'jetpack/field-number', attributes ),
+			},
 			{
 				type: 'block',
 				blocks: [ 'jetpack/field-text' ],
@@ -380,6 +385,28 @@ export const childBlocks = [
 			},
 		},
 	},
+	{
+		name: 'field-number',
+		settings: {
+			...FieldDefaults,
+			title: __( 'Number Input Field', 'jetpack-forms' ),
+			description: __( 'Collect numbers from site visitors.', 'jetpack-forms' ),
+			icon: renderMaterialIcon(
+				<Path
+					fill={ getIconColor() }
+					d="M12 7H4V8.5H12V7ZM19.75 17.25V10.75H4.25V17.25H19.75ZM5.75 15.75V12.25H18.25V15.75H5.75Z"
+				/>
+			),
+			edit: editField( 'number' ),
+			attributes: {
+				...FieldDefaults.attributes,
+				label: {
+					type: 'string',
+					default: __( 'Number', 'jetpack-forms' ),
+				},
+			},
+		},
+	},
 	{
 		name: 'field-name',
 		settings: {

projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php

@@ -161,6 +161,13 @@ public static function register_child_blocks() {
 			)
 		);
 
+		Blocks::jetpack_register_block(
+			'jetpack/field-number',
+			array(
+				'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_field_number' ),
+			)
+		);
+
 		$blocks_variation = apply_filters( 'jetpack_blocks_variation', \Automattic\Jetpack\Constants::get_constant( 'JETPACK_BLOCKS_VARIATION' ) );
 		if ( 'beta' === $blocks_variation ) {
 			self::register_beta_blocks();

projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js

@@ -70,6 +70,7 @@ const JetpackField = props => {
 				setAttributes={ setAttributes }
 				placeholder={ placeholder }
 				attributes={ attributes }
+				hidePlaceholder={ type === 'number' }
 			/>
 		</>
 	);

projects/packages/forms/src/blocks/contact-form/transforms.js

@@ -34,6 +34,7 @@ const getContactFieldBlockName = type => {
 		select: `${ prefix }/field-select`,
 		email: `${ prefix }/field-email`,
 		name: `${ prefix }/field-name`,
+		number: `${ prefix }/field-number`,
 		default: `${ prefix }/field-text`,
 	};
 	return fieldTypes[ type ] ? fieldTypes[ type ] : fieldTypes.default;

projects/packages/forms/src/contact-form/class-contact-form-field.php

@@ -249,6 +249,13 @@ public function validate() {
 					$this->add_error( sprintf( __( '%s requires at least one selection', 'jetpack-forms' ), $field_label ) );
 				}
 				break;
+			case 'number':
+				// Make sure the number address is valid
+				if ( ! is_numeric( $field_value ) ) {
+					/* translators: %s is the name of a form field */
+					$this->add_error( sprintf( __( '%s requires a number', 'jetpack-forms' ), $field_label ) );
+				}
+				break;
 			default:
 				// Just check for presence of any text
 				if ( ! is_string( $field_value ) || ! strlen( trim( $field_value ) ) ) {
@@ -910,6 +917,25 @@ public function render_date_field( $id, $label, $value, $class, $required, $requ
 		return $field;
 	}
 
+	/**
+	 * Return the HTML for the number field.
+	 *
+	 * @param int    $id - the ID.
+	 * @param string $label - the label.
+	 * @param string $value - the value of the field.
+	 * @param string $class - the field class.
+	 * @param bool   $required - if the field is marked as required.
+	 * @param string $required_field_text - the text in the required text field.
+	 * @param string $placeholder - the field placeholder content.
+	 *
+	 * @return string HTML
+	 */
+	public function render_number_field( $id, $label, $value, $class, $required, $required_field_text, $placeholder ) {
+		$field  = $this->render_label( 'number', $id, $label, $required, $required_field_text );
+		$field .= $this->render_input_field( 'number', $id, $value, $class, $placeholder, $required );
+		return $field;
+	}
+
 	/**
 	 * Return the HTML for the default field.
 	 *
@@ -1102,6 +1128,9 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 			case 'consent':
 				$field .= $this->render_consent_field( $id, $field_class );
 				break;
+			case 'number':
+				$field .= $this->render_number_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder );
+				break;
 			default: // text field
 				$field .= $this->render_default_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder, $type );
 				break;

projects/packages/forms/src/contact-form/class-contact-form-plugin.php

@@ -520,6 +520,19 @@ public static function gutenblock_render_field_file( $atts, $content ) {
 		return Contact_Form::parse_contact_field( $atts, $content );
 	}
 
+	/**
+	 * Render the number field.
+	 *
+	 * @param array  $atts - the block attributes.
+	 * @param string $content - html content.
+	 *
+	 * @return string HTML for the file upload field.
+	 */
+	public static function gutenblock_render_field_number( $atts, $content ) {
+		$atts = self::block_attributes_to_shortcode_attributes( $atts, 'number' );
+		return Contact_Form::parse_contact_field( $atts, $content );
+	}
+
 	/**
 	 * Add the 'Form Responses' menu item as a submenu of Feedback.
 	 */

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -715,6 +715,10 @@ public static function get_compiled_form_for_email( $feedback_id, $form ) {
 	 * @return string
 	 */
 	public static function escape_and_sanitize_field_value( $value ) {
+		if ( $value === null ) {
+			return '';
+		}
+
 		$value = str_replace( array( '[', ']' ), array( '[', ']' ), $value );
 		return nl2br( wp_kses( $value, array() ) );
 	}
@@ -868,6 +872,9 @@ public static function get_default_label_from_type( $type ) {
 			case 'name':
 				$str = __( 'Name', 'jetpack-forms' );
 				break;
+			case 'number':
+				$str = __( 'Number', 'jetpack-forms' );
+				break;
 			case 'email':
 				$str = __( 'Email', 'jetpack-forms' );
 				break;

projects/packages/forms/src/contact-form/css/grunion.css

@@ -33,6 +33,7 @@
 	.contact-form input[type='email'],
 	.contact-form input[type='tel'],
 	.contact-form input[type='url'],
+	.contact-form input[type='number'],
 	.contact-form textarea
 ) {
 	box-sizing: border-box;
@@ -203,11 +204,13 @@
 .textwidget .contact-form input[type='email'],
 .textwidget .contact-form input[type='tel'],
 .textwidget .contact-form input[type='url'],
+.textwidget .contact-form input[type='number'],
 .textwidget .contact-form textarea,
 .wp-block-column .contact-form input[type='text'],
 .wp-block-column .contact-form input[type='email'],
 .wp-block-column .contact-form input[type='tel'],
 .wp-block-column .contact-form input[type='url'],
+.wp-block-column .contact-form input[type='number'],
 .wp-block-column .contact-form textarea {
 	width: 100%;
 }
@@ -309,7 +312,8 @@
 	.contact-form input[type='text'],
 	.contact-form input[type='email'],
 	.contact-form input[type='tel'],
-	.contact-form input[type='url'] {
+	.contact-form input[type='url'],
+	.contact-form input[type='number'] {
 		width: 50%;
 	}
 
@@ -321,7 +325,8 @@
 	.wp-block-jetpack-contact-form input[type='text'],
 	.wp-block-jetpack-contact-form input[type='email'],
 	.wp-block-jetpack-contact-form input[type='tel'],
-	.wp-block-jetpack-contact-form input[type='url'] {
+	.wp-block-jetpack-contact-form input[type='url'],
+	.wp-block-jetpack-contact-form input[type='number'] {
 		width: 100%;
 	}
 }

projects/plugins/jetpack/changelog/add-forms-number-input

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Forms block: add number input

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/constants.ts

@@ -1,6 +1,7 @@
 // All Jetpack Form blocks to extend
 export const JETPACK_FORM_CHILDREN_BLOCKS = [
 	'jetpack/field-name',
+	'jetpack/field-number',
 	'jetpack/field-email',
 	'jetpack/field-text',
 	'jetpack/field-textarea',