Forms: handle single input forms (#45689)

* changelog

* detect when form has a single input so to not print the big red error box

* add 'auto' as a width option for fields

Author: CGastrell

projects/packages/forms/changelog/fix-forms-field-errors-style

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: add "auto" width for fields and detect when a form has a single input in it to show prettier validation errors 

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -106,6 +106,10 @@
 				max-width: 75%;
 			}
 
+			&.jetpack-field__width-auto {
+				flex: 1 1 auto;
+			}
+
 			@media (max-width: #{ (gb.$break-mobile) }) {
 
 				&[class*="jetpack-field__width-"] {

projects/packages/forms/src/blocks/shared/components/jetpack-field-width.js

@@ -5,7 +5,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const PERCENTAGE_WIDTHS = [ 25, 33, 50, 75, 100 ];
+const PERCENTAGE_WIDTHS = [ 25, 33, 50, 75, 100, 'auto' ];
 
 export default function JetpackFieldWidth( { setAttributes, width } ) {
 	return (
@@ -29,7 +29,7 @@ export default function JetpackFieldWidth( { setAttributes, width } ) {
 					return (
 						<ToggleGroupControlOption
 							key={ widthValue }
-							label={ `${ widthValue }%` }
+							label={ widthValue === 'auto' ? __( 'Auto', 'jetpack-forms' ) : `${ widthValue }%` }
 							value={ widthValue }
 						/>
 					);

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

@@ -735,7 +735,14 @@ public static function parse( $attributes, $content, $context = array() ) {
 			$version
 		);
 
-		$container_classes        = array( 'wp-block-jetpack-contact-form-container' );
+		$is_single_input_form = count( $form->fields ) === 1;
+
+		$container_classes = array( 'wp-block-jetpack-contact-form-container' );
+
+		if ( $is_single_input_form ) {
+			$container_classes[] = 'is-single-input-form';
+		}
+
 		$container_classes[]      = self::get_block_alignment_class( $attributes );
 		$container_classes_string = implode( ' ', $container_classes );
 
@@ -906,7 +913,7 @@ class='" . esc_attr( $form_classes ) . "' $form_aria_label
 
 			if ( $is_multistep ) {
 				$r = preg_replace( '/<div class="wp-block-jetpack-form-step-navigation__wrapper/', self::render_error_wrapper() . ' <div class="wp-block-jetpack-form-step-navigation__wrapper', $r, 1 );
-			} elseif ( $has_submit_button_block ) {
+			} elseif ( $has_submit_button_block && ! $is_single_input_form ) {
 				// Place the error wrapper before the FIRST button block only to avoid duplicates (e.g., navigation buttons in multistep forms).
 				// Replace only the first occurrence.
 				$r = preg_replace( '/<div class="wp-block-jetpack-button/', self::render_error_wrapper() . ' <div class="wp-block-jetpack-button', $r, 1 );

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

@@ -434,6 +434,10 @@ that needs to mimic the input element styles */
 	max-width: 75%;
 }
 
+.wp-block-jetpack-contact-form .grunion-field-width-auto-wrap {
+	flex: 1 1 auto;
+}
+
 @media only screen and ( max-width: 480px ) {
 
 	.wp-block-jetpack-contact-form .grunion-field-wrap {
@@ -1217,12 +1221,18 @@ on production builds, the attributes are being reordered, causing side-effects
 }
 
 .contact-form__input-error.has-errors {
+
 	margin: 0.25rem 0;
 	display: flex;
 	opacity: 1;
 	max-height: unset;
 	transform: translateY(0);
 	transition: opacity 200ms cubic-bezier(0.34, 0.8, 0.34, 1), transform 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
+
+	.is-single-input-form & {
+		position: absolute;
+	}
+
 }
 
 .contact-form [aria-invalid="true"]:not(fieldset),