Add support for creating styles from block attributes e.g., text alignment styles

MAILPOET-5643

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -91,6 +91,8 @@ class SettingsController {
     ],
   ];
 
+  private $availableStylesheets = '';
+
   public function getSettings(): array {
     $coreDefaultSettings = get_default_block_editor_settings();
     $coreThemeData = \WP_Theme_JSON_Resolver::get_core_data();
@@ -113,6 +115,13 @@ class SettingsController {
     return self::DEFAULT_EMAIL_CONTENT_STYLES;
   }
 
+  public function getAvailableStylesheets(): string {
+    if ($this->availableStylesheets) return $this->availableStylesheets;
+    $coreThemeData = \WP_Theme_JSON_Resolver::get_core_data();
+    $this->availableStylesheets = $coreThemeData->get_stylesheet();
+    return $this->availableStylesheets;
+  }
+
   /**
    * @return array{width: string, background: string, padding: array{bottom: string, left: string, right: string, top: string}}
    */

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

@@ -4,17 +4,19 @@ namespace MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks;
 
 use MailPoet\EmailEditor\Engine\Renderer\BlockRenderer;
 use MailPoet\EmailEditor\Engine\SettingsController;
+use MailPoet\Util\Helpers;
 
 class Heading implements BlockRenderer {
   public function render($blockContent, array $parsedBlock, SettingsController $settingsController): string {
     $contentStyles = $settingsController->getEmailContentStyles();
-    return str_replace('{heading_content}', $blockContent, $this->getBlockWrapper($parsedBlock, $contentStyles));
+    $availableStylesheets = $settingsController->getAvailableStylesheets();
+    return str_replace('{heading_content}', $blockContent, $this->getBlockWrapper($parsedBlock, $contentStyles, $availableStylesheets));
   }
 
   /**
    * Based on MJML <mj-text>
    */
-  private function getBlockWrapper(array $parsedBlock, array $contentStyles): string {
+  private function getBlockWrapper(array $parsedBlock, array $contentStyles, ?string $availableStylesheets): string {
     $styles = [];
     foreach ($parsedBlock['email_attrs'] ?? [] as $property => $value) {
       $styles[$property] = $value;
@@ -27,6 +29,8 @@ class Heading implements BlockRenderer {
       $styles['font-family'] = $contentStyles['typography']['fontFamily'];
     }
 
+    $styles = array_merge($styles, $this->fetchStylesFromBlockAttrs($availableStylesheets, $parsedBlock['attrs']));
+
     return '
       <table
         role="presentation"
@@ -51,4 +55,53 @@ class Heading implements BlockRenderer {
     }
     return trim($cssString); // Remove trailing space and return the formatted string
   }
+
+  private function fetchStylesFromBlockAttrs(?string $availableStylesheets, array $attrs = []): array {
+    $styles = [];
+
+    $supportedValues = ['textAlign'];
+
+    foreach ($supportedValues as $supportedValue) {
+      if (array_key_exists($supportedValue, $attrs)) {
+        $styles[Helpers::camelCaseToKebabCase($supportedValue)] = $attrs[$supportedValue];
+      }
+    }
+
+    // using custom rules because colors do not automatically resolve to hex value
+    $supportedColorValues = ['backgroundColor', 'textColor'];
+    foreach ($supportedColorValues as $supportedColorValue) {
+      if (array_key_exists($supportedColorValue, $attrs)) {
+        $colorKey = $attrs[$supportedColorValue];
+
+        $cssString = $availableStylesheets ?? '';
+
+        $colorRegex = "/--wp--preset--color--$colorKey: (#[0-9a-fA-F]{6});/";
+
+        // fetch color hex from available stylesheets
+        preg_match($colorRegex, $cssString, $colorMatch);
+
+        $colorValue = '';
+        if ($colorMatch) {
+          $colorValue = $colorMatch[1];
+        }
+
+        if ($supportedColorValue === 'textColor') {
+          $styles['color'] = $colorValue; // use color instead of textColor. textColor not valid CSS property
+        } else {
+          $styles[Helpers::camelCaseToKebabCase($supportedColorValue)] = $colorValue;
+        }
+
+      }
+    }
+
+    // fetch Block Style Typography e.g., fontStyle, fontWeight, etc
+    if (isset($attrs['style']['typography'])) {
+      $blockStyleTypographyKeys = array_keys($attrs['style']['typography']);
+      foreach ($blockStyleTypographyKeys as $blockStyleTypographyKey) {
+        $styles[Helpers::camelCaseToKebabCase($blockStyleTypographyKey)] = $attrs['style']['typography'][$blockStyleTypographyKey];
+      }
+    }
+
+    return $styles;
+  }
 }

mailpoet/lib/Util/Helpers.php

@@ -82,6 +82,13 @@ class Helpers {
     }, $str);
   }
 
+  public static function camelCaseToKebabCase($str) {
+    $str[0] = strtolower($str[0]);
+    return preg_replace_callback('/([A-Z])/', function ($c) {
+      return "-" . strtolower($c[1]);
+    }, $str);
+  }
+
   public static function joinObject($object = []) {
     return implode(self::DIVIDER, $object);
   }