make small improvements and additional specs details.

lib/Config/Menu.php

@@ -70,6 +70,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/StylesHelper.php

@@ -14,7 +14,7 @@ class StylesHelper {
     'borderStyle' => 'border-style',
     'borderColor' => 'border-color',
     'borderRadius' => 'border-radius',
-    'lineHeight' => 'line-height'
+    'lineHeight' => 'line-height',
   ];
   static $font = [
     'Arial' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
@@ -35,7 +35,7 @@ class StylesHelper {
     '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"
+    'Source Sans Pro' => "source sans pro, helvetica neue, helvetica, arial, sans-serif",
   ];
   static $custom_fonts = [
     'Arvo',
@@ -47,7 +47,7 @@ class StylesHelper {
     'Open Sans',
     'Playfair Display',
     'Roboto',
-    'Source Sans Pro'
+    'Source Sans Pro',
   ];
   static $line_height_multiplier = 1.6;
   static $heading_margin_multiplier = 0.3;
@@ -125,10 +125,10 @@ class StylesHelper {
     return $style;
   }
 
-  static function getCustomFontsNames($styles) {
+  private static function getCustomFontsNames($styles) {
     $font_names = [];
     foreach($styles as $style) {
-      if (isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts))
+      if(isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts))
         $font_names[$style['fontFamily']] = true;
     }
     return array_keys($font_names);
@@ -137,10 +137,12 @@ class StylesHelper {
   static function getCustomFontsLinks($styles) {
     $links = [];
     foreach(self::getCustomFontsNames($styles) as $name) {
-      $links[] = '<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family='
+      $links[] = urlencode($name) . ':400,400i,700,700i';
-        . str_replace(' ', '+', $name)
-        . ':400,400i,700,700i" rel="stylesheet"><!--<![endif]-->';
     }
-    return implode("\n", $links);
+    if(!count($links))
+      return '';
+    return '<!--[if !mso]><link href="https://fonts.googleapis.com/css?family='
+      . implode("|", $links)
+      . '" rel="stylesheet"><![endif]-->';
   }
 }

tests/unit/Newsletter/Renderer/StylesHelperTest.php

@@ -5,9 +5,8 @@ use MailPoet\Newsletter\Renderer\StylesHelper;
 
 class StylesHelperTest extends \MailPoetTest {
 
-  function __construct() {
+  function testItGetsCustomFontsLinks() {
-    parent::__construct();
+    $styles_with_custom_fonts = [
-    $this->styles = [
       "text" => [
         "fontColor" => "#565656",
         "fontFamily" => "Arial",
@@ -33,18 +32,38 @@ class StylesHelperTest extends \MailPoetTest {
         "textDecoration" => "underline"
       ],
     ];
-  }
 
-  function testItGetsCustomFontsNames() {
+    $styles_without_custom_fonts = [
-    expect(StylesHelper::getCustomFontsNames($this->styles))
+      "text" => [
-      ->equals(['Roboto', 'Source Sans Pro']);
+        "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"
+      ],
+    ];
 
-  function testItGetsCustomFontsLinks() {
+    expect(StylesHelper::getCustomFontsLinks($styles_with_custom_fonts))
-    expect(StylesHelper::getCustomFontsLinks($this->styles))
+      ->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]-->');
-      ->equals(implode("\n", [
+
-        '<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet"><!--<![endif]-->',
+    expect(StylesHelper::getCustomFontsLinks($styles_without_custom_fonts))
-        '<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"><!--<![endif]-->',
+      ->equals('');
-      ]));
   }
 }

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

@@ -65,6 +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

@@ -66,6 +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>