Add basic style for buttons

Default background rendering has to be handled on the button renderer level
because of a specific markup for Outlook (bgcolor attribute). Default text color and paddings are
handled via CSS inlining. That's why they are tested in RendererTest

I used the same background color and font color as the one defined for the button
element in WP core theme.json, and I also used similar padding values
(In core they use "calc(0.667em + 2px) calc(1.333em + 2px)")
[MAILPOET-5814]

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -183,16 +183,25 @@ class SettingsController {
 
   public function getStylesheetForRendering(): string {
     $emailThemeSettings = $this->getTheme()->get_settings();
-    $css = '';
+
+    $cssPresets = '';
     // Font family classes
     foreach ($emailThemeSettings['typography']['fontFamilies']['default'] as $fontFamily) {
-      $css .= ".has-{$fontFamily['slug']}-font-family { font-family: {$fontFamily['fontFamily']}; } \n";
+      $cssPresets .= ".has-{$fontFamily['slug']}-font-family { font-family: {$fontFamily['fontFamily']}; } \n";
     }
     // Font size classes
     foreach ($emailThemeSettings['typography']['fontSizes']['default'] as $fontSize) {
-      $css .= ".has-{$fontSize['slug']}-font-size { font-size: {$fontSize['size']}; } \n";
+      $cssPresets .= ".has-{$fontSize['slug']}-font-size { font-size: {$fontSize['size']}; } \n";
     }
-    return $css;
+
+    // Block specific styles
+    $cssBlocks = '';
+    $blocks = $this->getTheme()->get_styles_block_nodes();
+    foreach ($blocks as $blockMetadata) {
+      $cssBlocks .= $this->getTheme()->get_styles_for_block($blockMetadata);
+    }
+
+    return $cssPresets . $cssBlocks;
   }
 
   public function translateSlugToFontSize(string $fontSize): string {

mailpoet/lib/EmailEditor/Engine/theme.json

@@ -149,6 +149,23 @@
     "typography": {
       "fontFamily": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
       "fontSize": "16px"
+    },
+    "blocks": {
+      "core/button": {
+        "variations": {},
+        "color": {
+          "background": "#32373c",
+          "text": "#ffffff"
+        },
+        "spacing": {
+          "padding": {
+            "bottom": "0.7em",
+            "left": "1.4em",
+            "right": "1.4em",
+            "top": "0.7em"
+          }
+        }
+      }
     }
   }
 }

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

@@ -45,7 +45,9 @@ class Button implements BlockRenderer {
     $markup = str_replace('{width}', $width, $markup);
 
     // Background
-    $bgColor = $parsedBlock['attrs']['style']['color']['background'] ?? 'transparent';
+    $themeData = $settingsController->getTheme()->get_data();
+    $defaultColor = $themeData['styles']['blocks']['core/button']['color']['background'] ?? 'transparent';
+    $bgColor = $parsedBlock['attrs']['style']['color']['background'] ?? $defaultColor;
     $markup = str_replace('{backgroundColor}', $bgColor, $markup);
 
     // Styles attributes
@@ -85,12 +87,12 @@ class Button implements BlockRenderer {
       $linkStyles['padding-left'] = $padding['left'];
     }
 
-    // Typography
+    // Typography + colors
     $typography = $parsedBlock['attrs']['style']['typography'] ?? [];
+    $color = $parsedBlock['attrs']['style']['color'] ?? [];
     $typography['fontSize'] = $parsedBlock['email_attrs']['font-size'] ?? 'inherit';
     $typography['textDecoration'] = $typography['textDecoration'] ?? ($parsedBlock['email_attrs']['text-decoration'] ?? 'inherit');
-    $linkStyles = array_merge($linkStyles, wp_style_engine_get_styles(['typography' => $typography])['declarations']);
-    $linkStyles['color'] = $parsedBlock['email_attrs']['color'];
+    $linkStyles = array_merge($linkStyles, wp_style_engine_get_styles(['typography' => $typography, 'color' => $color])['declarations']);
 
     // Escaping
     $wrapperStyles = array_map('esc_attr', $wrapperStyles);
@@ -106,7 +108,7 @@ class Button implements BlockRenderer {
     return '<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;border-collapse:separate;line-height:100%;width:{width};">
         <tr>
           <td align="center" class="{classes}" bgcolor="{backgroundColor}" role="presentation" style="{wrapperStyles}" valign="middle">
-            <a href="{linkUrl}" style="{linkStyles}" target="_blank">{linkText}</a>
+            <a class="wp-block-button__link" href="{linkUrl}" style="{linkStyles}" target="_blank">{linkText}</a>
           </td>
         </tr>
       </table>';

mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php

@@ -140,4 +140,25 @@ class RendererTest extends \MailPoetTest {
     verify($style)->stringContainsString('padding-top:3px;');
     verify($style)->stringContainsString('padding-bottom:4px;');
   }
+
+  public function testItInlinesButtonDefaultStyles() {
+    $this->emailPost = new \WP_Post((object)[
+      'post_content' => '<!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button">Button</a></div><!-- /wp:button -->',
+    ]);
+    $rendered = $this->renderer->render($this->emailPost, 'Subject', '', 'en');
+    $doc = new \DOMDocument();
+    $doc->loadHTML($rendered['html']);
+    $xpath = new \DOMXPath($doc);
+    $nodes = $xpath->query('//td[contains(@class, "wp-block-button")]');
+    $button = null;
+    if (($nodes instanceof \DOMNodeList) && $nodes->length > 0) {
+      $button = $nodes->item(0);
+    }
+    $this->assertInstanceOf(\DOMElement::class, $button);
+    $this->assertInstanceOf(\DOMDocument::class, $button->ownerDocument);
+    $buttonHtml = $button->ownerDocument->saveHTML($button);
+    verify($buttonHtml)->stringContainsString('color:#ffffff');
+    verify($buttonHtml)->stringContainsString('padding:.7em 1.4em');
+    verify($buttonHtml)->stringContainsString('background:#32373c');
+  }
 }

mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php

@@ -156,4 +156,14 @@ class ButtonTest extends \MailPoetTest {
     verify($output)->stringContainsString('border-bottom-left-radius:3px;');
     verify($output)->stringContainsString('border-bottom-right-radius:4px;');
   }
+
+  public function testItRendersDefaultBackgroundColor(): void {
+    unset($this->parsedButton['attrs']['style']['color']);
+    unset($this->parsedButton['attrs']['style']['spacing']['padding']);
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    // Verify default background colors theme.json for email editor
+    // These can't be set via CSS inliner because of special email HTML markup
+    verify($output)->stringContainsString('bgcolor="#32373c"');
+    verify($output)->stringContainsString('background:#32373c;');
+  }
 }