🐛 CRITICAL FIX - Root Cause Found!
The plugin had hardcoded dev mode filters that forced EVERYONE into dev mode:
- add_filter('woonoow/admin_is_dev', '__return_true');
- add_filter('woonoow/admin_dev_server', fn() => 'https://woonoow.local:5173');
This caused:
- ✗ SPA trying to load from localhost:5173
- ✗ Loading @react-refresh and main.tsx (dev files)
- ✗ Not loading app.js and app.css (production files)
✅ Solution:
- Removed hardcoded filters from woonoow.php
- Commented them out with instructions
- Added debug logging to is_dev_mode()
- Updated installation checker to detect this issue
📝 For Developers:
If you need dev mode, add to wp-config.php:
define('WOONOOW_ADMIN_DEV', true);
Or use filter in your development plugin:
add_filter('woonoow/admin_is_dev', '__return_true');
🎯 Result:
- Production mode by default (no config needed)
- Dev mode only when explicitly enabled
- Better UX - plugin works out of the box
🐛 Problem:
- SPA not loading in wp-admin
- Trying to load from dev server (localhost:5173)
- Happening in Local by Flywheel (wp_get_environment_type() = 'development')
✅ Solution:
- Changed is_dev_mode() to ONLY enable dev mode if WOONOOW_ADMIN_DEV constant is explicitly set
- Removed wp_get_environment_type() check
- Now defaults to production mode (loads from admin-spa/dist/)
📝 To Enable Dev Mode:
Add to wp-config.php:
define('WOONOOW_ADMIN_DEV', true);
🎯 Result:
- Production mode by default
- Dev mode only when explicitly enabled
- Works correctly in Local by Flywheel and other local environments
## ✅ Issue 1: Standalone Mode Navigation
**Problem:** Standalone mode not getting WNW_NAV_TREE from PHP
**Fixed:** Added WNW_NAV_TREE injection to StandaloneAdmin.php
**Result:** Navigation now works in standalone mode with PHP as single source
## ✅ Issue 2: 404 Errors for branding and customer-settings
**Problem:** REST URLs had trailing slashes causing double slashes
**Root Cause:**
- `rest_url("woonoow/v1")` returns `https://site.com/wp-json/woonoow/v1/`
- Frontend: `restUrl + "/store/branding"` = double slash
- WP-admin missing WNW_CONFIG entirely
**Fixed:**
1. **Removed trailing slashes** from all REST URLs using `untrailingslashit()`
- StandaloneAdmin.php
- Assets.php (dev and prod modes)
2. **Added WNW_CONFIG to wp-admin** for API compatibility
- Dev mode: Added WNW_CONFIG with restUrl, nonce, standaloneMode, etc.
- Prod mode: Added WNW_CONFIG to localize_runtime()
- Now both modes use same config structure
**Result:**
- ✅ `/store/branding` works in all modes
- ✅ `/store/customer-settings` works in all modes
- ✅ Consistent API access across standalone and wp-admin
## ✅ Issue 3: SVG Upload Error 500
**Problem:** WordPress blocks SVG uploads by default
**Security:** "Sorry, you are not allowed to upload this file type"
**Fixed:** Created MediaUpload.php with:
1. **Allow SVG uploads** for users with upload_files capability
2. **Fix SVG mime type detection** (WordPress issue)
3. **Sanitize SVG on upload** - reject files with:
- `<script>` tags
- `javascript:` protocols
- Event handlers (onclick, onload, etc.)
**Result:**
- ✅ SVG uploads work securely
- ✅ Dangerous SVG content blocked
- ✅ Only authorized users can upload
---
## Files Modified:
- `StandaloneAdmin.php` - Add nav tree + fix REST URL
- `Assets.php` - Add WNW_CONFIG + fix REST URLs
- `Bootstrap.php` - Initialize MediaUpload
- `MediaUpload.php` - NEW: SVG upload support with security
## Testing:
1. ✅ Navigation works in standalone mode
2. ✅ Branding endpoint works in all modes
3. ✅ Customer settings endpoint works in all modes
4. ✅ SVG logo upload works
5. ✅ Dangerous SVG files rejected
## 1. Fix Dark Mode Headings ✅
**Issue:** h1-h6 headings not changing color in dark mode
**Fix:**
```css
h1, h2, h3, h4, h5, h6 { @apply text-foreground; }
```
**Result:** All headings now use foreground color (adapts to theme)
---
## 2. Fix Settings Default Route ✅
**Issue:** Main Settings menu goes to /settings with placeholder page
**Fix:**
- Changed /settings to redirect to /settings/store
- Store Details is now the default settings page
- No more placeholder "Settings interface coming soon"
**Code:**
```tsx
useEffect(() => {
navigate('/settings/store', { replace: true });
}, [navigate]);
```
---
## 3. Fix "Cookie check failed" Upload Error ✅
**Issue:** Image upload failing with "Cookie check failed"
**Root Cause:** WordPress REST API nonce not available
**Fix:**
- Added `wpApiSettings` to both dev and prod modes
- Provides `root` and `nonce` for WordPress REST API
- Image upload component already checks multiple nonce sources
**Backend Changes:**
```php
// Dev mode
wp_localize_script($handle, 'wpApiSettings', [
'root' => esc_url_raw(rest_url()),
'nonce' => wp_create_nonce('wp_rest'),
]);
// Prod mode (same)
```
**Result:** Image upload now works with proper authentication
---
## 4. Add Theme Toggle to Mobile ✅
**Recommendation:** Yes, mobile should have theme toggle
**Implementation:** Added to More page (mobile hub)
**UI:**
- 3-column grid with theme cards
- ☀️ Light | 🌙 Dark | 🖥️ System
- Active theme highlighted with primary border
- Placed under "Appearance" section
**Location:**
```
More Page
├── Coupons
├── Settings
├── Appearance (NEW)
│ ├── ☀️ Light
│ ├── 🌙 Dark
│ └── 🖥️ System
└── Exit Fullscreen / Logout
```
**Why More page?**
- Mobile users go there for additional options
- Natural place for appearance settings
- Doesn't clutter main navigation
- Desktop has header toggle, mobile has More page
---
## Summary
✅ **Dark mode headings** - Fixed with text-foreground
✅ **Settings redirect** - /settings → /settings/store
✅ **Upload nonce** - wpApiSettings added (dev + prod)
✅ **Mobile theme toggle** - Added to More page with 3-card grid
**All issues resolved!** 🎉
**Note:** CSS lint warnings (@tailwind, @apply) are false positives - Tailwind directives are valid.
