Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Assign email-general template in editor

Browse Source
This commit is contained in:
Mike Jolley
2024-04-10 14:13:09 +01:00
parent c834ca3ab6
commit 00e158108f
12 changed files with 134 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss
View File

@@ -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;
}

75
mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx
View File

@@ -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={
<>
<EditorNotices />
<div className="edit-post-visual-editor" style={canvasStyles}>
<BlockSelectionClearer
className="edit-post-visual-editor__content-area"
style={contentAreaStyles}
>
<div className="visual-editor" style={canvasStyles}>
<div className="visual-editor__email_layout_wrapper">
<div
style={inlineStyles}
style={contentWrapperStyles}
className={classnames({
'is-mobile-preview': previewDeviceType === 'Mobile',
'is-desktop-preview': previewDeviceType === 'Desktop',
})}
>
<ThemeStyles />
<EditorStyles
styles={settings.styles}
scope=".editor-styles-wrapper"
/>
<EditorCanvas disableIframe styles={[]} autoFocus />
<BlockSelectionClearer
className="visual-editor__email_content_wrapper"
style={contentAreaStyles}
>
<ThemeStyles />
<EditorStyles
styles={settings.styles}
scope=".editor-styles-wrapper"
/>
<EditorCanvas
disableIframe
styles={[]}
autoFocus
className="has-global-padding"
/>
</BlockSelectionClearer>
</div>
</BlockSelectionClearer>
{!isPremiumPluginActive && (
<FooterCredit
logoSrc={`${cdnUrl}email-editor/logo-footer.png`}
/>
)}
<div className="visual-editor__email_footer">
{!isPremiumPluginActive && (
<FooterCredit
logoSrc={`${cdnUrl}email-editor/logo-footer.png`}
/>
)}
</div>
</div>
</div>
</>
}

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

@@ -49,6 +49,10 @@ export interface TypographyProperties {
}
export type EmailStyles = {
typography: {
fontFamily: string;
fontSize: string;
};
spacing: {
blockGap: string;
padding: {

1
mailpoet/assets/js/src/form-editor/components/editor.jsx
View File

@@ -87,6 +87,7 @@ export function Editor() {
__experimentalBlockPatternCategories: [],
__experimentalSetIsInserterOpened: toggleInserter,
__experimentalFeatures: {
useRootPaddingAwareAlignments: true,
color: {
custom: true,
text: true,

2
mailpoet/lib/DI/ContainerConfigurator.php
View File

@@ -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);

14
mailpoet/lib/EmailEditor/Engine/EmailEditor.php
View File

@@ -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.

2
mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
View File

@@ -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;

1
mailpoet/lib/EmailEditor/Engine/Renderer/Templates/email-general.html
View File

@@ -1 +0,0 @@
<!-- wp:mailpoet/email-content /-->

1
mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css
View File

@@ -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 {

2
mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.php
View File

@@ -20,7 +20,7 @@
<?php echo $templateStyles; ?>
</style>
</head>
<body style="word-spacing:normal;background:<?php echo esc_attr($layoutBackground); ?>;">
<body style="background:<?php echo esc_attr($layoutBackground); ?>;">
<div class="email_layout_wrapper" style="background:<?php echo esc_attr($layoutBackground); ?>">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" width="<?php echo esc_attr($width); ?>" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:<?php echo esc_attr($width); ?>">

14
mailpoet/lib/EmailEditor/Engine/Renderer/Templates/Templates.php → mailpoet/lib/EmailEditor/Engine/Templates/Templates.php
View File

@@ -1,6 +1,6 @@
<?php declare(strict_types = 1);
namespace MailPoet\EmailEditor\Engine\Renderer\Templates;
namespace MailPoet\EmailEditor\Engine\Templates;
use WP_Block_Template;
@@ -11,6 +11,18 @@ class Templates {
$this->templateDirectory = dirname(__FILE__) . DIRECTORY_SEPARATOR;
}
public function initialize(): void {
add_filter('pre_get_block_templates', [$this, 'getBlockTemplates'], 10, 3);
}
public function getBlockTemplates($query_result, $query, $template_type) {
if ('wp_template' !== $template_type) {
return $query_result;
}
$query_result[] = $this->getBlockTemplateFromFile('email-general.html');
return $query_result;
}
public function getBlockTemplateFromFile(string $template) {
$templateObject = $this->createNewBlockTemplateObject($template);

7
mailpoet/lib/EmailEditor/Engine/Templates/email-general.html Normal file
View File

@@ -0,0 +1,7 @@
<!-- wp:paragraph -->
<p>This is a paragraph in the email-general template.</p>
<!-- /wp:paragraph -->
<!-- wp:core/post-content /-->
<!-- wp:paragraph -->
<p>This is a paragraph in the email-general template.</p>
<!-- /wp:paragraph -->