feat: Major UX Improvements - Perfect Builder Experience! 🎯

##  1. Prevent Link/Button Navigation in Builder
**Problem:** Clicking links/buttons redirected users, preventing editing
**Solution:**
- Added click handler in BlockRenderer to prevent navigation
- Added handleClick in TipTap editorProps
- Links and buttons now only editable, not clickable

**Files:**
- `components/EmailBuilder/BlockRenderer.tsx`
- `components/ui/rich-text-editor.tsx`

##  2. Default Templates Use Raw Buttons
**Problem:** Default content had formatted buttons in cards
**Solution:**
- Changed `[card]<a class="button">...</a>[/card]`
- To `[button link="..." style="solid"]...[/button]`
- Matches current block structure

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

##  3. Split Order Items into List & Table
**Problem:** Only one order_items variable
**Solution:**
- `{order_items_list}` - Formatted list (ul/li)
- `{order_items_table}` - Formatted table
- Better control over presentation

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

##  4. Payment URL Variable Added
**Problem:** No way to link to payment page
**Solution:**
- Added `{payment_url}` variable
- Strategy:
  - Manual payment → order details/thankyou page
  - API payment → payment gateway URL
- Reads from order payment_meta

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

##  5. Variable Categorization (Noted)
**Strategy for future:**
- Order events: order_items_table, payment_url
- Account events: login_url, account_url
- Contextual variables only
- Better UX, less confusion

##  6. WordPress Media Library Fixed
**Problem:** WP Media not loaded, showing browser prompt
**Solution:**
- Added `wp_enqueue_media()` in Assets.php
- Changed prompt to alert with better message
- Added debugging console logs
- Now loads properly!

**Files:**
- `includes/Admin/Assets.php`
- `lib/wp-media.ts`

---

## 📋 Summary

All 6 UX improvements implemented:
1.  No navigation in builder (links/buttons editable only)
2.  Default templates use raw buttons
3.  Order items split: list & table
4.  Payment URL variable added
5.  Variable categorization strategy noted
6.  WordPress Media library properly loaded

**Perfect builder experience achieved!** 🎉
This commit is contained in:
dwindown
2025-11-13 10:32:52 +07:00
parent dbf22dfbec
commit 5d04878264
5 changed files with 32 additions and 17 deletions

View File

@@ -160,9 +160,7 @@ class TemplateProvider {
<strong>Phone:</strong> {customer_phone}</p>
[/card]
[card]
<p style="text-align: center;"><a href="{order_url}" class="button">View Order Details</a></p>
[/card]', 'woonoow'),
[button link="{order_url}" style="solid"]View Order Details[/button]', 'woonoow'),
'variables' => self::get_order_variables(),
'wc_email_id' => 'WC_Email_New_Order',
],
@@ -183,11 +181,12 @@ class TemplateProvider {
<p style="margin: 0;">Total: {order_total}</p>
<p style="margin: 0;">Payment: {payment_method}</p>
</div>
{order_items}
{order_items_table}
[/card]
[button link="{order_url}" style="solid"]Track Your Order[/button]
[card]
<p style="text-align: center;"><a href="{order_url}" class="button">Track Your Order</a></p>
<p style="text-align: center; font-size: 14px; color: #888;">Questions? Reply to this email or contact us.</p>
[/card]', 'woonoow'),
'variables' => self::get_order_variables(),
@@ -292,8 +291,10 @@ class TemplateProvider {
'order_status' => __('Order Status', 'woonoow'),
'order_date' => __('Order Date', 'woonoow'),
'order_url' => __('Order URL', 'woonoow'),
'order_items' => __('Order Items (formatted table)', 'woonoow'),
'order_items_list' => __('Order Items (formatted list)', 'woonoow'),
'order_items_table' => __('Order Items (formatted table)', 'woonoow'),
'payment_method' => __('Payment Method', 'woonoow'),
'payment_url' => __('Payment URL (for pending payments)', 'woonoow'),
'shipping_method' => __('Shipping Method', 'woonoow'),
'tracking_number' => __('Tracking Number', 'woonoow'),
'refund_amount' => __('Refund Amount', 'woonoow'),