Introduce SettingsController for managing editor settings

[MAILPOET-5637]

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

@@ -1,4 +1,5 @@
 import { State } from './types';
+import { getEditorSettings } from './settings';
 
 export function getInitialState(): State {
   const searchParams = new URLSearchParams(window.location.search);
@@ -11,15 +12,7 @@ export function getInitialState(): State {
       isOpened: false,
     },
     postId,
-    editorSettings: {
+    editorSettings: getEditorSettings(),
-      allowedBlockTypes: [
-        'core/paragraph',
-        'core/heading',
-        'core/column',
-        'core/columns',
-        'core/image',
-      ],
-    },
     preview: {
       deviceType: 'Desktop',
       toEmail: window.MailPoetEmailEditor.current_wp_user_email,

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

@@ -0,0 +1,11 @@
+import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
+import { EmailEditorSettings } from './types';
+
+export function getEditorSettings(): EmailEditorSettings {
+  const settings = window.MailPoetEmailEditor
+    .editor_settings as EmailEditorSettings;
+  // eslint-disable-next-line no-underscore-dangle
+  settings.__experimentalFeatures.color.palette.default =
+    SETTINGS_DEFAULTS.colors;
+  return settings;
+}

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

@@ -1,8 +1,30 @@
+import { EditorSettings, EditorColor } from '@wordpress/block-editor';
+
 export enum SendingPreviewStatus {
   SUCCESS = 'success',
   ERROR = 'error',
 }
 
+export type ExperimentalSettings = {
+  __experimentalFeatures: {
+    color: {
+      custom: boolean;
+      text: boolean;
+      background: boolean;
+      customGradient: boolean;
+      defaultPalette: boolean;
+      palette: {
+        default: EditorColor[];
+      };
+      gradients: {
+        default: EditorColor[];
+      };
+    };
+  };
+};
+
+export type EmailEditorSettings = EditorSettings & ExperimentalSettings;
+
 export type State = {
   inserterSidebar: {
     isOpened: boolean;
@@ -11,9 +33,7 @@ export type State = {
     isOpened: boolean;
   };
   postId: number;
-  editorSettings: {
+  editorSettings: EmailEditorSettings;
-    allowedBlockTypes: string[];
-  };
   preview: {
     deviceType: string;
     toEmail: string;

mailpoet/assets/js/src/email-editor/global.d.ts

@@ -4,5 +4,6 @@ interface Window {
     api_token: string;
     api_version: string;
     current_wp_user_email: string;
+    editor_settings: unknown; // Can't import type in global.d.ts. Typed in getEditorSettings() in store/settings.ts
   };
 }

mailpoet/lib/AdminPages/Pages/EmailEditor.php

@@ -4,6 +4,7 @@ namespace MailPoet\AdminPages\Pages;
 
 use MailPoet\API\JSON\API;
 use MailPoet\Config\Env;
+use MailPoet\EmailEditor\Engine\SettingsController;
 use MailPoet\EmailEditor\Integrations\MailPoet\EmailEditor as EditorInitController;
 use MailPoet\WP\Functions as WPFunctions;
 
@@ -11,10 +12,15 @@ class EmailEditor {
   /** @var WPFunctions */
   private $wp;
 
+  /** @var SettingsController */
+  private $settingsController;
+
   public function __construct(
-    WPFunctions $wp
+    WPFunctions $wp,
+    SettingsController $settingsController
   ) {
     $this->wp = $wp;
+    $this->settingsController = $settingsController;
   }
 
   public function render() {
@@ -51,6 +57,7 @@ class EmailEditor {
         'api_token' => esc_js($token),
         'api_version' => esc_js($apiVersion),
         'current_wp_user_email' => esc_js($currentUserEmail),
+        'editor_settings' => $this->settingsController->getSettings(),
       ]
     );
 

mailpoet/lib/DI/ContainerConfigurator.php

@@ -320,6 +320,7 @@ class ContainerConfigurator implements IContainerConfigurator {
     // Email Editor
     $container->autowire(\MailPoet\EmailEditor\Engine\EmailEditor::class)->setPublic(true);
     $container->autowire(\MailPoet\EmailEditor\Engine\EmailApiController::class)->setPublic(true);
+    $container->autowire(\MailPoet\EmailEditor\Engine\SettingsController::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/SettingsController.php

@@ -0,0 +1,49 @@
+<?php declare(strict_types = 1);
+
+namespace MailPoet\EmailEditor\Engine;
+
+class SettingsController {
+
+  const ALLOWED_BLOCK_TYPES = [
+    'core/paragraph',
+    'core/heading',
+    'core/column',
+    'core/columns',
+    'core/image',
+  ];
+
+  const DEFAULT_SETTINGS = [
+    'enableCustomSpacing' => true,
+    'enableCustomLineHeight' => true,
+    'disableCustomFontSizes' => false,
+    'enableCustomUnits' => ['px', '%'],
+    '__experimentalFeatures' => [
+      'color' => [
+        'custom' => true,
+        'text' => true,
+        'background' => true,
+        'customGradient' => false,
+        'defaultPalette' => true,
+        'palette' => [
+          'default' => [],
+        ],
+      ],
+    ],
+  ];
+
+  /** @var StylesController */
+  private $stylesController;
+
+  public function __construct(
+    StylesController $stylesController
+  ) {
+    $this->stylesController = $stylesController;
+  }
+
+  public function getSettings(): array {
+    $settings = self::DEFAULT_SETTINGS;
+    $settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
+    $settings['defaultEditorStyles'] = [[ 'css' => $this->stylesController->getEmailContentStyles() ]];
+    return $settings;
+  }
+}