Update settings API and wizard styles

Author: ajaydsouza

includes/admin/settings/class-settings-api.php

@@ -978,7 +978,7 @@ public function plugin_settings() {
 	 * Shows all the settings section labels as tab
 	 */
 	public function show_navigation() {
-		$active_tab = isset( $_GET['tab'] ) && array_key_exists( sanitize_key( wp_unslash( $_GET['tab'] ) ), $this->settings_sections ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'general'; // phpcs:ignore WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended
+		$active_tab = isset( $_GET['tab'] ) && array_key_exists( sanitize_key( wp_unslash( $_GET['tab'] ) ), $this->settings_sections ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : $this->default_tab; // phpcs:ignore WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended
 
 		$html = '<ul class="nav-tab-wrapper" style="padding:0">';
 
@@ -993,9 +993,13 @@ public function show_navigation() {
 
 			$active = $active_tab === $tab_id ? ' ' : '';
 
-			$html .= '<li style="padding:0; border:0; margin:0;"><a href="#' . esc_attr( $tab_id ) . '" title="' . esc_attr( $tab_name ) . '" class="nav-tab ' . sanitize_html_class( $active ) . '">';
-			$html .= esc_html( $tab_name );
-			$html .= '</a></li>';
+			$html .= sprintf(
+				'<li style="padding:0; border:0; margin:0;"><a href="#%s" title="%s" class="nav-tab %s">%s</a></li>',
+				esc_attr( $tab_id ),
+				esc_attr( $tab_name ),
+				sanitize_html_class( $active ),
+				esc_html( $tab_name )
+			);
 
 		}
 

includes/admin/settings/css/admin-style-rtl.css

@@ -1,3 +1,8 @@
+/* Tabs */
+#post-body-content .ui-tabs-nav {
+	border-bottom: 1px solid #c3c4c7;
+}
+
 /* General styles for the repeater wrapper */
 .wz-repeater-wrapper {
 	position: relative;

includes/admin/settings/css/admin-style-rtl.min.css

@@ -1,3 +1,8 @@
+/* Tabs */
+#post-body-content .ui-tabs-nav {
+	border-bottom: 1px solid #c3c4c7;
+}
+
 /* General styles for the repeater wrapper */
 .wz-repeater-wrapper {
 	position: relative;

includes/admin/settings/css/admin-style.css

@@ -1,8 +1,5 @@
 /**
  * Settings Wizard Styles
- *
- * @package Knowledge_Base
- * @since 4.2.0
  */
 
 /* Wizard Container */

includes/admin/settings/css/admin-style.min.css

@@ -73,8 +73,8 @@ jQuery(document).ready(function ($) {
 	// Reset default thumbnail - uses plugin-specific localized data.
 	$('.reset-default-thumb').on('click', function () {
 		var settingsKey = WZSettingsAdmin.settings_key || '';
-		var thumbDefault = (typeof window[WZSettingsAdmin.prefix + '_admin'] !== 'undefined') 
-			? window[WZSettingsAdmin.prefix + '_admin'].thumb_default 
+		var thumbDefault = (typeof window[WZSettingsAdmin.prefix + '_admin'] !== 'undefined')
+			? window[WZSettingsAdmin.prefix + '_admin'].thumb_default
 			: '';
 		$('#' + settingsKey + '\\[thumb_default\\]').val(thumbDefault);
 	});

includes/admin/settings/css/wizard.css

@@ -52,14 +52,23 @@
                 formattedOptions.push(...allOptions);
             }
 
+            // For non-taxonomy endpoints, add saved values as options so Tom Select can display them.
+            if (!(endpoint === 'category' || endpoint === 'post_tag' || endpoint.includes('tax')) && savedIds.length > 0) {
+                savedIds.forEach(savedValue => {
+                    if (!formattedOptions.some(opt => opt.value === savedValue)) {
+                        formattedOptions.push({ value: savedValue, text: savedValue });
+                    }
+                });
+            }
+
             // Get any custom config from data attributes
             let customConfig = {};
             const configAttr = element.getAttribute('data-ts-config');
 
             if (configAttr) {
                 try {
                     customConfig = JSON.parse(configAttr);
-                    console.log('Parsed custom config:', customConfig); // Debug log
+                    // console.log('Parsed custom config:', customConfig); // Debug log
                 } catch (e) {
                     console.error('Error parsing custom config:', configAttr, e);
                 }
@@ -83,13 +92,21 @@
                         if (endpoint === 'category' || endpoint === 'post_tag' || endpoint.includes('tax')) {
                             return `<div>${escape(data.value)}</div>`;
                         }
+                        // Avoid showing "value (value)" when value and text are identical.
+                        if (data.text === data.value) {
+                            return `<div>${escape(data.value)}</div>`;
+                        }
                         return `<div>${escape(data.text)} (${escape(data.value)})</div>`;
                     },
                     item: (data, escape) => {
                         // For taxonomy endpoints, display only the formatted value to avoid duplication
                         if (endpoint === 'category' || endpoint === 'post_tag' || endpoint.includes('tax')) {
                             return `<div>${escape(data.value)}</div>`;
                         }
+                        // Avoid showing "value (value)" when value and text are identical.
+                        if (data.text === data.value) {
+                            return `<div>${escape(data.value)}</div>`;
+                        }
                         return `<div>${escape(data.text)} (${escape(data.value)})</div>`;
                     }
                 },
@@ -125,7 +142,7 @@
 
             // Merge default config with custom config
             const finalConfig = { ...defaultConfig, ...customConfig };
-            console.log('Final config:', finalConfig); // Debug log
+            // console.log('Final config:', finalConfig); // Debug log
 
             // Initialize Tom Select with merged config
             try {