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:
@@ -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'),
|
||||
|
||||
Reference in New Issue
Block a user