Add colors from palette support to the button

[MAILPOET-5741]

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -188,4 +188,14 @@ class SettingsController {
     }
     return $fontSize;
   }
+
+  public function translateSlugToColor(string $colorSlug): string {
+    $settings = $this->getTheme()->get_settings();
+    foreach ($settings['color']['palette']['default'] as $colorDefinition) {
+      if ($colorDefinition['slug'] === $colorSlug) {
+        return $colorDefinition['color'];
+      }
+    }
+    return $colorSlug;
+  }
 }

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

@@ -44,7 +44,9 @@ class Button implements BlockRenderer {
     // Background
     $themeData = $settingsController->getTheme()->get_data();
     $defaultColor = $themeData['styles']['blocks']['core/button']['color']['background'] ?? 'transparent';
-    $bgColor = $parsedBlock['attrs']['style']['color']['background'] ?? $defaultColor;
+    $colorSetBySlug = isset($parsedBlock['attrs']['backgroundColor']) ? $settingsController->translateSlugToColor($parsedBlock['attrs']['backgroundColor']) : null;
+    $colorSetByUser = $colorSetBySlug ?: ($parsedBlock['attrs']['style']['color']['background'] ?? null);
+    $bgColor = $colorSetByUser ?? $defaultColor;
     $markup = str_replace('{backgroundColor}', $bgColor, $markup);
 
     // Styles attributes
@@ -55,6 +57,7 @@ class Button implements BlockRenderer {
       'box-sizing' => 'border-box',
     ];
     $linkStyles = [
+      'background-color' => $bgColor,
       'display' => 'block',
       'line-height' => '120%',
       'margin' => '0',
@@ -87,6 +90,10 @@ class Button implements BlockRenderer {
     // Typography + colors
     $typography = $parsedBlock['attrs']['style']['typography'] ?? [];
     $color = $parsedBlock['attrs']['style']['color'] ?? [];
+    $colorSetBySlug = isset($parsedBlock['attrs']['textColor']) ? $settingsController->translateSlugToColor($parsedBlock['attrs']['textColor']) : null;
+    if ($colorSetBySlug) {
+      $color['text'] = $colorSetBySlug;
+    }
     $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, 'color' => $color])['declarations']);

mailpoet/tests/integration/EmailEditor/Engine/SettingsControllerTest.php

@@ -49,4 +49,11 @@ class SettingsControllerTest extends \MailPoetTest {
     verify($this->settingsController->translateSlugToFontSize('x-large'))->equals('42px');
     verify($this->settingsController->translateSlugToFontSize('unknown'))->equals('unknown');
   }
+
+  public function testItCanTranslateColorSlug() {
+    verify($this->settingsController->translateSlugToColor('black'))->equals('#000000');
+    verify($this->settingsController->translateSlugToColor('white'))->equals('#ffffff');
+    verify($this->settingsController->translateSlugToColor('cyan-bluish-gray'))->equals('#abb8c3');
+    verify($this->settingsController->translateSlugToColor('pale-pink'))->equals('#f78da7');
+  }
 }

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

@@ -166,4 +166,26 @@ class ButtonTest extends \MailPoetTest {
     verify($output)->stringContainsString('bgcolor="#32373c"');
     verify($output)->stringContainsString('background:#32373c;');
   }
+
+  public function testItRendersBackgroundColorSetBySlug(): void {
+    unset($this->parsedButton['attrs']['style']['color']);
+    unset($this->parsedButton['attrs']['style']['spacing']['padding']);
+    $this->parsedButton['attrs']['backgroundColor'] = 'black';
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    // For other blocks this is handled by CSS-inliner, but for button we need to handle it manually
+    // because of special email HTML markup
+    verify($output)->stringContainsString('bgcolor="#000000"');
+    verify($output)->stringContainsString('background:#000000;');
+    verify($output)->stringContainsString('background-color:#000000;');
+  }
+
+  public function testItRendersFontColorSetBySlug(): void {
+    unset($this->parsedButton['attrs']['style']['color']);
+    unset($this->parsedButton['attrs']['style']['spacing']['padding']);
+    $this->parsedButton['attrs']['textColor'] = 'white';
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    // For other blocks this is handled by CSS-inliner, but for button we need to handle it manually
+    // because of special email HTML markup
+    verify($output)->stringContainsString('color:#ffffff');
+  }
 }

mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/RendererTest.php

@@ -28,6 +28,17 @@ class RendererTest extends \MailPoetTest {
     verify($buttonHtml)->stringContainsString('background:#32373c');
   }
 
+  public function testButtonDefaultStylesDontOverwriteUserSetStyles() {
+    $emailPost = new \WP_Post((object)[
+      'post_content' => '<!-- wp:button {"backgroundColor":"white","textColor":"vivid-cyan-blue"} --><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($emailPost, 'Subject', '', 'en');
+    $buttonHtml = $this->extractBlockHtml($rendered['html'], 'wp-block-button', 'td');
+    verify($buttonHtml)->stringContainsString('color:#0693e3');
+    verify($buttonHtml)->stringContainsString('background:#ffffff');
+    verify($buttonHtml)->stringContainsString('background-color:#ffffff');
+  }
+
   public function testItInlinesHeadingFontSize() {
     $emailPost = new \WP_Post((object)[
       'post_content' => '<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"large"}}} --><h1 class="wp-block-heading">Hello</h1><!-- /wp:heading -->',