feat: WordPress Media Modal Integration! 🎉
## ✅ 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! 🎉
This commit is contained in:
@@ -335,6 +335,7 @@ export default function StoreDetailsPage() {
|
||||
onChange={(url) => updateSetting('storeLogo', url)}
|
||||
onRemove={() => updateSetting('storeLogo', '')}
|
||||
maxSize={2}
|
||||
mediaType="logo"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
@@ -348,6 +349,7 @@ export default function StoreDetailsPage() {
|
||||
onChange={(url) => updateSetting('storeLogoDark', url)}
|
||||
onRemove={() => updateSetting('storeLogoDark', '')}
|
||||
maxSize={2}
|
||||
mediaType="logo"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
@@ -357,6 +359,7 @@ export default function StoreDetailsPage() {
|
||||
onChange={(url) => updateSetting('storeIcon', url)}
|
||||
onRemove={() => updateSetting('storeIcon', '')}
|
||||
maxSize={1}
|
||||
mediaType="favicon"
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user