Add group support w/ support for contentSize

2024-05-10 14:04:01 +01:00
parent 4ee81fdd35
commit d20b4bb6c9
12 changed files with 162 additions and 19 deletions
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/ContentRenderer/ContentRenderer.php
+++ b/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();
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/template-canvas.css
+++ b/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 {
--- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php
+++ b/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',
    ];
  }
--- a/mailpoet/lib/EmailEditor/Engine/theme.json
+++ b/mailpoet/lib/EmailEditor/Engine/theme.json
@@ -8,7 +8,8 @@
      "gradients": []
    },
    "layout": {
-      "contentSize": "660px"
+      "contentSize": "660px",
+      "wideSize": "660px"
    },
    "background": {
      "backgroundImage": true
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php
+++ b/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());
  }

  /**
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/AbstractBlockRenderer.php
+++ b/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),
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Column.php
+++ b/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';
-    $contentClassname = 'email_column';
+    $wrapperClassname = 'block wp-block-column email-block-column';
+    $contentClassname = 'email-block-column-content';
    $wrapperCSS = WP_Style_Engine::compile_css([
      'vertical-align' => $isStretched ? 'top' : $block_attributes['verticalAlignment'],
    ], '');
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
+++ b/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">
-      <tr>{columns_content}</tr>
+    $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">
+      <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">
-        <tr>
-          <td>' . $renderedColumns . '</td>
-        </tr>
+      $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">
+        <tbody>
+          <tr>
+            <td>' . $renderedColumns . '</td>
+          </tr>
+        </tbody>
      </table>';
    }

--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Group.php
+++ b/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%'),
+    );
+  }
+}
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Text.php
+++ b/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>
--- a/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php
+++ b/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);
 }
--- a/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/PoweredByMailpoet.php
+++ b/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
  }
 }