Merge pull request #1945 from IanDelMar/fix-woo-form-args

Fix understrap_wc_form_field_args()

css/theme-bootstrap4.css

@@ -11634,6 +11634,10 @@ figure.woocommerce-product-gallery__wrapper {
   color: #dc3545;
 }
 
+.woocommerce form .form-row label.custom-control-label {
+  line-height: inherit;
+}
+
 .woocommerce div.product p.price,
 .woocommerce div.product span.price,
 .woocommerce div.product .stock,

css/theme.css

@@ -12350,6 +12350,19 @@ figure.woocommerce-product-gallery__wrapper {
   color: #dc3545;
 }
 
+.woocommerce form .form-row label.form-check-label {
+  line-height: inherit;
+}
+
+.woocommerce form .form-row .checkbox.form-check {
+  display: block;
+  line-height: inherit;
+}
+
+.woocommerce form .form-row .input-checkbox.form-check-input {
+  margin: 0.25em 0 0 -1.5em;
+}
+
 .woocommerce div.product p.price,
 .woocommerce div.product span.price,
 .woocommerce div.product .stock,

inc/woocommerce.php

@@ -23,6 +23,7 @@ if ( ! function_exists( 'understrap_woocommerce_support' ) ) {
 
 		// Add Bootstrap classes to form fields.
 		add_filter( 'woocommerce_form_field_args', 'understrap_wc_form_field_args', 10, 3 );
+		add_filter( 'woocommerce_form_field_radio', 'understrap_wc_form_field_radio', 10, 4 );
 		add_filter( 'woocommerce_quantity_input_classes', 'understrap_quantity_input_classes' );
 		add_filter( 'woocommerce_loop_add_to_cart_args', 'understrap_loop_add_to_cart_args' );
 
@@ -75,8 +76,10 @@ if ( ! function_exists( 'understrap_woocommerce_wrapper_end' ) ) {
 
 if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 	/**
-	 * Filter hook function monkey patching form classes
-	 * Author: Adriano Monecchi http://stackoverflow.com/a/36724593/307826
+	 * Modifies the form field's arguments by input type. The arguments are used
+	 * in `woocommerce_form_field()` to build the form fields.
+	 *
+	 * @see https://woocommerce.github.io/code-reference/namespaces/default.html#function_woocommerce_form_field
 	 *
 	 * @param array<string,mixed> $args  Form field arguments.
 	 * @param string              $key   Value of the fields name attribute.
@@ -84,63 +87,83 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 	 *
 	 * @return array<string,mixed> Form field arguments.
 	 */
-	function understrap_wc_form_field_args( $args, $key, $value = null ) {
+	function understrap_wc_form_field_args( $args, $key, $value ) {
+		$bootstrap4 = 'bootstrap4' === get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
+
+		// Add margin to each form field's html element wrapper (<p></p>).
+		if ( $bootstrap4 ) {
+			$args['class'][] = 'form-group';
+		}
+		$args['class'][] = 'mb-3';
+
 		// Start field type switch case.
 		switch ( $args['type'] ) {
-			// Targets all select input type elements, except the country and state select input types.
-			case 'select':
-				/*
-				 * Add a class to the field's html element wrapper - woocommerce
-				 * input types (fields) are often wrapped within a <p></p> tag.
-				 */
-				$args['class'][] = 'form-group mb-3';
-				// Add a class to the form input itself.
-				$args['input_class'][] = 'form-control';
-				// Add custom data attributes to the form input itself.
-				$args['custom_attributes'] = array(
-					'data-plugin'      => 'select2',
-					'data-allow-clear' => 'true',
-					'aria-hidden'      => 'true',
-				);
-				break;
-
-			/*
-			 * By default WooCommerce will populate a select with the country names - $args
-			 * defined for this specific input type targets only the country select element.
-			 */
 			case 'country':
-				$args['class'][] = 'form-group mb-3 single-country';
-				break;
+				/*
+				 * WooCommerce will populate a <select> element of type 'country'
+				 * with the country names. $args defined for this specific input
+				 * type targets only the country <select> element.
+				 */
 
-			/*
-			 * By default WooCommerce will populate a select with state names - $args defined
-			 * for this specific input type targets only the country select element.
-			 */
-			case 'state':
-				$args['class'][]           = 'form-group mb-3';
-				$args['custom_attributes'] = array(
-					'data-plugin'      => 'select2',
-					'data-allow-clear' => 'true',
-					'aria-hidden'      => 'true',
-				);
+				$args['class'][] = 'single-country';
 				break;
-			case 'textarea':
-				$args['input_class'][] = 'form-control';
+			case 'state':
+				/*
+				 * WooCommerce will populate a <select> element of type 'state'
+				 * with the state names. $args defined for this specific input
+				 * type targets only the state <select> element.
+				 */
+
+				// Add custom data attributes to the form input itself.
+				$args['custom_attributes']['data-plugin']      = 'select2';
+				$args['custom_attributes']['data-allow-clear'] = 'true';
+				$args['custom_attributes']['aria-hidden']      = 'true';
 				break;
 			case 'checkbox':
-					$args['class'][] = 'form-group mb-3';
+				/*
+				 * WooCommerce checkbox markup differs from Bootstrap checkbox
+				 * markup. We apply Bootstrap classes such that the WooCommerce
+				 * checkbox look matches the Bootstrap checkbox look.
+				 */
+
+				// Get Bootstrap version specific CSS class base.
+				$base = $bootstrap4 ? 'custom-control' : 'form-check';
+
+				if ( isset( $args['label'] ) ) {
 					// Wrap the label in <span> tag.
-					$args['label'] = isset( $args['label'] ) ? '<span class="custom-control-label">' . $args['label'] . '<span>' : '';
-					// Add a class to the form input's <label> tag.
-					$args['label_class'][] = 'custom-control custom-checkbox';
-					$args['input_class'][] = 'custom-control-input';
+					$args['label'] = "<span class=\"{$base}-label\">{$args['label']}</span>";
+				}
+
+				// Add a class to the form input's <label> tag.
+				$args['label_class'][] = $base;
+				if ( $bootstrap4 ) {
+					$args['label_class'][] = 'custom-checkbox';
+				}
+
+				// Add a class to the form input itself.
+				$args['input_class'][] = $base . '-input';
+				break;
+			case 'select':
+				/*
+				 * Targets all <select> elements, except the <select> elements
+				 * of type country or of type state.
+				 */
+
+				// Add a class to the form input itself.
+				$args['input_class'][] = $bootstrap4 ? 'form-control' : 'form-select';
+
+				// Add custom data attributes to the form input itself.
+				$args['custom_attributes']['data-plugin']      = 'select2';
+				$args['custom_attributes']['data-allow-clear'] = 'true';
 				break;
 			case 'radio':
-				$args['label_class'][] = 'custom-control custom-radio';
-				$args['input_class'][] = 'custom-control-input';
+				// Get Bootstrap version specific CSS class base.
+				$base = $bootstrap4 ? 'custom-control' : 'form-check';
+
+				$args['label_class'][] = $base . '-label';
+				$args['input_class'][] = $base . '-input';
 				break;
 			default:
-				$args['class'][]       = 'form-group mb-3';
 				$args['input_class'][] = 'form-control';
 				break;
 		} // End of switch ( $args ).
@@ -148,6 +171,63 @@ if ( ! function_exists( 'understrap_wc_form_field_args' ) ) {
 	}
 }
 
+if ( ! function_exists( 'understrap_wc_form_field_radio' ) ) {
+	/**
+	 * Adjust the WooCommerce checkout/address radio fields to match the look of
+	 * Bootstrap radio fields.
+	 *
+	 * Wraps each radio field (`<input>`+`<label>`) in a `.from-check`.
+	 *
+	 * If `$args['label']` is set a `<label>` tag is prepended to the radio
+	 * fields. `$args['label_class']` is used for the class attribute of this
+	 * tag and the class attribute of the actual input labels. Hence, we must
+	 * remove the first occurance of the label class added via
+	 * `understrap_wc_form_field_args()` that is meant for input labels only.
+	 *
+	 * @param string              $field The field's HTML incl. the wrapper element.
+	 * @param string              $key   The wrapper element's id attribute value.
+	 * @param array<string|mixed> $args  An array of field arguments.
+	 * @param string|null         $value The field's value.
+	 * @return string
+	 */
+	function understrap_wc_form_field_radio( $field, $key, $args, $value ) {
+
+		// Set up Bootstrap version specific variables.
+		if ( 'bootstrap4' === get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' ) ) {
+			$wrapper_classes = 'custom-control custom-radio';
+			$label_class     = 'custom-control-label';
+		} else {
+			$wrapper_classes = 'form-check';
+			$label_class     = 'form-check-label';
+		}
+
+		// Remove the first occurance of the label class if neccessary.
+		if ( isset( $args['label'] ) && isset( $args['label_class'] ) ) {
+			$strpos = strpos( $field, $label_class );
+			if ( false !== $strpos ) {
+				$field = substr_replace( $field, '', $strpos, strlen( $label_class ) );
+
+				/*
+				 * If $label_class was the only class in $args['label_class']
+				 * then there is an empty class attribute now. Let's remove it.
+				 */
+				$field = str_replace( 'class=""', '', $field );
+			}
+		}
+
+		// Wrap each radio in a <span.from-check>.
+		$field = str_replace( '<input', "<span class=\"{$wrapper_classes}\"><input", $field );
+		$field = str_replace( '</label>', '</label></span>', $field );
+		if ( isset( $args['label'] ) ) {
+			// Remove the closing span tag from the first <label> element.
+			$strpos = strpos( $field, '</label>' ) + strlen( '</label>' );
+			$field  = substr_replace( $field, '', $strpos, strlen( '</span>' ) );
+		}
+
+		return $field;
+	}
+}
+
 if ( ! is_admin() && ! function_exists( 'wc_review_ratings_enabled' ) ) {
 	/**
 	 * Check if reviews are enabled.

phpmd.baseline.xml

@@ -2,5 +2,7 @@
 <phpmd-baseline>
   <violation rule="PHPMD\Rule\Design\LongMethod" file="inc/customizer.php"/>
   <violation rule="PHPMD\Rule\Naming\LongVariable" file="inc/widgets.php"/>
+  <violation rule="PHPMD\Rule\CyclomaticComplexity" file="inc/woocommerce.php"/>
   <violation rule="PHPMD\Rule\UnusedFormalParameter" file="inc/woocommerce.php"/>
+  <violation rule="PHPMD\Rule\Design\LongParameterList" file="inc/woocommerce.php"/>
 </phpmd-baseline>

phpstan-baseline.neon

@@ -117,7 +117,22 @@ parameters:
 
 		-
 			message: "#^Cannot access an offset on mixed\\.$#"
-			count: 12
+			count: 10
+			path: inc/woocommerce.php
+
+		-
+			message: "#^Cannot access offset 'aria\\-hidden' on mixed\\.$#"
+			count: 1
+			path: inc/woocommerce.php
+
+		-
+			message: "#^Cannot access offset 'data\\-allow\\-clear' on mixed\\.$#"
+			count: 2
+			path: inc/woocommerce.php
+
+		-
+			message: "#^Cannot access offset 'data\\-plugin' on mixed\\.$#"
+			count: 2
 			path: inc/woocommerce.php
 
 		-
@@ -129,3 +144,8 @@ parameters:
 			message: "#^Function understrap_quantity_input_classes\\(\\) return type has no value type specified in iterable type array\\.$#"
 			count: 1
 			path: inc/woocommerce.php
+
+		-
+			message: "#^Part \\$args\\['label'\\] \\(mixed\\) of encapsed string cannot be cast to string\\.$#"
+			count: 1
+			path: inc/woocommerce.php

src/sass/theme/_woocommerce.scss

@@ -64,6 +64,35 @@ figure.woocommerce-product-gallery__wrapper {
 	color: $danger;
 }
 
+.woocommerce form .form-row label {
+	// Override WooCommerce default styles.
+	@if variable-exists('bootstrap4') {
+		&.custom-control-label {
+			line-height: inherit;
+		}
+	} @else {
+		&.form-check-label {
+			line-height: inherit;
+		}
+	}
+}
+
+@if not variable-exists('bootstrap4') {
+	// Override WooCommerce default styles.
+	.woocommerce form .form-row .checkbox {
+		&.form-check {
+			display: block;
+			line-height: inherit;
+		}
+	}
+	.woocommerce form .form-row .input-checkbox {
+		&.form-check-input {
+			$top: ($line-height-base - $form-check-input-width) * .5;
+			$left: $form-check-padding-start * -1;
+			margin: $top 0 0 $left
+		}
+	}
+}
 
 // Accessibility requirement for color contrast
 .woocommerce div.product p.price,