Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Merge pull request #1577 from mailpoet/fonts

Browse Source 
adding custom fonts [MAILPOET-1493]
This commit is contained in:
M. Shull
2018-11-08 11:18:36 -05:00
committed by GitHub
parent 8d3e751845 cca2a1923d
commit a1457678b0
16 changed files with 1645 additions and 1384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/src/newsletter_editor/common.styl
View File

@ -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

10
assets/js/src/handlebars_helpers.js
View File

@ -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;
}
});

3
lib/Config/Menu.php
View File

@ -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]-->';
});
}
}

2
lib/Newsletter/Renderer/Renderer.php
View File

@ -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
));

57
lib/Newsletter/Renderer/StylesHelper.php
View File

@ -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'
);
static $font = array(
'lineHeight' => 'line-height',
];
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]-->';
}
}

1
lib/Newsletter/Renderer/Template.html
View File

@ -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"

2709
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
tests/javascript/newsletter_editor/blocks/footer.spec.js
View File

@ -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)({});

10
tests/javascript/newsletter_editor/blocks/header.spec.js
View File

@ -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)({});

8
tests/javascript/newsletter_editor/components/sidebar.spec.js
View File

@ -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'
],

69
tests/unit/Newsletter/Renderer/StylesHelperTest.php Normal file
View File

@ -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('');
}
}

52
views/newsletter/editor.html
View File

@ -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,17 +619,31 @@
'10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px',
'26px', '30px', '36px', '40px'
],
fonts: [
'Arial',
'Comic Sans MS',
'Courier New',
'Georgia',
'Lucida',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana'
],
fonts: {
standard: [
'Arial',
'Comic Sans MS',
'Courier New',
'Georgia',
'Lucida',
'Tahoma',
'Times New Roman',
'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 %>

15
views/newsletter/templates/blocks/footer/settings.hbs
View File

@ -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>

16
views/newsletter/templates/blocks/header/settings.hbs
View File

@ -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>

40
views/newsletter/templates/components/sidebar/styles.hbs
View File

@ -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>