diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php index a4ccf5e21a..92153dbe69 100644 --- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php +++ b/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; + } } diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php index 61936ca4fb..b7bf632edc 100644 --- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php +++ b/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']); diff --git a/mailpoet/tests/integration/EmailEditor/Engine/SettingsControllerTest.php b/mailpoet/tests/integration/EmailEditor/Engine/SettingsControllerTest.php index d1a447608a..ebfa79f230 100644 --- a/mailpoet/tests/integration/EmailEditor/Engine/SettingsControllerTest.php +++ b/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'); + } } diff --git a/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php b/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php index cd0b421120..1585c914b8 100644 --- a/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php +++ b/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'); + } } diff --git a/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/RendererTest.php b/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/RendererTest.php index bc809e8c9d..7312aef597 100644 --- a/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/RendererTest.php +++ b/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' => '
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' => '

Hello

',