diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss index 529c87f2ed..ac0b9aa0af 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss +++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss @@ -66,17 +66,46 @@ } } -.edit-post-visual-editor__content-area { +.visual-editor { + height: 100%; + line-height: 1.4; /* Recommended line-height that is also used in the email editor */ + margin: 0; + padding: 0; + -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ + -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ + word-spacing: normal; +} + +.visual-editor__email_layout_wrapper { + margin: 0 auto; + padding: 20px 0; + width: 100%; +} + +.has-global-padding .wp-block-post-content > .alignfull { + margin-left: -20px; + margin-right: -20px; +} + +.visual-editor__email_footer { + direction: ltr; + text-align: center; + + .mailpoet-email-footer-credit { + appearance: none; + border: 0; + cursor: pointer; + display: block; + margin: 24px auto 0; + padding: 0; + } +} + +.visual-editor__email_content_wrapper { display: block !important; // Override flex to achieve height follow the length of the document flex-grow: 0 !important; height: auto !important; - // Because block editor uses .has-background class after setting a background color - // we want to reset padding for this class to avoid unexpected spacing - .has-background { - padding: 0; - } - // Set default padding-left to have consistent default look in editor and in email // This also overrides the default values in browsers for padding-inline-start ul, @@ -90,6 +119,19 @@ .wp-block-button__link { border-radius: 0; } + + .is-mobile-preview { + .wp-block-columns { + display: flex; + flex-direction: column; + + .wp-block-column { + box-sizing: border-box; + // override flex-basis set in style attribute to fix the height of the column in mobile preview. Blocks overriding is as a part of style.css in blocks-library + flex-basis: auto !important; + } + } + } } // For the WYSIWYG experience we don't want to display any margins between blocks in the editor @@ -97,18 +139,6 @@ clear: both; // for ensuring that floated elements (images) are cleared } -.edit-post-visual-editor__content-area .is-mobile-preview { - .wp-block-columns { - display: flex; - flex-direction: column; - - .wp-block-column { - box-sizing: border-box; - // override flex-basis set in style attribute to fix the height of the column in mobile preview. Blocks overriding is as a part of style.css in blocks-library - flex-basis: auto !important; - } - } -} // Resetting the margin for images in the editor to avoid unexpected spacing .editor-styles-wrapper .is-layout-constrained .wp-block-image { figcaption { @@ -138,12 +168,3 @@ .block-editor-block-inspector__advanced { display: none; } - -.mailpoet-email-footer-credit { - appearance: none; - border: 0; - cursor: pointer; - display: block; - margin: 24px auto 0; - padding: 0; -} diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx index 494965e5d4..5337717488 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx +++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx @@ -78,11 +78,12 @@ export function Layout() { const layoutBackground = styles.color.background.layout; - let inlineStyles = useResizeCanvas(previewDeviceType); + let contentWrapperStyles = useResizeCanvas(previewDeviceType); + // Adjust the inline styles for desktop preview. We want to set email width and center it. if (previewDeviceType === 'Desktop') { - inlineStyles = { - ...inlineStyles, + contentWrapperStyles = { + ...contentWrapperStyles, height: 'auto', width: layout.contentSize, display: 'flex', @@ -90,22 +91,27 @@ export function Layout() { }; } - inlineStyles.transition = 'all 0.3s ease 0s'; // 72px top to place the email document nicely vertically in canvas. Same value is used for title in WP Post editor. - // We use only 16px bottom to mitigate the issue with inserter popup displaying below the fold. - inlineStyles.margin = '72px auto 16px auto'; - delete inlineStyles.marginLeft; - delete inlineStyles.marginTop; - delete inlineStyles.marginBottom; - delete inlineStyles.marginRight; - - const contentAreaStyles = {}; + // We use only 20px bottom to mitigate the issue with inserter popup displaying below the fold. + contentWrapperStyles.margin = '72px auto 20px auto'; + delete contentWrapperStyles.marginLeft; + delete contentWrapperStyles.marginTop; + delete contentWrapperStyles.marginBottom; + delete contentWrapperStyles.marginRight; + // Styles for the canvas. Based on template-canvas.php, this equates to the body element. const canvasStyles = { background: previewDeviceType === 'Desktop' ? layoutBackground : 'transparent', }; + // Styles for the content wrapper. Based on template-canvas.php, this equates to the .email_layout_wrapper element. We don't add padding because that is taken care of by the editor-styles-wrapper div. + const contentAreaStyles = { + fontFamily: styles.typography.fontFamily, + background: styles.color.background.content, + transition: 'all 0.3s ease 0s', + }; + const settings = { ...initialSettings, mediaUpload: canUserEditMedia ? uploadMedia : null, @@ -134,31 +140,40 @@ export function Layout() { content={ <> -
- +
+
- - - + + + + +
- - {!isPremiumPluginActive && ( - - )} +
+ {!isPremiumPluginActive && ( + + )} +
+
} 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 8ab45a64e6..0377f0c9b8 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/types.ts +++ b/mailpoet/assets/js/src/email-editor/engine/store/types.ts @@ -49,6 +49,10 @@ export interface TypographyProperties { } export type EmailStyles = { + typography: { + fontFamily: string; + fontSize: string; + }; spacing: { blockGap: string; padding: { diff --git a/mailpoet/assets/js/src/form-editor/components/editor.jsx b/mailpoet/assets/js/src/form-editor/components/editor.jsx index f795cadb3a..b9cfa68c5f 100644 --- a/mailpoet/assets/js/src/form-editor/components/editor.jsx +++ b/mailpoet/assets/js/src/form-editor/components/editor.jsx @@ -87,6 +87,7 @@ export function Editor() { __experimentalBlockPatternCategories: [], __experimentalSetIsInserterOpened: toggleInserter, __experimentalFeatures: { + useRootPaddingAwareAlignments: true, color: { custom: true, text: true, diff --git a/mailpoet/lib/DI/ContainerConfigurator.php b/mailpoet/lib/DI/ContainerConfigurator.php index dcf3a51fed..024681ef56 100644 --- a/mailpoet/lib/DI/ContainerConfigurator.php +++ b/mailpoet/lib/DI/ContainerConfigurator.php @@ -347,7 +347,7 @@ class ContainerConfigurator implements IContainerConfigurator { $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors\SpacingPreprocessor::class)->setPublic(true); $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\Preprocessors\TypographyPreprocessor::class)->setPublic(true); $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\Renderer::class)->setPublic(true); - $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\Templates\Templates::class)->setPublic(true); + $container->autowire(\MailPoet\EmailEditor\Engine\Templates\Templates::class)->setPublic(true); $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer::class)->setPublic(true); $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\BlocksRegistry::class)->setPublic(true); $container->autowire(\MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ProcessManager::class)->setPublic(true); diff --git a/mailpoet/lib/EmailEditor/Engine/EmailEditor.php b/mailpoet/lib/EmailEditor/Engine/EmailEditor.php index 11341dd5bf..d4aaca7bbe 100644 --- a/mailpoet/lib/EmailEditor/Engine/EmailEditor.php +++ b/mailpoet/lib/EmailEditor/Engine/EmailEditor.php @@ -2,6 +2,7 @@ namespace MailPoet\EmailEditor\Engine; +use MailPoet\EmailEditor\Engine\Templates\Templates; use MailPoet\Entities\NewsletterEntity; use MailPoet\Validator\Builder; use WP_Post; @@ -14,24 +15,31 @@ use WP_Theme_JSON; class EmailEditor { public const MAILPOET_EMAIL_META_THEME_TYPE = 'mailpoet_email_theme'; - /** @var EmailApiController */ - private $emailApiController; + private EmailApiController $emailApiController; + private Templates $templates; public function __construct( - EmailApiController $emailApiController + EmailApiController $emailApiController, + Templates $templates ) { $this->emailApiController = $emailApiController; + $this->templates = $templates; } public function initialize(): void { do_action('mailpoet_email_editor_initialized'); add_filter('mailpoet_email_editor_rendering_theme_styles', [$this, 'extendEmailThemeStyles'], 10, 2); + $this->registerBlockTemplates(); $this->registerEmailPostTypes(); $this->registerEmailMetaFields(); $this->registerEmailPostSendStatus(); $this->extendEmailPostApi(); } + private function registerBlockTemplates(): void { + $this->templates->initialize(); + } + /** * Register all custom post types that should be edited via the email editor * The post types are added via mailpoet_email_editor_post_types filter. diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php index dad67f6c73..2fa069e60f 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php +++ b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php @@ -4,8 +4,8 @@ namespace MailPoet\EmailEditor\Engine\Renderer; use MailPoet\Config\ServicesChecker; use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer; -use MailPoet\EmailEditor\Engine\Renderer\Templates\Templates; use MailPoet\EmailEditor\Engine\SettingsController; +use MailPoet\EmailEditor\Engine\Templates\Templates; use MailPoet\Util\CdnAssetUrl; use MailPoet\Util\pQuery\DomNode; use MailPoetVendor\CSS as CssInliner; diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Templates/email-general.html b/mailpoet/lib/EmailEditor/Engine/Renderer/Templates/email-general.html deleted file mode 100644 index 4ab0ef8971..0000000000 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/Templates/email-general.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css b/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css index 6d603d32fd..b9500cd245 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css +++ b/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css @@ -8,6 +8,7 @@ body { padding: 0; -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ + word-spacing: normal; } .email_layout_wrapper { diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php b/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php index 741698e735..1f252a8972 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php +++ b/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php @@ -20,7 +20,7 @@ - +