Add email background and width into StylesController and apply in redering
[MAILPOET-5540]
This commit is contained in:
Rostislav Wolny
committed by
Jan Lysý
Jan Lysý
parent
77eab47357
commit
fd96b4afad
@@ -99,7 +99,7 @@ class EmailEditor {
|
||||
$settings['__experimentalAdditionalBlockPatternCategories'] = [];
|
||||
|
||||
// Reset editor styles f
|
||||
$settings['defaultEditorStyles'] = [[ 'css' => $this->stylesController->getEmailStyles() ]];
|
||||
$settings['defaultEditorStyles'] = [[ 'css' => $this->stylesController->getEmailContentStyles() ]];
|
||||
|
||||
return apply_filters('mailpoet_email_editor_settings_all', $settings);
|
||||
}
|
||||
|
||||
@@ -46,19 +46,30 @@ class Renderer {
|
||||
$renderedBody = $this->blocksRenderer->render($parsedBlocks);
|
||||
|
||||
$styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE);
|
||||
$styles .= $this->stylesController->getEmailStyles();
|
||||
$styles .= $this->stylesController->getEmailContentStyles();
|
||||
$styles = apply_filters('mailpoet_email_renderer_styles', $styles, $post);
|
||||
|
||||
$template = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_FILE);
|
||||
|
||||
// Apply layout styles
|
||||
$layoutStyles = $this->stylesController->getEmailLayoutStyles();
|
||||
$template = str_replace(
|
||||
['{{width}}', '{{background}}'],
|
||||
[$layoutStyles['width'], $layoutStyles['background']],
|
||||
$template
|
||||
);
|
||||
|
||||
/**
|
||||
* Replace template variables
|
||||
* {{email_language}}
|
||||
* {{email_subject}}
|
||||
* {{email_meta_robots}}
|
||||
* {{email_styles}}
|
||||
* {{email_template_styles}}
|
||||
* {{email_preheader}}
|
||||
* {{email_body}}
|
||||
*/
|
||||
$templateWithContents = $this->injectContentIntoTemplate(
|
||||
(string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_FILE),
|
||||
$template,
|
||||
[
|
||||
$language,
|
||||
esc_html($subject),
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
/* StyleLint is disabled because some rules contain properties that linter marks as unknown, but they are valid for email rendering */
|
||||
/* stylelint-disable property-no-unknown */
|
||||
body {
|
||||
background: #ccc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
|
||||
@@ -11,7 +10,6 @@ body {
|
||||
}
|
||||
|
||||
.email_layout_wrapper {
|
||||
background: #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
{{email_meta_robots}}
|
||||
|
||||
<style type="text/css">
|
||||
{{email_styles}}
|
||||
{{email_template_styles}}
|
||||
</style>
|
||||
<body style="word-spacing: normal">
|
||||
<div class="email_layout_wrapper">
|
||||
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
||||
<div style="margin: 0px auto; max-width: 660px">
|
||||
<body style="word-spacing:normal;background:{{background}};">
|
||||
<div class="email_layout_wrapper" style="background:{{background}}">
|
||||
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:{{width}}px;" width="{{width}}" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
||||
<div style="margin: 0px auto; max-width: {{width}}px">
|
||||
<table
|
||||
align="center"
|
||||
border="0"
|
||||
|
||||
@@ -3,13 +3,25 @@
|
||||
namespace MailPoet\EmailEditor\Engine;
|
||||
|
||||
class StylesController {
|
||||
/**
|
||||
* Width of the email in pixels.
|
||||
* @var int
|
||||
*/
|
||||
const EMAIL_WIDTH = 660;
|
||||
|
||||
/**
|
||||
* Width of the email in pixels.
|
||||
* @var string
|
||||
*/
|
||||
const EMAIL_BACKGROUND = '#cccccc';
|
||||
|
||||
/**
|
||||
* Default styles applied to the email. These are going to be replaced by style settings.
|
||||
* This is currently more af a proof of concept that we can apply styles to the email.
|
||||
* We will gradually replace these hardcoded values with styles saved as global styles or styles saved with the email.
|
||||
* @var string
|
||||
*/
|
||||
const DEFAULT_EMAIL_STYLES = "
|
||||
const DEFAULT_EMAIL_CONTENT_STYLES = "
|
||||
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
|
||||
p { font-size: 16px; }
|
||||
h1 { font-size: 32px; }
|
||||
@@ -20,7 +32,17 @@ class StylesController {
|
||||
h6 { font-size: 12px; }
|
||||
";
|
||||
|
||||
public function getEmailStyles(): string {
|
||||
return self::DEFAULT_EMAIL_STYLES;
|
||||
public function getEmailContentStyles(): string {
|
||||
return self::DEFAULT_EMAIL_CONTENT_STYLES;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array{width: int, background: string}
|
||||
*/
|
||||
public function getEmailLayoutStyles(): array {
|
||||
return [
|
||||
'width' => self::EMAIL_WIDTH,
|
||||
'background' => self::EMAIL_BACKGROUND,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
namespace MailPoet\EmailEditor\Engine\Renderer;
|
||||
|
||||
use MailPoet\EmailEditor\Engine\StylesController;
|
||||
|
||||
require_once __DIR__ . '/DummyBlockRenderer.php';
|
||||
|
||||
class RendererTest extends \MailPoetTest {
|
||||
@@ -70,4 +72,37 @@ class RendererTest extends \MailPoetTest {
|
||||
$style = $body->getAttribute('style');
|
||||
expect($style)->stringContainsString('font-family:Arial,\'Helvetica Neue\',Helvetica,sans-serif;');
|
||||
}
|
||||
|
||||
public function testItAppliesLayoutStyles() {
|
||||
$stylesControllerMock = $this->createMock(StylesController::class);
|
||||
$stylesControllerMock->method('getEmailLayoutStyles')->willReturn([
|
||||
'width' => 123,
|
||||
'background' => '#123456',
|
||||
]);
|
||||
$renderer = $this->getServiceWithOverrides(Renderer::class, [
|
||||
'stylesController' => $stylesControllerMock,
|
||||
]);
|
||||
$rendered = $renderer->render($this->emailPost, 'Subject', '', 'en');
|
||||
$doc = new \DOMDocument();
|
||||
$doc->loadHTML($rendered['html']);
|
||||
$xpath = new \DOMXPath($doc);
|
||||
$nodes = $xpath->query('//body');
|
||||
$body = null;
|
||||
if (($nodes instanceof \DOMNodeList) && $nodes->length > 0) {
|
||||
$body = $nodes->item(0);
|
||||
}
|
||||
$this->assertInstanceOf(\DOMElement::class, $body);
|
||||
$style = $body->getAttribute('style');
|
||||
expect($style)->stringContainsString('background:#123456');
|
||||
|
||||
$xpath = new \DOMXPath($doc);
|
||||
$wrapper = null;
|
||||
$nodes = $xpath->query('//div[contains(@class, "email_layout_wrapper")]//div');
|
||||
if (($nodes instanceof \DOMNodeList) && $nodes->length > 0) {
|
||||
$wrapper = $nodes->item(0);
|
||||
}
|
||||
$this->assertInstanceOf(\DOMElement::class, $wrapper);
|
||||
$style = $wrapper->getAttribute('style');
|
||||
expect($style)->stringContainsString('max-width: 123px');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user