Pass template style settings to the client in the template response

[MAILPOET-6014]

mailpoet/assets/js/src/email-editor/engine/components/sidebar/template-select/select-modal.tsx

@@ -45,7 +45,12 @@ export function SelectTemplateModal({ setIsOpen }) {
             <Async placeholder={<p>rendering template</p>}>
               <BlockPreview
                 blocks={template.contentParsed}
-                viewportWidth={1200}
+                viewportWidth={900}
+                minHeight={300}
+                additionalStyles={[
+                  // @ts-expect-error No types available for template
+                  { css: template.template.email_styles?.css },
+                ]}
               />
             </Async>
           </div>

mailpoet/lib/EmailEditor/Engine/Templates/Templates.php

@@ -2,6 +2,8 @@
 
 namespace MailPoet\EmailEditor\Engine\Templates;
 
+use MailPoet\DI\ContainerWrapper;
+use MailPoet\EmailEditor\Engine\ThemeController;
 use WP_Block_Template;
 use WP_Error;
 
@@ -25,6 +27,15 @@ class Templates {
       add_filter('get_block_templates', [$this, 'addBlockTemplates'], 10, 3);
       add_filter('theme_templates', [$this, 'addThemeTemplates'], 10, 4); // Needed when saving post – template association
       add_filter('get_block_template', [$this, 'addBlockTemplateDetails'], 10, 1);
+      register_rest_field(
+        'wp_template',
+        'email_styles',
+        [
+          'get_callback' => [$this, 'addTemplateStylesToRestResponse'],
+          'update_callback' => null,
+          'schema' => null, // TODO: Add schema
+        ]
+      );
     }
   }
 
@@ -170,6 +181,24 @@ class Templates {
     return $this->buildBlockTemplateFromFile($templateObject);
   }
 
+  public function addTemplateStylesToRestResponse($template): ?array {
+    $jsonFile = $this->templateDirectory . $template['slug'] . '.json';
+    if (!file_exists($jsonFile)) {
+      return null;
+    }
+    $themeController = ContainerWrapper::getInstance()->get(ThemeController::class);
+    $theme = $themeController->getTheme();
+    $themeJson = json_decode((string)file_get_contents($jsonFile), true);
+    if (!is_array($themeJson)) {
+      return null;
+    }
+    $theme->merge(new \WP_Theme_JSON($themeJson, 'custom'));
+    return [
+      'css' => $theme->get_stylesheet(),
+      'styles_config' => $themeJson,
+    ];
+  }
+
   private function createNewBlockTemplateObject(string $template) {
     $template_slug = $this->getBlockTemplateSlugFromPath($template);
 

mailpoet/lib/EmailEditor/Engine/Templates/awesome-one.json

@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "styles": {
+    "typography": {
+      "fontFamily": "'Tahoma, Verdana, Segoe, sans-serif'"
+    },
+    "elements": {
+      "heading": {
+        "typography": {
+          "fontFamily": "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif"
+        }
+      }
+    }
+  }
+}

mailpoet/lib/EmailEditor/Engine/Templates/awesome-two.json

@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "styles": {
+    "typography": {
+      "fontFamily": "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif"
+    },
+    "elements": {
+      "heading": {
+        "typography": {
+          "fontFamily": "'Tahoma, Verdana, Segoe, sans-serif'"
+        }
+      }
+    }
+  }
+}