Add theme styles component for email editor

[MAILPOET-5640]

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

@@ -14,6 +14,9 @@ import {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore No types for this exist yet.
   __unstableEditorStyles as EditorStyles,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore No types for this exist yet.
+  BlockContextProvider,
 } from '@wordpress/block-editor';
 import { UnsavedChangesWarning } from '@wordpress/editor';
 import { uploadMedia } from '@wordpress/media-utils';
@@ -33,7 +36,7 @@ import { Header } from '../header';
 import { ListviewSidebar } from '../listview-sidebar/listview-sidebar';
 import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar';
 import { EditorNotices, EditorSnackbars, SentEmailNotice } from '../notices';
-import { StylesSidebar } from '../styles-sidebar';
+import { StylesSidebar, ThemeStyles } from '../styles-sidebar';
 import { FooterCredit } from './footer-credit';
 
 export function BlockEditor() {
@@ -128,6 +131,14 @@ export function BlockEditor() {
   }
 
   return (
+    // BlockContextProvider has set templateSlug because the hook `useGlobalStylesOutputWithConfig` doesn't render layout padding without it.
+    <BlockContextProvider
+      value={{
+        postId,
+        postType: 'mailpoet_email',
+        templateSlug: 'mailpoet-email',
+      }}
+    >
       <BlockEditorProvider
         value={blocks}
         onInput={onInput}
@@ -161,6 +172,7 @@ export function BlockEditor() {
                       'is-desktop-preview': previewDeviceType === 'Desktop',
                     })}
                   >
+                    <ThemeStyles />
                     <EditorStyles
                       styles={settings.styles}
                       scope=".editor-styles-wrapper"
@@ -210,5 +222,6 @@ export function BlockEditor() {
         {/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */}
         <BlockCompatibilityWarnings />
       </BlockEditorProvider>
+    </BlockContextProvider>
   );
 }

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts

@@ -1,3 +1,4 @@
 import './index.scss';
 
 export * from './styles-sidebar';
+export * from './theme-styles';

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

@@ -0,0 +1,40 @@
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { merge } from 'lodash';
+import {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore No types for this exist yet.
+  __unstableEditorStyles as EditorStyles,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore No types for this exist yet.
+  privateApis as blockEditorPrivateApi,
+} from '@wordpress/block-editor';
+import { unlock } from '../../../lock-unlock';
+import { EmailStyles, storeName } from '../../store';
+
+const { useGlobalStylesOutputWithConfig } = unlock(blockEditorPrivateApi);
+
+export function ThemeStyles(): JSX.Element {
+  const { theme } = useSelect(
+    (select) => ({
+      theme: select(storeName).getTheme(),
+    }),
+    [],
+  );
+
+  const [mailpoetEmailData] = useEntityProp(
+    'postType',
+    'mailpoet_email',
+    'mailpoet_data',
+  );
+
+  const mergedConfig = useMemo(
+    () => merge({}, theme, mailpoetEmailData?.theme) as EmailStyles,
+    [theme, mailpoetEmailData],
+  );
+
+  const [styles] = useGlobalStylesOutputWithConfig(mergedConfig);
+
+  return <EditorStyles styles={styles} scope=".editor-styles-wrapper" />;
+}

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

@@ -6,12 +6,14 @@ use MailPoet\Config\ServicesChecker;
 use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer;
 use MailPoet\EmailEditor\Engine\SettingsController;
 use MailPoet\Util\CdnAssetUrl;
+use MailPoet\EmailEditor\Engine\ThemeController;
 use MailPoet\Util\pQuery\DomNode;
 use MailPoetVendor\Html2Text\Html2Text;
 
 class Renderer {
   private \MailPoetVendor\CSS $cssInliner;
   private SettingsController $settingsController;
+  private ThemeController $themeController;
   private ContentRenderer $contentRenderer;
   private CdnAssetUrl $cdnAssetUrl;
   private ServicesChecker $servicesChecker;
@@ -27,18 +29,22 @@ class Renderer {
     SettingsController $settingsController,
     ContentRenderer $contentRenderer,
     CdnAssetUrl $cdnAssetUrl,
-    ServicesChecker $servicesChecker
+    ServicesChecker $servicesChecker,
+    ThemeController $themeController
   ) {
     $this->cssInliner = $cssInliner;
     $this->settingsController = $settingsController;
     $this->contentRenderer = $contentRenderer;
     $this->cdnAssetUrl = $cdnAssetUrl;
     $this->servicesChecker = $servicesChecker;
+    $this->themeController = $themeController;
   }
 
   public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array {
     $layout = $this->settingsController->getLayout();
-    $themeStyles = $this->settingsController->getEmailStyles();
+    $theme = $this->themeController->getTheme();
+    $theme = apply_filters('mailpoet_email_editor_rendering_theme_styles', $theme, $post);
+    $themeStyles = $theme->get_data()['styles'];
     $padding = $themeStyles['spacing']['padding'];
 
     $contentBackground = $themeStyles['color']['background']['content'];

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -39,7 +39,6 @@ class SettingsController {
 
   public function getSettings(): array {
     $coreDefaultSettings = get_default_block_editor_settings();
-    $editorTheme = $this->getTheme();
     $themeSettings = $this->themeController->getSettings();
 
     // body selector is later transformed to .editor-styles-wrapper
@@ -54,8 +53,6 @@ class SettingsController {
     $flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css');
 
     $settings['styles'] = [
-      ['css' => wp_get_global_stylesheet(['base-layout-styles'])],
-      ['css' => $editorTheme->get_stylesheet()],
       ['css' => $contentVariables],
       ['css' => $flexEmailLayoutStyles],
     ];