Move layout background colors to theme.json

[MAILPOET-5640]

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

@@ -48,6 +48,7 @@ export function BlockEditor() {
     canUserEditMedia,
     hasFixedToolbar,
     focusMode,
+    styles,
     layout,
   } = useSelect(
     (select) => ({
@@ -62,6 +63,7 @@ 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(),
     }),
     [],
@@ -79,8 +81,7 @@ export function BlockEditor() {
     { id: postId },
   );
 
-  // This is color of the wrapper and we need to decide if it is configurable or not.
-  const layoutBackground = '#cccccc';
+  const layoutBackground = styles.color.background.layout;
 
   let inlineStyles = useResizeCanvas(previewDeviceType);
   // Adjust the inline styles for desktop preview. We want to set email width and center it.

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/preview.tsx

@@ -64,7 +64,7 @@ export function Preview({
     [],
   );
 
-  const backgroundColor = styles.color.background;
+  const backgroundColor = styles.color.background.content;
   const headingFontFamily = styles.elements.h1.typography.fontFamily;
   const headingColor = styles.elements.h1.color.text;
   const headingFontWeight = styles.elements.h1.typography.fontWeight;

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

@@ -37,7 +37,10 @@ export type EmailStyles = {
     };
   };
   color: {
-    background: string;
+    background: {
+      content: string;
+      layout: string;
+    };
     text: string;
   };
   elements: {

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

@@ -17,9 +17,6 @@ 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
    */
@@ -38,7 +35,8 @@ class Renderer {
     $themeStyles = $this->settingsController->getEmailStyles();
     $padding = $themeStyles['spacing']['padding'];
 
-    $contentBackground = $themeStyles['color']['background'];
+    $contentBackground = $themeStyles['color']['background']['content'];
+    $layoutBackground = $themeStyles['color']['background']['layout'];
     $contentFontFamily = $themeStyles['typography']['fontFamily'];
     $renderedBody = $this->contentRenderer->render($post);
 
@@ -50,7 +48,7 @@ class Renderer {
     // 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}}'],
-      [$layout['contentSize'], self::LAYOUT_COLOR, $contentBackground, $contentFontFamily, $padding['top'], $padding['right'], $padding['bottom'], $padding['left']],
+      [$layout['contentSize'], $layoutBackground, $contentBackground, $contentFontFamily, $padding['top'], $padding['right'], $padding['bottom'], $padding['left']],
       $template
     );
 

mailpoet/lib/EmailEditor/Engine/theme.json

@@ -191,7 +191,10 @@
       }
     },
     "color": {
-      "background": "#ffffff",
+      "background": {
+        "layout": "#f0f0f0",
+        "content": "#ffffff"
+      },
       "text": "#000000"
     },
     "typography": {