class-dom-document-helper.php
1 year ago
class-html-processing-helper.php
4 months ago
class-social-links-helper.php
1 year ago
class-styles-helper.php
4 months ago
class-table-wrapper-helper.php
11 months ago
class-styles-helper.php
368 lines
| 1 | <?php |
| 2 | /** |
| 3 | * This file is part of the WooCommerce Email Editor package |
| 4 | * |
| 5 | * @package Automattic\WooCommerce\EmailEditor |
| 6 | */ |
| 7 | |
| 8 | declare( strict_types = 1 ); |
| 9 | namespace Automattic\WooCommerce\EmailEditor\Integrations\Utils; |
| 10 | |
| 11 | use Automattic\WooCommerce\EmailEditor\Engine\Renderer\ContentRenderer\Rendering_Context; |
| 12 | use WP_Style_Engine; |
| 13 | |
| 14 | /** |
| 15 | * This class should guarantee that our work with the DOMDocument is unified and safe. |
| 16 | */ |
| 17 | class Styles_Helper { |
| 18 | /** |
| 19 | * Default empty styles block structure. |
| 20 | * |
| 21 | * @var array |
| 22 | */ |
| 23 | public static $empty_block_styles = array( |
| 24 | 'css' => '', |
| 25 | 'declarations' => array(), |
| 26 | 'classnames' => '', |
| 27 | ); |
| 28 | /** |
| 29 | * Parse number value from a string. |
| 30 | * |
| 31 | * @param string|float|int $value String with value and unit or integer value. |
| 32 | * @return float |
| 33 | */ |
| 34 | public static function parse_value( $value ): float { |
| 35 | // Handle numeric values. |
| 36 | if ( is_numeric( $value ) ) { |
| 37 | return (float) $value; |
| 38 | } |
| 39 | |
| 40 | // Handle string values. |
| 41 | if ( is_string( $value ) ) { |
| 42 | if ( preg_match( '/^\s*(-?\d+(?:\.\d+)?)/', $value, $m ) ) { |
| 43 | return (float) $m[1]; |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | return 0.0; |
| 48 | } |
| 49 | |
| 50 | /** |
| 51 | * Parse styles string to array. |
| 52 | * |
| 53 | * @param string $styles Styles string. |
| 54 | * @return array |
| 55 | */ |
| 56 | public static function parse_styles_to_array( string $styles ): array { |
| 57 | $styles = explode( ';', $styles ); |
| 58 | |
| 59 | $parsed_styles = array(); |
| 60 | foreach ( $styles as $style ) { |
| 61 | $style = explode( ':', $style, 2 ); |
| 62 | if ( count( $style ) === 2 ) { |
| 63 | $parsed_styles[ trim( $style[0] ) ] = trim( $style[1] ); |
| 64 | } |
| 65 | } |
| 66 | return $parsed_styles; |
| 67 | } |
| 68 | |
| 69 | /** |
| 70 | * Get normalized block styles by translating color slugs to actual color values. |
| 71 | * |
| 72 | * This method handles the normalization of color-related attributes like backgroundColor, |
| 73 | * textColor, borderColor, and linkColor by translating them from slugs to actual color values |
| 74 | * using the rendering context. |
| 75 | * |
| 76 | * @param array $block_attributes Block attributes containing color slugs. |
| 77 | * @param Rendering_Context $rendering_context Rendering context for color translation. |
| 78 | * @return array Normalized block styles with translated color values. |
| 79 | */ |
| 80 | public static function get_normalized_block_styles( array $block_attributes, Rendering_Context $rendering_context ): array { |
| 81 | $normalized_colors = array_filter( |
| 82 | array( |
| 83 | 'color' => array_filter( |
| 84 | array( |
| 85 | 'background' => isset( $block_attributes['backgroundColor'] ) && $block_attributes['backgroundColor'] |
| 86 | ? $rendering_context->translate_slug_to_color( $block_attributes['backgroundColor'] ) |
| 87 | : null, |
| 88 | 'text' => isset( $block_attributes['textColor'] ) && $block_attributes['textColor'] |
| 89 | ? $rendering_context->translate_slug_to_color( $block_attributes['textColor'] ) |
| 90 | : null, |
| 91 | ) |
| 92 | ), |
| 93 | 'border' => array_filter( |
| 94 | array( |
| 95 | 'color' => isset( $block_attributes['borderColor'] ) && $block_attributes['borderColor'] |
| 96 | ? $rendering_context->translate_slug_to_color( $block_attributes['borderColor'] ) |
| 97 | : null, |
| 98 | ) |
| 99 | ), |
| 100 | ) |
| 101 | ); |
| 102 | |
| 103 | return array_replace_recursive( |
| 104 | $normalized_colors, |
| 105 | $block_attributes['style'] ?? array() |
| 106 | ); |
| 107 | } |
| 108 | |
| 109 | /** |
| 110 | * Wrapper for wp_style_engine_get_styles which ensures all values are returned. |
| 111 | * |
| 112 | * @param array $block_styles Array of block styles. |
| 113 | * @param bool $skip_convert_vars If true, --wp_preset--spacing--x type values will be left in the original var:preset:spacing:x format. |
| 114 | * @return array { |
| 115 | * @type string $css A CSS ruleset or declarations block |
| 116 | * formatted to be placed in an HTML `style` attribute or tag. |
| 117 | * @type string[] $declarations An associative array of CSS definitions, |
| 118 | * e.g. `array( "$property" => "$value", "$property" => "$value" )`. |
| 119 | * @type string $classnames Classnames separated by a space. |
| 120 | * } |
| 121 | */ |
| 122 | public static function get_styles_from_block( array $block_styles, $skip_convert_vars = false ) { |
| 123 | $unsupported_props = array( |
| 124 | 'margin' => array( 'spacing', 'margin' ), |
| 125 | ); |
| 126 | $unsupported_props = apply_filters( 'woocommerce_email_editor_styles_unsupported_props', $unsupported_props ); |
| 127 | foreach ( $unsupported_props as $path ) { |
| 128 | if ( ! is_array( $path ) || count( $path ) === 0 ) { |
| 129 | continue; |
| 130 | } |
| 131 | |
| 132 | $pointer = & $block_styles; |
| 133 | $last_key = array_pop( $path ); |
| 134 | |
| 135 | foreach ( $path as $segment ) { |
| 136 | if ( ! is_string( $segment ) && ! is_int( $segment ) ) { |
| 137 | continue 2; |
| 138 | } |
| 139 | if ( ! array_key_exists( $segment, $pointer ) || ! is_array( $pointer[ $segment ] ) ) { |
| 140 | continue 2; |
| 141 | } |
| 142 | $pointer = & $pointer[ $segment ]; |
| 143 | } |
| 144 | |
| 145 | if ( ( is_string( $last_key ) || is_int( $last_key ) ) && array_key_exists( $last_key, $pointer ) ) { |
| 146 | unset( $pointer[ $last_key ] ); |
| 147 | } |
| 148 | } |
| 149 | return wp_parse_args( |
| 150 | wp_style_engine_get_styles( $block_styles, array( 'convert_vars_to_classnames' => $skip_convert_vars ) ), |
| 151 | self::$empty_block_styles |
| 152 | ); |
| 153 | } |
| 154 | |
| 155 | /** |
| 156 | * Extend block styles with CSS declarations. |
| 157 | * |
| 158 | * @param array $block_styles WP_Style_Engine styles array (must contain 'declarations' and 'css' keys). |
| 159 | * @param array $css_declarations An associative array of CSS definitions, |
| 160 | * e.g. `array( "$property" => "$value", "$property" => "$value" )`. |
| 161 | * @return array { |
| 162 | * @type string $css A CSS ruleset or declarations block |
| 163 | * formatted to be placed in an HTML `style` attribute or tag. |
| 164 | * @type string[] $declarations An associative array of CSS definitions, |
| 165 | * e.g. `array( "$property" => "$value", "$property" => "$value" )`. |
| 166 | * @type string $classnames Classnames separated by a space. |
| 167 | * } |
| 168 | */ |
| 169 | public static function extend_block_styles( array $block_styles, array $css_declarations ) { |
| 170 | // Ensure block_styles has the required WP_Style_Engine structure. |
| 171 | if ( ! isset( $block_styles['declarations'] ) || ! is_array( $block_styles['declarations'] ) ) { |
| 172 | $block_styles = self::$empty_block_styles; |
| 173 | } |
| 174 | |
| 175 | $block_styles['declarations'] = array_merge( $block_styles['declarations'], $css_declarations ); |
| 176 | $block_styles['css'] = WP_Style_Engine::compile_css( $block_styles['declarations'], '' ); |
| 177 | |
| 178 | return $block_styles; |
| 179 | } |
| 180 | |
| 181 | /** |
| 182 | * Get block styles. |
| 183 | * |
| 184 | * @param array $block_attributes Block attributes. |
| 185 | * @param Rendering_Context $rendering_context Rendering context. |
| 186 | * @param array $properties List of style properties to include. Supported values: |
| 187 | * 'spacing', 'padding', 'margin', |
| 188 | * 'border', 'border-width', 'border-style', 'border-radius', 'border-color', |
| 189 | * 'background', 'background-color', 'color', |
| 190 | * 'typography', 'font-size', 'font-family', 'font-weight', 'text-align'. |
| 191 | * @return array { |
| 192 | * @type string $css A CSS ruleset or declarations block |
| 193 | * formatted to be placed in an HTML `style` attribute or tag. |
| 194 | * @type string[] $declarations An associative array of CSS definitions, |
| 195 | * e.g. `array( "$property" => "$value", "$property" => "$value" )`. |
| 196 | * @type string $classnames Classnames separated by a space. |
| 197 | * } |
| 198 | */ |
| 199 | public static function get_block_styles( array $block_attributes, Rendering_Context $rendering_context, array $properties ) { |
| 200 | $styles = self::get_normalized_block_styles( $block_attributes, $rendering_context ); |
| 201 | $filtered_styles = array(); |
| 202 | $style_mappings = array( |
| 203 | 'spacing' => array( 'spacing' ), |
| 204 | 'padding' => array( 'spacing', 'padding' ), |
| 205 | 'margin' => array( 'spacing', 'margin' ), |
| 206 | 'border' => array( 'border' ), |
| 207 | 'border-width' => array( 'border', 'width' ), |
| 208 | 'border-style' => array( 'border', 'style' ), |
| 209 | 'border-radius' => array( 'border', 'radius' ), |
| 210 | 'border-color' => array( 'border', 'color' ), |
| 211 | 'background' => array( 'background' ), |
| 212 | 'background-color' => array( 'color', 'background' ), |
| 213 | 'color' => array( 'color', 'text' ), |
| 214 | 'typography' => array( 'typography' ), |
| 215 | 'font-size' => array( 'typography', 'fontSize' ), |
| 216 | 'font-family' => array( 'typography', 'fontFamily' ), |
| 217 | 'font-weight' => array( 'typography', 'fontWeight' ), |
| 218 | ); |
| 219 | |
| 220 | foreach ( $properties as $property ) { |
| 221 | if ( ! isset( $style_mappings[ $property ] ) ) { |
| 222 | continue; |
| 223 | } |
| 224 | |
| 225 | $style_pointer = $styles; |
| 226 | foreach ( $style_mappings[ $property ] as $path_segment ) { |
| 227 | if ( ! isset( $style_pointer[ $path_segment ] ) ) { |
| 228 | continue 2; |
| 229 | } |
| 230 | |
| 231 | $style_pointer = $style_pointer[ $path_segment ]; |
| 232 | } |
| 233 | |
| 234 | /** |
| 235 | * Pointer to filtered styles. |
| 236 | * |
| 237 | * @var array<string, mixed> $filtered_styles_pointer |
| 238 | */ |
| 239 | $filtered_styles_pointer = & $filtered_styles; |
| 240 | |
| 241 | foreach ( $style_mappings[ $property ] as $path_index => $path_segment ) { |
| 242 | if ( count( $style_mappings[ $property ] ) - 1 === $path_index ) { |
| 243 | $filtered_styles_pointer[ $path_segment ] = $style_pointer; |
| 244 | break; |
| 245 | } |
| 246 | |
| 247 | if ( ! isset( $filtered_styles_pointer[ $path_segment ] ) || ! is_array( $filtered_styles_pointer[ $path_segment ] ) ) { |
| 248 | $filtered_styles_pointer[ $path_segment ] = array(); |
| 249 | } |
| 250 | |
| 251 | $filtered_styles_pointer = & $filtered_styles_pointer[ $path_segment ]; |
| 252 | } |
| 253 | } |
| 254 | |
| 255 | $additional_css_declarations = array_filter( |
| 256 | array_intersect_key( |
| 257 | array( |
| 258 | 'text-align' => $block_attributes['textAlign'] ?? null, |
| 259 | ), |
| 260 | array_flip( $properties ) |
| 261 | ) |
| 262 | ); |
| 263 | |
| 264 | $styles = count( $filtered_styles ) > 0 ? self::get_styles_from_block( $filtered_styles ) : self::$empty_block_styles; |
| 265 | |
| 266 | return self::extend_block_styles( $styles, $additional_css_declarations ); |
| 267 | } |
| 268 | |
| 269 | /** |
| 270 | * Convert a CSS value to a static px value for email clients. |
| 271 | * |
| 272 | * This is mostly for use in font size, spacing, etc. |
| 273 | * |
| 274 | * @param string $input The CSS value to convert. |
| 275 | * @param bool $use_fallback Whether to use the fallback value if the input is not a valid CSS value. |
| 276 | * @param ?int $base_font_size The base font size to use for conversion. |
| 277 | * @return ?string The static pixel value (e.g., 30px). |
| 278 | */ |
| 279 | public static function convert_to_px( string $input, bool $use_fallback = true, ?int $base_font_size = 16 ): ?string { |
| 280 | $fallback = $use_fallback ? $base_font_size . 'px' : null; |
| 281 | |
| 282 | if ( ! $input ) { |
| 283 | return $fallback; |
| 284 | } |
| 285 | |
| 286 | $input = trim( $input ); |
| 287 | |
| 288 | // Validate input against potentially malicious values. |
| 289 | if ( preg_match( '/[<>"\']/', $input ) ) { |
| 290 | return $fallback; |
| 291 | } |
| 292 | |
| 293 | if ( str_ends_with( $input, 'px' ) ) { |
| 294 | // If already in px, return as is. |
| 295 | return $input; |
| 296 | } |
| 297 | if ( str_ends_with( $input, 'rem' ) || str_ends_with( $input, 'em' ) ) { |
| 298 | // Convert rem/em to px (assuming 16px base). |
| 299 | $value = (float) str_replace( array( 'rem', 'em' ), '', $input ); |
| 300 | return round( $value * $base_font_size ) . 'px'; |
| 301 | } |
| 302 | if ( str_ends_with( $input, '%' ) ) { |
| 303 | // Convert percentage to px (assuming 16px base). |
| 304 | $value = (float) str_replace( '%', '', $input ); |
| 305 | return round( ( $value / 100 ) * $base_font_size ) . 'px'; |
| 306 | } |
| 307 | if ( is_numeric( $input ) ) { |
| 308 | // If it's just a number, assume px. |
| 309 | return $input . 'px'; |
| 310 | } |
| 311 | |
| 312 | return $fallback; |
| 313 | } |
| 314 | |
| 315 | /** |
| 316 | * Remove the CSS unit from a string. |
| 317 | * |
| 318 | * @param string $input The string to remove the unit from. |
| 319 | * @return string The string without the unit. |
| 320 | */ |
| 321 | public static function remove_css_unit( string $input ): string { |
| 322 | $units = array( 'px', 'pt', 'pc', 'rem', 'em', 'vmin', 'vmax', '%', 'vh', 'vw', 'ex', 'ch', 'fr' ); |
| 323 | return str_ireplace( $units, '', $input ); |
| 324 | } |
| 325 | |
| 326 | /** |
| 327 | * Convert a CSS clamp() value to a static px value for email clients. |
| 328 | * |
| 329 | * @param string $clamp_str The clamp() CSS string (e.g., "clamp(30px, 5vw, 50px)"). |
| 330 | * @param string $strategy "min"|"max"|"avg" — which strategy to use. |
| 331 | * @return ?string The static pixel value (e.g., 30px). |
| 332 | */ |
| 333 | public static function clamp_to_static_px( $clamp_str, $strategy = 'min' ): ?string { |
| 334 | if ( stripos( $clamp_str, 'clamp(' ) === false ) { |
| 335 | return $clamp_str; |
| 336 | } |
| 337 | |
| 338 | $value_array = explode( ',', $clamp_str ); |
| 339 | |
| 340 | if ( count( $value_array ) < 2 ) { |
| 341 | return $clamp_str; // Invalid clamp format. |
| 342 | } |
| 343 | |
| 344 | $first_element = $value_array[0]; |
| 345 | $min = trim( str_ireplace( array( 'clamp(', 'min(', 'max(' ), '', $first_element ) ); |
| 346 | |
| 347 | $last_element = $value_array[ count( $value_array ) - 1 ]; |
| 348 | $max = trim( rtrim( $last_element, ')' ) ); |
| 349 | |
| 350 | $min_px = self::convert_to_px( $min, false ); |
| 351 | $max_px = self::convert_to_px( $max, false ); |
| 352 | |
| 353 | // Determine which value to use. |
| 354 | if ( 'min' === $strategy && ! is_null( $min_px ) ) { |
| 355 | return $min_px; |
| 356 | } |
| 357 | if ( 'max' === $strategy && ! is_null( $max_px ) ) { |
| 358 | return $max_px; |
| 359 | } |
| 360 | if ( 'avg' === $strategy && ! is_null( $min_px ) && ! is_null( $max_px ) ) { |
| 361 | $avg = ( self::parse_value( $min_px ) + self::parse_value( $max_px ) ) / 2; |
| 362 | return $avg . 'px'; |
| 363 | } |
| 364 | // Default. |
| 365 | return $min_px ?? $max_px ?? $clamp_str; |
| 366 | } |
| 367 | } |
| 368 |