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

This should be the first step to using theme.json format in DB and merging more style configurations to the final one.
[MAILPOET-5640]

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

@@ -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.
+  // This is color of the wrapper and we need to decide if it is configurable or not.
-  const layoutBackground = styles.layout.background;
+  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',
     };

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

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

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ContentRenderer.php

@@ -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'];
+    $layout = $this->settingsController->getLayout();
-    $parsedBlocks = $this->processManager->preprocess($parsedBlocks, $layoutStyles);
+    $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);

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Layout/FlexLayoutRenderer.php

@@ -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) {

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/BlocksWidthPreprocessor.php

@@ -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($styles['spacing']['padding']['left'] ?? '0px');
-        $layoutWidth -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['right'] ?? '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;
+      $modifiedLayout = $layout;
-      $modifiedLayoutStyles['width'] = "{$width}px";
+      $modifiedLayout['contentSize'] = "{$width}px";
-      $modifiedLayoutStyles['padding']['left'] = $block['attrs']['style']['spacing']['padding']['left'] ?? '0px';
+      $modifiedStyles = $styles;
-      $modifiedLayoutStyles['padding']['right'] = $block['attrs']['style']['spacing']['padding']['right'] ?? '0px';
+      $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;

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/CleanupPreprocessor.php

@@ -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

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/Preprocessor.php

@@ -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;
 }

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/SpacingPreprocessor.php

@@ -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 {
+  public function preprocess(array $parsedBlocks, array $layout, array $styles): array {
-    $parsedBlocks = $this->addMarginTopToBlocks($parsedBlocks);
+    $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;
     }

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/TopLevelPreprocessor.php

@@ -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) {

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/Preprocessors/TypographyPreprocessor.php

@@ -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

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ProcessManager.php

@@ -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;
   }

mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php

@@ -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'];
+    $layout = $this->settingsController->getLayout();
-    $themeData = $this->settingsController->getTheme()->get_data();
+    $themeStyles = $this->settingsController->getEmailStyles();
-    $contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
+    $padding = $themeStyles['spacing']['padding'];
-    $contentFontFamily = $themeData['styles']['typography']['fontFamily'];
+
+    $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
     );
 

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -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}},
+   *   spacing: array{
-   *   colors: array{background: string},
+   *     blockGap: string,
-   *   typography: array[]
+   *     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 [
+    $theme = $this->getTheme();
-      'layout' => [
+    return $theme->get_data()['styles'];
-        '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",
-        ],
-      ],
-    ];
   }
 
   public function getLayoutWidthWithoutPadding(): string {
-    $layoutStyles = $this->getEmailStyles();
+    $styles = $this->getEmailStyles();
-    $width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
+    $layout = $this->getLayout();
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
+    $width = $this->parseNumberFromStringWithPixels($layout['contentSize']);
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
+    $width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['left']);
+    $width -= $this->parseNumberFromStringWithPixels($styles['spacing']['padding']['right']);
     return "{$width}px";
   }
 

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php

@@ -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-left' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['spacing']['padding']['left'] : '0px',
-      'padding-right' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['layout']['padding']['right'] : '0px',
+      'padding-right' => $block_attributes['align'] !== 'full' ? $settingsController->getEmailStyles()['spacing']['padding']['right'] : '0px',
     ], '' );
     $tableWidth = $block_attributes['align'] !== 'full' ? $block_attributes['width'] : '100%';
 

mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/BlocksWidthPreprocessorTest.php

@@ -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]['email_attrs']['width'])->equals('256px'); // (660 - 10 - 10) * 0.4
-    verify($innerBlocks[0]['innerBlocks'][0]['email_attrs']['width'])->equals('232px'); // 252 - 10 - 10
+    verify($innerBlocks[0]['innerBlocks'][0]['email_attrs']['width'])->equals('236px'); // 256 - 10 - 10
-    verify($innerBlocks[1]['email_attrs']['width'])->equals('378px'); // (660 - 15 - 15) * 0.6
+    verify($innerBlocks[1]['email_attrs']['width'])->equals('384px'); // (660 - 10 - 10) * 0.6
-    verify($innerBlocks[1]['innerBlocks'][0]['email_attrs']['width'])->equals('338px'); // 378 - 25 - 15
+    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'][1]['email_attrs']['width'])->equals('185px');
-    verify($result[0]['innerBlocks'][2]['email_attrs']['width'])->equals('249px');
+    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');
   }
 }

mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/CleanupPreprocessorTest.php

@@ -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);

mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/SpacingPreprocessorTest.php

@@ -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];
+    $expectedEmailAttrs = ['margin-top' => '10px'];
-    $result = $this->preprocessor->preprocess($blocks, []);
+    $result = $this->preprocessor->preprocess($blocks, $this->layout, $this->styles);
     verify($result)->arrayCount(2);
     $firstColumns = $result[0];
     $secondColumns = $result[1];

mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/TopLevelPreprocessorTest.php

@@ -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');

mailpoet/tests/unit/EmailEditor/Engine/Renderer/Preprocessors/TypographyPreprocessorTest.php

@@ -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);

mailpoet/tests/unit/EmailEditor/Engine/Renderer/ProcessManagerTest.php

@@ -13,14 +13,18 @@ use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ProcessManager;
 
 class ProcessManagerTest extends \MailPoetUnitTest {
   public function testItCallsPreprocessorsProperly(): void {
-    $layoutStyles = [
+    $layout = [
-      'width' => '600px',
+      'contentSize' => '600px',
-      'background' => '#ffffff',
+    ];
-      'padding' => [
+    $styles = [
-        'bottom' => '0px',
+      'spacing' => [
-        'left' => '0px',
+        'blockGap' => '0px',
-        'right' => '0px',
+        'padding' => [
-        'top' => '0px',
+          '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('');
   }
 }

mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php

@@ -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');
   }