Add group support w/ support for contentSize

mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ContentRenderer.php

@@ -87,15 +87,55 @@ class ContentRenderer {
    */
   private function inlineStyles($html, WP_Post $post) {
     $styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::CONTENT_STYLES_FILE);
+
+    // Apply default contentWidth to constrained blocks.
+    $layout = $this->settingsController->getLayout();
+    $styles .= sprintf(
+      '
+      .is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) {
+        max-width: %1$s;
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
+      .is-layout-constrained > .alignwide {
+        max-width: %2$s;
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
+      ',
+      $layout['contentSize'],
+      $layout['wideSize']
+    );
+
+    // Get styles from theme.
     $styles .= $this->themeController->getStylesheetForRendering($post);
+
+    $blockSupportStyles = \wp_style_engine_get_stylesheet_from_context('block-supports', []);
     // Get styles from block-supports stylesheet. This includes rules such as layout (contentWidth) that some blocks use.
     // @see https://github.com/WordPress/WordPress/blob/3c5da9c74344aaf5bf8097f2e2c6a1a781600e03/wp-includes/script-loader.php#L3134
     // @internal :where is not supported by emogrifier, so we need to replace it with *.
-    $styles .= str_replace(
+    $blockSupportStyles = str_replace(
       ':where(:not(.alignleft):not(.alignright):not(.alignfull))',
       '*:not(.alignleft):not(.alignright):not(.alignfull)',
-      \wp_style_engine_get_stylesheet_from_context('block-supports', [])
+      $blockSupportStyles
     );
+    // Layout CSS assumes the top level block will have a single DIV wrapper with children. Since our blocks use tables,
+    // we need to adjust this to look for children in the TD element. This may requires more advanced replacement but
+    // this works in the current version of Gutenberg.
+    // Example rule we're targetting: .wp-container-core-group-is-layout-1.wp-container-core-group-is-layout-1 > *
+    $blockSupportStyles = preg_replace(
+      '/group-is-layout-(\d+) >/',
+      'group-is-layout-$1 > tbody tr td >',
+      $blockSupportStyles
+    );
+
+    $styles .= $blockSupportStyles;
+
+    // Debugging for content styles. Remember these get inlined.
+    //echo '<pre>';
+    //var_dump($styles);
+    //echo '</pre>';
+
     $styles = '<style>' . wp_strip_all_tags((string)apply_filters('mailpoet_email_content_renderer_styles', $styles, $post)) . '</style>';
 
     return CssInliner::fromHtml($styles . $html)->inlineCss()->render();

mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css

@@ -45,7 +45,7 @@ body {
 }
 
 @media screen and (max-width: 660px) {
-  .email_column {
+  .email-block-column-content {
     max-width: 100% !important;
   }
   .block {

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -14,6 +14,7 @@ class SettingsController {
     'core/image',
     'core/list',
     'core/list-item',
+    'core/group',
   ];
 
   const DEFAULT_SETTINGS = [
@@ -66,11 +67,13 @@ class SettingsController {
   }
 
   /**
-   * @return array{contentSize: string, layout: string}
+   * @return array{contentSize: string, wideSize: string, layout: string}
    */
   public function getLayout(): array {
+    $settings = $this->getSettings();
     return [
-      'contentSize' => self::EMAIL_WIDTH,
+      'contentSize' => $settings['__experimentalFeatures']['layout']['contentSize'],
+      'wideSize' => $settings['__experimentalFeatures']['layout']['wideSize'],
       'layout' => 'constrained',
     ];
   }

mailpoet/lib/EmailEditor/Engine/theme.json

@@ -8,7 +8,8 @@
       "gradients": []
     },
     "layout": {
-      "contentSize": "660px"
+      "contentSize": "660px",
+      "wideSize": "660px"
     },
     "background": {
       "backgroundImage": true

mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php

@@ -24,6 +24,7 @@ class Initializer {
     $blocksRegistry->addBlockRenderer('core/image', new Renderer\Blocks\Image());
     $blocksRegistry->addBlockRenderer('core/buttons', new Renderer\Blocks\Buttons(new FlexLayoutRenderer()));
     $blocksRegistry->addBlockRenderer('core/button', new Renderer\Blocks\Button());
+    $blocksRegistry->addBlockRenderer('core/group', new Renderer\Blocks\Group());
   }
 
   /**

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

@@ -46,7 +46,7 @@ abstract class AbstractBlockRenderer implements BlockRenderer {
 
     return sprintf(
       '<!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%%" style="%2$s"><tr><td style="%3$s"><![endif]-->
-      <div class="block_layout" style="%2$s %3$s">%1$s</div>
+      <div class="email-block-layout" style="%2$s %3$s">%1$s</div>
       <!--[if mso | IE]></td></tr></table><![endif]-->',
       $content,
       esc_attr($gapStyle),

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

@@ -52,8 +52,8 @@ class Column extends AbstractBlockRenderer {
       $cellStyles['background-size'] = 'cover';
     }
 
-    $wrapperClassname = 'block wp-block-column';
+    $wrapperClassname = 'block wp-block-column email-block-column';
-    $contentClassname = 'email_column';
+    $contentClassname = 'email-block-column-content';
     $wrapperCSS = WP_Style_Engine::compile_css([
       'vertical-align' => $isStretched ? 'top' : $block_attributes['verticalAlignment'],
     ], '');

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

@@ -48,8 +48,10 @@ class Columns extends AbstractBlockRenderer {
       $columnsStyles['background-size'] = 'cover';
     }
 
-    $renderedColumns = '<table class="' . esc_attr('email_columns ' . $originalWrapperClassname) . '" style="width:100%;border-collapse:separate;text-align:left;' . esc_attr(WP_Style_Engine::compile_css($columnsStyles, '')) . '" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
+    $renderedColumns = '<table class="' . esc_attr('email-block-columns ' . $originalWrapperClassname) . '" style="width:100%;border-collapse:separate;text-align:left;' . esc_attr(WP_Style_Engine::compile_css($columnsStyles, '')) . '" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
-      <tr>{columns_content}</tr>
+      <tbody>
+        <tr>{columns_content}</tr>
+      </tbody>
     </table>';
 
     // Margins are not supported well in outlook for tables, so wrap in another table.
@@ -57,12 +59,14 @@ class Columns extends AbstractBlockRenderer {
 
     if (!empty($margins)) {
       $marginToPaddingStyles = $this->getStylesFromBlock([
-        'spacing' => [ 'padding' => $margins ],
+        'spacing' => [ 'margin' => $margins ],
       ])['css'];
-      $renderedColumns = '<table class="email_columns_wrapper" style="width:100%;border-collapse:separate;text-align:left;' . esc_attr($marginToPaddingStyles) . '" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
+      $renderedColumns = '<table class="email-block-columns-wrapper" style="width:100%;border-collapse:separate;text-align:left;' . esc_attr($marginToPaddingStyles) . '" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
-        <tr>
+        <tbody>
-          <td>' . $renderedColumns . '</td>
+          <tr>
-        </tr>
+            <td>' . $renderedColumns . '</td>
+          </tr>
+        </tbody>
       </table>';
     }
 

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

@@ -0,0 +1,76 @@
+<?php declare(strict_types = 1);
+
+namespace MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks;
+
+use MailPoet\EmailEditor\Engine\SettingsController;
+use MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks\AbstractBlockRenderer;
+use MailPoet\EmailEditor\Integrations\Utils\DomDocumentHelper;
+use WP_Style_Engine;
+
+class Group extends AbstractBlockRenderer {
+  protected function renderContent(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
+    $content = '';
+    $innerBlocks = $parsedBlock['innerBlocks'] ?? [];
+
+    foreach ($innerBlocks as $block) {
+      $content .= render_block($block);
+    }
+
+    return str_replace(
+      '{group_content}',
+      $content,
+      $this->getBlockWrapper($blockContent, $parsedBlock, $settingsController)
+    );
+  }
+
+  private function getBlockWrapper(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
+    $originalClassname = (new DomDocumentHelper($blockContent))->getAttributeValueByTagName('div', 'class') ?? '';
+    $blockAttributes = wp_parse_args($parsedBlock['attrs'] ?? [], [
+      'style' => [],
+      'backgroundColor' => '',
+      'textColor' => '',
+      'borderColor' => '',
+      'layout' => [
+        'justifyContent' => '',
+      ],
+    ]);
+
+    // Layout, background, borders need to be on the outer table element.
+    $tableStyles = $this->getStylesFromBlock([
+      'color' => array_filter([
+        'background' => $blockAttributes['backgroundColor'] ? $settingsController->translateSlugToColor($blockAttributes['backgroundColor']) : null,
+        'text' => $blockAttributes['textColor'] ? $settingsController->translateSlugToColor($blockAttributes['textColor']) : null,
+        'border' => $blockAttributes['borderColor'] ? $settingsController->translateSlugToColor($blockAttributes['borderColor']) : null,
+      ]),
+      'background' => $blockAttributes['style']['background'] ?? [],
+      'border' => $blockAttributes['style']['border'] ?? [],
+      'spacing' => [ 'padding' => $blockAttributes['style']['spacing']['margin'] ?? [] ],
+    ])['declarations'];
+
+    // Padding properties need to be added to the table cell.
+    $cellStyles = $this->getStylesFromBlock([
+      'spacing' => [ 'padding' => $blockAttributes['style']['spacing']['padding'] ?? [] ],
+    ])['declarations'];
+
+    if (empty($tableStyles['background-size'])) {
+      $tableStyles['background-size'] = 'cover';
+    }
+
+    return sprintf(
+      '<table class="email-block-group %3$s" style="%1$s" width="100%%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
+        <tbody>
+          <tr>
+            <td class="email-block-group-content" style="%2$s" align="%4$s" width="%5$s">
+              {group_content}
+            </td>
+          </tr>
+        </tbody>
+      </table>',
+      esc_attr(WP_Style_Engine::compile_css($tableStyles, '')),
+      esc_attr(WP_Style_Engine::compile_css($cellStyles, '')),
+      esc_attr($originalClassname),
+      esc_attr($blockAttributes['layout']['justifyContent'] ?: 'center'),
+      esc_attr($parsedBlock['email_attrs']['width'] ?: '100%'),
+    );
+  }
+}

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

@@ -50,7 +50,6 @@ class Text extends AbstractBlockRenderer {
             border="0"
             cellpadding="0"
             cellspacing="0"
-            style="min-width: 100%%;"
             width="100%%"
           >
             <tr>

mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php

@@ -3,6 +3,7 @@
 namespace MailPoet\EmailEditor\Integrations\MailPoet\Blocks\BlockTypes;
 
 use MailPoet\Config\Env;
+use WP_Style_Engine;
 
 abstract class AbstractBlock {
   protected $namespace = 'mailpoet';
@@ -92,5 +93,23 @@ abstract class AbstractBlock {
     return $key ? $style[$key] : $style;
   }
 
+  protected function addSpacer($content, $emailAttrs): string {
+    $gapStyle = WP_Style_Engine::compile_css(array_intersect_key($emailAttrs, array_flip(['margin-top'])), '');
+    $paddingStyle = WP_Style_Engine::compile_css(array_intersect_key($emailAttrs, array_flip(['padding-left', 'padding-right'])), '');
+
+    if (!$gapStyle && !$paddingStyle) {
+      return $content;
+    }
+
+    return sprintf(
+      '<!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%%" style="%2$s"><tr><td style="%3$s"><![endif]-->
+      <div class="email-block-layout" style="%2$s %3$s">%1$s</div>
+      <!--[if mso | IE]></td></tr></table><![endif]-->',
+      $content,
+      esc_attr($gapStyle),
+      esc_attr($paddingStyle)
+    );
+  }
+
   abstract public function render($attributes, $content, $block);
 }

mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/PoweredByMailpoet.php

@@ -26,10 +26,10 @@ class PoweredByMailpoet extends AbstractBlock {
     $logo = $attributes['logo'] ?? 'default';
     $logoUrl = $this->cdnAssetUrl->generateCdnUrl('email-editor/logo-' . $logo . '.png');
 
-    return sprintf(
+    return $this->addSpacer(sprintf(
       '<div class="%1$s" style="text-align:center">%2$s</div>',
       esc_attr('wp-block-' . $this->blockName),
       '<img src="' . esc_attr($logoUrl) . '" alt="Powered by MailPoet" width="100px" />'
-    );
+    ), $block->parsed_block['email_attrs'] ?? []); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
   }
 }