diff --git a/assets/js/src/newsletter_editor/blocks/header.js b/assets/js/src/newsletter_editor/blocks/header.js
index a8d6898868..c5a8678d12 100644
--- a/assets/js/src/newsletter_editor/blocks/header.js
+++ b/assets/js/src/newsletter_editor/blocks/header.js
@@ -98,6 +98,7 @@ Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
});
Module.HeaderWidgetView = base.WidgetView.extend({
+ id: 'automation_editor_block_header',
getTemplate: function getTemplate() { return window.templates.headerInsertion; },
behaviors: {
DraggableBehavior: {
diff --git a/tests/_data/newsletterWithTextNoHeader.json b/tests/_data/newsletterWithTextNoHeader.json
new file mode 100644
index 0000000000..c91d474b21
--- /dev/null
+++ b/tests/_data/newsletterWithTextNoHeader.json
@@ -0,0 +1,391 @@
+{
+ "content": {
+ "type": "container",
+ "columnLayout": false,
+ "orientation": "vertical",
+ "image": {
+ "src": null,
+ "display": "scale"
+ },
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ }
+ },
+ "blocks": [
+ {
+ "type": "container",
+ "columnLayout": false,
+ "orientation": "horizontal",
+ "image": {
+ "src": null,
+ "display": "scale"
+ },
+ "styles": {
+ "block": {
+ "backgroundColor": "#f8f8f8"
+ }
+ },
+ "blocks": [
+ {
+ "type": "container",
+ "columnLayout": false,
+ "orientation": "vertical",
+ "image": {
+ "src": null,
+ "display": "scale"
+ },
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ }
+ },
+ "blocks": [
+ {
+ "type": "text",
+ "text": "
Heading 1 \nHeading 2 \nHeading 3 \nParagraph.
"
+ },
+ {
+ "type": "footer",
+ "text": "Unsubscribe | Manage your subscription Add your postal address here!
",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ },
+ "text": {
+ "fontColor": "#222222",
+ "fontFamily": "Arial",
+ "fontSize": "12px",
+ "textAlign": "center"
+ },
+ "link": {
+ "fontColor": "#6cb7d4",
+ "textDecoration": "none"
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ "globalStyles": {
+ "text": {
+ "fontColor": "#000000",
+ "fontFamily": "Arial",
+ "fontSize": "16px",
+ "lineHeight": "1.6"
+ },
+ "h1": {
+ "fontColor": "#111111",
+ "fontFamily": "Trebuchet MS",
+ "fontSize": "30px",
+ "lineHeight": "1.6"
+ },
+ "h2": {
+ "fontColor": "#222222",
+ "fontFamily": "Trebuchet MS",
+ "fontSize": "24px",
+ "lineHeight": "1.6"
+ },
+ "h3": {
+ "fontColor": "#333333",
+ "fontFamily": "Trebuchet MS",
+ "fontSize": "22px",
+ "lineHeight": "1.6"
+ },
+ "link": {
+ "fontColor": "#21759B",
+ "textDecoration": "underline"
+ },
+ "wrapper": {
+ "backgroundColor": "#ffffff"
+ },
+ "body": {
+ "backgroundColor": "#eeeeee"
+ }
+ },
+ "blockDefaults": {
+ "automatedLatestContent": {
+ "amount": "5",
+ "withLayout": false,
+ "contentType": "post",
+ "inclusionType": "include",
+ "displayType": "excerpt",
+ "titleFormat": "h1",
+ "titleAlignment": "left",
+ "titleIsLink": false,
+ "imageFullWidth": false,
+ "featuredImagePosition": "belowTitle",
+ "showAuthor": "no",
+ "authorPrecededBy": "Author:",
+ "showCategories": "no",
+ "categoriesPrecededBy": "Categories:",
+ "readMoreType": "button",
+ "readMoreText": "Read more",
+ "readMoreButton": {
+ "text": "Read more",
+ "url": "[postLink]",
+ "context": "automatedLatestContent.readMoreButton",
+ "styles": {
+ "block": {
+ "backgroundColor": "#2ea1cd",
+ "borderColor": "#0074a2",
+ "borderWidth": "1px",
+ "borderRadius": "5px",
+ "borderStyle": "solid",
+ "width": "180px",
+ "lineHeight": "40px",
+ "fontColor": "#ffffff",
+ "fontFamily": "Verdana",
+ "fontSize": "18px",
+ "fontWeight": "normal",
+ "textAlign": "center"
+ }
+ }
+ },
+ "sortBy": "newest",
+ "showDivider": true,
+ "divider": {
+ "context": "automatedLatestContent.divider",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent",
+ "padding": "13px",
+ "borderStyle": "solid",
+ "borderWidth": "3px",
+ "borderColor": "#aaaaaa"
+ }
+ }
+ },
+ "backgroundColor": "#ffffff",
+ "backgroundColorAlternate": "#eeeeee"
+ },
+ "automatedLatestContentLayout": {
+ "amount": "5",
+ "withLayout": true,
+ "contentType": "post",
+ "inclusionType": "include",
+ "displayType": "excerpt",
+ "titleFormat": "h1",
+ "titleAlignment": "left",
+ "titleIsLink": false,
+ "imageFullWidth": false,
+ "featuredImagePosition": "alternate",
+ "showAuthor": "no",
+ "authorPrecededBy": "Author:",
+ "showCategories": "no",
+ "categoriesPrecededBy": "Categories:",
+ "readMoreType": "button",
+ "readMoreText": "Read more",
+ "readMoreButton": {
+ "text": "Read more",
+ "url": "[postLink]",
+ "context": "automatedLatestContentLayout.readMoreButton",
+ "styles": {
+ "block": {
+ "backgroundColor": "#2ea1cd",
+ "borderColor": "#0074a2",
+ "borderWidth": "1px",
+ "borderRadius": "5px",
+ "borderStyle": "solid",
+ "width": "180px",
+ "lineHeight": "40px",
+ "fontColor": "#ffffff",
+ "fontFamily": "Verdana",
+ "fontSize": "18px",
+ "fontWeight": "normal",
+ "textAlign": "center"
+ }
+ }
+ },
+ "sortBy": "newest",
+ "showDivider": true,
+ "divider": {
+ "context": "automatedLatestContentLayout.divider",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent",
+ "padding": "13px",
+ "borderStyle": "solid",
+ "borderWidth": "3px",
+ "borderColor": "#aaaaaa"
+ }
+ }
+ },
+ "backgroundColor": "#ffffff",
+ "backgroundColorAlternate": "#eeeeee"
+ },
+ "button": {
+ "text": "Button",
+ "url": "",
+ "styles": {
+ "block": {
+ "backgroundColor": "#2ea1cd",
+ "borderColor": "#0074a2",
+ "borderWidth": "1px",
+ "borderRadius": "5px",
+ "borderStyle": "solid",
+ "width": "180px",
+ "lineHeight": "40px",
+ "fontColor": "#ffffff",
+ "fontFamily": "Verdana",
+ "fontSize": "18px",
+ "fontWeight": "normal",
+ "textAlign": "center"
+ }
+ }
+ },
+ "container": {
+ "image": {
+ "src": null,
+ "display": "scale"
+ },
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ }
+ }
+ },
+ "divider": {
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent",
+ "padding": "13px",
+ "borderStyle": "solid",
+ "borderWidth": "3px",
+ "borderColor": "#aaaaaa"
+ }
+ }
+ },
+ "footer": {
+ "text": "Unsubscribe | Manage subscription Add your postal address here!
",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ },
+ "text": {
+ "fontColor": "#222222",
+ "fontFamily": "Arial",
+ "fontSize": "12px",
+ "textAlign": "center"
+ },
+ "link": {
+ "fontColor": "#6cb7d4",
+ "textDecoration": "none"
+ }
+ }
+ },
+ "posts": {
+ "amount": "10",
+ "withLayout": true,
+ "contentType": "post",
+ "postStatus": "publish",
+ "inclusionType": "include",
+ "displayType": "excerpt",
+ "titleFormat": "h1",
+ "titleAlignment": "left",
+ "titleIsLink": false,
+ "imageFullWidth": false,
+ "featuredImagePosition": "alternate",
+ "showAuthor": "no",
+ "authorPrecededBy": "Author:",
+ "showCategories": "no",
+ "categoriesPrecededBy": "Categories:",
+ "readMoreType": "link",
+ "readMoreText": "Read more",
+ "readMoreButton": {
+ "text": "Read more",
+ "url": "[postLink]",
+ "context": "posts.readMoreButton",
+ "styles": {
+ "block": {
+ "backgroundColor": "#2ea1cd",
+ "borderColor": "#0074a2",
+ "borderWidth": "1px",
+ "borderRadius": "5px",
+ "borderStyle": "solid",
+ "width": "180px",
+ "lineHeight": "40px",
+ "fontColor": "#ffffff",
+ "fontFamily": "Verdana",
+ "fontSize": "18px",
+ "fontWeight": "normal",
+ "textAlign": "center"
+ }
+ }
+ },
+ "sortBy": "newest",
+ "showDivider": true,
+ "divider": {
+ "context": "posts.divider",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent",
+ "padding": "13px",
+ "borderStyle": "solid",
+ "borderWidth": "3px",
+ "borderColor": "#aaaaaa"
+ }
+ }
+ },
+ "backgroundColor": "#ffffff",
+ "backgroundColorAlternate": "#eeeeee"
+ },
+ "social": {
+ "iconSet": "default",
+ "styles": {
+ "block": {
+ "textAlign": "center"
+ }
+ },
+ "icons": [
+ {
+ "type": "socialIcon",
+ "iconType": "facebook",
+ "link": "http://www.facebook.com",
+ "image": "http://localhost:8002/wp-content/plugins/mailpoet/assets/img/newsletter_editor/social-icons/01-social/Facebook.png?mailpoet_version=3.19.2",
+ "height": "32px",
+ "width": "32px",
+ "text": "Facebook"
+ },
+ {
+ "type": "socialIcon",
+ "iconType": "twitter",
+ "link": "http://www.twitter.com",
+ "image": "http://localhost:8002/wp-content/plugins/mailpoet/assets/img/newsletter_editor/social-icons/01-social/Twitter.png?mailpoet_version=3.19.2",
+ "height": "32px",
+ "width": "32px",
+ "text": "Twitter"
+ }
+ ]
+ },
+ "spacer": {
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent",
+ "height": "40px"
+ }
+ }
+ },
+ "header": {
+ "text": "Display problems? Open this email in your web browser. ",
+ "styles": {
+ "block": {
+ "backgroundColor": "transparent"
+ },
+ "text": {
+ "fontColor": "#222222",
+ "fontFamily": "Arial",
+ "fontSize": "12px",
+ "textAlign": "center"
+ },
+ "link": {
+ "fontColor": "#6cb7d4",
+ "textDecoration": "underline"
+ }
+ }
+ }
+ }
+}
diff --git a/tests/acceptance/EditorHeaderBlockCest.php b/tests/acceptance/EditorHeaderBlockCest.php
new file mode 100644
index 0000000000..03809d7f93
--- /dev/null
+++ b/tests/acceptance/EditorHeaderBlockCest.php
@@ -0,0 +1,36 @@
+wantTo('add header block to newsletter');
+ $newsletterTitle = 'Header Block Newsletter';
+ $headerInEditor = ('[data-automation-id="header"]');
+ $headerSettingsIcon = ('[data-automation-id="settings_tool"]');
+ $headerSettingsAssertion = ('[data-automation-id="header_done_button"]');
+ (new Newsletter())
+ ->withSubject($newsletterTitle)
+ ->loadBodyFrom('newsletterWithTextNoHeader.json')
+ ->create();
+ $I->login();
+ $I->amOnMailpoetPage('Emails');
+ $I->waitForText($newsletterTitle);
+ $I->clickItemRowActionByItemName($newsletterTitle, 'Edit');
+ // Create header block
+ $I->waitForText('Header');
+ $I->wait(1); // just to be sure
+ $I->dragAndDrop('#automation_editor_block_header', '#mce_0');
+ //Open settings by clicking on block
+ $I->moveMouseOver($headerInEditor, 3, 2);
+ $I->waitForText('Display problems?');
+ $I->click($headerSettingsIcon);
+ $I->waitForElementVisible($headerSettingsAssertion);
+ $I->click($headerSettingsAssertion);
+ }
+
+}
diff --git a/views/newsletter/templates/blocks/header/block.hbs b/views/newsletter/templates/blocks/header/block.hbs
index bc68522faa..05de25205d 100644
--- a/views/newsletter/templates/blocks/header/block.hbs
+++ b/views/newsletter/templates/blocks/header/block.hbs
@@ -16,5 +16,5 @@
text-decoration: {{ model.styles.link.textDecoration }};
}
-{{{ model.text }}}
+{{{ model.text }}}
diff --git a/views/newsletter/templates/blocks/header/settings.hbs b/views/newsletter/templates/blocks/header/settings.hbs
index d100912fc9..1892438f59 100644
--- a/views/newsletter/templates/blocks/header/settings.hbs
+++ b/views/newsletter/templates/blocks/header/settings.hbs
@@ -64,7 +64,7 @@
-
+
<%= __('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 %>