8312c18f64
## ✅ 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
WooNooW
WooNooW is a modern experience layer for WooCommerce — enhancing UX, speed, and reliability without data migration.
It keeps WooCommerce as the core engine while providing a modern React-powered interface for both the storefront (cart, checkout, my‑account) and the admin (orders, dashboard).
Three Admin Modes:
- Normal Mode: Traditional wp-admin integration (
/wp-admin/admin.php?page=woonoow) - Fullscreen Mode: Distraction-free interface (toggle in header)
- Standalone Mode: Complete standalone app at
yoursite.com/adminwith custom login ✨
🔍 Background
WooCommerce is the most used e‑commerce engine in the world, but its architecture has become heavy and fragmented.
With React‑based blocks (Checkout, Cart, Product Edit) and HPOS now rolling out, many existing addons are becoming obsolete or unstable.
WooNooW bridges the gap between Woo’s legacy PHP system and the new modern stack — so users get performance and simplicity without losing compatibility.
🚀 Key Principles
- No Migration Needed – Woo data stays intact.
- Safe Activate/Deactivate – revert to native Woo anytime, no data loss.
- Hybrid by Default – SSR + React islands for Cart/Checkout/My‑Account.
- Full SPA Toggle – optional React‑only mode for max performance.
- HPOS Mandatory – optimized datastore and async operations.
- Compat Layer – hook mirror + slot rendering for legacy addons.
- Async Mail & Tasks – powered by Action Scheduler.
🧱 Tech Stack
| Layer | Technology |
|---|---|
| Backend | PHP 8.2+, WordPress, WooCommerce (HPOS), Action Scheduler |
| Frontend | React 18 + TypeScript, Vite, React Query, Tailwind (optional) |
| Build & Package | Composer, NPM, ESM scripts, Zip automation |
| Architecture | Modular PSR‑4 classes, REST‑driven SPA islands |
🧩 Project Structure
woonoow/
├── admin-spa/
│ ├── src/
│ │ ├── components/
│ │ │ ├── filters/
│ │ │ │ ├── DateRange.tsx
│ │ │ │ └── OrderBy.tsx
│ │ │ └── CommandPalette.tsx
│ │ ├── hooks/
│ │ │ └── useShortcuts.tsx
│ │ ├── lib/
│ │ │ ├── api.ts
│ │ │ ├── currency.ts
│ │ │ ├── dates.ts
│ │ │ ├── query-params.ts
│ │ │ ├── useCommandStore.ts
│ │ │ └── utils.ts
│ │ ├── pages/
│ │ │ └── orders/
│ │ │ ├── partials
│ │ │ │ └── OrderForm.tsx
│ │ │ ├── Orders.tsx
│ │ │ ├── OrdersNew.tsx
│ │ │ └── OrderShow.tsx
│ │ ├── routes/
│ │ │ └── Dashboard.tsx
│ │ ├── types/
│ │ │ └── qrcode.d.ts
│ │ ├── App.tsx
│ │ ├── index.css
│ │ └── main.tsx
│ └── vite.config.ts
├── includes/
│ ├── Admin/
│ │ ├── Assets.php
│ │ └── Menu.php
│ ├── Api/
│ │ ├── CheckoutController.php
│ │ ├── OrdersController.php
│ │ ├── Permissions.php
│ │ └── Routes.php
│ ├── Compat/
│ │ ├── HideWooMenus.php
│ │ └── HooksShim.php
│ └── Core/
│ ├── DataStores/
│ │ ├── OrderStore_HPOS.php
│ │ └── OrderStore.php
│ ├── Mail/
│ │ ├── MailQueue.php
│ │ └── WooEmailOverride.php
│ ├── Bootstrap.php
│ └── Features.php
├── woonoow.php
└── docs (project notes, SOP, etc.)
⚙️ Development Workflow
- LocalWP / Docker setup with WordPress + WooCommerce.
- Activate plugin:
WooNooWshould appear in the admin menu. - Build SPAs:
npm run build - Package zip:
npm run pack - Upload
dist/woonoow.zipinto WordPress → Plugins → Add New → Upload.
🧭 Vision
“WooCommerce, reimagined for now.”
WooNooW delivers modern speed and UX while keeping WooCommerce’s ecosystem alive.
No migration. No lock‑in. Just Woo, evolved.