Forms: add min/max options to number field (#41783)

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

Upstream-Ref: Automattic/jetpack@e0b2fda

Author: simison

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: add min/max options to number field
+
 ### Changed
 - Contact Form: Updated editor styles for improved UI consistency and better alignment of form elements.
 - Forms: add accessible name field to advanced settings

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' => '1bce0b68e02a4cfdd88e');
+<?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' => 'ff4ec9b76b23d86fbe89');

dist/blocks/editor.js

@@ -113,6 +113,8 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				'labelcolor'             => null,
 				'labelfontsize'          => null,
 				'fieldfontsize'          => null,
+				'min'                    => null,
+				'max'                    => null,
 			),
 			$attributes,
 			'contact-field'
@@ -371,7 +373,18 @@ public function render() {
 		$field_value = Contact_Form_Plugin::strip_tags( $this->value );
 		$field_label = Contact_Form_Plugin::strip_tags( $field_label );
 
-		$rendered_field = $this->render_field( $field_type, $field_id, $field_label, $field_value, $field_class, $field_placeholder, $field_required, $field_required_text );
+		$extra_attrs = array();
+
+		if ( $field_type === 'number' ) {
+			if ( is_numeric( $this->get_attribute( 'min' ) ) ) {
+				$extra_attrs['min'] = $this->get_attribute( 'min' );
+			}
+			if ( is_numeric( $this->get_attribute( 'max' ) ) ) {
+				$extra_attrs['max'] = $this->get_attribute( 'max' );
+			}
+		}
+
+		$rendered_field = $this->render_field( $field_type, $field_id, $field_label, $field_value, $field_class, $field_placeholder, $field_required, $field_required_text, $extra_attrs );
 
 		/**
 		 * Filter the HTML of the Contact Form.
@@ -928,12 +941,13 @@ public function render_date_field( $id, $label, $value, $class, $required, $requ
 	 * @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.
+	 * @param array  $extra_attrs - Extra attributes used in number field, namely `min` and `max`.
 	 *
 	 * @return string HTML
 	 */
-	public function render_number_field( $id, $label, $value, $class, $required, $required_field_text, $placeholder ) {
+	public function render_number_field( $id, $label, $value, $class, $required, $required_field_text, $placeholder, $extra_attrs = array() ) {
 		$field  = $this->render_label( 'number', $id, $label, $required, $required_field_text );
-		$field .= $this->render_input_field( 'number', $id, $value, $class, $placeholder, $required );
+		$field .= $this->render_input_field( 'number', $id, $value, $class, $placeholder, $required, $extra_attrs );
 		return $field;
 	}
 
@@ -1039,10 +1053,11 @@ class="below-label__label ' . ( $this->is_error() ? ' form-error' : '' ) . '"
 	 * @param string $placeholder - the field placeholder content.
 	 * @param bool   $required - if the field is marked as required.
 	 * @param string $required_field_text - the text for a field marked as required.
+	 * @param array  $extra_attrs - extra attributes to be passed to render functions.
 	 *
 	 * @return string HTML
 	 */
-	public function render_field( $type, $id, $label, $value, $class, $placeholder, $required, $required_field_text ) {
+	public function render_field( $type, $id, $label, $value, $class, $placeholder, $required, $required_field_text, $extra_attrs = array() ) {
 		if ( ! $this->is_field_renderable( $type ) ) {
 			return null;
 		}
@@ -1130,7 +1145,7 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 				$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 );
+				$field .= $this->render_number_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder, $extra_attrs );
 				break;
 			default: // text field
 				$field .= $this->render_default_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder, $type );