4ec0f3f890
## 🚀 MAJOR FEATURE: Visual Email Content Builder! ### What Changed: **Before:** - TipTap rich text editor - Manual [card] syntax typing - Hard to visualize final result - Not beginner-friendly **After:** - Visual drag-and-drop builder - Live preview as you build - No code needed - Professional UX ### New Components: **1. EmailBuilder** (`/components/EmailBuilder/`) - Main builder component - Block-based editing - Drag to reorder (via up/down buttons) - Click to edit - Live preview **2. Block Types:** - **Header** - Large title text - **Text** - Paragraph content - **Card** - Styled content box (5 types: default, success, info, warning, hero) - **Button** - CTA with solid/outline styles - **Divider** - Horizontal line - **Spacer** - Vertical spacing **3. Features:** - ✅ **Add Block Toolbar** - One-click block insertion - ✅ **Hover Controls** - Edit, Delete, Move Up/Down - ✅ **Edit Dialog** - Full editor for each block - ✅ **Variable Helper** - Click to insert variables - ✅ **Code Mode Toggle** - Switch between visual/code - ✅ **Auto-sync** - Converts blocks ↔ [card] syntax ### How It Works: **Visual Mode:** ``` [Add Block: Header | Text | Card | Button | Divider | Spacer] ┌─────────────────────────────┐ │ Header Block [↑ ↓ ✎ ×] │ │ New Order Received │ └─────────────────────────────┘ ┌─────────────────────────────┐ │ Card Block (Success) [↑ ↓ ✎ ×] │ │ ✅ Order Confirmed! │ └─────────────────────────────┘ ┌─────────────────────────────┐ │ Button Block [↑ ↓ ✎ ×] │ │ [View Order Details] │ └─────────────────────────────┘ ``` **Code Mode:** ```html [card] <h1>New Order Received</h1> [/card] [card type="success"] <h2>✅ Order Confirmed!</h2> [/card] [card] <p style="text-align: center;"> <a href="{order_url}" class="button">View Order Details</a> </p> [/card] ``` ### Benefits: 1. **No Learning Curve** - Visual interface, no syntax to learn - Click, edit, done! 2. **Live Preview** - See exactly how email will look - WYSIWYG editing 3. **Flexible** - Switch to code mode anytime - Full HTML control when needed 4. **Professional** - Pre-designed block types - Consistent styling - Best practices built-in 5. **Variable Support** - Click to insert variables - Works in all block types - Helpful dropdown ### Technical Details: **Converter Functions:** - `blocksToHTML()` - Converts blocks to [card] syntax - `htmlToBlocks()` - Parses [card] syntax to blocks - Seamless sync between visual/code modes **State Management:** - Blocks stored as structured data - Auto-converts to HTML on save - Preserves all [card] attributes ### Next Steps: - Install @radix-ui/react-radio-group for radio buttons - Test email rendering end-to-end - Polish and final review This is a GAME CHANGER for email template editing! 🎉
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.