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,87 +131,97 @@ export function BlockEditor() {
   }
 
   return (
-    <BlockEditorProvider
-      value={blocks}
-      onInput={onInput}
-      onChange={onChange}
-      settings={settings}
-      useSubRegistry={false}
+    // BlockContextProvider has set templateSlug because the hook `useGlobalStylesOutputWithConfig` doesn't render layout padding without it.
+    <BlockContextProvider
+      value={{
+        postId,
+        postType: 'mailpoet_email',
+        templateSlug: 'mailpoet-email',
+      }}
     >
-      <FullscreenMode isActive={isFullscreenActive} />
-      <UnsavedChangesWarning />
-      <AutosaveMonitor />
-      <SentEmailNotice />
-      <Sidebar />
-      <StylesSidebar />
-      <InterfaceSkeleton
-        className={className}
-        header={<Header />}
-        editorNotices={<EditorNotices />}
-        notices={<EditorSnackbars />}
-        content={
-          <>
-            <EditorNotices />
-            <div className="edit-post-visual-editor">
-              <BlockSelectionClearer
-                className="edit-post-visual-editor__content-area"
-                style={contentAreaStyles}
-              >
-                <div
-                  style={inlineStyles}
-                  className={classnames({
-                    'is-mobile-preview': previewDeviceType === 'Mobile',
-                    'is-desktop-preview': previewDeviceType === 'Desktop',
-                  })}
+      <BlockEditorProvider
+        value={blocks}
+        onInput={onInput}
+        onChange={onChange}
+        settings={settings}
+        useSubRegistry={false}
+      >
+        <FullscreenMode isActive={isFullscreenActive} />
+        <UnsavedChangesWarning />
+        <AutosaveMonitor />
+        <SentEmailNotice />
+        <Sidebar />
+        <StylesSidebar />
+        <InterfaceSkeleton
+          className={className}
+          header={<Header />}
+          editorNotices={<EditorNotices />}
+          notices={<EditorSnackbars />}
+          content={
+            <>
+              <EditorNotices />
+              <div className="edit-post-visual-editor">
+                <BlockSelectionClearer
+                  className="edit-post-visual-editor__content-area"
+                  style={contentAreaStyles}
                 >
-                  <EditorStyles
-                    styles={settings.styles}
-                    scope=".editor-styles-wrapper"
-                  />
-                  <BlockSelectionClearer
-                    className="editor-styles-wrapper block-editor-writing-flow"
-                    style={{ width: '100%' }}
+                  <div
+                    style={inlineStyles}
+                    className={classnames({
+                      'is-mobile-preview': previewDeviceType === 'Mobile',
+                      'is-desktop-preview': previewDeviceType === 'Desktop',
+                    })}
                   >
-                    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                    {/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */}
-                    <BlockEditorKeyboardShortcuts.Register />
-                    <BlockTools>
-                      <WritingFlow>
-                        <ObserveTyping>
-                          <BlockList
-                            className={classnames(
-                              {
-                                'is-mobile-preview':
-                                  previewDeviceType === 'Mobile',
-                              },
-                              'is-layout-constrained has-global-padding',
-                            )}
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore We have an older package of @wordpress/block-editor that doesn't contain the correct type
-                            layout={layout}
-                          />
-                        </ObserveTyping>
-                      </WritingFlow>
-                    </BlockTools>
-                  </BlockSelectionClearer>
-                </div>
-                {!isPremiumPluginActive && (
-                  <FooterCredit
-                    logoSrc={`${cdnUrl}email-editor/logo-footer.png`}
-                  />
-                )}
-              </BlockSelectionClearer>
-            </div>
-          </>
-        }
-        sidebar={<ComplementaryArea.Slot scope={storeName} />}
-        secondarySidebar={
-          (isInserterSidebarOpened && <InserterSidebar />) ||
-          (isListviewSidebarOpened && <ListviewSidebar />)
-        }
-      />
-      {/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */}
-      <BlockCompatibilityWarnings />
-    </BlockEditorProvider>
+                    <ThemeStyles />
+                    <EditorStyles
+                      styles={settings.styles}
+                      scope=".editor-styles-wrapper"
+                    />
+                    <BlockSelectionClearer
+                      className="editor-styles-wrapper block-editor-writing-flow"
+                      style={{ width: '100%' }}
+                    >
+                      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                      {/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */}
+                      <BlockEditorKeyboardShortcuts.Register />
+                      <BlockTools>
+                        <WritingFlow>
+                          <ObserveTyping>
+                            <BlockList
+                              className={classnames(
+                                {
+                                  'is-mobile-preview':
+                                    previewDeviceType === 'Mobile',
+                                },
+                                'is-layout-constrained has-global-padding',
+                              )}
+                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                              // @ts-ignore We have an older package of @wordpress/block-editor that doesn't contain the correct type
+                              layout={layout}
+                            />
+                          </ObserveTyping>
+                        </WritingFlow>
+                      </BlockTools>
+                    </BlockSelectionClearer>
+                  </div>
+                  {!isPremiumPluginActive && (
+                    <FooterCredit
+                      logoSrc={`${cdnUrl}email-editor/logo-footer.png`}
+                    />
+                  )}
+                </BlockSelectionClearer>
+              </div>
+            </>
+          }
+          sidebar={<ComplementaryArea.Slot scope={storeName} />}
+          secondarySidebar={
+            (isInserterSidebarOpened && <InserterSidebar />) ||
+            (isListviewSidebarOpened && <ListviewSidebar />)
+          }
+        />
+        {/* 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],
     ];