Prepare styles in store for sidebar

[MAILPOET-5638]
2024-02-28 19:17:17 +01:00
parent 46e5576ddc
commit db8dac03d2
13 changed files with 71 additions and 57 deletions
--- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
+++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
@ -48,7 +48,7 @@ export function BlockEditor() {
    canUserEditMedia,
    hasFixedToolbar,
    focusMode,
-    layoutStyles,
+    styles,
    layout,
  } = useSelect(
    (select) => ({
@ -63,7 +63,7 @@ export function BlockEditor() {
      canUserEditMedia: select(coreStore).canUser('create', 'media'),
      hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
      focusMode: select(storeName).isFeatureActive('focusMode'),
-      layoutStyles: select(storeName).getLayoutStyles(),
+      styles: select(storeName).getStyles(),
      layout: select(storeName).getLayout(),
    }),
    [],
@ -86,7 +86,7 @@ export function BlockEditor() {
  );

  // This will be set by the user in the future in email or global styles.
-  const layoutBackground = layoutStyles.background;
+  const layoutBackground = styles.layout.background;

  let inlineStyles = useResizeCanvas(previewDeviceType);
  // UseResizeCanvas returns null if the previewDeviceType is Desktop.
@ -94,7 +94,7 @@ export function BlockEditor() {
    inlineStyles = {
      height: 'auto',
      margin: '4rem auto', // 4em top/bottom to place the email document nicely vertically in canvas. Same value is used for title in WP Post editor.
-      width: layoutStyles.width,
+      width: styles.layout.width,
      display: 'flex',
      flexFlow: 'column',
    };
--- a/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts
@ -1,10 +1,6 @@
 import { mainSidebarEmailTab } from './constants';
 import { State } from './types';
-import {
-  getEditorLayout,
-  getEditorSettings,
-  getEmailLayoutStyles,
-} from './settings';
+import { getEditorLayout, getEditorSettings, getEmailStyles } from './settings';

 export function getInitialState(): State {
  const searchParams = new URLSearchParams(window.location.search);
@ -21,7 +17,7 @@ export function getInitialState(): State {
    },
    postId,
    editorSettings: getEditorSettings(),
-    layoutStyles: getEmailLayoutStyles(),
+    styles: getEmailStyles(),
    layout: getEditorLayout(),
    autosaveInterval: 60,
    preview: {
--- a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts
@ -125,8 +125,8 @@ export function getPreviewState(state: State): State['preview'] {
  return state.preview;
 }

-export function getLayoutStyles(state: State): State['layoutStyles'] {
-  return state.layoutStyles;
+export function getStyles(state: State): State['styles'] {
+  return state.styles;
 }

 export function getLayout(state: State): State['layout'] {
--- a/mailpoet/assets/js/src/email-editor/engine/store/settings.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/settings.ts
@ -1,15 +1,11 @@
-import {
-  EmailEditorSettings,
-  EmailLayoutStyles,
-  EmailEditorLayout,
-} from './types';
+import { EmailEditorSettings, EmailStyles, EmailEditorLayout } from './types';

 export function getEditorSettings(): EmailEditorSettings {
  return window.MailPoetEmailEditor.editor_settings as EmailEditorSettings;
 }

-export function getEmailLayoutStyles(): EmailLayoutStyles {
-  return window.MailPoetEmailEditor.email_layout_styles as EmailLayoutStyles;
+export function getEmailStyles(): EmailStyles {
+  return window.MailPoetEmailEditor.email_styles as EmailStyles;
 }

 export function getEditorLayout(): EmailEditorLayout {
--- a/mailpoet/assets/js/src/email-editor/engine/store/types.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/types.ts
@ -25,14 +25,19 @@ export type ExperimentalSettings = {

 export type EmailEditorSettings = EditorSettings & ExperimentalSettings;

-export type EmailLayoutStyles = {
-  width: string;
-  background: string;
-  padding: {
-    bottom: string;
-    left: string;
-    right: string;
-    top: string;
+export type EmailStyles = {
+  layout: {
+    background: string;
+    padding: {
+      bottom: string;
+      left: string;
+      right: string;
+      top: string;
+    };
+    width: string;
+  };
+  colors: {
+    background: string;
  };
 };

@ -53,7 +58,7 @@ export type State = {
  };
  postId: number;
  editorSettings: EmailEditorSettings;
-  layoutStyles: EmailLayoutStyles;
+  styles: EmailStyles;
  layout: EmailEditorLayout;
  autosaveInterval: number;
  preview: {
--- a/mailpoet/assets/js/src/email-editor/global.d.ts
+++ b/mailpoet/assets/js/src/email-editor/global.d.ts
@ -5,7 +5,7 @@ interface Window {
    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
-    email_layout_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailLayoutStyles() in store/settings.ts
+    email_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailStyles() in store/settings.ts
    editor_layout: unknown; // Can't import type in global.d.ts. Typed in getEmailLayout() in store/settings.ts
  };
 }
--- a/mailpoet/lib/AdminPages/Pages/EmailEditor.php
+++ b/mailpoet/lib/AdminPages/Pages/EmailEditor.php
@ -58,7 +58,7 @@ class EmailEditor {
        'api_version' => esc_js($apiVersion),
        'current_wp_user_email' => esc_js($currentUserEmail),
        'editor_settings' => $this->settingsController->getSettings(),
-        'email_layout_styles' => $this->settingsController->getEmailLayoutStyles(),
+        'email_styles' => $this->settingsController->getEmailStyles(),
        'editor_layout' => $this->settingsController->getLayout(),
      ]
    );
--- a/mailpoet/lib/EmailEditor/Engine/EmailApiController.php
+++ b/mailpoet/lib/EmailEditor/Engine/EmailApiController.php
@ -19,7 +19,7 @@ class EmailApiController {
   */
  public function getEmailData(): array {
    return [
-      'layout_styles' => $this->settingsController->getEmailLayoutStyles(),
+      'layout_styles' => $this->settingsController->getEmailStyles(),
    ];
  }

--- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
+++ b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
@ -42,7 +42,7 @@ class Renderer {
    $parser = new \WP_Block_Parser();
    $parsedBlocks = $parser->parse($post->post_content); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps

-    $layoutStyles = $this->settingsController->getEmailLayoutStyles();
+    $layoutStyles = $this->settingsController->getEmailStyles()['layout'];
    $themeData = $this->settingsController->getTheme()->get_data();
    $contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
    $contentFontFamily = $themeData['styles']['typography']['fontFamily'];
--- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php
+++ b/mailpoet/lib/EmailEditor/Engine/SettingsController.php
@ -94,26 +94,37 @@ class SettingsController {
  }

  /**
-   * @return array{width: string, background: string, padding: array{bottom: string, left: string, right: string, top: string}}
+   * @return array{
+   *   layout: array{width: string,background: string,padding: array{bottom: string, left: string, right: string, top: string}},
+   *   colors: array{background: string},
+   *   typography: array[]
+   * }
   */
-  public function getEmailLayoutStyles(): array {
+  public function getEmailStyles(): array {
    return [
-      'width' => self::EMAIL_WIDTH,
-      'background' => self::EMAIL_LAYOUT_BACKGROUND,
-      'padding' => [
-        'bottom' => self::FLEX_GAP,
-        'left' => self::FLEX_GAP,
-        'right' => self::FLEX_GAP,
-        'top' => self::FLEX_GAP,
+      'layout' => [
+        'background' => self::EMAIL_LAYOUT_BACKGROUND,
+        'width' => self::EMAIL_WIDTH,
+        'padding' => [
+          'bottom' => self::FLEX_GAP,
+          'left' => self::FLEX_GAP,
+          'right' => self::FLEX_GAP,
+          'top' => self::FLEX_GAP,
+        ],
+      ],
+      'colors' => [
+        'background' => '#000000',
+      ],
+      'typography' => [
      ],
    ];
  }

  public function getLayoutWidthWithoutPadding(): string {
-    $layoutStyles = $this->getEmailLayoutStyles();
-    $width = $this->parseNumberFromStringWithPixels($layoutStyles['width']);
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['left']);
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['right']);
+    $layoutStyles = $this->getEmailStyles();
+    $width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
+    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
+    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
    return "{$width}px";
  }

--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
+++ b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
@ -51,8 +51,8 @@ class Columns implements BlockRenderer {

    $align = $parsedBlock['attrs']['align'] ?? null;
    if ($align !== 'full') {
-      $layoutPaddingLeft = $settingsController->getEmailLayoutStyles()['padding']['left'];
-      $layoutPaddingRight = $settingsController->getEmailLayoutStyles()['padding']['right'];
+      $layoutPaddingLeft = $settingsController->getEmailStyles()['layout']['padding']['left'];
+      $layoutPaddingRight = $settingsController->getEmailStyles()['layout']['padding']['right'];
    } else {
      $layoutPaddingLeft = '0px';
      $layoutPaddingRight = '0px';
--- a/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
+++ b/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
@ -88,14 +88,16 @@ class RendererTest extends \MailPoetTest {
      ],
    ]);
    $settingsControllerMock = $this->createMock(SettingsController::class);
-    $settingsControllerMock->method('getEmailLayoutStyles')->willReturn([
-      'width' => '123px',
-      'background' => '#123456',
-      'padding' => [
-        'left' => '1px',
-        'right' => '2px',
-        'top' => '3px',
-        'bottom' => '4px',
+    $settingsControllerMock->method('getEmailStyles')->willReturn([
+      'layout' => [
+        'width' => '123px',
+        'background' => '#123456',
+        'padding' => [
+          'left' => '1px',
+          'right' => '2px',
+          'top' => '3px',
+          'bottom' => '4px',
+        ],
      ],
    ]);
    $settingsControllerMock->method('getTheme')->willReturn($themeJsonMock);
--- a/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
+++ b/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
@ -8,10 +8,14 @@ use MailPoet\EmailEditor\Engine\ThemeController;
 class SettingsControllerTest extends \MailPoetUnitTest {
  public function testItGetsMainLayoutStyles(): void {
    $settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
-    $layoutStyles = $settingsController->getEmailLayoutStyles();
-    verify($layoutStyles)->arrayHasKey('width');
+    $styles = $settingsController->getEmailStyles();
+    verify($styles)->arrayHasKey('layout');
+    verify($styles)->arrayHasKey('colors');
+    verify($styles)->arrayHasKey('typography');
+    $layoutStyles = $styles['layout'];
    verify($layoutStyles)->arrayHasKey('background');
    verify($layoutStyles)->arrayHasKey('padding');
+    verify($layoutStyles)->arrayHasKey('width');
  }

  public function testItGetsCorrectLayoutWidthWithoutPadding(): void {