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

Add email background and width into StylesController and apply in redering

Browse Source 
[MAILPOET-5540]
This commit is contained in:
Rostislav Wolny
2023-09-15 14:41:57 +02:00
committed by Jan Lysý
parent 77eab47357
commit fd96b4afad
6 changed files with 80 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mailpoet/lib/EmailEditor/Engine/EmailEditor.php
View File

@@ -99,7 +99,7 @@ class EmailEditor {
$settings['__experimentalAdditionalBlockPatternCategories'] = []; $settings['__experimentalAdditionalBlockPatternCategories'] = [];
// Reset editor styles f // 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); return apply_filters('mailpoet_email_editor_settings_all', $settings);
} }

17
mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
View File

@@ -46,19 +46,30 @@ class Renderer {
$renderedBody = $this->blocksRenderer->render($parsedBlocks); $renderedBody = $this->blocksRenderer->render($parsedBlocks);
$styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE); $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); $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_language}}
* {{email_subject}} * {{email_subject}}
* {{email_meta_robots}} * {{email_meta_robots}}
* {{email_styles}} * {{email_template_styles}}
* {{email_preheader}} * {{email_preheader}}
* {{email_body}} * {{email_body}}
*/ */
$templateWithContents = $this->injectContentIntoTemplate( $templateWithContents = $this->injectContentIntoTemplate(
(string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_FILE), $template,
[ [
$language, $language,
esc_html($subject), esc_html($subject),

2
mailpoet/lib/EmailEditor/Engine/Renderer/styles.css
View File

@@ -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 is disabled because some rules contain properties that linter marks as unknown, but they are valid for email rendering */
/* stylelint-disable property-no-unknown */ /* stylelint-disable property-no-unknown */
body { body {
background: #ccc;
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
@@ -11,7 +10,6 @@ body {
} }
.email_layout_wrapper { .email_layout_wrapper {
background: #ccc;
margin: 0 auto; margin: 0 auto;
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;

10
mailpoet/lib/EmailEditor/Engine/Renderer/template.html
View File

@@ -13,12 +13,12 @@
{{email_meta_robots}} {{email_meta_robots}}
<style type="text/css"> <style type="text/css">
{{email_styles}} {{email_template_styles}}
</style> </style>
<body style="word-spacing: normal"> <body style="word-spacing:normal;background:{{background}};">
<div class="email_layout_wrapper"> <div class="email_layout_wrapper" style="background:{{background}}">
<!--[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]--> <!--[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: 660px"> <div style="margin: 0px auto; max-width: {{width}}px">
<table <table
align="center" align="center"
border="0" border="0"

28
mailpoet/lib/EmailEditor/Engine/StylesController.php
View File

@@ -3,13 +3,25 @@
namespace MailPoet\EmailEditor\Engine; namespace MailPoet\EmailEditor\Engine;
class StylesController { 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. * 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. * 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. * We will gradually replace these hardcoded values with styles saved as global styles or styles saved with the email.
* @var string * @var string
*/ */
const DEFAULT_EMAIL_STYLES = " const DEFAULT_EMAIL_CONTENT_STYLES = "
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; } body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
p { font-size: 16px; } p { font-size: 16px; }
h1 { font-size: 32px; } h1 { font-size: 32px; }
@@ -20,7 +32,17 @@ class StylesController {
h6 { font-size: 12px; } h6 { font-size: 12px; }
"; ";
public function getEmailStyles(): string { public function getEmailContentStyles(): string {
return self::DEFAULT_EMAIL_STYLES; 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,
];
} }
} }

35
mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
View File

@@ -2,6 +2,8 @@
namespace MailPoet\EmailEditor\Engine\Renderer; namespace MailPoet\EmailEditor\Engine\Renderer;
use MailPoet\EmailEditor\Engine\StylesController;
require_once __DIR__ . '/DummyBlockRenderer.php'; require_once __DIR__ . '/DummyBlockRenderer.php';
class RendererTest extends \MailPoetTest { class RendererTest extends \MailPoetTest {
@@ -70,4 +72,37 @@ class RendererTest extends \MailPoetTest {
$style = $body->getAttribute('style'); $style = $body->getAttribute('style');
expect($style)->stringContainsString('font-family:Arial,\'Helvetica Neue\',Helvetica,sans-serif;'); 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');
}
} }