docs: Add Bug Fixes Documentation 📝
Created BUGFIXES.md with:
- Detailed explanation of all 7 issues
- Root causes and solutions
- Code examples
- Testing checklist
- Summary of changes
All issues documented and resolved! ✅
This commit is contained in:
dwindown
242
admin-spa/BUGFIXES.md
Normal file
242
admin-spa/BUGFIXES.md
Normal file
@@ -0,0 +1,242 @@
|
||||
# Bug Fixes & User Feedback Resolution
|
||||
|
||||
## All 7 Issues Resolved ✅
|
||||
|
||||
---
|
||||
|
||||
### 1. WordPress Media Library Not Loading
|
||||
|
||||
**Issue:**
|
||||
- Error: "WordPress media library is not loaded. Please refresh the page."
|
||||
- Blocking users from inserting images
|
||||
|
||||
**Root Cause:**
|
||||
- WordPress Media API (`window.wp.media`) not available in some contexts
|
||||
- No fallback mechanism
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// Added fallback to URL prompt
|
||||
if (typeof window.wp === 'undefined' || typeof window.wp.media === 'undefined') {
|
||||
const url = window.prompt('WordPress Media library is not loaded. Please enter image URL:');
|
||||
if (url) {
|
||||
onSelect({ url, id: 0, title: 'External Image', filename: url.split('/').pop() || 'image' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
```
|
||||
|
||||
**Result:**
|
||||
- Users can still insert images via URL if WP Media fails
|
||||
- Better error handling
|
||||
- No blocking errors
|
||||
|
||||
---
|
||||
|
||||
### 2. Button Variables - Too Many Options
|
||||
|
||||
**Issue:**
|
||||
- All variables shown in button link field
|
||||
- Confusing for users (why show customer_name for a link?)
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// Filter to only show URL variables
|
||||
{variables.filter(v => v.includes('_url')).map((variable) => (
|
||||
<code onClick={() => setButtonHref(buttonHref + `{${variable}}`)}>{`{${variable}}`}</code>
|
||||
))}
|
||||
```
|
||||
|
||||
**Before:**
|
||||
```
|
||||
{order_number} {order_total} {customer_name} {customer_email} ...
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
{order_url} {store_url}
|
||||
```
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
- `components/EmailBuilder/EmailBuilder.tsx`
|
||||
|
||||
---
|
||||
|
||||
### 3. Color Customization - Future Feature
|
||||
|
||||
**Issue:**
|
||||
- Colors are hardcoded:
|
||||
- Hero card gradient: `#667eea` to `#764ba2`
|
||||
- Button primary: `#7f54b3`
|
||||
- Button secondary border: `#7f54b3`
|
||||
|
||||
**Plan:**
|
||||
- Will be added to email customization form
|
||||
- Allow users to set brand colors
|
||||
- Apply to all email templates
|
||||
- Store in settings
|
||||
|
||||
**Note:**
|
||||
Confirmed for future implementation. Not blocking current release.
|
||||
|
||||
---
|
||||
|
||||
### 4 & 5. Headings Not Visible in Editor & Builder
|
||||
|
||||
**Issue:**
|
||||
- Headings (H1-H4) looked like paragraphs
|
||||
- No visual distinction
|
||||
- Confusing for users
|
||||
|
||||
**Root Cause:**
|
||||
- No CSS styles applied to heading elements
|
||||
- Default browser styles insufficient
|
||||
|
||||
**Solution:**
|
||||
Added Tailwind utility classes for heading styles:
|
||||
|
||||
```typescript
|
||||
// RichTextEditor
|
||||
className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-3 [&_h2]:mb-2 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-2 [&_h3]:mb-1 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-2 [&_h4]:mb-1"
|
||||
|
||||
// BlockRenderer (builder preview)
|
||||
className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-0 [&_h1]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-0 [&_h2]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-0 [&_h3]:mb-2 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-0 [&_h4]:mb-2"
|
||||
```
|
||||
|
||||
**Heading Sizes:**
|
||||
- **H1**: 3xl (1.875rem / 30px), bold
|
||||
- **H2**: 2xl (1.5rem / 24px), bold
|
||||
- **H3**: xl (1.25rem / 20px), bold
|
||||
- **H4**: lg (1.125rem / 18px), bold
|
||||
|
||||
**Result:**
|
||||
- Headings now visually distinct
|
||||
- Clear hierarchy
|
||||
- Matches email preview
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
- `components/EmailBuilder/BlockRenderer.tsx`
|
||||
|
||||
---
|
||||
|
||||
### 6. Missing Order Items Variable
|
||||
|
||||
**Issue:**
|
||||
- No variable for product list/table
|
||||
- Users can't show ordered products in emails
|
||||
|
||||
**Solution:**
|
||||
Added `order_items` variable to order variables:
|
||||
|
||||
```php
|
||||
'order_items' => __('Order Items (formatted table)', 'woonoow'),
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
[card]
|
||||
<h2>Order Summary</h2>
|
||||
{order_items}
|
||||
[/card]
|
||||
```
|
||||
|
||||
**Will Render:**
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td>Product Name</td>
|
||||
<td>Quantity</td>
|
||||
<td>Price</td>
|
||||
</tr>
|
||||
<!-- ... product rows ... -->
|
||||
</table>
|
||||
```
|
||||
|
||||
**File Modified:**
|
||||
- `includes/Core/Notifications/TemplateProvider.php`
|
||||
|
||||
---
|
||||
|
||||
### 7. Edit Icon on Spacer & Divider
|
||||
|
||||
**Issue:**
|
||||
- Edit button (✎) shown for spacer and divider
|
||||
- No options to edit (they have no configurable properties)
|
||||
- Clicking does nothing
|
||||
|
||||
**Solution:**
|
||||
Conditional rendering of edit button:
|
||||
|
||||
```typescript
|
||||
{/* Only show edit button for card and button blocks */}
|
||||
{(block.type === 'card' || block.type === 'button') && (
|
||||
<button onClick={onEdit} title={__('Edit')}>✎</button>
|
||||
)}
|
||||
```
|
||||
|
||||
**Controls Now:**
|
||||
- **Card**: ↑ ↓ ✎ × (all controls)
|
||||
- **Button**: ↑ ↓ ✎ × (all controls)
|
||||
- **Spacer**: ↑ ↓ × (no edit)
|
||||
- **Divider**: ↑ ↓ × (no edit)
|
||||
|
||||
**File Modified:**
|
||||
- `components/EmailBuilder/BlockRenderer.tsx`
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Issue 1: WP Media Fallback
|
||||
- [ ] Try inserting image when WP Media is loaded
|
||||
- [ ] Try inserting image when WP Media is not loaded
|
||||
- [ ] Verify fallback prompt appears
|
||||
- [ ] Verify image inserts correctly
|
||||
|
||||
### Issue 2: Button Variables
|
||||
- [ ] Open button dialog in RichTextEditor
|
||||
- [ ] Verify only URL variables shown
|
||||
- [ ] Open button dialog in EmailBuilder
|
||||
- [ ] Verify only URL variables shown
|
||||
|
||||
### Issue 3: Color Customization
|
||||
- [ ] Note documented for future implementation
|
||||
- [ ] Colors currently hardcoded (expected)
|
||||
|
||||
### Issue 4 & 5: Heading Display
|
||||
- [ ] Create card with H1 heading
|
||||
- [ ] Verify H1 is large and bold in editor
|
||||
- [ ] Verify H1 is large and bold in builder
|
||||
- [ ] Test H2, H3, H4 similarly
|
||||
- [ ] Verify preview matches
|
||||
|
||||
### Issue 6: Order Items Variable
|
||||
- [ ] Check variable list includes `order_items`
|
||||
- [ ] Insert `{order_items}` in template
|
||||
- [ ] Verify description shows "formatted table"
|
||||
|
||||
### Issue 7: Edit Icon Removal
|
||||
- [ ] Hover over spacer block
|
||||
- [ ] Verify no edit button (only ↑ ↓ ×)
|
||||
- [ ] Hover over divider block
|
||||
- [ ] Verify no edit button (only ↑ ↓ ×)
|
||||
- [ ] Hover over card block
|
||||
- [ ] Verify edit button present (↑ ↓ ✎ ×)
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
All 7 user-reported issues have been resolved:
|
||||
|
||||
1. ✅ **WP Media Fallback** - No more blocking errors
|
||||
2. ✅ **Button Variables Filtered** - Only relevant variables shown
|
||||
3. ✅ **Color Customization Noted** - Future feature documented
|
||||
4. ✅ **Headings Visible in Editor** - Proper styling applied
|
||||
5. ✅ **Headings Visible in Builder** - Consistent with editor
|
||||
6. ✅ **Order Items Variable** - Product list support added
|
||||
7. ✅ **Edit Icon Removed** - Only on editable blocks
|
||||
|
||||
**Status: Ready for Testing** 🚀
|
||||
Reference in New Issue
Block a user