Blocks
2 months ago
Columns
5 months ago
PostProcess
4 days ago
BodyRenderer.php
2 months ago
EscapeHelper.php
2 years ago
Preprocessor.php
1 year ago
Renderer.php
1 month ago
StylesHelper.php
2 months ago
Template.html
2 months ago
index.php
3 years ago
StylesHelper.php
210 lines
| 1 | <?php // phpcs:ignore SlevomatCodingStandard.TypeHints.DeclareStrictTypes.DeclareStrictTypesMissing |
| 2 | |
| 3 | namespace MailPoet\Newsletter\Renderer; |
| 4 | |
| 5 | if (!defined('ABSPATH')) exit; |
| 6 | |
| 7 | |
| 8 | class StylesHelper { |
| 9 | public static $cssAttributes = [ |
| 10 | 'backgroundColor' => 'background-color', |
| 11 | 'fontColor' => 'color', |
| 12 | 'fontFamily' => 'font-family', |
| 13 | 'textDecoration' => 'text-decoration', |
| 14 | 'textAlign' => 'text-align', |
| 15 | 'fontSize' => 'font-size', |
| 16 | 'fontWeight' => 'font-weight', |
| 17 | 'borderWidth' => 'border-width', |
| 18 | 'borderStyle' => 'border-style', |
| 19 | 'borderColor' => 'border-color', |
| 20 | 'borderRadius' => 'border-radius', |
| 21 | 'lineHeight' => 'line-height', |
| 22 | 'msoLineHeightAlt' => 'mso-line-height-alt', |
| 23 | 'msoFontSize' => 'mso-ansi-font-size', |
| 24 | ]; |
| 25 | public static $font = [ |
| 26 | 'Arial' => "Arial, 'Helvetica Neue', Helvetica, sans-serif", |
| 27 | 'Comic Sans MS' => "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif", |
| 28 | 'Courier New' => "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace", |
| 29 | 'Georgia' => "Georgia, Times, 'Times New Roman', serif", |
| 30 | 'Lucida' => "'Lucida Sans Unicode', 'Lucida Grande', sans-serif", |
| 31 | 'Tahoma' => 'Tahoma, Verdana, Segoe, sans-serif', |
| 32 | 'Times New Roman' => "'Times New Roman', Times, Baskerville, Georgia, serif", |
| 33 | 'Trebuchet MS' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif", |
| 34 | 'Verdana' => 'Verdana, Geneva, sans-serif', |
| 35 | 'Arvo' => 'arvo, courier, georgia, serif', |
| 36 | 'Lato' => "lato, 'helvetica neue', helvetica, arial, sans-serif", |
| 37 | 'Lora' => "lora, georgia, 'times new roman', serif", |
| 38 | 'Merriweather' => "merriweather, georgia, 'times new roman', serif", |
| 39 | 'Merriweather Sans' => "'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif", |
| 40 | 'Noticia Text' => "'noticia text', georgia, 'times new roman', serif", |
| 41 | 'Open Sans' => "'open sans', 'helvetica neue', helvetica, arial, sans-serif", |
| 42 | 'Playfair Display' => "'playfair display', georgia, 'times new roman', serif", |
| 43 | 'Roboto' => "roboto, 'helvetica neue', helvetica, arial, sans-serif", |
| 44 | 'Source Sans Pro' => "'source sans pro', 'helvetica neue', helvetica, arial, sans-serif", |
| 45 | 'Oswald' => "Oswald, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif", |
| 46 | 'Raleway' => "Raleway, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif", |
| 47 | 'Permanent Marker' => "'Permanent Marker', Tahoma, Verdana, Segoe, sans-serif", |
| 48 | 'Pacifico' => "Pacifico, 'Arial Narrow', Arial, sans-serif", |
| 49 | ]; |
| 50 | public static $customFonts = [ |
| 51 | 'Arvo', |
| 52 | 'Lato', |
| 53 | 'Lora', |
| 54 | 'Merriweather', |
| 55 | 'Merriweather Sans', |
| 56 | 'Noticia Text', |
| 57 | 'Open Sans', |
| 58 | 'Playfair Display', |
| 59 | 'Roboto', |
| 60 | 'Source Sans Pro', |
| 61 | 'Oswald', |
| 62 | 'Raleway', |
| 63 | 'Permanent Marker', |
| 64 | 'Pacifico', |
| 65 | ]; |
| 66 | public static $defaultLineHeight = 1.6; |
| 67 | public static $headingMarginMultiplier = 0.3; |
| 68 | public static $paddingWidth = 20; |
| 69 | |
| 70 | public static function getBlockStyles($element, $ignoreSpecificStyles = false) { |
| 71 | if (!isset($element['styles']['block'])) { |
| 72 | return; |
| 73 | } |
| 74 | return self::getStyles($element['styles'], 'block', $ignoreSpecificStyles); |
| 75 | } |
| 76 | |
| 77 | public static function getStyles($data, $type, $ignoreSpecificStyles = false) { |
| 78 | $styles = array_map(function($attribute, $style) use ($ignoreSpecificStyles) { |
| 79 | if (!$ignoreSpecificStyles || !in_array($attribute, $ignoreSpecificStyles)) { |
| 80 | $style = StylesHelper::applyFontFamily($attribute, $style); |
| 81 | return StylesHelper::translateCSSAttribute($attribute) . ': ' . $style . ';'; |
| 82 | } |
| 83 | }, array_keys($data[$type]), $data[$type]); |
| 84 | return implode('', $styles); |
| 85 | } |
| 86 | |
| 87 | public static function translateCSSAttribute($attribute) { |
| 88 | return (array_key_exists($attribute, self::$cssAttributes)) ? |
| 89 | self::$cssAttributes[$attribute] : |
| 90 | $attribute; |
| 91 | } |
| 92 | |
| 93 | public static function setStyle(array $style, string $selector): string { |
| 94 | $css = $selector . '{' . PHP_EOL; |
| 95 | $style = self::applyHeadingMargin($style, $selector); |
| 96 | $style = self::applyLineHeight($style, $selector); |
| 97 | foreach ($style as $attribute => $individualStyle) { |
| 98 | $individualStyle = self::applyFontFamily($attribute, $individualStyle); |
| 99 | $css .= self::translateCSSAttribute($attribute) . ':' . $individualStyle . ';' . PHP_EOL; |
| 100 | } |
| 101 | $css .= '}' . PHP_EOL; |
| 102 | return $css; |
| 103 | } |
| 104 | |
| 105 | public static function applyTextAlignment($block, string $defaultAlignment = 'left', string $styleType = 'block') { |
| 106 | if (is_array($block)) { |
| 107 | if (!isset($block['styles']) || !is_array($block['styles'])) { |
| 108 | $block['styles'] = []; |
| 109 | } |
| 110 | if (!isset($block['styles'][$styleType]) || !is_array($block['styles'][$styleType])) { |
| 111 | $block['styles'][$styleType] = []; |
| 112 | } |
| 113 | $rawTextAlign = $block['styles'][$styleType]['textAlign'] ?? null; |
| 114 | $textAlignment = is_string($rawTextAlign) ? trim(strtolower($rawTextAlign)) : ''; |
| 115 | if (in_array($textAlignment, ['center', 'right', 'justify'], true)) { |
| 116 | return $block; |
| 117 | } |
| 118 | $block['styles'][$styleType]['textAlign'] = $defaultAlignment; |
| 119 | return $block; |
| 120 | } |
| 121 | |
| 122 | // Check if text-align is already set to center, right, or justify |
| 123 | if (preg_match('/text-align\s*:\s*(center|justify|right)\s*(;|$)/i', (string)$block)) { |
| 124 | return $block; |
| 125 | } |
| 126 | |
| 127 | // Ensure semicolon at the end before appending |
| 128 | $block = rtrim((string)$block); |
| 129 | if (strlen($block) > 0 && substr($block, -1) !== ';') { |
| 130 | $block .= ';'; |
| 131 | } |
| 132 | |
| 133 | return $block . 'text-align:' . $defaultAlignment . ';'; |
| 134 | } |
| 135 | |
| 136 | /** |
| 137 | * Join styles and makes sure they are separated by ; |
| 138 | */ |
| 139 | public static function joinStyles(?string $styles1, ?string $styles2): string { |
| 140 | if ($styles1 === null) $styles1 = ''; |
| 141 | if ($styles2 === null) $styles2 = ''; |
| 142 | |
| 143 | $style = trim($styles1); |
| 144 | if ( |
| 145 | (strlen($style) > 0) |
| 146 | && (substr($style, -1) !== ';') |
| 147 | ) $style .= ';'; |
| 148 | $style .= $styles2; |
| 149 | return $style; |
| 150 | } |
| 151 | |
| 152 | public static function applyFontFamily($attribute, $style) { |
| 153 | if ($attribute !== 'fontFamily') return $style; |
| 154 | return (isset(self::$font[$style])) ? |
| 155 | self::$font[$style] : |
| 156 | self::$font['Arial']; |
| 157 | } |
| 158 | |
| 159 | public static function applyHeadingMargin(array $style, string $selector): array { |
| 160 | if (!preg_match('/h[1-4]/i', $selector)) return $style; |
| 161 | $fontSize = (int)$style['fontSize']; |
| 162 | $style['margin'] = sprintf('0 0 %spx 0', self::$headingMarginMultiplier * $fontSize); |
| 163 | return $style; |
| 164 | } |
| 165 | |
| 166 | public static function applyLineHeight(array $style, string $selector): array { |
| 167 | if (!preg_match('/mailpoet_paragraph|h[1-4]/i', $selector)) return $style; |
| 168 | $lineHeight = isset($style['lineHeight']) ? (float)$style['lineHeight'] : self::$defaultLineHeight; |
| 169 | $fontSize = (int)$style['fontSize']; |
| 170 | $msoLineHeight = round($lineHeight * $fontSize); |
| 171 | if ($msoLineHeight % 2 === 1) { |
| 172 | $msoLineHeight++; |
| 173 | } |
| 174 | $msoFontSize = $fontSize; |
| 175 | if ($msoFontSize % 2 === 1) { |
| 176 | $msoFontSize++; |
| 177 | } |
| 178 | $style['msoLineHeightAlt'] = sprintf('%spx', $msoLineHeight); |
| 179 | $style = ['msoFontSize' => sprintf('%spx', $msoFontSize)] + $style; |
| 180 | $style['lineHeight'] = sprintf('%spx', $lineHeight * $fontSize); |
| 181 | |
| 182 | return $style; |
| 183 | } |
| 184 | |
| 185 | private static function getCustomFontsNames($styles) { |
| 186 | $fontNames = []; |
| 187 | foreach ($styles as $style) { |
| 188 | if (isset($style['fontFamily']) && in_array($style['fontFamily'], self::$customFonts)) { |
| 189 | $fontNames[$style['fontFamily']] = true; |
| 190 | } |
| 191 | } |
| 192 | return array_keys($fontNames); |
| 193 | } |
| 194 | |
| 195 | public static function getCustomFontsLinks($styles) { |
| 196 | $links = []; |
| 197 | foreach (self::getCustomFontsNames($styles) as $name) { |
| 198 | $links[] = urlencode($name) . ':400,400i,700,700i'; |
| 199 | } |
| 200 | if (!count($links)) { |
| 201 | return ''; |
| 202 | } |
| 203 | |
| 204 | // see https://stackoverflow.com/a/48214207 |
| 205 | return '<!--[if !mso]><!-- --><link href="https://fonts.googleapis.com/css?family=' |
| 206 | . implode("|", $links) |
| 207 | . '" rel="stylesheet"><!--<![endif]-->'; |
| 208 | } |
| 209 | } |
| 210 |