From c415f1efce879c1efdd30bd90faaaee1dabe60e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Lys=C3=BD?= Date: Fri, 8 Mar 2024 09:55:37 +0100 Subject: [PATCH] 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] --- .../EmailEditor/Engine/Renderer/Renderer.php | 1 - .../EmailEditor/Engine/SettingsController.php | 2 -- .../EmailEditor/Engine/ThemeController.php | 17 ++++++++- .../Integrations/Core/Initializer.php | 14 -------- .../EmailEditor/Integrations/Core/styles.css | 23 ------------ .../EmailEditor/Integrations/Core/theme.json | 36 +++++++++++++++++++ 6 files changed, 52 insertions(+), 41 deletions(-) delete mode 100644 mailpoet/lib/EmailEditor/Integrations/Core/styles.css diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php index 6f4c4410ea..6513d8dc49 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php +++ b/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); diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php index 47cc0182bd..6b4425d116 100644 --- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php +++ b/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. diff --git a/mailpoet/lib/EmailEditor/Engine/ThemeController.php b/mailpoet/lib/EmailEditor/Engine/ThemeController.php index bb2a687fe7..8d66958669 100644 --- a/mailpoet/lib/EmailEditor/Engine/ThemeController.php +++ b/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 { diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php b/mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php index bf7d82529c..d996da4024 100644 --- a/mailpoet/lib/EmailEditor/Integrations/Core/Initializer.php +++ b/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; - } } diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/styles.css b/mailpoet/lib/EmailEditor/Integrations/Core/styles.css deleted file mode 100644 index 26ae5a28ef..0000000000 --- a/mailpoet/lib/EmailEditor/Integrations/Core/styles.css +++ /dev/null @@ -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; -} diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/theme.json b/mailpoet/lib/EmailEditor/Integrations/Core/theme.json index 6383c0dac3..03b20f6217 100644 --- a/mailpoet/lib/EmailEditor/Integrations/Core/theme.json +++ b/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" + } + } } } }