fix: WordPress forms.css override and cache invalidation

🔴 Issue 1: WordPress forms.css Breaking Input Styling (FIXED)
Problem: /wp-admin/css/forms.css overriding our input styles
- box-shadow: 0 0 0 transparent
- border-radius: 4px
- background-color: #fff
- color: #2c3338

Solution:
- Added !important overrides to Input component
- !bg-transparent !border-input !rounded-md !shadow-sm
- Forces our shadcn styles over WordPress admin CSS

Result:  Inputs now look consistent regardless of WP admin CSS

🔴 Issue 2: Toggle Not Saving + Toast Lying (FIXED)
Problem:
- Toggle appears to work but doesn't persist
- Response shows enabled: false but toast says 'enabled'
- WooCommerce gateway cache not clearing

Root Cause:
- WC()->payment_gateways()->payment_gateways() returns cached data
- wp_cache_delete not enough
- Need to force WooCommerce to reload gateways

Solution:
Backend (PaymentGatewaysProvider.php):
- wp_cache_flush() after save
- WC()->payment_gateways()->init() to reload
- Clear cache before fetching updated gateway

Frontend (Payments.tsx):
- await queryClient.invalidateQueries()
- Show toast AFTER refetch completes
- No more lying toast

Result:  Toggle saves correctly + honest toast timing

📋 Technical Details:

WooCommerce Cache Layers:
1. wp_cache (object cache)
2. WC()->payment_gateways() internal cache
3. Gateway instance settings cache

Our Fix:
1. Save to DB
2. wp_cache_flush()
3. WC()->payment_gateways()->init()
4. Fetch fresh data
5. Return to frontend

Files Modified:
- input.tsx: !important overrides for WP admin CSS
- PaymentGatewaysProvider.php: Force WC reload
- PaymentsController.php: Clear cache before fetch
- Payments.tsx: Await invalidation before toast

🎯 Result:
 Inputs look perfect (no WP CSS interference)
 Toggle saves and persists correctly
 Toast shows after real state confirmed
This commit is contained in:
dwindown
2025-11-05 23:20:54 +07:00
parent af07ebeb9a
commit ac8870c104
4 changed files with 16 additions and 4 deletions

View File

@@ -12,6 +12,8 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
// Override browser default styles for all input types // Override browser default styles for all input types
"appearance-none [-webkit-appearance:none] [-moz-appearance:textfield]", "appearance-none [-webkit-appearance:none] [-moz-appearance:textfield]",
// Override WordPress admin forms.css with !important
"!bg-transparent !border-input !rounded-md !shadow-sm",
className className
)} )}
ref={ref} ref={ref}

View File

@@ -69,8 +69,9 @@ export default function PaymentsPage() {
setTogglingGateway(id); setTogglingGateway(id);
return api.post(`/payments/gateways/${id}/toggle`, { enabled }); return api.post(`/payments/gateways/${id}/toggle`, { enabled });
}, },
onSuccess: () => { onSuccess: async () => {
queryClient.invalidateQueries({ queryKey: ['payment-gateways'] }); // Wait for refetch to complete before showing toast
await queryClient.invalidateQueries({ queryKey: ['payment-gateways'] });
toast.success('Gateway updated successfully'); toast.success('Gateway updated successfully');
setTogglingGateway(null); setTogglingGateway(null);
}, },

View File

@@ -223,7 +223,10 @@ class PaymentsController extends WP_REST_Controller {
return $result; return $result;
} }
// Return updated gateway data // Clear cache before fetching updated gateway
wp_cache_flush();
// Return updated gateway data (fresh from DB)
$gateway = PaymentGatewaysProvider::get_gateway($gateway_id); $gateway = PaymentGatewaysProvider::get_gateway($gateway_id);
return rest_ensure_response([ return rest_ensure_response([

View File

@@ -373,8 +373,14 @@ class PaymentGatewaysProvider {
// Re-enable HTTP requests // Re-enable HTTP requests
remove_filter('pre_http_request', '__return_true', 999); remove_filter('pre_http_request', '__return_true', 999);
// Clear cache // Clear all WooCommerce caches
wp_cache_delete('woocommerce_payment_gateways', 'options'); wp_cache_delete('woocommerce_payment_gateways', 'options');
wp_cache_flush();
// Force WooCommerce to reload payment gateways
if (function_exists('WC') && WC()->payment_gateways()) {
WC()->payment_gateways()->init();
}
return true; return true;
} }