493f363dd2
## ✅ Improvements 4-5 Complete - Respecting WordPress! ### 4. WordPress Media Modal for TipTap Images **Before:** - Prompt dialog for image URL - Manual URL entry - No media library access **After:** - Native WordPress Media Modal - Browse existing uploads - Upload new images - Full media library features - Alt text, dimensions included **Implementation:** - `wp-media.ts` helper library - `openWPMediaImage()` function - Integrates with TipTap Image extension - Sets src, alt, title automatically ### 5. WordPress Media Modal for Store Logos/Favicon **Before:** - Only drag-and-drop or file picker - No access to existing media **After:** - "Choose from Media Library" button - Filtered by media type: - Logo: PNG, JPEG, SVG, WebP - Favicon: PNG, ICO - Browse and reuse existing assets - Professional WordPress experience **Implementation:** - Updated `ImageUpload` component - Added `mediaType` prop - Three specialized functions: - `openWPMediaLogo()` - `openWPMediaFavicon()` - `openWPMediaImage()` ## 📦 New Files: **lib/wp-media.ts:** ```typescript - openWPMedia() - Core function - openWPMediaImage() - For general images - openWPMediaLogo() - For logos (filtered) - openWPMediaFavicon() - For favicons (filtered) - WPMediaFile interface - Full TypeScript support ``` ## 🎨 User Experience: **Email Builder:** - Click image icon in RichTextEditor - WordPress Media Modal opens - Select from library or upload - Image inserted with proper attributes **Store Settings:** - Drag-and-drop still works - OR click "Choose from Media Library" - Filtered by appropriate file types - Reuse existing brand assets ## 🙏 Respect to WordPress: **Why This Matters:** 1. **Familiar Interface** - Users know WordPress Media 2. **Existing Assets** - Access uploaded media 3. **Better UX** - No manual URL entry 4. **Professional** - Native WordPress integration 5. **Consistent** - Same as Posts/Pages **WordPress Integration:** - Uses `window.wp.media` API - Respects user permissions - Works with media library - Proper nonce handling - Full compatibility ## 📋 All 5 Improvements Complete: ✅ 1. Heading Selector (H1-H4, Paragraph) ✅ 2. Styled Buttons in Cards (matching standalone) ✅ 3. Variable Pills for Button Links ✅ 4. WordPress Media for TipTap Images ✅ 5. WordPress Media for Store Logos/Favicon ## 🚀 Ready for Production! All user feedback implemented perfectly! 🎉
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.