From 5ad190aed0c2c77f85505cade4100c2573d3c376 Mon Sep 17 00:00:00 2001
From: "Jorge A. Torres" <jorge.torres@automattic.com>
Date: Thu, 15 Oct 2020 15:42:02 -0300
Subject: [PATCH] Make Settings class render fields in a more WC-friendly way

---
 .../ppcp-onboarding/assets/css/onboarding.css | 11 ++++++-
 .../src/Settings/class-settingsrenderer.php   | 29 ++++++++++++-------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css
index 31770a840..9fadc2b3f 100644
--- a/modules/ppcp-onboarding/assets/css/onboarding.css
+++ b/modules/ppcp-onboarding/assets/css/onboarding.css
@@ -78,4 +78,13 @@
 #field-client_id_production.onboarded.hide,
 #field-client_secret_production.onboarded.hide {
 	display:none;
-}
\ No newline at end of file
+}
+
+/* Probably not the best location for this but will do until there's a general purpose settings CSS file. */
+.ppcp-settings-field-heading td, .ppcp-settings-field-heading th {
+	padding-left: 0;
+}
+
+.woocommerce_page_wc-settings h3.ppcp-subheading {
+	font-size: 1.1em;
+}
diff --git a/modules/ppcp-wc-gateway/src/Settings/class-settingsrenderer.php b/modules/ppcp-wc-gateway/src/Settings/class-settingsrenderer.php
index b6d88e94b..2c116d539 100644
--- a/modules/ppcp-wc-gateway/src/Settings/class-settingsrenderer.php
+++ b/modules/ppcp-wc-gateway/src/Settings/class-settingsrenderer.php
@@ -151,7 +151,7 @@ class SettingsRenderer {
                          class="%s"
                          name="%s"
                      >%s</select>',
-			esc_attr( implode( ' ', $config['class'] ) ),
+			esc_attr( implode( ' ', isset( $config['input_class'] ) ? $config['input_class'] : array() ) ),
 			esc_attr( $key ) . '[]',
 			implode( '', $options )
 		);
@@ -241,7 +241,7 @@ class SettingsRenderer {
 		}
 
 		$html = sprintf(
-			'<h3 class="%s">%s</h3>',
+			'<h3 class="wc-settings-sub-title %s">%s</h3>',
 			esc_attr( implode( ' ', $config['class'] ) ),
 			esc_html( $config['heading'] )
 		);
@@ -295,33 +295,40 @@ class SettingsRenderer {
 			$key          = 'ppcp[' . $field . ']';
 			$id           = 'ppcp-' . $field;
 			$config['id'] = $id;
-			$th_td        = 'ppcp-heading' !== $config['type'] ? 'td' : 'th';
+			$th_td        = 'ppcp-heading' !== $config['type'] ? 'td' : 'td';
 			$colspan      = 'ppcp-heading' !== $config['type'] ? 1 : 2;
 			$classes      = isset( $config['classes'] ) ? $config['classes'] : array();
+			$classes[]    = sprintf( 'ppcp-settings-field-%s', str_replace( 'ppcp-', '', $config['type'] ) );
+			$description  = isset( $config['description'] ) ? $config['description'] : '';
+			unset( $config['description'] );
 			?>
 		<tr valign="top" id="<?php echo esc_attr( 'field-' . $field ); ?>" class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
 			<?php if ( 'ppcp-heading' !== $config['type'] ) : ?>
-			<th>
+			<th scope="row">
 				<label
 					for="<?php echo esc_attr( $id ); ?>"
 				><?php echo esc_html( $config['title'] ); ?></label>
 				<?php if ( isset( $config['desc_tip'] ) && $config['desc_tip'] ) : ?>
 				<span
 						class="woocommerce-help-tip"
-						data-tip="<?php echo esc_attr( $config['description'] ); ?>"
+						data-tip="<?php echo esc_attr( $description ); ?>"
 				></span>
 					<?php
-					unset( $config['description'] );
+					$description = '';
 				endif;
 				?>
 			</th>
 			<?php endif; ?>
 			<<?php echo esc_attr( $th_td ); ?> colspan="<?php echo (int) $colspan; ?>">
-						<?php
-						'ppcp-text' === $config['type'] ?
-						$this->render_text( $config )
-						: woocommerce_form_field( $key, $config, $value );
-						?>
+					<?php
+					'ppcp-text' === $config['type'] ?
+					$this->render_text( $config )
+					: woocommerce_form_field( $key, $config, $value );
+					?>
+
+				<?php if ( $description ) : ?>
+				<p class="<?php echo 'ppcp-heading' === $config['type'] ? '' : 'description'; ?>"><?php echo wp_kses_post( $description ); ?></p>
+				<?php endif; ?>
 			</<?php echo esc_attr( $th_td ); ?>>
 		</tr>
 			<?php