Implement margin-top for core block renderers

[MAILPOET-5816]

mailpoet/lib/EmailEditor/Engine/Renderer/Layout/FlexLayoutRenderer.php

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

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php

@@ -29,6 +29,7 @@ class Columns implements BlockRenderer {
     $paddingLeft = $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px';
     $paddingRight = $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px';
     $paddingTop = $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px';
+    $marginTop = $parsedBlock['email_attrs']['margin-top'] ?? '0px';
 
     $align = $parsedBlock['attrs']['align'] ?? null;
     if ($align !== 'full') {
@@ -41,8 +42,15 @@ class Columns implements BlockRenderer {
 
     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]-->
-      <div style="margin:0px auto;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%;">
+      <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%;"
+        >
           <tbody>
             <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;">

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Heading.php

@@ -19,30 +19,29 @@ class Heading implements BlockRenderer {
   private function getBlockWrapper(array $parsedBlock, SettingsController $settingsController): string {
 
     $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
-    $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 = [
       'background-color' => $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent',
       'min-width' => '100%', // prevent Gmail App from shrinking the table on mobile devices
-      'padding-bottom' => $paddingBottom,
-      'padding-left' => $paddingLeft,
-      'padding-right' => $paddingRight,
-      'padding-top' => $paddingTop,
+      'padding-bottom' => $parsedBlock['attrs']['style']['spacing']['padding']['bottom'] ?? '0px',
+      'padding-left' => $parsedBlock['attrs']['style']['spacing']['padding']['left'] ?? '0px',
+      'padding-right' => $parsedBlock['attrs']['style']['spacing']['padding']['right'] ?? '0px',
+      'padding-top' => $parsedBlock['attrs']['style']['spacing']['padding']['top'] ?? '0px',
     ];
 
     foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) {
       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 = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs']));
 
     return '
+      <!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><![endif]-->
+        <div style="margin-top: ' . $marginTop . ';">
           <table
             role="presentation"
             border="0"
@@ -57,6 +56,8 @@ class Heading implements BlockRenderer {
               </td>
             </tr>
           </table>
+        </div>
+      <!--[if mso | IE]></td></tr></table><![endif]-->
     ';
   }
 

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php

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

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/ListBlock.php

@@ -28,7 +28,21 @@ class ListBlock implements BlockRenderer {
       $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
-    return str_replace(''', "'", $blockContent);
+    $blockContent = str_replace(''', "'", $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>';
   }
 }

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Paragraph.php

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