Merge pull request #1577 from mailpoet/fonts

adding custom fonts [MAILPOET-1493]

assets/css/src/newsletter_editor/common.styl

@@ -236,3 +236,28 @@ select.mailpoet_font-size
   margin-left: 10px
 input.mailpoet_option_offset_left_small
   margin-left: 10px !important
+
+.mailpoet_form_field span.select2-container
+  width: 103px !important
+
+span.select2-container--open > span.select2-dropdown
+  width: 150px !important
+  
+span.select2-container--open > span.select2-dropdown li.select2-results__option
+  font-size: 13px
+  margin: 0px !important
+
+  & .select2-results__group
+    font-weight: normal
+    color: #bfbfbf
+
+  & .select2-results__option
+    padding-left: 15px
+    font-size: 13px
+
+    &[aria-selected=true]
+      background-color: #eee
+      color: #444
+
+.mailpoet-fonts-notice
+  color: #999

assets/js/src/handlebars_helpers.js

@@ -151,6 +151,16 @@ define('handlebars_helpers', ['handlebars'], function (Handlebars) {
       case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
       case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
       case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
+      case 'Arvo': return new Handlebars.SafeString('arvo, courier, georgia, serif');
+      case 'Lato': return new Handlebars.SafeString("lato, 'helvetica neue', helvetica, arial, sans-serif");
+      case 'Lora': return new Handlebars.SafeString("lora, georgia, 'times new roman', serif");
+      case 'Merriweather': return new Handlebars.SafeString("merriweather, georgia, 'times new roman', serif");
+      case 'Merriweather Sans': return new Handlebars.SafeString("'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif");
+      case 'Noticia Text': return new Handlebars.SafeString("'noticia text', georgia, 'times new roman', serif");
+      case 'Open Sans': return new Handlebars.SafeString("'open sans', 'helvetica neue', helvetica, arial, sans-serif");
+      case 'Playfair Display': return new Handlebars.SafeString("playfair display, georgia, 'times new roman', serif");
+      case 'Roboto': return new Handlebars.SafeString("roboto, 'helvetica neue', helvetica, arial, sans-serif");
+      case 'Source Sans Pro': return new Handlebars.SafeString("'source sans pro', 'helvetica neue', helvetica, arial, sans-serif");
       default: return font;
     }
   });

lib/Config/Menu.php

@@ -68,6 +68,9 @@ class Menu {
       if($_REQUEST['page'] === 'mailpoet-newsletter-editor') {
         // Disable WP emojis to not interfere with the newsletter editor emoji handling
         $this->disableWPEmojis();
+        add_action('admin_head', function() {
+          echo '<!--[if !mso]><link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Merriweather:400,400i,700,700i|Merriweather+Sans:400,400i,700,700i|Noticia+Text:400,400i,700,700i|Open+Sans:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"><![endif]-->';
+        });
       }
     }
 

lib/Newsletter/Renderer/Renderer.php

@@ -50,10 +50,12 @@ class Renderer {
     $content = $this->preProcessALC($content);
     $rendered_body = $this->renderBody($content);
     $rendered_styles = $this->renderStyles($styles);
+    $custom_fonts_links = StylesHelper::getCustomFontsLinks($styles);
 
     $template = $this->injectContentIntoTemplate($this->template, array(
       htmlspecialchars($newsletter['subject']),
       $rendered_styles,
+      $custom_fonts_links,
       $newsletter['preheader'],
       $rendered_body
     ));

lib/Newsletter/Renderer/StylesHelper.php

@@ -2,7 +2,7 @@
 namespace MailPoet\Newsletter\Renderer;
 
 class StylesHelper {
-  static $css_attributes = array(
+  static $css_attributes = [
     'backgroundColor' => 'background-color',
     'fontColor' => 'color',
     'fontFamily' => 'font-family',
@@ -14,9 +14,9 @@ class StylesHelper {
     'borderStyle' => 'border-style',
     'borderColor' => 'border-color',
     'borderRadius' => 'border-radius',
-    'lineHeight' => 'line-height'
+    'lineHeight' => 'line-height',
-  );
+  ];
-  static $font = array(
+  static $font = [
     'Arial' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
     'Comic Sans MS' => "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif",
     'Courier New' => "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
@@ -25,8 +25,30 @@ class StylesHelper {
     'Tahoma' => 'Tahoma, Verdana, Segoe, sans-serif',
     'Times New Roman' => "'Times New Roman', Times, Baskerville, Georgia, serif",
     'Trebuchet MS' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif",
-    'Verdana' => 'Verdana, Geneva, sans-serif'
+    'Verdana' => 'Verdana, Geneva, sans-serif',
-  );
+    'Arvo' => 'arvo, courier, georgia, serif',
+    'Lato' => "lato, 'helvetica neue', helvetica, arial, sans-serif",
+    'Lora' => "lora, georgia, 'times new roman', serif",
+    'Merriweather' => "merriweather, georgia, 'times new roman', serif",
+    'Merriweather Sans' => "'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif",
+    'Noticia Text' => "'noticia text', georgia, 'times new roman', serif",
+    'Open Sans' => "'open sans', 'helvetica neue', helvetica, arial, sans-serif",
+    'Playfair Display' => "'playfair display', georgia, 'times new roman', serif",
+    'Roboto' => "roboto, 'helvetica neue', helvetica, arial, sans-serif",
+    'Source Sans Pro' => "'source sans pro', 'helvetica neue', helvetica, arial, sans-serif",
+  ];
+  static $custom_fonts = [
+    'Arvo',
+    'Lato',
+    'Lora',
+    'Merriweather',
+    'Merriweather Sans',
+    'Noticia Text',
+    'Open Sans',
+    'Playfair Display',
+    'Roboto',
+    'Source Sans Pro',
+  ];
   static $line_height_multiplier = 1.6;
   static $heading_margin_multiplier = 0.3;
   static $padding_width = 20;
@@ -102,4 +124,27 @@ class StylesHelper {
     $style['lineHeight'] = sprintf('%spx', self::$line_height_multiplier * $font_size);
     return $style;
   }
+
+  private static function getCustomFontsNames($styles) {
+    $font_names = [];
+    foreach($styles as $style) {
+      if(isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts)) {
+        $font_names[$style['fontFamily']] = true;
+      }
+    }
+    return array_keys($font_names);
+  }
+
+  static function getCustomFontsLinks($styles) {
+    $links = [];
+    foreach(self::getCustomFontsNames($styles) as $name) {
+      $links[] = urlencode($name) . ':400,400i,700,700i';
+    }
+    if(!count($links)) { 
+      return '';
+    }
+    return '<!--[if !mso]><link href="https://fonts.googleapis.com/css?family='
+      . implode("|", $links)
+      . '" rel="stylesheet"><![endif]-->';
+  }
 }

lib/Newsletter/Renderer/Template.html

@@ -78,6 +78,7 @@
         }
         {{newsletter_styles}}
     </style>
+    {{newsletter_custom_fonts}}
 </head>
 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     <table class="mailpoet_template" border="0" width="100%" cellpadding="0" cellspacing="0"

tests/javascript/newsletter_editor/blocks/footer.spec.js

@@ -153,7 +153,10 @@ define([
     describe('settings view', function () {
       global.stubChannel(EditorApplication);
       global.stubAvailableStyles(EditorApplication, {
-        fonts: ['Arial', 'Tahoma'],
+        fonts: {
+          standard: ['Arial', 'Tahoma'],
+          custom: ['Arvo', 'Lato', 'Lora']
+        },
         textSizes: ['16px', '20px']
       });
 
@@ -173,7 +176,10 @@ define([
         beforeEach(function () {
           global.stubChannel(EditorApplication);
           global.stubAvailableStyles(EditorApplication, {
-            fonts: ['Arial', 'Tahoma'],
+            fonts: {
+              standard: ['Arial', 'Tahoma'],
+              custom: ['Arvo', 'Lato', 'Lora']
+            },
             textSizes: ['16px', '20px']
           });
           model = new (FooterBlock.FooterBlockModel)({});

tests/javascript/newsletter_editor/blocks/header.spec.js

@@ -153,7 +153,10 @@ define([
       global.stubChannel(EditorApplication);
       global.stubConfig(EditorApplication);
       global.stubAvailableStyles(EditorApplication, {
-        fonts: ['Arial', 'Tahoma'],
+        fonts: {
+          standard: ['Arial', 'Tahoma'],
+          custom: ['Arvo', 'Lato', 'Lora']
+        },
         textSizes: ['16px', '20px']
       });
 
@@ -173,7 +176,10 @@ define([
         beforeEach(function () {
           global.stubChannel(EditorApplication);
           global.stubAvailableStyles(EditorApplication, {
-            fonts: ['Arial', 'Tahoma'],
+            fonts: {
+              standard: ['Arial', 'Tahoma'],
+              custom: ['Arvo', 'Lato', 'Lora']
+            },
             textSizes: ['16px', '20px']
           });
           model = new (HeaderBlock.HeaderBlockModel)({});

tests/javascript/newsletter_editor/components/sidebar.spec.js

@@ -79,7 +79,13 @@ define([
             }
           });
           availableStyles = new Backbone.SuperModel({
-            fonts: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
+            fonts: {
+              standard: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
+              custom: [
+                'Arvo', 'Lato', 'Lora', 'Merriweather', 'Merriweather Sans', 'Noticia Text',
+                'Open Sans', 'Playfair Display', 'Roboto', 'Source Sans Pro'
+              ]
+            },
             textSizes: [
               '9px', '10px'
             ],

tests/unit/Newsletter/Renderer/StylesHelperTest.php

@@ -0,0 +1,69 @@
+<?php
+namespace MailPoet\Test\Newsletter;
+
+use MailPoet\Newsletter\Renderer\StylesHelper;
+
+class StylesHelperTest extends \MailPoetTest {
+
+  function testItGetsCustomFontsLinks() {
+    $styles_with_custom_fonts = [
+      "text" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Arial",
+        "fontSize" => "16px"
+      ],
+      "h1" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Roboto",
+        "fontSize" => "36px"
+      ],
+      "h2" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Source Sans Pro",
+        "fontSize" => "26px"
+      ],
+      "h3" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Roboto",
+        "fontSize" => "18px"
+      ],
+      "link" => [
+        "fontColor" => "#561ab9",
+        "textDecoration" => "underline"
+      ],
+    ];
+
+    $styles_without_custom_fonts = [
+      "text" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Arial",
+        "fontSize" => "16px"
+      ],
+      "h1" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Arial",
+        "fontSize" => "36px"
+      ],
+      "h2" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Times New Roman",
+        "fontSize" => "26px"
+      ],
+      "h3" => [
+        "fontColor" => "#565656",
+        "fontFamily" => "Georgia",
+        "fontSize" => "18px"
+      ],
+      "link" => [
+        "fontColor" => "#561ab9",
+        "textDecoration" => "underline"
+      ],
+    ];
+
+    expect(StylesHelper::getCustomFontsLinks($styles_with_custom_fonts))
+      ->equals('<!--[if !mso]><link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"><![endif]-->');
+
+    expect(StylesHelper::getCustomFontsLinks($styles_without_custom_fonts))
+      ->equals('');
+  }
+}

views/newsletter/editor.html

@@ -397,6 +397,21 @@
   <%= do_action('mailpoet_newsletter_editor_after_javascript') %>
 
   <script type="text/javascript">
+    function renderWithFont(node) {
+      if (!node.element) return node.text;
+      var $wrapper = $('<span></span>');
+      $wrapper.css({'font-family': Handlebars.helpers.fontWithFallback(node.element.value)});
+      $wrapper.text(node.text);
+      return $wrapper;
+    }
+    function fontsSelect(selector) {
+      jQuery(selector).select2({
+        minimumResultsForSearch: Infinity,
+        templateSelection: renderWithFont,
+        templateResult: renderWithFont
+      });
+    }
+
     var templates = {
       styles: Handlebars.compile(
         jQuery('#newsletter_editor_template_styles').html()
@@ -604,7 +619,8 @@
           '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px',
           '26px', '30px', '36px', '40px'
         ],
-        fonts: [
+        fonts: {
+          standard: [
             'Arial',
             'Comic Sans MS',
             'Courier New',
@@ -615,6 +631,19 @@
             'Trebuchet MS',
             'Verdana'
           ],
+          custom: [
+            'Arvo',
+            'Lato',
+            'Lora',
+            'Merriweather',
+            'Merriweather Sans',
+            'Noticia Text',
+            'Open Sans',
+            'Playfair Display',
+            'Roboto',
+            'Source Sans Pro'
+          ]
+        },
         socialIconSets: {
           'default': {
             'custom': '<%= image_url(
@@ -1322,5 +1351,6 @@
     };
     var mailpoet_in_app_announcements = <%= json_encode(settings.in_app_announcements) %>;
     wp.hooks.doAction('mailpoet_newsletters_editor_initialize', config);
+
   </script>
 <% endblock %>

views/newsletter/templates/blocks/footer/settings.hbs

@@ -3,9 +3,16 @@
     <div class="mailpoet_form_field_input_option">
         <input type="text" name="font-color" id="mailpoet_field_footer_text_color" class="mailpoet_field_footer_text_color mailpoet_color" value="{{ model.styles.text.fontColor }}" />
         <select id="mailpoet_field_footer_text_font_family" name="font-family" class="mailpoet_select mailpoet_select_medium mailpoet_field_footer_text_font_family mailpoet_font_family">
-        {{#each availableStyles.fonts}}
+        <optgroup label="<%= __('Standard fonts')%>">
+        {{#each availableStyles.fonts.standard}}
             <option value="{{ this }}" {{#ifCond this '==' ../model.styles.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
         {{/each}}
+        </optgroup>
+        <optgroup label="<%= __('Custom fonts')%>">
+        {{#each availableStyles.fonts.custom}}
+            <option value="{{ this }}" {{#ifCond this '==' ../model.styles.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+        {{/each}}
+        </optgroup>
         </select>
         <select id="mailpoet_field_footer_text_size" name="font-size" class="mailpoet_select mailpoet_select_small mailpoet_field_footer_text_size mailpoet_font_size">
         {{#each availableStyles.textSizes}}
@@ -58,3 +65,9 @@
 <div class="mailpoet_form_field">
     <input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" />
 </div>
+
+<p class="mailpoet-fonts-notice"><%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %></p>
+
+<script type="text/javascript">
+    fontsSelect('#mailpoet_field_footer_text_font_family');
+</script>

views/newsletter/templates/blocks/header/settings.hbs

@@ -3,9 +3,17 @@
     <div class="mailpoet_form_field_input_option">
         <input type="text" name="font-color" id="mailpoet_field_header_text_color" class="mailpoet_field_header_text_color mailpoet_color" value="{{ model.styles.text.fontColor }}" />
         <select id="mailpoet_field_header_text_font_family" name="font-family" class="mailpoet_select mailpoet_select_medium mailpoet_field_header_text_font_family mailpoet_font_family">
-        {{#each availableStyles.fonts}}
+
+        <optgroup label="<%= __('Standard fonts')%>">
+        {{#each availableStyles.fonts.standard}}
             <option value="{{ this }}" {{#ifCond this '==' ../model.styles.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
         {{/each}}
+        </optgroup>
+        <optgroup label="<%= __('Custom fonts')%>">
+        {{#each availableStyles.fonts.custom}}
+            <option value="{{ this }}" {{#ifCond this '==' ../model.styles.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+        {{/each}}
+        </optgroup>
         </select>
         <select id="mailpoet_field_header_text_size" name="font-size" class="mailpoet_select mailpoet_select_small mailpoet_field_header_text_size mailpoet_font_size">
         {{#each availableStyles.textSizes}}
@@ -58,3 +66,9 @@
 <div class="mailpoet_form_field">
     <input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" />
 </div>
+
+<p class="mailpoet-fonts-notice"><%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %></p>
+
+<script type="text/javascript">
+    fontsSelect('#mailpoet_field_header_text_font_family');
+</script>

views/newsletter/templates/components/sidebar/styles.hbs

@@ -8,9 +8,16 @@
                 <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="text-color" value="{{ model.text.fontColor }}" id="mailpoet_text_font_color"></span>
             </span>
             <select id="mailpoet_text_font_family" name="text-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
-            {{#each availableStyles.fonts}}
+            <optgroup label="<%= __('Standard fonts')%>">
+            {{#each availableStyles.fonts.standard}}
                 <option value="{{ this }}" {{#ifCond this '==' ../model.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
             {{/each}}
+            </optgroup>
+            <optgroup label="<%= __('Custom fonts')%>">
+            {{#each availableStyles.fonts.custom}}
+                <option value="{{ this }}" {{#ifCond this '==' ../model.text.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+            {{/each}}
+            </optgroup>
             </select>
             <select id="mailpoet_text_font_size" name="text-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
             {{#each availableStyles.textSizes}}
@@ -23,9 +30,16 @@
                 <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h1-color" value="{{ model.h1.fontColor }}" id="mailpoet_h1_font_color"></span>
             </span>
             <select id="mailpoet_h1_font_family" name="h1-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
-            {{#each availableStyles.fonts}}
+            <optgroup label="<%= __('Standard fonts')%>">
+            {{#each availableStyles.fonts.standard}}
                 <option value="{{ this }}" {{#ifCond this '==' ../model.h1.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
             {{/each}}
+            </optgroup>
+            <optgroup label="<%= __('Custom fonts')%>">
+            {{#each availableStyles.fonts.custom}}
+                <option value="{{ this }}" {{#ifCond this '==' ../model.h1.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+            {{/each}}
+            </optgroup>
             </select>
             <select id="mailpoet_h1_font_size" name="h1-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
             {{#each availableStyles.headingSizes}}
@@ -38,9 +52,16 @@
                 <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h2-color" value="{{ model.h2.fontColor }}" id="mailpoet_h2_font_color"></span>
             </span>
             <select id="mailpoet_h2_font_family" name="h2-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
-            {{#each availableStyles.fonts}}
+            <optgroup label="<%= __('Standard fonts')%>">
+            {{#each availableStyles.fonts.standard}}
                 <option value="{{ this }}" {{#ifCond this '==' ../model.h2.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
             {{/each}}
+            </optgroup>
+            <optgroup label="<%= __('Custom fonts')%>">
+            {{#each availableStyles.fonts.custom}}
+                <option value="{{ this }}" {{#ifCond this '==' ../model.h2.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+            {{/each}}
+            </optgroup>
             </select>
             <select id="mailpoet_h2_font_size" name="h2-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
             {{#each availableStyles.headingSizes}}
@@ -53,9 +74,16 @@
                 <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="h3-color" value="{{ model.h3.fontColor }}" id="mailpoet_h3_font_color"></span>
             </span>
             <select id="mailpoet_h3_font_family" name="h3-family" class="mailpoet_font_family mailpoet_select mailpoet_select_medium">
-            {{#each availableStyles.fonts}}
+            <optgroup label="<%= __('Standard fonts')%>">
+            {{#each availableStyles.fonts.standard}}
                 <option value="{{ this }}" {{#ifCond this '==' ../model.h3.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
             {{/each}}
+            </optgroup>
+            <optgroup label="<%= __('Custom fonts')%>">
+            {{#each availableStyles.fonts.custom}}
+                <option value="{{ this }}" {{#ifCond this '==' ../model.h3.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
+            {{/each}}
+            </optgroup>
             </select>
             <select id="mailpoet_h3_font_size" name="h3-size" class="mailpoet_font_size mailpoet_select mailpoet_select_small">
             {{#each availableStyles.headingSizes}}
@@ -80,4 +108,8 @@
             </span><%= __('Global background') %>
         </div>
     </form>
+    <p class="mailpoet-fonts-notice"><%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %></p>
 </div>
+<script type="text/javascript">
+    fontsSelect('.mailpoet_font_family.mailpoet_select');
+</script>