Fix renderer styles

mailpoet/assets/js/src/email-editor/engine/hooks/use-email-css.ts

@@ -1,6 +1,6 @@
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { merge } from 'lodash';
+import deepmerge from 'deepmerge';
 import {
   // @ts-expect-error No types for this exist yet.
   privateApis as blockEditorPrivateApi,
@@ -21,7 +21,12 @@ export function useEmailCss() {
   );
 
   const mergedConfig = useMemo(
-    () => merge({}, editorTheme, templateTheme) as EmailStyles,
+    () =>
+      deepmerge.all([
+        {},
+        editorTheme || {},
+        templateTheme || {},
+      ]) as EmailStyles,
     [editorTheme, templateTheme],
   );
 

mailpoet/lib/EmailEditor/Engine/ThemeController.php

@@ -170,17 +170,21 @@ class ThemeController {
     foreach ($elementsStyles as $key => $elementsStyle) {
       $selector = $key;
 
-      if ($key === 'heading') {
-        $selector = 'h1, h2, h3, h4, h5, h6';
-      }
-
-      if ($key === 'link') {
-        // Target direct decendants of blocks to avoid styling buttons. :not() is not supported by the inliner.
-        $selector = 'p > a, div > a, li > a';
-      }
-
       if ($key === 'button') {
         $selector = '.wp-block-button';
+        $cssElements .= wp_style_engine_get_styles($elementsStyle, ['selector' => '.wp-block-button'])['css'];
+        // Add color to link element.
+        $cssElements .= wp_style_engine_get_styles(['color' => ['text' => $elementsStyle['color']['text'] ?? '']], ['selector' => '.wp-block-button a'])['css'];
+        continue;
+      }
+
+      switch ($key) {
+        case 'heading':
+          $selector = 'h1, h2, h3, h4, h5, h6';
+          break;
+        case 'link':
+          $selector = 'a:not(.button-link)';
+          break;
       }
 
       $cssElements .= wp_style_engine_get_styles($elementsStyle, ['selector' => $selector])['css'];

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

@@ -33,12 +33,15 @@ class Button extends AbstractBlockRenderer {
     ];
   }
 
+  public function render(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
+    return $this->renderContent($blockContent, $parsedBlock, $settingsController);
+  }
+
   protected function renderContent($blockContent, array $parsedBlock, SettingsController $settingsController): string {
     if (empty($parsedBlock['innerHTML'])) {
       return '';
     }
 
-    $themeData = $settingsController->getTheme()->get_data();
     $domHelper = new DomDocumentHelper($parsedBlock['innerHTML']);
     $blockClassname = $domHelper->getAttributeValueByTagName('div', 'class') ?? '';
     $buttonLink = $domHelper->findElement('a');
@@ -59,7 +62,6 @@ class Button extends AbstractBlockRenderer {
     ]);
 
     $blockStyles = array_replace_recursive(
-      $themeData['styles']['blocks']['core/button'] ?? [],
       [
         'color' => array_filter([
           'background' => $blockAttributes['backgroundColor'] ? $settingsController->translateSlugToColor($blockAttributes['backgroundColor']) : null,
@@ -80,7 +82,7 @@ class Button extends AbstractBlockRenderer {
       '<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width:%1$s;">
         <tr>
           <td align="%2$s" valign="middle" role="presentation" class="%3$s" style="%4$s">
-            <a class="%5$s" style="%6$s" href="%7$s" target="_blank">%8$s</a>
+            <a class="button-link %5$s" style="%6$s" href="%7$s" target="_blank">%8$s</a>
           </td>
         </tr>
       </table>',