diff --git a/mailpoet/lib/EmailEditor/Engine/EmailEditor.php b/mailpoet/lib/EmailEditor/Engine/EmailEditor.php
index 5e6660652e..8284a603ef 100644
--- a/mailpoet/lib/EmailEditor/Engine/EmailEditor.php
+++ b/mailpoet/lib/EmailEditor/Engine/EmailEditor.php
@@ -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);
}
diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
index 5fd86fbbce..ac0fbdf4db 100644
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
+++ b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
@@ -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),
diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css b/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css
index 2898db7a19..f891f9b746 100644
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css
+++ b/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css
@@ -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%;
diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/template.html b/mailpoet/lib/EmailEditor/Engine/Renderer/template.html
index 068197d1f9..773993f014 100644
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/template.html
+++ b/mailpoet/lib/EmailEditor/Engine/Renderer/template.html
@@ -13,12 +13,12 @@
{{email_meta_robots}}
-
-
-
-
+
+
+
+
self::EMAIL_WIDTH,
+ 'background' => self::EMAIL_BACKGROUND,
+ ];
}
}
diff --git a/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php b/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
index 19c241c39a..132dd19e21 100644
--- a/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
+++ b/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
@@ -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');
+ }
}