Apply layout styles defined in StylesController and also to editor

[MAILPOET-5540]

mailpoet/assets/js/src/email_editor/engine/components/layout_styles.tsx

@@ -0,0 +1,25 @@
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { EmailData } from 'email_editor/engine/types';
+
+export function LayoutStyles() {
+  const { emailData } = useSelect((select) => ({
+    emailData:
+      (select(editorStore).getEditedPostAttribute(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // The getEditedPostAttribute accepts an attribute but typescript thinks it doesn't
+        'email_data',
+      ) as EmailData) ?? null,
+  }));
+
+  const css = `
+    .edit-post-visual-editor__content-area {
+        max-width: ${emailData.layout_styles.width}px;
+    }
+    .edit-post-visual-editor {
+    background: ${emailData.layout_styles.background};
+  }`;
+
+  return <style>{css}</style>;
+}

mailpoet/assets/js/src/email_editor/engine/types.ts

@@ -0,0 +1,6 @@
+export type EmailData = {
+  layout_styles: {
+    width: number;
+    background: string;
+  };
+};

mailpoet/assets/js/src/email_editor/integrations/MailPoet/email_editor.scss

@@ -10,11 +10,6 @@
     flex-grow: 0;
     height: auto;
     margin: 0 auto;
-    max-width: 660px;
-  }
-
-  .edit-post-visual-editor {
-    background: #ccc;
   }
 
   // We don't use the huge title input in the email editor

mailpoet/assets/js/src/email_editor/integrations/MailPoet/email_editor.tsx

@@ -3,6 +3,7 @@ import { useSelect, select as directSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { NextButtonSlot } from 'email_editor/engine/components/next_button_slot';
+import { LayoutStyles } from 'email_editor/engine/components/layout_styles';
 import { useDisableWelcomeGuide } from 'email_editor/engine/hooks';
 import { NextButton } from './components/next_button';
 import { MailPoetEmailData } from './types';
@@ -28,9 +29,12 @@ function Editor() {
   useDisableWelcomeGuide();
 
   return (
-    <NextButtonSlot>
-      <NextButton newsletterId={mailpoetData?.id ?? null} />
-    </NextButtonSlot>
+    <>
+      <LayoutStyles />
+      <NextButtonSlot>
+        <NextButton newsletterId={mailpoetData?.id ?? null} />
+      </NextButtonSlot>
+    </>
   );
 }
 

mailpoet/lib/DI/ContainerConfigurator.php

@@ -315,6 +315,7 @@ class ContainerConfigurator implements IContainerConfigurator {
     // Email Editor
     $container->autowire(\MailPoet\EmailEditor\Engine\EmailEditor::class)->setPublic(true);
     $container->autowire(\MailPoet\EmailEditor\Engine\AssetsCleaner::class)->setPublic(true);
+    $container->autowire(\MailPoet\EmailEditor\Engine\EmailApiController::class)->setPublic(true);
     $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\Renderer::class)->setPublic(true);
     $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\BlocksRenderer::class)->setPublic(true);
     $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\BlocksRegistry::class)->setPublic(true);

mailpoet/lib/EmailEditor/Engine/EmailApiController.php

@@ -0,0 +1,41 @@
+<?php declare(strict_types = 1);
+
+namespace MailPoet\EmailEditor\Engine;
+
+use MailPoet\Validator\Builder;
+
+class EmailApiController {
+  /** @var StylesController */
+  private $stylesController;
+
+  public function __construct(
+    StylesController $stylesController
+  ) {
+    $this->stylesController = $stylesController;
+  }
+
+  /**
+   * @return array - Email specific data such styles.
+   */
+  public function getEmailData(): array {
+    return [
+      'layout_styles' => $this->stylesController->getEmailLayoutStyles(),
+    ];
+  }
+
+  /**
+   * Update Email specific data we store.
+   */
+  public function saveEmailData(array $data, \WP_Post $emailPost): void {
+    // Here comes code saving of Email specific data that will be passed on 'email_data' attribute
+  }
+
+  public function getEmailDataSchema(): array {
+    return Builder::object([
+      'layout_styles' => Builder::object([
+        'width' => Builder::integer(),
+        'background' => Builder::string(),
+      ]),
+    ])->toArray();
+  }
+}

mailpoet/lib/EmailEditor/Engine/EmailEditor.php

@@ -15,15 +15,20 @@ class EmailEditor {
   /** @var StylesController */
   private $stylesController;
 
+  /** @var EmailApiController */
+  private $emailApiController;
+
   /**
    * @param AssetsCleaner $assetsCleaner
    */
   public function __construct(
     AssetsCleaner $assetsCleaner,
-    StylesController $stylesController
+    StylesController $stylesController,
+    EmailApiController $emailApiController
   ) {
     $this->assetsCleaner = $assetsCleaner;
     $this->stylesController = $stylesController;
+    $this->emailApiController = $emailApiController;
   }
 
   public function initialize(): void {
@@ -32,6 +37,7 @@ class EmailEditor {
     add_filter('block_editor_settings_all', [$this, 'updateBlockEditorSettings'], 100, 2);
     do_action('mailpoet_email_editor_initialized');
     $this->registerEmailPostTypes();
+    $this->extendEmailPostApi();
   }
 
   /**
@@ -89,6 +95,15 @@ class EmailEditor {
     $this->assetsCleaner->cleanupBlockEditorAssets();
   }
 
+  public function extendEmailPostApi() {
+    $emailPostTypes = array_column($this->getPostTypes(), 'name');
+    register_rest_field($emailPostTypes, 'email_data', [
+      'get_callback' => [$this->emailApiController, 'getEmailData'],
+      'update_callback' => [$this->emailApiController, 'saveEmailData'],
+      'schema' => $this->emailApiController->getEmailDataSchema(),
+    ]);
+  }
+
   public function updateBlockEditorSettings(array $settings, \WP_Block_Editor_Context $blockEditorContext): array {
     $emailPostTypes = array_column($this->getPostTypes(), 'name');
     if (!$blockEditorContext->post || !in_array($blockEditorContext->post->post_type, $emailPostTypes, true)) {

mailpoet/lib/EmailEditor/Integrations/MailPoet/EmailEditor.php

@@ -11,24 +11,6 @@ use MailPoet\WP\Functions as WPFunctions;
 class EmailEditor {
   const MAILPOET_EMAIL_POST_TYPE = 'mailpoet_email';
 
-  /**
-   * 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.
-   * In the future we will probably add some sort of StylesController that will fetch/build styles for specific email.
-   * @var string
-   */
-  const DEFAULT_EMAIL_STYLES = "
-      body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
-      p { font-size: 16px; }
-      h1 { font-size: 32px; }
-      h2 { font-size: 24px; }
-      h3 { font-size: 18px; }
-      h4 { font-size: 16px; }
-      h5 { font-size: 14px; }
-      h6 { font-size: 12px; }
-  ";
-
-
   /** @var WPFunctions */
   private $wp;