Forms: add number input (#40962)

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13312706351

Upstream-Ref: Automattic/jetpack@7e53a77

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 This is an alpha version! The changes listed here are not final.
 
+### Added
+- Forms block: add number input
+
 ### Changed
 - Forms: Added tracking for plugin installations.
 

dist/blocks/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '3fd97b8c68b722081761');
+<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '6cc8d5d4ec2e9343c7a8');

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`

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();

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;

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.
 	 */

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;

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;
@@ -204,11 +205,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%;
 }
@@ -311,7 +314,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%;
 	}
 
@@ -323,7 +327,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%;
 	}
 }