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

Use the same format for styles as it is in theme.json

Browse Source 
This should be the first step to using theme.json format in DB and merging more style configurations to the final one.
[MAILPOET-5640]
This commit is contained in:
Jan Lysý
2024-03-08 10:11:14 +01:00
committed by Jan Lysý
parent c415f1efce
commit 5ceef236bf
21 changed files with 195 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
View File

@ -48,7 +48,6 @@ export function BlockEditor() {
canUserEditMedia,
hasFixedToolbar,
focusMode,
styles,
layout,
} = useSelect(
(select) => ({
@ -63,7 +62,6 @@ export function BlockEditor() {
canUserEditMedia: select(coreStore).canUser('create', 'media'),
hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
focusMode: select(storeName).isFeatureActive('focusMode'),
styles: select(storeName).getStyles(),
layout: select(storeName).getLayout(),
}),
[],
@ -81,8 +79,8 @@ export function BlockEditor() {
{ id: postId },
);
// This will be set by the user in the future in email or global styles.
const layoutBackground = styles.layout.background;
// This is color of the wrapper and we need to decide if it is configurable or not.
const layoutBackground = '#cccccc';
let inlineStyles = useResizeCanvas(previewDeviceType);
// Adjust the inline styles for desktop preview. We want to set email width and center it.
@ -90,7 +88,7 @@ export function BlockEditor() {
inlineStyles = {
...inlineStyles,
height: 'auto',
width: styles.layout.width,
width: layout.contentSize,
display: 'flex',
flexFlow: 'column',
};

26
mailpoet/assets/js/src/email-editor/engine/store/types.ts
View File

@ -27,24 +27,32 @@ export type ExperimentalSettings = {
export type EmailEditorSettings = EditorSettings & ExperimentalSettings;
export type EmailStyles = {
layout: {
background: string;
spacing: {
blockGap: string;
padding: {
bottom: string;
left: string;
right: string;
top: string;
};
width: string;
};
colors: {
color: {
background: string;
text: string;
};
elements: {
h1: {
color: string;
fontFamily: string;
fontWeight: string;
blocks: {
"core/heading": {
elements: {
h1: {
color: {
text: string;
};
typography: {
fontFamily: string;
fontWeight: string;
};
};
};
};
};
};

5
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ContentRenderer.php
View File

@ -40,8 +40,9 @@ class ContentRenderer {
$parser = new \WP_Block_Parser();
$parsedBlocks = $parser->parse($post->post_content); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
$layoutStyles = $this->settingsController->getEmailStyles()['layout'];
$parsedBlocks = $this->processManager->preprocess($parsedBlocks, $layoutStyles);
$layout = $this->settingsController->getLayout();
$themeStyles = $this->settingsController->getEmailStyles();
$parsedBlocks = $this->processManager->preprocess($parsedBlocks, $layout, $themeStyles);
$renderedBody = $this->renderBlocks($parsedBlocks);
$styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::CONTENT_STYLES_FILE);

11
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Layout/FlexLayoutRenderer.php
View File

@ -9,7 +9,11 @@ use MailPoet\EmailEditor\Engine\SettingsController;
*/
class FlexLayoutRenderer {
public function renderInnerBlocksInLayout(array $parsedBlock, SettingsController $settingsController): string {
$innerBlocks = $this->computeWidthsForFlexLayout($parsedBlock, $settingsController);
$themeStyles = $settingsController->getEmailStyles();
$flexGap = $themeStyles['spacing']['blockGap'] ?? '0px';
$flexGapNumber = $settingsController->parseNumberFromStringWithPixels($flexGap);
$innerBlocks = $this->computeWidthsForFlexLayout($parsedBlock, $settingsController, $flexGapNumber);
// MS Outlook doesn't support style attribute in divs so we conditionally wrap the buttons in a table and repeat styles
$outputHtml = '<!--[if mso | IE]><table align="{align}" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="" style="{style}" ><![endif]-->
@ -21,7 +25,7 @@ class FlexLayoutRenderer {
$styles['width'] = $block['email_attrs']['layout_width'];
}
if ($key > 0) {
$styles['padding-left'] = SettingsController::FLEX_GAP;
$styles['padding-left'] = $flexGap;
}
$outputHtml .= '<td class="layout-flex-item" style="' . esc_html($settingsController->convertStylesToString($styles)) . '">' . render_block($block) . '</td>';
}
@ -40,11 +44,10 @@ class FlexLayoutRenderer {
return $outputHtml;
}
private function computeWidthsForFlexLayout(array $parsedBlock, SettingsController $settingsController): array {
private function computeWidthsForFlexLayout(array $parsedBlock, SettingsController $settingsController, float $flexGap): array {
$blocksCount = count($parsedBlock['innerBlocks']);
$totalUsedWidth = 0; // Total width assuming items without set width would consume proportional width
$parentWidth = $settingsController->parseNumberFromStringWithPixels($parsedBlock['email_attrs']['width'] ?? SettingsController::EMAIL_WIDTH);
$flexGap = $settingsController->parseNumberFromStringWithPixels(SettingsController::FLEX_GAP);
$innerBlocks = $parsedBlock['innerBlocks'] ?? [];
foreach ($innerBlocks as $key => $block) {

19
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/BlocksWidthPreprocessor.php
View File

@ -7,15 +7,15 @@ namespace MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors;
* The final width in pixels is stored in the email_attrs array because we would like to avoid changing the original attributes.
*/
class BlocksWidthPreprocessor implements Preprocessor {
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
foreach ($parsedBlocks as $key => $block) {
// Layout width is recalculated for each block because full-width blocks don't exclude padding
$layoutWidth = $this->parseNumberFromStringWithPixels($layoutStyles['width']);
$layoutWidth = $this->parseNumberFromStringWithPixels($layout['contentSize']);
$alignment = $block['attrs']['align'] ?? null;
// Subtract padding from the block width if it's not full-width
if ($alignment !== 'full') {
$layoutWidth -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['left'] ?? '0px');
$layoutWidth -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['right'] ?? '0px');
$layoutWidth -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['left'] ?? '0px');
$layoutWidth -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['right'] ?? '0px');
}
$widthInput = $block['attrs']['width'] ?? '100%';
@ -36,13 +36,14 @@ class BlocksWidthPreprocessor implements Preprocessor {
}
// Copy layout styles and update width and padding
$modifiedLayoutStyles = $layoutStyles;
$modifiedLayoutStyles['width'] = "{$width}px";
$modifiedLayoutStyles['padding']['left'] = $block['attrs']['style']['spacing']['padding']['left'] ?? '0px';
$modifiedLayoutStyles['padding']['right'] = $block['attrs']['style']['spacing']['padding']['right'] ?? '0px';
$modifiedLayout = $layout;
$modifiedLayout['contentSize'] = "{$width}px";
$modifiedStyles = $styles;
$modifiedStyles['spacing']['padding']['left'] = $block['attrs']['style']['spacing']['padding']['left'] ?? '0px';
$modifiedStyles['spacing']['padding']['right'] = $block['attrs']['style']['spacing']['padding']['right'] ?? '0px';
$block['email_attrs']['width'] = "{$width}px";
$block['innerBlocks'] = $this->preprocess($block['innerBlocks'], $modifiedLayoutStyles);
$block['innerBlocks'] = $this->preprocess($block['innerBlocks'], $modifiedLayout, $modifiedStyles);
$parsedBlocks[$key] = $block;
}
return $parsedBlocks;

2
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/CleanupPreprocessor.php
View File

@ -3,7 +3,7 @@
namespace MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors;
class CleanupPreprocessor implements Preprocessor {
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
foreach ($parsedBlocks as $key => $block) {
// https://core.trac.wordpress.org/ticket/45312
// \WP_Block_Parser::parse_blocks() sometimes add a block with name null that can cause unexpected spaces in rendered content

6
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/Preprocessor.php
View File

@ -3,5 +3,9 @@
namespace MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors;
interface Preprocessor {
public function preprocess(array $parsedBlocks, array $layoutStyles): array;
/**
* @param array{contentSize: string} $layout
* @param array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles
*/
public function preprocess(array $parsedBlocks, array $layout, array $styles): array;
}

14
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/SpacingPreprocessor.php
View File

@ -2,26 +2,26 @@
namespace MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors;
use MailPoet\EmailEditor\Engine\SettingsController;
/**
* This preprocessor is responsible for setting default spacing values for blocks.
* In the early development phase, we are setting only margin-top for blocks that are not first or last in the columns block.
*/
class SpacingPreprocessor implements Preprocessor {
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
$parsedBlocks = $this->addMarginTopToBlocks($parsedBlocks);
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
$parsedBlocks = $this->addMarginTopToBlocks($parsedBlocks, $styles);
return $parsedBlocks;
}
private function addMarginTopToBlocks(array $parsedBlocks): array {
private function addMarginTopToBlocks(array $parsedBlocks, array $styles): array {
$flexGap = $styles['spacing']['blockGap'] ?? '0px';
foreach ($parsedBlocks as $key => $block) {
// We don't want to add margin-top to the first block in the email or to the first block in the columns block
if ($key !== 0) {
$block['email_attrs']['margin-top'] = SettingsController::FLEX_GAP;
$block['email_attrs']['margin-top'] = $flexGap;
}
$block['innerBlocks'] = $this->addMarginTopToBlocks($block['innerBlocks'] ?? []);
$block['innerBlocks'] = $this->addMarginTopToBlocks($block['innerBlocks'] ?? [], $styles);
$parsedBlocks[$key] = $block;
}

2
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/TopLevelPreprocessor.php
View File

@ -18,7 +18,7 @@ class TopLevelPreprocessor implements Preprocessor {
* But for rendering purposes it is more convenient to have them wrapped in a single column.
* This method walks through the first level of blocks and wraps non column blocks into a single column.
*/
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
$wrappedParsedBlocks = [];
$nonColumnsBlocksBuffer = [];
foreach ($parsedBlocks as $block) {

2
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/TypographyPreprocessor.php
View File

@ -24,7 +24,7 @@ class TypographyPreprocessor implements Preprocessor {
$this->settingsController = $settingsController;
}
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
foreach ($parsedBlocks as $key => $block) {
$block = $this->preprocessParent($block);
// Set defaults from theme - this needs to be done on top level blocks only

7
mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ProcessManager.php
View File

@ -39,12 +39,13 @@ class ProcessManager {
/**
* @param array $parsedBlocks
* @param array{width: string, background: string, padding: array{bottom: string, left: string, right: string, top: string}} $layoutStyles
* @param array{contentSize: string} $layout
* @param array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles
* @return array
*/
public function preprocess(array $parsedBlocks, array $layoutStyles): array {
public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
foreach ($this->preprocessors as $preprocessor) {
$parsedBlocks = $preprocessor->preprocess($parsedBlocks, $layoutStyles);
$parsedBlocks = $preprocessor->preprocess($parsedBlocks, $layout, $styles);
}
return $parsedBlocks;
}

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

@ -17,6 +17,9 @@ class Renderer {
const TEMPLATE_FILE = 'template.html';
const TEMPLATE_STYLES_FILE = 'template.css';
/** @var string This color is used as a wrapper of the rendered email */
const LAYOUT_COLOR = '#cccccc';
/**
* @param \MailPoetVendor\CSS $cssInliner
*/
@ -31,20 +34,23 @@ class Renderer {
}
public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array {
$layoutStyles = $this->settingsController->getEmailStyles()['layout'];
$themeData = $this->settingsController->getTheme()->get_data();
$contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
$contentFontFamily = $themeData['styles']['typography']['fontFamily'];
$layout = $this->settingsController->getLayout();
$themeStyles = $this->settingsController->getEmailStyles();
$padding = $themeStyles['spacing']['padding'];
$contentBackground = $themeStyles['color']['background'];
$contentFontFamily = $themeStyles['typography']['fontFamily'];
$renderedBody = $this->contentRenderer->render($post);
$styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE);
$styles = apply_filters('mailpoet_email_renderer_styles', $styles, $post);
$template = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_FILE);
// Replace style settings placeholders with values
$template = str_replace(
['{{width}}', '{{layout_background}}', '{{content_background}}', '{{content_font_family}}', '{{padding_top}}', '{{padding_right}}', '{{padding_bottom}}', '{{padding_left}}'],
[$layoutStyles['width'], $layoutStyles['background'], $contentBackground, $contentFontFamily, $layoutStyles['padding']['top'], $layoutStyles['padding']['right'], $layoutStyles['padding']['bottom'], $layoutStyles['padding']['left']],
[$layout['contentSize'], self::LAYOUT_COLOR, $contentBackground, $contentFontFamily, $padding['top'], $padding['right'], $padding['bottom'], $padding['left']],
$template
);

62
mailpoet/lib/EmailEditor/Engine/SettingsController.php
View File

@ -26,18 +26,6 @@ class SettingsController {
*/
const EMAIL_WIDTH = '660px';
/**
* Color of email layout background.
* @var string
*/
const EMAIL_LAYOUT_BACKGROUND = '#cccccc';
/**
* Gap between blocks in flex layouts
* @var string
*/
const FLEX_GAP = '16px';
private ThemeController $themeController;
/**
@ -59,7 +47,6 @@ class SettingsController {
$contentVariables = 'body {';
$contentVariables .= 'padding-bottom: var(--wp--style--root--padding-bottom);';
$contentVariables .= 'padding-top: var(--wp--style--root--padding-top);';
$contentVariables .= '--wp--style--block-gap:' . self::FLEX_GAP . ';';
$contentVariables .= '}';
$settings = array_merge($coreDefaultSettings, self::DEFAULT_SETTINGS);
@ -93,44 +80,29 @@ class SettingsController {
/**
* @return array{
* layout: array{width: string,background: string,padding: array{bottom: string, left: string, right: string, top: string}},
* colors: array{background: string},
* typography: array[]
* spacing: array{
* blockGap: string,
* padding: array{bottom: string, left: string, right: string, top: string}
* },
* color: array{
* background: array{layout: string, content: string}
* },
* typography: array{
* fontFamily: string
* }
* }
*/
public function getEmailStyles(): array {
return [
'layout' => [
'background' => self::EMAIL_LAYOUT_BACKGROUND,
'width' => self::EMAIL_WIDTH,
'padding' => [
'bottom' => self::FLEX_GAP,
'left' => self::FLEX_GAP,
'right' => self::FLEX_GAP,
'top' => self::FLEX_GAP,
],
],
'colors' => [
'background' => '#ffffff',
],
'typography' => [
],
// Value are only for purpose of displaying in the preview component in style sidebar
'elements' => [
'h1' => [
'color' => '#000000',
'fontWeight' => 'bold',
'fontFamily' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
],
],
];
$theme = $this->getTheme();
return $theme->get_data()['styles'];
}
public function getLayoutWidthWithoutPadding(): string {
$layoutStyles = $this->getEmailStyles();
$width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
$width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
$styles = $this->getEmailStyles();
$layout = $this->getLayout();
$width = $this->parseNumberFromStringWithPixels($layout['contentSize']);
$width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['left']);
$width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['right']);
return "{$width}px";
}

4
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
View File

@ -61,8 +61,8 @@ class Columns implements BlockRenderer {
$contentCSS = WP_Style_Engine::compile_css( $cellStyles, '' );
$layoutCSS = WP_Style_Engine::compile_css( [
'margin-top' => $parsedBlock['email_attrs']['margin-top'] ?? '0px',
'padding-left' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['layout']['padding']['left'] : '0px',
'padding-right' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['layout']['padding']['right'] : '0px',
'padding-left' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['spacing']['padding']['left'] : '0px',
'padding-right' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['spacing']['padding']['right'] : '0px',
], '' );
$tableWidth = $block_attributes['align'] !== 'full' ? $block_attributes['width'] : '100%';

58
mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/BlocksWidthPreprocessorTest.php
View File

@ -9,9 +9,17 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
/** @var BlocksWidthPreprocessor */
private $preprocessor;
/** @var array{contentSize: string} */
private array $layout;
/** @var array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles */
private array $styles;
public function _before() {
parent::_before();
$this->preprocessor = new BlocksWidthPreprocessor();
$this->layout = ['contentSize' => '660px'];
$this->styles = ['spacing' => ['padding' => ['left' => '10px', 'right' => '10px', 'top' => '10px', 'bottom' => '10px'], 'blockGap' => '10px']];
}
public function testItCalculatesWidthWithoutPadding(): void {
@ -42,7 +50,9 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '0px', 'right' => '0px']]);
$styles = $this->styles;
$styles['spacing']['padding'] = ['left' => '0px', 'right' => '0px', 'top' => '0px', 'bottom' => '0px'];
$result = $this->preprocessor->preprocess($blocks, $this->layout, $styles);
$result = $result[0];
verify($result['email_attrs']['width'])->equals('660px');
verify($result['innerBlocks'])->arrayCount(3);
@ -79,12 +89,12 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '600px', 'padding' => ['left' => '20px', 'right' => '20px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$result = $result[0];
verify($result['innerBlocks'])->arrayCount(3);
verify($result['innerBlocks'][0]['email_attrs']['width'])->equals('185px'); // (600 - 20 - 20) * 0.33
verify($result['innerBlocks'][0]['email_attrs']['width'])->equals('211px'); // (660 - 10 - 10) * 0.33
verify($result['innerBlocks'][1]['email_attrs']['width'])->equals('100px');
verify($result['innerBlocks'][2]['email_attrs']['width'])->equals('112px'); // (600 - 20 - 20) * 0.2
verify($result['innerBlocks'][2]['email_attrs']['width'])->equals('128px'); // (660 - 10 - 10) * 0.2
}
public function testItCalculatesWidthOfBlockInColumn(): void {
@ -136,14 +146,14 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '15px', 'right' => '15px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$innerBlocks = $result[0]['innerBlocks'];
verify($innerBlocks)->arrayCount(2);
verify($innerBlocks[0]['email_attrs']['width'])->equals('252px'); // (660 - 15 - 15) * 0.4
verify($innerBlocks[0]['innerBlocks'][0]['email_attrs']['width'])->equals('232px'); // 252 - 10 - 10
verify($innerBlocks[1]['email_attrs']['width'])->equals('378px'); // (660 - 15 - 15) * 0.6
verify($innerBlocks[1]['innerBlocks'][0]['email_attrs']['width'])->equals('338px'); // 378 - 25 - 15
verify($innerBlocks[0]['email_attrs']['width'])->equals('256px'); // (660 - 10 - 10) * 0.4
verify($innerBlocks[0]['innerBlocks'][0]['email_attrs']['width'])->equals('236px'); // 256 - 10 - 10
verify($innerBlocks[1]['email_attrs']['width'])->equals('384px'); // (660 - 10 - 10) * 0.6
verify($innerBlocks[1]['innerBlocks'][0]['email_attrs']['width'])->equals('344px'); // 384 - 25 - 15
}
public function testItAddsMissingColumnWidth(): void {
@ -186,15 +196,15 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '30px', 'right' => '30px']]);
$result = $this->preprocessor->preprocess($blocks, ['contentSize' => '620px'], $this->styles);
$innerBlocks = $result[0]['innerBlocks'];
verify($innerBlocks)->arrayCount(3);
verify($innerBlocks[0]['email_attrs']['width'])->equals('200px'); // (660 - 30 - 30) * 0.33
verify($innerBlocks[0]['email_attrs']['width'])->equals('200px'); // (660 - 10 - 10) * 0.33
verify($innerBlocks[0]['innerBlocks'][0]['email_attrs']['width'])->equals('200px');
verify($innerBlocks[1]['email_attrs']['width'])->equals('200px'); // (660 - 30 - 30) * 0.33
verify($innerBlocks[1]['email_attrs']['width'])->equals('200px'); // (660 - 10 - 10) * 0.33
verify($innerBlocks[1]['innerBlocks'][0]['email_attrs']['width'])->equals('200px');
verify($innerBlocks[2]['email_attrs']['width'])->equals('200px'); // (660 - 30 - 30) * 0.33
verify($innerBlocks[2]['email_attrs']['width'])->equals('200px'); // (660 - 10 - 10) * 0.33
verify($innerBlocks[2]['innerBlocks'][0]['email_attrs']['width'])->equals('200px');
}
@ -233,11 +243,11 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '10px', 'right' => '10px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$innerBlocks = $result[0]['innerBlocks'];
verify($innerBlocks)->arrayCount(3);
verify($innerBlocks[0]['email_attrs']['width'])->equals('200px'); // (640 - 25 - 15) * 0.3333
verify($innerBlocks[0]['email_attrs']['width'])->equals('200px'); // (620 - 10 - 10) * 0.3333
verify($innerBlocks[1]['email_attrs']['width'])->equals('200px'); // already defined
verify($innerBlocks[2]['email_attrs']['width'])->equals('200px'); // 600 -200 - 200
}
@ -257,11 +267,11 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
'innerBlocks' => [],
],
];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '15px', 'right' => '15px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result)->arrayCount(2);
verify($result[0]['email_attrs']['width'])->equals('660px'); // full width
verify($result[1]['email_attrs']['width'])->equals('630px'); // 660 - 15 - 15
verify($result[1]['email_attrs']['width'])->equals('640px'); // 660 - 10 - 10
}
public function testItCalculatesWidthForColumnWithoutDefinition(): void {
@ -324,7 +334,7 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '10px', 'right' => '10px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result[0]['innerBlocks'])->arrayCount(3);
verify($result[0]['innerBlocks'][0]['email_attrs']['width'])->equals('140px');
verify($result[0]['innerBlocks'][1]['email_attrs']['width'])->equals('220px');
@ -357,7 +367,7 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '10px', 'right' => '10px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result[0]['innerBlocks'])->arrayCount(2);
verify($result[0]['innerBlocks'][0]['email_attrs']['width'])->equals('140px');
verify($result[0]['innerBlocks'][1]['email_attrs']['width'])->equals('500px');
@ -440,14 +450,14 @@ class BlocksWidthPreprocessorTest extends \MailPoetUnitTest {
],
]];
$result = $this->preprocessor->preprocess($blocks, ['width' => '660px', 'padding' => ['left' => '16px', 'right' => '16px']]);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result[0]['innerBlocks'])->arrayCount(3);
verify($result[0]['innerBlocks'][0]['email_attrs']['width'])->equals('140px');
verify($result[0]['innerBlocks'][1]['email_attrs']['width'])->equals('179px');
verify($result[0]['innerBlocks'][2]['email_attrs']['width'])->equals('249px');
verify($result[0]['innerBlocks'][1]['email_attrs']['width'])->equals('185px');
verify($result[0]['innerBlocks'][2]['email_attrs']['width'])->equals('255px');
$imageBlock = $result[0]['innerBlocks'][1]['innerBlocks'][0];
verify($imageBlock['email_attrs']['width'])->equals('179px');
verify($imageBlock['email_attrs']['width'])->equals('185px');
$imageBlock = $result[0]['innerBlocks'][2]['innerBlocks'][0];
verify($imageBlock['email_attrs']['width'])->equals('209px');
verify($imageBlock['email_attrs']['width'])->equals('215px');
}
}

12
mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/CleanupPreprocessorTest.php
View File

@ -25,9 +25,17 @@ class CleanupPreprocessorTest extends \MailPoetUnitTest {
/** @var CleanupPreprocessor */
private $preprocessor;
/** @var array{contentSize: string} */
private array $layout;
/** @var array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles */
private array $styles;
public function _before() {
parent::_before();
$this->preprocessor = new CleanupPreprocessor();
$this->layout = ['contentSize' => '660px'];
$this->styles = ['spacing' => ['padding' => ['left' => '10px', 'right' => '10px', 'top' => '10px', 'bottom' => '10px'], 'blockGap' => '10px']];
}
public function testItRemovesUnwantedBlocks(): void {
@ -36,7 +44,7 @@ class CleanupPreprocessorTest extends \MailPoetUnitTest {
['blockName' => null, 'attrs' => [], 'innerHTML' => "\r\n"],
self::PARAGRAPH_BLOCK,
];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result)->arrayCount(2);
verify($result[0])->equals(self::COLUMNS_BLOCK);
verify($result[1])->equals(self::PARAGRAPH_BLOCK);
@ -48,7 +56,7 @@ class CleanupPreprocessorTest extends \MailPoetUnitTest {
self::PARAGRAPH_BLOCK,
self::COLUMNS_BLOCK,
];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result)->arrayCount(3);
verify($result[0])->equals(self::COLUMNS_BLOCK);
verify($result[1])->equals(self::PARAGRAPH_BLOCK);

13
mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/SpacingPreprocessorTest.php
View File

@ -3,16 +3,23 @@
namespace unit\EmailEditor\Engine\Renderer\Preprocessors;
use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors\SpacingPreprocessor;
use MailPoet\EmailEditor\Engine\SettingsController;
class SpacingPreprocessorTest extends \MailPoetUnitTest {
/** @var SpacingPreprocessor */
private $preprocessor;
/** @var array{contentSize: string} */
private array $layout;
/** @var array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles */
private array $styles;
public function _before() {
parent::_before();
$this->preprocessor = new SpacingPreprocessor();
$this->layout = ['contentSize' => '660px'];
$this->styles = ['spacing' => ['padding' => ['left' => '10px', 'right' => '10px', 'top' => '10px', 'bottom' => '10px'], 'blockGap' => '10px']];
}
public function testItAddsDefaultVerticalSpacing(): void {
@ -68,8 +75,8 @@ class SpacingPreprocessorTest extends \MailPoetUnitTest {
],
];
$expectedEmailAttrs = ['margin-top' => SettingsController::FLEX_GAP];
$result = $this->preprocessor->preprocess($blocks, []);
$expectedEmailAttrs = ['margin-top' => '10px'];
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
verify($result)->arrayCount(2);
$firstColumns = $result[0];
$secondColumns = $result[1];

16
mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/TopLevelPreprocessorTest.php
View File

@ -31,14 +31,22 @@ class TopLevelPreprocessorTest extends \MailPoetUnitTest {
/** @var TopLevelPreprocessor */
private $preprocessor;
/** @var array{contentSize: string} */
private array $layout;
/** @var array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles */
private array $styles;
public function _before() {
parent::_before();
$this->preprocessor = new TopLevelPreprocessor();
$this->layout = ['contentSize' => '660px'];
$this->styles = ['spacing' => ['padding' => ['left' => '10px', 'right' => '10px', 'top' => '10px', 'bottom' => '10px'], 'blockGap' => '10px']];
}
public function testItWrapsSingleTopLevelBlockIntoColumns() {
$parsedDocument = [$this->paragraphBlock];
$result = $this->preprocessor->preprocess($parsedDocument, []);
$result = $this->preprocessor->preprocess($parsedDocument, $this->layout, $this->styles);
verify($result[0]['blockName'])->equals('core/columns');
verify($result[0]['innerBlocks'][0]['blockName'])->equals('core/column');
verify($result[0]['innerBlocks'][0]['innerBlocks'][0]['blockName'])->equals('core/paragraph');
@ -47,14 +55,14 @@ class TopLevelPreprocessorTest extends \MailPoetUnitTest {
public function testItDoesntWrapColumns() {
$parsedDocumentWithMultipleColumns = [$this->columnsBlock, $this->columnsBlock];
$result = $this->preprocessor->preprocess($parsedDocumentWithMultipleColumns, []);
$result = $this->preprocessor->preprocess($parsedDocumentWithMultipleColumns, $this->layout, $this->styles);
verify($result)->equals($parsedDocumentWithMultipleColumns);
}
public function testItWrapsTopLevelBlocksSpreadBetweenColumns() {
$parsedDocument = [$this->paragraphBlock, $this->columnsBlock, $this->paragraphBlock, $this->paragraphBlock];
// We expect to wrap top level paragraph blocks into columns so the result should three columns blocks
$result = $this->preprocessor->preprocess($parsedDocument, []);
$result = $this->preprocessor->preprocess($parsedDocument, $this->layout, $this->styles);
verify($result)->arrayCount(3);
// First columns contain columns with one paragraph block
verify($result[0]['innerBlocks'][0]['blockName'])->equals('core/column');
@ -76,7 +84,7 @@ class TopLevelPreprocessorTest extends \MailPoetUnitTest {
$parsedDocument[5]['attrs']['align'] = 'full';
$parsedDocument[5]['innerBlocks'][0]['innerBlocks'][] = $this->paragraphBlock;
// We expect to wrap top level paragraph blocks into columns so the result should three columns blocks
$result = $this->preprocessor->preprocess($parsedDocument, []);
$result = $this->preprocessor->preprocess($parsedDocument, $this->layout, $this->styles);
verify($result)->arrayCount(5);
// First block is a full width paragraph and must be wrapped in a single column
verify($result[0]['blockName'])->equals('core/columns');

16
mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/TypographyPreprocessorTest.php
View File

@ -10,6 +10,12 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
/** @var TypographyPreprocessor */
private $preprocessor;
/** @var array{contentSize: string} */
private array $layout;
/** @var array{spacing: array{padding: array{bottom: string, left: string, right: string, top: string}, blockGap: string}} $styles */
private array $styles;
public function _before() {
parent::_before();
$settingsMock = $this->createMock(SettingsController::class);
@ -47,6 +53,8 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
return str_replace('slug-', '', $slug);
});
$this->preprocessor = new TypographyPreprocessor($settingsMock);
$this->layout = ['contentSize' => '660px'];
$this->styles = ['spacing' => ['padding' => ['left' => '10px', 'right' => '10px', 'top' => '10px', 'bottom' => '10px'], 'blockGap' => '10px']];
}
public function testItCopiesColumnsTypography(): void {
@ -86,7 +94,7 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
'font-size' => '12px',
'text-decoration' => 'underline',
];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$result = $result[0];
verify($result['innerBlocks'])->arrayCount(2);
verify($result['email_attrs'])->equals($expectedEmailAttrs);
@ -123,7 +131,7 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
'color' => '#000000',
'font-size' => '20px',
];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$result = $result[0];
verify($result['innerBlocks'])->arrayCount(2);
verify($result['email_attrs'])->equals($expectedEmailAttrs);
@ -156,7 +164,7 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
],
],
]];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$result = $result[0];
verify($result['innerBlocks'])->arrayCount(2);
verify($result['email_attrs'])->equals(['width' => '640px', 'color' => '#000000', 'font-size' => '13px']);
@ -251,7 +259,7 @@ class TypographyPreprocessorTest extends \MailPoetUnitTest {
'color' => '#cc22aa',
'font-size' => '18px',
];
$result = $this->preprocessor->preprocess($blocks, []);
$result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
$child1 = $result[0];
$child2 = $result[1];
verify($child1['innerBlocks'])->arrayCount(2);

22
mailpoet/tests/unit/EmailEditor/Engine/Renderer/ProcessManagerTest.php
View File

@ -13,14 +13,18 @@ use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ProcessManager;
class ProcessManagerTest extends \MailPoetUnitTest {
public function testItCallsPreprocessorsProperly(): void {
$layoutStyles = [
'width' => '600px',
'background' => '#ffffff',
'padding' => [
'bottom' => '0px',
'left' => '0px',
'right' => '0px',
'top' => '0px',
$layout = [
'contentSize' => '600px',
];
$styles = [
'spacing' => [
'blockGap' => '0px',
'padding' => [
'bottom' => '0px',
'left' => '0px',
'right' => '0px',
'top' => '0px',
],
],
];
$topLevel = $this->createMock(TopLevelPreprocessor::class);
@ -49,7 +53,7 @@ class ProcessManagerTest extends \MailPoetUnitTest {
$processManager = new ProcessManager($cleanup, $topLevel, $blocksWidth, $typography, $spacing, $highlighting, $variables);
$processManager->registerPreprocessor($secondPreprocessor);
verify($processManager->preprocess([], $layoutStyles))->equals([]);
verify($processManager->preprocess([], $layout, $styles))->equals([]);
verify($processManager->postprocess(''))->equals('');
}
}

29
mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
View File

@ -6,23 +6,24 @@ use MailPoet\EmailEditor\Engine\SettingsController;
use MailPoet\EmailEditor\Engine\ThemeController;
class SettingsControllerTest extends \MailPoetUnitTest {
public function testItGetsMainLayoutStyles(): void {
$settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
$styles = $settingsController->getEmailStyles();
verify($styles)->arrayHasKey('layout');
verify($styles)->arrayHasKey('colors');
verify($styles)->arrayHasKey('typography');
$layoutStyles = $styles['layout'];
verify($layoutStyles)->arrayHasKey('background');
verify($layoutStyles)->arrayHasKey('padding');
verify($layoutStyles)->arrayHasKey('width');
}
public function testItGetsCorrectLayoutWidthWithoutPadding(): void {
$settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
$themeJsonMock = $this->createMock(\WP_Theme_JSON::class);
$themeJsonMock->method('get_data')->willReturn([
'styles' => [
'spacing' => [
'padding' => [
'left' => '10px',
'right' => '10px',
],
],
],
]);
$themeController = $this->createMock(ThemeController::class);
$themeController->method('getTheme')->willReturn($themeJsonMock);
$settingsController = new SettingsController($themeController);
$layoutWidth = $settingsController->getLayoutWidthWithoutPadding();
// default width is 660px and if we subtract padding from left and right we must get the correct value
$expectedWidth = (int)SettingsController::EMAIL_WIDTH - (int)SettingsController::FLEX_GAP * 2;
$expectedWidth = (int)SettingsController::EMAIL_WIDTH - 10 * 2;
verify($layoutWidth)->equals($expectedWidth . 'px');
}