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

Implement margin-top for core block renderers

Browse Source 
[MAILPOET-5816]
This commit is contained in:
Jan Lysý
2024-01-18 16:27:15 +01:00
committed by Rostislav Wolný
parent eed1dbb695
commit fc79e3eee9
6 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,8 @@ class FlexLayoutRenderer {
$wpGeneratedStyles = wp_style_engine_get_styles($parsedBlock['attrs']['style'] ?? []); $wpGeneratedStyles = wp_style_engine_get_styles($parsedBlock['attrs']['style'] ?? []);
$styles = $wpGeneratedStyles['css'] ?? ''; $styles = $wpGeneratedStyles['css'] ?? '';
$marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
$styles .= 'margin-top: ' . $marginTop . ';';
$justify = esc_attr($parsedBlock['attrs']['layout']['justifyContent'] ?? 'left'); $justify = esc_attr($parsedBlock['attrs']['layout']['justifyContent'] ?? 'left');
$styles .= 'text-align: ' . $justify; $styles .= 'text-align: ' . $justify;
$outputHtml = str_replace('{style}', $styles, $outputHtml); $outputHtml = str_replace('{style}', $styles, $outputHtml);

12
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
View File

@@ -29,6 +29,7 @@ class Columns implements BlockRenderer {
$paddingLeft = $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px'; $paddingLeft = $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px';
$paddingRight = $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px'; $paddingRight = $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px';
$paddingTop = $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px'; $paddingTop = $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px';
$marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
$align = $parsedBlock['attrs']['align'] ?? null; $align = $parsedBlock['attrs']['align'] ?? null;
if ($align !== 'full') { if ($align !== 'full') {
@@ -41,8 +42,15 @@ class Columns implements BlockRenderer {
return ' return '
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="width:' . $width . ';" width="' . $width . '"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="width:' . $width . ';" width="' . $width . '"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:' . $width . ';padding-left:' . $layoutPaddingLeft . ';padding-right:' . $layoutPaddingRight . ';"> <div style="margin-top:' . $marginTop . ';max-width:' . $width . ';padding-left:' . $layoutPaddingLeft . ';padding-right:' . $layoutPaddingRight . ';">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:' . $backgroundColor . ';background-color:' . $backgroundColor . ';max-width:' . $width . ';width:100%;"> <table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background:' . $backgroundColor . ';background-color:' . $backgroundColor . ';max-width:' . $width . ';width:100%;"
>
<tbody> <tbody>
<tr> <tr>
<td style="font-size:0px;background:' . $backgroundColor . ';background-color:' . $backgroundColor . ';padding-left:' . $paddingLeft . ';padding-right:' . $paddingRight . ';padding-bottom:' . $paddingBottom . ';padding-top:' . $paddingTop . ';text-align:left;"> <td style="font-size:0px;background:' . $backgroundColor . ';background-color:' . $backgroundColor . ';padding-left:' . $paddingLeft . ';padding-right:' . $paddingRight . ';padding-bottom:' . $paddingBottom . ';padding-top:' . $paddingTop . ';text-align:left;">

47
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Heading.php
View File

@@ -19,44 +19,45 @@ class Heading implements BlockRenderer {
private function getBlockWrapper(array $parsedBlock, SettingsController $settingsController): string { private function getBlockWrapper(array $parsedBlock, SettingsController $settingsController): string {
$availableStylesheets = $settingsController->getAvailableStylesheets(); $availableStylesheets = $settingsController->getAvailableStylesheets();
$marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
// Styles for padding need to be set on the wrapping table cell due to support in Outlook // Styles for padding need to be set on the wrapping table cell due to support in Outlook
$paddingBottom = $parsedBlock['attrs']['style']['spacing']['padding']['bottom'] ?? '0px';
$paddingLeft = $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px';
$paddingRight = $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px';
$paddingTop = $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px';
$styles = [ $styles = [
'background-color' => $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent', 'background-color' => $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent',
'min-width' => '100%', // prevent Gmail App from shrinking the table on mobile devices 'min-width' => '100%', // prevent Gmail App from shrinking the table on mobile devices
'padding-bottom' => $paddingBottom, 'padding-bottom' => $parsedBlock['attrs']['style']['spacing']['padding']['bottom'] ?? '0px',
'padding-left' => $paddingLeft, 'padding-left' => $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px',
'padding-right' => $paddingRight, 'padding-right' => $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px',
'padding-top' => $paddingTop, 'padding-top' => $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px',
]; ];
foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) { foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) {
if ($property === 'width') continue; // width is handled by the wrapping blocks (columns, column) if ($property === 'width') continue; // width is handled by the wrapping blocks (columns, column)
if ($property === 'margin-top') continue; // margin-top is set on the wrapping div co we need to avoid duplication
$styles[$property] = $value; $styles[$property] = $value;
} }
$styles = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs'])); $styles = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs']));
return ' return '
<table <!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><![endif]-->
role="presentation" <div style="margin-top: ' . $marginTop . ';">
border="0" <table
cellpadding="0" role="presentation"
cellspacing="0" border="0"
style="min-width: 100%;" cellpadding="0"
width="100%" cellspacing="0"
> style="min-width: 100%;"
<tr> width="100%"
<td style="' . $settingsController->convertStylesToString($styles) . '"> >
{heading_content} <tr>
</td> <td style="' . $settingsController->convertStylesToString($styles) . '">
</tr> {heading_content}
</table> </td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
'; ';
} }

3
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php
View File

@@ -112,6 +112,7 @@ class Image implements BlockRenderer {
$styles['width'] = '100%'; $styles['width'] = '100%';
$align = $parsedBlock['attrs']['align'] ?? 'left'; $align = $parsedBlock['attrs']['align'] ?? 'left';
$marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
return ' return '
<table <table
@@ -133,7 +134,7 @@ class Image implements BlockRenderer {
width="' . $wrapperWidth . '" width="' . $wrapperWidth . '"
> >
<tr> <tr>
<td>{image_content}</td> <td style="padding-top:' . $marginTop . '">{image_content}</td>
</tr> </tr>
<tr> <tr>
<td style="' . $captionStyles . '">{caption_content}</td> <td style="' . $captionStyles . '">{caption_content}</td>

16
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/ListBlock.php
View File

@@ -28,7 +28,21 @@ class ListBlock implements BlockRenderer {
$blockContent = $html->get_updated_html(); $blockContent = $html->get_updated_html();
} }
$wrapperStyle = $settingsController->convertStylesToString([
'margin-top' => $parsedBlock['email_attrs']['margin-top'] ?? '0px',
]);
// \WP_HTML_Tag_Processor escapes the content, so we have to replace it back // \WP_HTML_Tag_Processor escapes the content, so we have to replace it back
return str_replace('&#039;', "'", $blockContent); $blockContent = str_replace('&#039;', "'", $blockContent);
$blockContent = str_replace('{listContent}', $blockContent, $this->getMarkup());
$blockContent = str_replace('{wrapperStyle}', $wrapperStyle, $blockContent);
return $blockContent;
}
private function getMarkup(): string {
return '
<div style="{wrapperStyle}">
{listContent}
</div>';
} }
} }

39
mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Paragraph.php
View File

@@ -20,22 +20,20 @@ class Paragraph implements BlockRenderer {
$availableStylesheets = $settingsController->getAvailableStylesheets(); $availableStylesheets = $settingsController->getAvailableStylesheets();
$align = $parsedBlock['attrs']['align'] ?? 'left'; $align = $parsedBlock['attrs']['align'] ?? 'left';
$paddingBottom = $parsedBlock['attrs']['style']['spacing']['padding']['bottom'] ?? '0px'; $marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
$paddingLeft = $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px';
$paddingRight = $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px';
$paddingTop = $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px';
$styles = [ $styles = [
'background-color' => $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent', 'background-color' => $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent',
'text-align' => $align, 'text-align' => $align,
'padding-bottom' => $paddingBottom, 'padding-bottom' => $parsedBlock['attrs']['style']['spacing']['padding']['bottom'] ?? '0px',
'padding-left' => $paddingLeft, 'padding-left' => $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px',
'padding-right' => $paddingRight, 'padding-right' => $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px',
'padding-top' => $paddingTop, 'padding-top' => $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px',
]; ];
foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) { foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) {
if ($property === 'width') continue; // width is handled by the wrapping blocks (columns, column) if ($property === 'width') continue; // width is handled by the wrapping blocks (columns, column)
if ($property === 'margin-top') continue; // margin-top is set on the wrapping div co we need to avoid duplication
$styles[$property] = $value; $styles[$property] = $value;
} }
@@ -46,20 +44,17 @@ class Paragraph implements BlockRenderer {
$styles = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs'] ?? [])); $styles = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs'] ?? []));
return ' return '
<table <!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><![endif]-->
role="presentation" <div style="margin-top: ' . $marginTop . ';">
border="0" <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;"width="100%">
cellpadding="0" <tr>
cellspacing="0" <td style="' . $settingsController->convertStylesToString($styles) . '" align="' . $align . '">
style="width:100%;" {paragraph_content}
width="100%" </td>
> </tr>
<tr> </table>
<td style="' . $settingsController->convertStylesToString($styles) . '" align="' . $align . '"> </div>
{paragraph_content} <!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</table>
'; ';
} }