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

\n

Heading 2

\n

Heading 3

\n

Paragraph.

" + }, + { + "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 %>