feat: Complete Social Icons & Settings Expansion! 🎨
## Implemented (Tasks 1-6): ### 1. All Social Platforms Added ✅ **Platforms:** - Facebook, X (Twitter), Instagram - LinkedIn, YouTube - Discord, Spotify, Telegram - WhatsApp, Threads, Website **Frontend:** Updated select dropdown with all platforms **Backend:** Added to allowed_platforms whitelist ### 2. PNG Icons Instead of Emoji ✅ - Use local PNG files from `/assets/icons/` - Format: `mage--{platform}-{color}.png` - Applied to email rendering and preview - Much more accurate than emoji ### 3. Icon Color Option (Black/White) ✅ - New setting: `social_icon_color` - Select dropdown: White Icons / Black Icons - White for dark backgrounds - Black for light backgrounds - Applied to all social icons ### 4. Body Background Color Setting ✅ - New setting: `body_bg_color` - Color picker + hex input - Default: #f8f8f8 - Applied to email body background - Applied to preview ### 5. Editor Mode Styling 📝 **Note:** Editor mode intentionally shows structure/content Preview mode shows final styled result with all customizations This is standard email builder UX pattern ### 6. Hero Preview Text Color Fixed ✅ - Applied `hero_text_color` directly to h3 and p - Now correctly shows selected color - Both heading and paragraph use custom color ## Technical Changes: **Frontend:** - Added body_bg_color and social_icon_color to interface - Updated all social platform icons (Lucide) - PNG icon URLs in preview - Hero preview color fix **Backend:** - Added body_bg_color and social_icon_color to defaults - Sanitization for new fields - Updated allowed_platforms array - PNG icon URL generation with color param **Email Rendering:** - Use PNG icons with color selection - Apply body_bg_color - get_social_icon_url() updated for PNG files ## Files Modified: - `routes/Settings/Notifications/EmailCustomization.tsx` - `routes/Settings/Notifications/EditTemplate.tsx` - `includes/Api/NotificationsController.php` - `includes/Core/Notifications/EmailRenderer.php` Task 7 (default email content) pending - separate commit.
This commit is contained in:
@@ -416,16 +416,18 @@ class EmailRenderer {
|
||||
// Replace {current_year} with actual year
|
||||
$footer_text = str_replace('{current_year}', date('Y'), $footer_text);
|
||||
|
||||
// Social icons
|
||||
// Social icons with PNG images
|
||||
$social_html = '';
|
||||
if (!empty($email_settings['social_links']) && is_array($email_settings['social_links'])) {
|
||||
$icon_color = !empty($email_settings['social_icon_color']) ? $email_settings['social_icon_color'] : 'white';
|
||||
$social_html = '<div class="social-icons" style="margin-top: 16px; text-align: center;">';
|
||||
foreach ($email_settings['social_links'] as $link) {
|
||||
if (!empty($link['url']) && !empty($link['platform'])) {
|
||||
$icon_url = $this->get_social_icon_url($link['platform'], $icon_color);
|
||||
$social_html .= sprintf(
|
||||
'<a href="%s" style="display: inline-block; margin: 0 8px;"><img src="%s" alt="%s" style="width: 24px; height: 24px;"></a>',
|
||||
esc_url($link['url']),
|
||||
$this->get_social_icon_url($link['platform']),
|
||||
esc_url($icon_url),
|
||||
esc_attr(ucfirst($link['platform']))
|
||||
);
|
||||
}
|
||||
@@ -461,17 +463,13 @@ class EmailRenderer {
|
||||
* Get social icon URL
|
||||
*
|
||||
* @param string $platform
|
||||
* @param string $color 'white' or 'black'
|
||||
* @return string
|
||||
*/
|
||||
private function get_social_icon_url($platform) {
|
||||
// You can host these icons or use a CDN
|
||||
$icons = [
|
||||
'facebook' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg',
|
||||
'instagram' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg',
|
||||
'twitter' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg',
|
||||
'linkedin' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg',
|
||||
];
|
||||
|
||||
return $icons[$platform] ?? '';
|
||||
private function get_social_icon_url($platform, $color = 'white') {
|
||||
// Use local PNG icons
|
||||
$plugin_url = plugin_dir_url(dirname(dirname(dirname(__FILE__))));
|
||||
$filename = sprintf('mage--%s-%s.png', $platform, $color);
|
||||
return $plugin_url . 'assets/icons/' . $filename;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user