Set BlockList layout

[MAILPOET-5688]

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

@@ -46,6 +46,7 @@ export function BlockEditor() {
     hasFixedToolbar,
     focusMode,
     layoutStyles,
+    layout,
   } = useSelect(
     (select) => ({
       isFullscreenActive: select(storeName).isFeatureActive('fullscreenMode'),
@@ -60,6 +61,7 @@ export function BlockEditor() {
       hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
       focusMode: select(storeName).isFeatureActive('focusMode'),
       layoutStyles: select(storeName).getLayoutStyles(),
+      layout: select(storeName).getLayout(),
     }),
     [],
   );
@@ -164,7 +166,12 @@ export function BlockEditor() {
                     <BlockTools>
                       <WritingFlow>
                         <ObserveTyping>
-                          <BlockList className="is-layout-constrained" />
+                          <BlockList
+                            className="is-layout-constrained"
+                            // 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>

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

@@ -1,5 +1,9 @@
 import { State } from './types';
-import { getEditorSettings, getEmailLayoutStyles } from './settings';
+import {
+  getEditorLayout,
+  getEditorSettings,
+  getEmailLayoutStyles,
+} from './settings';
 
 export function getInitialState(): State {
   const searchParams = new URLSearchParams(window.location.search);
@@ -14,6 +18,7 @@ export function getInitialState(): State {
     postId,
     editorSettings: getEditorSettings(),
     layoutStyles: getEmailLayoutStyles(),
+    layout: getEditorLayout(),
     preview: {
       deviceType: 'Desktop',
       toEmail: window.MailPoetEmailEditor.current_wp_user_email,

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

@@ -84,3 +84,7 @@ export function getPreviewState(state: State): State['preview'] {
 export function getLayoutStyles(state: State): State['layoutStyles'] {
   return state.layoutStyles;
 }
+
+export function getLayout(state: State): State['layout'] {
+  return state.layout;
+}

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

@@ -1,4 +1,8 @@
-import { EmailEditorSettings, EmailLayoutStyles } from './types';
+import {
+  EmailEditorSettings,
+  EmailLayoutStyles,
+  EmailEditorLayout,
+} from './types';
 
 export function getEditorSettings(): EmailEditorSettings {
   return window.MailPoetEmailEditor.editor_settings as EmailEditorSettings;
@@ -7,3 +11,7 @@ export function getEditorSettings(): EmailEditorSettings {
 export function getEmailLayoutStyles(): EmailLayoutStyles {
   return window.MailPoetEmailEditor.email_layout_styles as EmailLayoutStyles;
 }
+
+export function getEditorLayout(): EmailEditorLayout {
+  return window.MailPoetEmailEditor.editor_layout as EmailEditorLayout;
+}

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

@@ -36,6 +36,11 @@ export type EmailLayoutStyles = {
   };
 };
 
+export type EmailEditorLayout = {
+  type: string;
+  contentSize: string;
+};
+
 export type State = {
   inserterSidebar: {
     isOpened: boolean;
@@ -46,6 +51,7 @@ export type State = {
   postId: number;
   editorSettings: EmailEditorSettings;
   layoutStyles: EmailLayoutStyles;
+  layout: EmailEditorLayout;
   preview: {
     deviceType: string;
     toEmail: string;

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

@@ -5,6 +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 getEditorSettings() in store/settings.ts
+    email_layout_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailLayoutStyles() in store/settings.ts
+    editor_layout: unknown; // Can't import type in global.d.ts. Typed in getEmailLayout() in store/settings.ts
   };
 }

mailpoet/lib/AdminPages/Pages/EmailEditor.php

@@ -59,6 +59,7 @@ class EmailEditor {
         'current_wp_user_email' => esc_js($currentUserEmail),
         'editor_settings' => $this->settingsController->getSettings(),
         'email_layout_styles' => $this->settingsController->getEmailLayoutStyles(),
+        'editor_layout' => $this->settingsController->getLayout(),
       ]
     );
 

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -111,6 +111,16 @@ class SettingsController {
     return $settings;
   }
 
+  /**
+   * @return array{contentSize: string, layout: string}
+   */
+  public function getLayout(): array {
+    return [
+      'contentSize' => self::EMAIL_WIDTH,
+      'layout' => 'constrained',
+    ];
+  }
+
   public function getEmailContentStyles(): array {
     return self::DEFAULT_EMAIL_CONTENT_STYLES;
   }