Move maybeConvertPreset functionality to theme controller

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

@@ -102,7 +102,7 @@ export const useEmailStyles = (): EmailStylesData => {
   );
 
   return {
-    styles: deepmerge.all([defaultStyles, styles]),
+    styles: deepmerge.all([defaultStyles || {}, styles || {}]),
     defaultStyles,
     updateStyleProp,
     updateStyles,

mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php

@@ -37,20 +37,6 @@ class Renderer {
     return self::$theme;
   }
 
-  public static function maybeConvertPreset($value, $variables) {
-    if (is_string($value) && strstr($value, 'var:preset|color|')) {
-        $value = str_replace('var:preset|color|', '', $value);
-        $value = sprintf('var(--wp--preset--color--%s)', $value);
-    }
-
-    foreach ($variables as $varName => $varValue) {
-      $varPattern = '/var\(' . preg_quote($varName, '/') . '\)/i';
-      $value = preg_replace($varPattern, $varValue, $value);
-    }
-
-    return $value;
-  }
-
   public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array {
     $templateId = 'mailpoet/mailpoet//' . (get_page_template_slug($post) ?: 'email-general');
     $template = $this->templates->getBlockTemplate($templateId);
@@ -59,8 +45,7 @@ class Renderer {
     // Set the theme for the template. This is merged with base theme.json and core json before rendering.
     self::$theme = new WP_Theme_JSON($theme, 'default');
 
-    $emailStyles = $this->themeController->getStyles($post, $template);
+    $emailStyles = $this->themeController->getStyles($post, $template, true);
-    $variables = $this->themeController->getVariablesValuesMap();
     $templateHtml = $this->contentRenderer->render($post, $template);
 
     ob_start();
@@ -70,8 +55,8 @@ class Renderer {
     $templateStyles =
     WP_Style_Engine::compile_css(
       [
-            'background-color' => $this->maybeConvertPreset($emailStyles['color']['background'] ?? 'inherit', $variables),
+            'background-color' => $emailStyles['color']['background'] ?? 'inherit',
-            'color' => $this->maybeConvertPreset($emailStyles['color']['text'] ?? 'inherit', $variables),
+            'color' => $emailStyles['color']['text'] ?? 'inherit',
             'padding-top' => $emailStyles['spacing']['padding']['top'] ?? '0px',
             'padding-bottom' => $emailStyles['spacing']['padding']['bottom'] ?? '0px',
             'font-family' => $emailStyles['typography']['fontFamily'] ?? 'inherit',

mailpoet/lib/EmailEditor/Engine/ThemeController.php

@@ -32,6 +32,42 @@ class ThemeController {
   }
 
   /**
+   * Convert compressed format presets to valid CSS values.
+   *
+   * @param string $value Value to convert.
+   * @param array $presets List of variable presets from theme.json
+   * @return mixed Converted or original value.
+   */
+  private function maybeConvertPreset($value, $presets) {
+    if (!is_string($value)) {
+      return $value;
+    }
+
+    if (strstr($value, 'var:preset|color|')) {
+        $value = str_replace('var:preset|color|', '', $value);
+        $value = sprintf('var(--wp--preset--color--%s)', $value);
+    }
+
+    return preg_replace(array_keys($presets), array_values($presets), $value);
+  }
+
+  private function recursiveReplacePresets($values, $presets) {
+    foreach ($values as $key => $value) {
+      if (is_array($value)) {
+        $values[$key] = $this->recursiveReplacePresets($value, $presets);
+      } else {
+        $values[$key] = self::maybeConvertPreset($value, $presets);
+      }
+    }
+    return $values;
+  }
+
+  /**
+   * Get styles for the e-mail.
+   *
+   * @param \WP_Post|null $post Post object.
+   * @param \WP_Block_Template|null $template Template object.
+   * @param bool $convertPresets Convert presets to valid CSS values.
    * @return array{
    *   spacing: array{
    *     blockGap: string,
@@ -45,7 +81,7 @@ class ThemeController {
    *   }
    * }
    */
-  public function getStyles($post = null, $template = null): array {
+  public function getStyles($post = null, $template = null, $convertPresets = false): array {
     $themeStyles = $this->getTheme()->get_data()['styles'];
 
     // Replace template styles.
@@ -55,6 +91,19 @@ class ThemeController {
       $themeStyles = array_replace_recursive($themeStyles, $templateStyles);
     }
 
+    // Replace preset values.
+    if ($convertPresets) {
+      $variables = $this->getVariablesValuesMap();
+      $presets = [];
+
+      foreach ($variables as $varName => $varValue) {
+        $varPattern = '/var\(' . preg_quote($varName, '/') . '\)/i';
+        $presets[$varPattern] = $varValue;
+      }
+
+      $themeStyles = $this->recursiveReplacePresets($themeStyles, $presets);
+    }
+
     return $themeStyles;
   }