Logger
11 months ago
Patterns
11 months ago
PersonalizationTags
2 days ago
Renderer
2 days ago
Templates
4 months ago
class-assets-manager.php
5 months ago
class-dependency-check.php
11 months ago
class-email-api-controller.php
6 months ago
class-email-editor.php
2 days ago
class-email-styles-schema.php
11 months ago
class-personalizer.php
2 days ago
class-send-preview-email.php
5 months ago
class-settings-controller.php
3 months ago
class-site-style-sync-controller.php
4 months ago
class-theme-controller.php
3 months ago
class-user-theme.php
11 months ago
content-editor.css
2 weeks ago
content-shared.css
11 months ago
index.php
11 months ago
theme.json
3 months ago
class-theme-controller.php
186 lines
| 1 | <?php |
| 2 | declare(strict_types = 1); |
| 3 | namespace Automattic\WooCommerce\EmailEditor\Engine; |
| 4 | if (!defined('ABSPATH')) exit; |
| 5 | use Automattic\WooCommerce\EmailEditor\Engine\Renderer\ContentRenderer\Preset_Variable_Resolver; |
| 6 | use WP_Block_Template; |
| 7 | use WP_Post; |
| 8 | use WP_Theme_JSON; |
| 9 | use WP_Theme_JSON_Resolver; |
| 10 | class Theme_Controller { |
| 11 | private WP_Theme_JSON $core_theme; |
| 12 | private WP_Theme_JSON $base_theme; |
| 13 | private User_Theme $user_theme; |
| 14 | private Site_Style_Sync_Controller $site_style_sync_controller; |
| 15 | public function __construct() { |
| 16 | $this->core_theme = WP_Theme_JSON_Resolver::get_core_data(); |
| 17 | $this->base_theme = new WP_Theme_JSON( (array) json_decode( (string) file_get_contents( __DIR__ . '/theme.json' ), true ), 'default' ); |
| 18 | $this->user_theme = new User_Theme(); |
| 19 | $this->site_style_sync_controller = new Site_Style_Sync_Controller(); |
| 20 | } |
| 21 | public function get_theme(): WP_Theme_JSON { |
| 22 | $theme = $this->get_base_theme(); |
| 23 | $theme->merge( $this->user_theme->get_theme() ); |
| 24 | return $theme; |
| 25 | } |
| 26 | public function get_base_theme(): WP_Theme_JSON { |
| 27 | $theme = new WP_Theme_JSON(); |
| 28 | $theme->merge( $this->core_theme ); |
| 29 | $theme->merge( $this->base_theme ); |
| 30 | // Merge synced styles from current active theme. |
| 31 | if ( $this->site_style_sync_controller->is_sync_enabled() ) { |
| 32 | // phpcs:ignore Generic.Commenting.DocComment.MissingShort |
| 33 | $site_theme = $this->site_style_sync_controller->get_theme( $theme ); |
| 34 | $theme->merge( $site_theme ); |
| 35 | } |
| 36 | return apply_filters( 'woocommerce_email_editor_theme_json', $theme ); |
| 37 | } |
| 38 | private function recursive_replace_presets( $values, $presets ) { |
| 39 | foreach ( $values as $key => $value ) { |
| 40 | if ( is_array( $value ) ) { |
| 41 | $values[ $key ] = $this->recursive_replace_presets( $value, $presets ); |
| 42 | } elseif ( is_string( $value ) ) { |
| 43 | $values[ $key ] = preg_replace( array_keys( $presets ), array_values( $presets ), $value ); |
| 44 | } else { |
| 45 | $values[ $key ] = $value; |
| 46 | } |
| 47 | } |
| 48 | return $values; |
| 49 | } |
| 50 | private function recursive_extract_preset_variables( $styles ) { |
| 51 | foreach ( $styles as $key => $style_value ) { |
| 52 | if ( is_array( $style_value ) ) { |
| 53 | $styles[ $key ] = $this->recursive_extract_preset_variables( $style_value ); |
| 54 | } elseif ( is_string( $style_value ) && Preset_Variable_Resolver::is_preset_reference( $style_value ) ) { |
| 55 | $styles[ $key ] = Preset_Variable_Resolver::to_css_var( $style_value ); |
| 56 | } else { |
| 57 | $styles[ $key ] = $style_value; |
| 58 | } |
| 59 | } |
| 60 | return $styles; |
| 61 | } |
| 62 | public function get_styles(): array { |
| 63 | $theme_styles = $this->get_theme()->get_data()['styles']; |
| 64 | // Extract preset variables. |
| 65 | $theme_styles = $this->recursive_extract_preset_variables( $theme_styles ); |
| 66 | // Replace preset values. |
| 67 | $variables = $this->get_variables_values_map(); |
| 68 | $presets = array(); |
| 69 | foreach ( $variables as $name => $value ) { |
| 70 | $pattern = '/var\(' . preg_quote( $name, '/' ) . '\)/i'; |
| 71 | $presets[ $pattern ] = $value; |
| 72 | } |
| 73 | return $this->recursive_replace_presets( $theme_styles, $presets ); |
| 74 | } |
| 75 | public function get_settings(): array { |
| 76 | return $this->get_theme()->get_settings(); |
| 77 | } |
| 78 | public function get_layout_settings(): array { |
| 79 | return $this->get_theme()->get_settings()['layout']; |
| 80 | } |
| 81 | public function get_stylesheet_from_context( $context, $options = array() ): string { |
| 82 | return function_exists( 'gutenberg_style_engine_get_stylesheet_from_context' ) ? gutenberg_style_engine_get_stylesheet_from_context( $context, $options ) : wp_style_engine_get_stylesheet_from_context( $context, $options ); |
| 83 | } |
| 84 | public function get_stylesheet_for_rendering( ?WP_Post $post = null, $template = null ): string { |
| 85 | $email_theme_settings = $this->get_settings(); |
| 86 | $css_presets = ''; |
| 87 | // Font family classes. |
| 88 | foreach ( $email_theme_settings['typography']['fontFamilies']['default'] as $font_family ) { |
| 89 | $css_presets .= ".has-{$font_family['slug']}-font-family { font-family: {$font_family['fontFamily']}; } \n"; |
| 90 | } |
| 91 | // Font size classes. |
| 92 | foreach ( $email_theme_settings['typography']['fontSizes']['default'] as $font_size ) { |
| 93 | $css_presets .= ".has-{$font_size['slug']}-font-size { font-size: {$font_size['size']}; } \n"; |
| 94 | } |
| 95 | // Color palette classes. |
| 96 | $color_definitions = array_merge( $email_theme_settings['color']['palette']['theme'] ?? array(), $email_theme_settings['color']['palette']['default'] ?? array() ); |
| 97 | foreach ( $color_definitions as $color ) { |
| 98 | $css_presets .= ".has-{$color['slug']}-color { color: {$color['color']}; } \n"; |
| 99 | $css_presets .= ".has-{$color['slug']}-background-color { background-color: {$color['color']}; } \n"; |
| 100 | $css_presets .= ".has-{$color['slug']}-border-color { border-color: {$color['color']}; } \n"; |
| 101 | } |
| 102 | // Block specific styles. |
| 103 | $css_blocks = ''; |
| 104 | $blocks = $this->get_theme()->get_styles_block_nodes(); |
| 105 | foreach ( $blocks as $block_metadata ) { |
| 106 | $css_blocks .= $this->get_theme()->get_styles_for_block( $block_metadata ); |
| 107 | } |
| 108 | // Remove `:root :where(...)` selectors since they are not supported in the CSS inliner. |
| 109 | $css_blocks = preg_replace( '/:root\s:where\((.*?)\)/', '$1', $css_blocks ); |
| 110 | // Element specific styles. |
| 111 | $elements_styles = $this->get_theme()->get_raw_data()['styles']['elements'] ?? array(); |
| 112 | // Because the section styles is not a part of the output the `get_styles_block_nodes` method, we need to get it separately. |
| 113 | if ( $template && $template->wp_id ) { |
| 114 | $template_theme = (array) get_post_meta( $template->wp_id, Email_Editor::WOOCOMMERCE_EMAIL_META_THEME_TYPE, true ); |
| 115 | $template_styles = (array) ( $template_theme['styles'] ?? array() ); |
| 116 | $template_elements = $template_styles['elements'] ?? array(); |
| 117 | $elements_styles = array_replace_recursive( (array) $elements_styles, (array) $template_elements ); |
| 118 | } |
| 119 | if ( $post ) { |
| 120 | $post_theme = (array) get_post_meta( $post->ID, 'woocommerce_email_theme', true ); |
| 121 | $post_styles = (array) ( $post_theme['styles'] ?? array() ); |
| 122 | $post_elements = $post_styles['elements'] ?? array(); |
| 123 | $elements_styles = array_replace_recursive( (array) $elements_styles, (array) $post_elements ); |
| 124 | } |
| 125 | $css_elements = ''; |
| 126 | foreach ( $elements_styles as $key => $elements_style ) { |
| 127 | $selector = $key; |
| 128 | if ( 'button' === $key ) { |
| 129 | $selector = '.wp-block-button'; |
| 130 | $css_elements .= wp_style_engine_get_styles( $elements_style, array( 'selector' => '.wp-block-button' ) )['css'] ?? ''; |
| 131 | // Add color to link element. |
| 132 | $css_elements .= wp_style_engine_get_styles( array( 'color' => array( 'text' => $elements_style['color']['text'] ?? '' ) ), array( 'selector' => '.wp-block-button a' ) )['css'] ?? ''; |
| 133 | continue; |
| 134 | } |
| 135 | switch ( $key ) { |
| 136 | case 'heading': |
| 137 | $selector = 'h1, h2, h3, h4, h5, h6'; |
| 138 | break; |
| 139 | case 'link': |
| 140 | $selector = 'a:not(.button-link)'; |
| 141 | break; |
| 142 | } |
| 143 | $css_elements .= wp_style_engine_get_styles( $elements_style, array( 'selector' => $selector ) )['css'] ?? ''; |
| 144 | } |
| 145 | $result = $css_presets . $css_blocks . $css_elements; |
| 146 | // 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. |
| 147 | // Regular expression to match clamp() function and capture its max value. |
| 148 | $pattern = '/clamp\([^,]+,\s*[^,]+,\s*([^)]+)\)/'; |
| 149 | // Replace clamp() with its maximum value. |
| 150 | $result = (string) preg_replace( $pattern, '$1', $result ); |
| 151 | return $result; |
| 152 | } |
| 153 | public function translate_slug_to_font_size( string $font_size ): string { |
| 154 | $settings = $this->get_settings(); |
| 155 | foreach ( $settings['typography']['fontSizes']['default'] as $font_size_definition ) { |
| 156 | if ( $font_size_definition['slug'] === $font_size ) { |
| 157 | return $font_size_definition['size']; |
| 158 | } |
| 159 | } |
| 160 | return $font_size; |
| 161 | } |
| 162 | public function translate_slug_to_color( string $color_slug ): string { |
| 163 | $settings = $this->get_settings(); |
| 164 | $color_definitions = array_merge( $settings['color']['palette']['theme'] ?? array(), $settings['color']['palette']['default'] ?? array() ); |
| 165 | foreach ( $color_definitions as $color_definition ) { |
| 166 | if ( $color_definition['slug'] === $color_slug ) { |
| 167 | return strtolower( $color_definition['color'] ); |
| 168 | } |
| 169 | } |
| 170 | return $color_slug; |
| 171 | } |
| 172 | public function get_variables_values_map(): array { |
| 173 | $variables_css = $this->get_theme()->get_stylesheet( array( 'variables' ) ); |
| 174 | $map = array(); |
| 175 | // Regular expression to match CSS variable definitions. |
| 176 | $pattern = '/--(.*?):\s*(.*?);/'; |
| 177 | if ( preg_match_all( $pattern, $variables_css, $matches, PREG_SET_ORDER ) ) { |
| 178 | foreach ( $matches as $match ) { |
| 179 | // '--' . $match[1] is the variable name, $match[2] is the variable value. |
| 180 | $map[ '--' . $match[1] ] = $match[2]; |
| 181 | } |
| 182 | } |
| 183 | return $map; |
| 184 | } |
| 185 | } |
| 186 |