Add support for the site theme's color palette

[MAILPOET-5741]

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -54,7 +54,7 @@ class SettingsController {
   public function getSettings(): array {
     $coreDefaultSettings = get_default_block_editor_settings();
     $editorTheme = $this->getTheme();
-    $themeSettings = $editorTheme->get_settings();
+    $themeSettings = $this->themeController->getSettings();
 
     // body selector is later transformed to .editor-styles-wrapper
     // setting padding for bottom and top is needed because \WP_Theme_JSON::get_stylesheet() set them only for .wp-site-blocks selector

mailpoet/lib/EmailEditor/Engine/ThemeController.php

@@ -25,8 +25,18 @@ class ThemeController {
     return $this->themeJson;
   }
 
+  public function getSettings(): array {
+    $emailEditorThemeSettings = $this->getTheme()->get_settings();
+    $siteThemeSettings = WP_Theme_JSON_Resolver::get_theme_data()->get_settings();
+    $emailEditorThemeSettings['color']['palette']['theme'] = [];
+    if (isset($siteThemeSettings['color']['palette']['theme'])) {
+      $emailEditorThemeSettings['color']['palette']['theme'] = $siteThemeSettings['color']['palette']['theme'];
+    }
+    return $emailEditorThemeSettings;
+  }
+
   public function getStylesheetForRendering(): string {
-    $emailThemeSettings = $this->getTheme()->get_settings();
+    $emailThemeSettings = $this->getSettings();
 
     $cssPresets = '';
     // Font family classes
@@ -38,7 +48,8 @@ class ThemeController {
       $cssPresets .= ".has-{$fontSize['slug']}-font-size { font-size: {$fontSize['size']}; } \n";
     }
     // Color palette classes
-    foreach ($emailThemeSettings['color']['palette']['default'] as $color) {
+    $colorDefinitions = array_merge($emailThemeSettings['color']['palette']['theme'], $emailThemeSettings['color']['palette']['default']);
+    foreach ($colorDefinitions as $color) {
       $cssPresets .= ".has-{$color['slug']}-color { color: {$color['color']}; } \n";
       $cssPresets .= ".has-{$color['slug']}-background-color { background-color: {$color['color']}; } \n";
     }
@@ -54,7 +65,7 @@ class ThemeController {
   }
 
   public function translateSlugToFontSize(string $fontSize): string {
-    $settings = $this->getTheme()->get_settings();
+    $settings = $this->getSettings();
     foreach ($settings['typography']['fontSizes']['default'] as $fontSizeDefinition) {
       if ($fontSizeDefinition['slug'] === $fontSize) {
         return $fontSizeDefinition['size'];
@@ -64,10 +75,11 @@ class ThemeController {
   }
 
   public function translateSlugToColor(string $colorSlug): string {
-    $settings = $this->getTheme()->get_settings();
+    $settings = $this->getSettings();
-    foreach ($settings['color']['palette']['default'] as $colorDefinition) {
+    $colorDefinitions = array_merge($settings['color']['palette']['theme'], $settings['color']['palette']['default']);
+    foreach ($colorDefinitions as $colorDefinition) {
       if ($colorDefinition['slug'] === $colorSlug) {
-        return $colorDefinition['color'];
+        return strtolower($colorDefinition['color']);
       }
     }
     return $colorSlug;

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

@@ -12,6 +12,7 @@ class ThemeControllerTest extends \MailPoetTest {
 
   public function testItGeneratesCssStylesForRenderer() {
     $css = $this->themeController->getStylesheetForRendering();
+    // Font families
     verify($css)->stringContainsString('.has-arial-font-family');
     verify($css)->stringContainsString('.has-comic-sans-ms-font-family');
     verify($css)->stringContainsString('.has-courier-new-font-family');
@@ -39,6 +40,25 @@ class ThemeControllerTest extends \MailPoetTest {
     verify($css)->stringContainsString('.has-medium-font-size');
     verify($css)->stringContainsString('.has-large-font-size');
     verify($css)->stringContainsString('.has-x-large-font-size');
+
+    // Font sizes
+    verify($css)->stringContainsString('.has-small-font-size');
+    verify($css)->stringContainsString('.has-medium-font-size');
+    verify($css)->stringContainsString('.has-large-font-size');
+    verify($css)->stringContainsString('.has-x-large-font-size');
+
+    // Colors
+    verify($css)->stringContainsString('.has-black-color');
+    verify($css)->stringContainsString('.has-black-background-color');
+
+    verify($css)->stringContainsString('.has-black-color');
+    verify($css)->stringContainsString('.has-black-background-color');
+
+    $this->checkCorrectThemeConfiguration();
+    if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
+      verify($css)->stringContainsString('.has-yellow-background-color');
+      verify($css)->stringContainsString('.has-yellow-color');
+    }
   }
 
   public function testItCanTranslateFontSizeSlug() {
@@ -54,5 +74,29 @@ class ThemeControllerTest extends \MailPoetTest {
     verify($this->themeController->translateSlugToColor('white'))->equals('#ffffff');
     verify($this->themeController->translateSlugToColor('cyan-bluish-gray'))->equals('#abb8c3');
     verify($this->themeController->translateSlugToColor('pale-pink'))->equals('#f78da7');
+    $this->checkCorrectThemeConfiguration();
+    if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
+      verify($this->themeController->translateSlugToColor('yellow'))->equals('#eeeadd');
+    }
+  }
+
+  public function testItLoadsColorPaletteFromSiteTheme() {
+    $this->checkCorrectThemeConfiguration();
+    $settings = $this->themeController->getSettings();
+    if (wp_get_theme()->get('Name') === 'Twenty Twenty-One') {
+      verify($settings['color']['palette']['theme'])->notEmpty();
+    }
+  }
+
+  /**
+   * This test depends on using Twenty Twenty-One or Twenty Nineteen theme.
+   * This method checks if the theme is correctly configured and trigger a failure if not
+   * to prevent silent failures in case we change theme configuration in the test environment.
+   */
+  private function checkCorrectThemeConfiguration() {
+    $expectedThemes = ['Twenty Twenty-One', 'Twenty Nineteen'];
+    if (!in_array(wp_get_theme()->get('Name'), $expectedThemes)) {
+      $this->fail('Test depends on using Twenty Twenty-One or Twenty Nineteen theme. If you changed the theme, please update the test.');
+    }
   }
 }