Move heading styles from CSS file to theme.json

Because we want to have all editor configurations in theme.json, I moved heading font sized to theme.json and removed redundant filters.
[MAILPOET-5640]

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

@@ -38,7 +38,6 @@ class Renderer {
     $renderedBody = $this->contentRenderer->render($post);
 
     $styles = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_STYLES_FILE);
-    $styles = apply_filters('mailpoet_email_renderer_styles', $styles, $post);
 
     $template = (string)file_get_contents(dirname(__FILE__) . '/' . self::TEMPLATE_FILE);
 

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -73,8 +73,6 @@ class SettingsController {
       ['css' => $flexEmailLayoutStyles],
     ];
 
-    $settings['styles'] = apply_filters('mailpoet_email_editor_editor_styles', $settings['styles']);
-
     $settings['__experimentalFeatures'] = $themeSettings;
 
     // Enabling alignWide allows full width for specific blocks such as columns, heading, image, etc.

mailpoet/lib/EmailEditor/Engine/ThemeController.php

@@ -62,7 +62,22 @@ class ThemeController {
       $cssBlocks .= $this->getTheme()->get_styles_for_block($blockMetadata);
     }
 
-    return $cssPresets . $cssBlocks;
+    // Element specific styles
+    // Because the section styles is not a part of the output the `get_styles_block_nodes` method, we need to get it separately
+    $elementsStyles = $this->getTheme()->get_raw_data()['styles']['elements'] ?? [];
+    $cssElements = '';
+    foreach ($elementsStyles as $key => $elementsStyle) {
+      $styles = wp_style_engine_get_styles($elementsStyle);
+      $cssElements .= "{$key} {{$styles['css']}} \n";
+    }
+
+    $result = $cssPresets . $cssBlocks . $cssElements;
+    // Because font-size can by defined by the clamp() function that is not supported in the e-mail clients, we need to replace it to the value.
+    // Regular expression to match clamp() function and capture its max value
+    $pattern = '/clamp\([^,]+,\s*[^,]+,\s*([^)]+)\)/';
+    // Replace clamp() with its maximum value
+    $result = (string)preg_replace($pattern, '$1', $result);
+    return $result;
   }
 
   public function translateSlugToFontSize(string $fontSize): string {

mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php

@@ -9,8 +9,6 @@ class Initializer {
   public function initialize(): void {
     add_action('mailpoet_blocks_renderer_initialized', [$this, 'registerCoreBlocksRenderers'], 10, 1);
     add_filter('mailpoet_email_editor_theme_json', [$this, 'adjustThemeJson'], 10, 1);
-    add_filter('mailpoet_email_editor_editor_styles', [$this, 'addEditorStyles'], 10, 1);
-    add_filter('mailpoet_email_content_renderer_styles', [$this, 'addRendererStyles'], 10, 1);
   }
 
   /**
@@ -37,16 +35,4 @@ class Initializer {
     $editorThemeJson->merge(new \WP_Theme_JSON($themeJson, 'default'));
     return $editorThemeJson;
   }
-
-  public function addEditorStyles(array $styles) {
-    $declaration = (string)file_get_contents(dirname(__FILE__) . '/styles.css');
-    $styles[] = ['css' => $declaration];
-    return $styles;
-  }
-
-  public function addRendererStyles(string $styles) {
-    $declaration = (string)file_get_contents(dirname(__FILE__) . '/styles.css');
-    $styles .= $declaration;
-    return $styles;
-  }
 }

mailpoet/lib/EmailEditor/Integrations/Core/styles.css

@@ -1,23 +0,0 @@
-h1 {
-  font-size: 48px;
-}
-
-h2 {
-  font-size: 42px;
-}
-
-h3 {
-  font-size: 36px;
-}
-
-h4 {
-  font-size: 26px;
-}
-
-h5 {
-  font-size: 20px;
-}
-
-h6 {
-  font-size: 13px;
-}

mailpoet/lib/EmailEditor/Integrations/Core/theme.json

@@ -18,6 +18,42 @@
           }
         }
       }
+    },
+    "elements": {
+      "h1": {
+        "color": {
+          "text": "#000000"
+        },
+        "typography": {
+          "fontSize": "48px",
+          "fontWeight": "bold"
+        }
+      },
+      "h2": {
+        "typography": {
+          "fontSize": "42px"
+        }
+      },
+      "h3": {
+        "typography": {
+          "fontSize": "36px"
+        }
+      },
+      "h4": {
+        "typography": {
+          "fontSize": "26px"
+        }
+      },
+      "h5": {
+        "typography": {
+          "fontSize": "20px"
+        }
+      },
+      "h6": {
+        "typography": {
+          "fontSize": "14px"
+        }
+      }
     }
   }
 }