diff --git 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 index aa897447fc..4780c8489c 100644 --- 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 @@ -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() { - + diff --git a/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts b/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts index 30f4ad53b6..aedf478250 100644 --- 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,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, diff --git a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts b/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts index b3f9973fa1..6d2bee0554 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts +++ b/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; +} diff --git a/mailpoet/assets/js/src/email-editor/engine/store/settings.ts b/mailpoet/assets/js/src/email-editor/engine/store/settings.ts index 04110d4adb..9e3257ef14 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/settings.ts +++ b/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; +} diff --git a/mailpoet/assets/js/src/email-editor/engine/store/types.ts b/mailpoet/assets/js/src/email-editor/engine/store/types.ts index 170e748813..fea9d247a8 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/types.ts +++ b/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; diff --git a/mailpoet/assets/js/src/email-editor/global.d.ts b/mailpoet/assets/js/src/email-editor/global.d.ts index 8cc9f721bf..15f1f1c3bd 100644 --- a/mailpoet/assets/js/src/email-editor/global.d.ts +++ b/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 }; } diff --git a/mailpoet/lib/AdminPages/Pages/EmailEditor.php b/mailpoet/lib/AdminPages/Pages/EmailEditor.php index 63dd6fde74..ffaeaddb3f 100644 --- a/mailpoet/lib/AdminPages/Pages/EmailEditor.php +++ b/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(), ] ); diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php index 2feda86a2e..8afe754484 100644 --- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php +++ b/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; }