| @@ -1,19 +1,26 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | namespace ABlocks\Blocks\Countdown; |
| 3 | 3 | |
| 4 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 5 | + exit; | |
| 6 | +} | |
| 7 | + | |
| 4 | 8 | use ABlocks\Classes\BlockBaseAbstract; |
| 5 | 9 | use ABlocks\Classes\CssGenerator; |
| 10 | +use ABlocks\Classes\CssGeneratorV2; | |
| 6 | 11 | use ABlocks\Controls\Alignment; |
| 7 | 12 | use ABlocks\Controls\Typography; |
| 8 | 13 | use ABlocks\Controls\Border; |
| 9 | 14 | use ABlocks\Controls\BoxShadow; |
| 10 | 15 | use ABlocks\Controls\Range; |
| 16 | +use ABlocks\Controls\Color; | |
| 17 | +use ABlocks\Controls\Dimensions; | |
| 11 | 18 | |
| 12 | 19 | class Block extends BlockBaseAbstract { |
| 13 | 20 | protected $block_name = 'countdown'; |
| 14 | 21 | |
| 15 | - public function build_css( $attributes ) { | |
| 22 | + public function build_css_v1( $attributes ) { | |
| 16 | 23 | $css_generator = new CssGenerator( $attributes ); |
| 17 | 24 | |
| 18 | 25 | $css_generator->add_class_styles( |
| 19 | 26 | '{{WRAPPER}}', |
| @@ -18,9 +25,10 @@ | ||
| 18 | 25 | $css_generator->add_class_styles( |
| 19 | 26 | '{{WRAPPER}}', |
| 20 | 27 | $this->get_wrapper_css( $attributes ), |
| 21 | 28 | $this->get_wrapper_css( $attributes, 'Tablet' ), |
| 22 | - $this->get_wrapper_css( $attributes, 'Mobile' ) | |
| 29 | + $this->get_wrapper_css( $attributes, 'Mobile' ), | |
| 30 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } ) | |
| 23 | 31 | ); |
| 24 | 32 | |
| 25 | 33 | $css_generator->add_class_styles( |
| 26 | 34 | '{{WRAPPER}} .ablocks-block-container', |
| @@ -25,9 +33,10 @@ | ||
| 25 | 33 | $css_generator->add_class_styles( |
| 26 | 34 | '{{WRAPPER}} .ablocks-block-container', |
| 27 | 35 | $this->get_countdown_items_css( $attributes ), |
| 28 | 36 | $this->get_countdown_items_css( $attributes, 'Tablet' ), |
| 29 | - $this->get_countdown_items_css( $attributes, 'Mobile' ) | |
| 37 | + $this->get_countdown_items_css( $attributes, 'Mobile' ), | |
| 38 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_items_css( $attributes, $device ); } ) | |
| 30 | 39 | ); |
| 31 | 40 | |
| 32 | 41 | $css_generator->add_class_styles( |
| 33 | 42 | '{{WRAPPER}} .ablocks-countdown__item', |
| @@ -32,15 +41,17 @@ | ||
| 32 | 41 | $css_generator->add_class_styles( |
| 33 | 42 | '{{WRAPPER}} .ablocks-countdown__item', |
| 34 | 43 | $this->get_countdown_item_css( $attributes ), |
| 35 | 44 | $this->get_countdown_item_css( $attributes, 'Tablet' ), |
| 36 | - $this->get_countdown_item_css( $attributes, 'Mobile' ) | |
| 45 | + $this->get_countdown_item_css( $attributes, 'Mobile' ), | |
| 46 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_item_css( $attributes, $device ); } ) | |
| 37 | 47 | ); |
| 38 | 48 | $css_generator->add_class_styles( |
| 39 | 49 | '{{WRAPPER}} .ablocks-countdown__item:hover', |
| 40 | 50 | $this->get_countdown_item_hover_css( $attributes ), |
| 41 | 51 | $this->get_countdown_item_hover_css( $attributes, 'Tablet' ), |
| 42 | - $this->get_countdown_item_hover_css( $attributes, 'Mobile' ) | |
| 52 | + $this->get_countdown_item_hover_css( $attributes, 'Mobile' ), | |
| 53 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_item_hover_css( $attributes, $device ); } ) | |
| 43 | 54 | ); |
| 44 | 55 | |
| 45 | 56 | $css_generator->add_class_styles( |
| 46 | 57 | '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-label', |
| @@ -45,9 +56,10 @@ | ||
| 45 | 56 | $css_generator->add_class_styles( |
| 46 | 57 | '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-label', |
| 47 | 58 | $this->get_label_css( $attributes ), |
| 48 | 59 | $this->get_label_css( $attributes, 'Tablet' ), |
| 49 | - $this->get_label_css( $attributes, 'Mobile' ) | |
| 60 | + $this->get_label_css( $attributes, 'Mobile' ), | |
| 61 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_label_css( $attributes, $device ); } ) | |
| 50 | 62 | ); |
| 51 | 63 | |
| 52 | 64 | $css_generator->add_class_styles( |
| 53 | 65 | '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-value', |
| @@ -52,9 +64,10 @@ | ||
| 52 | 64 | $css_generator->add_class_styles( |
| 53 | 65 | '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-value', |
| 54 | 66 | $this->get_number_css( $attributes ), |
| 55 | 67 | $this->get_number_css( $attributes, 'Tablet' ), |
| 56 | - $this->get_number_css( $attributes, 'Mobile' ) | |
| 68 | + $this->get_number_css( $attributes, 'Mobile' ), | |
| 69 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_number_css( $attributes, $device ); } ) | |
| 57 | 70 | ); |
| 58 | 71 | |
| 59 | 72 | $css_generator->add_class_styles( |
| 60 | 73 | '{{WRAPPER}} .ablocks-countdown__separator', |
| @@ -59,14 +72,82 @@ | ||
| 59 | 72 | $css_generator->add_class_styles( |
| 60 | 73 | '{{WRAPPER}} .ablocks-countdown__separator', |
| 61 | 74 | $this->get_separator_css( $attributes ), |
| 62 | 75 | $this->get_separator_css( $attributes, 'Tablet' ), |
| 63 | - $this->get_separator_css( $attributes, 'Mobile' ) | |
| 76 | + $this->get_separator_css( $attributes, 'Mobile' ), | |
| 77 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_separator_css( $attributes, $device ); } ) | |
| 64 | 78 | ); |
| 65 | 79 | |
| 66 | 80 | return $css_generator->generate_css(); |
| 67 | 81 | } |
| 82 | + public function build_css_v2( $attributes ) { | |
| 83 | + $css_generator = new CssGeneratorV2( $attributes, $this->block_name ); | |
| 68 | 84 | |
| 85 | + $css_generator->add_class_styles( | |
| 86 | + '{{WRAPPER}}', | |
| 87 | + $this->get_wrapper_css( $attributes ), | |
| 88 | + $this->get_wrapper_css( $attributes, 'Tablet' ), | |
| 89 | + $this->get_wrapper_css( $attributes, 'Mobile' ), | |
| 90 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } ) | |
| 91 | + ); | |
| 92 | + $css_generator->add_class_styles( | |
| 93 | + '{{WRAPPER}}.ablocks-block--countdown:not(.ablocks-has-container), | |
| 94 | + {{WRAPPER}}.ablocks-block--countdown .ablocks-block-container', | |
| 95 | + $this->get_countdown_items_css( $attributes, '' ), | |
| 96 | + $this->get_countdown_items_css( $attributes, 'Tablet' ), | |
| 97 | + $this->get_countdown_items_css( $attributes, 'Mobile' ), | |
| 98 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_items_css( $attributes, $device ); } ) | |
| 99 | + ); | |
| 100 | + | |
| 101 | + $css_generator->add_class_styles( | |
| 102 | + '{{WRAPPER}} .ablocks-countdown__item', | |
| 103 | + $this->get_countdown_item_css( $attributes ), | |
| 104 | + $this->get_countdown_item_css( $attributes, 'Tablet' ), | |
| 105 | + $this->get_countdown_item_css( $attributes, 'Mobile' ), | |
| 106 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_item_css( $attributes, $device ); } ) | |
| 107 | + ); | |
| 108 | + $css_generator->add_class_styles( | |
| 109 | + '{{WRAPPER}} .ablocks-countdown__item:hover', | |
| 110 | + $this->get_countdown_item_hover_css( $attributes ), | |
| 111 | + $this->get_countdown_item_hover_css( $attributes, 'Tablet' ), | |
| 112 | + $this->get_countdown_item_hover_css( $attributes, 'Mobile' ), | |
| 113 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_countdown_item_hover_css( $attributes, $device ); } ) | |
| 114 | + ); | |
| 115 | + | |
| 116 | + $css_generator->add_class_styles( | |
| 117 | + '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-label', | |
| 118 | + $this->get_label_css( $attributes ), | |
| 119 | + $this->get_label_css( $attributes, 'Tablet' ), | |
| 120 | + $this->get_label_css( $attributes, 'Mobile' ), | |
| 121 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_label_css( $attributes, $device ); } ) | |
| 122 | + ); | |
| 123 | + | |
| 124 | + $css_generator->add_class_styles( | |
| 125 | + '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-value', | |
| 126 | + $this->get_number_css( $attributes ), | |
| 127 | + $this->get_number_css( $attributes, 'Tablet' ), | |
| 128 | + $this->get_number_css( $attributes, 'Mobile' ), | |
| 129 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_number_css( $attributes, $device ); } ) | |
| 130 | + ); | |
| 131 | + | |
| 132 | + $css_generator->add_class_styles( | |
| 133 | + '{{WRAPPER}} .ablocks-countdown__separator', | |
| 134 | + $this->get_separator_css( $attributes ), | |
| 135 | + $this->get_separator_css( $attributes, 'Tablet' ), | |
| 136 | + $this->get_separator_css( $attributes, 'Mobile' ), | |
| 137 | + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_separator_css( $attributes, $device ); } ) | |
| 138 | + ); | |
| 139 | + | |
| 140 | + return $css_generator->generate_css(); | |
| 141 | + } | |
| 142 | + | |
| 143 | + public function build_css( $attributes ) { | |
| 144 | + if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) { | |
| 145 | + return $this->build_css_v2( $attributes ); | |
| 146 | + } | |
| 147 | + return $this->build_css_v1( $attributes ); | |
| 148 | + } | |
| 149 | + | |
| 69 | 150 | public function get_wrapper_css( $attributes, $device = '' ) { |
| 70 | 151 | $alignment = ! empty( $attributes['alignment'] ) ? $attributes['alignment'] : ''; |
| 71 | 152 | return Alignment::get_css( $alignment, 'text-align', $device ); |
| 72 | 153 | } |
| @@ -76,10 +157,10 @@ | ||
| 76 | 157 | |
| 77 | 158 | if ( ! empty( $attributes['orient'][ 'value' . $device ] ) ) { |
| 78 | 159 | $css['flex-direction'] = $attributes['orient'][ 'value' . $device ]; |
| 79 | 160 | } |
| 80 | - if ( ! empty( $attributes['justifyDep'][ 'value' . $device ] ) ) { | |
| 81 | - $css['justify-content'] = $attributes['justifyDep'][ 'value' . $device ]; | |
| 161 | + if ( ! empty( $attributes['justificationAlign'][ 'value' . $device ] ) ) { | |
| 162 | + $css['justify-content'] = $attributes['justificationAlign'][ 'value' . $device ]; | |
| 82 | 163 | } |
| 83 | 164 | if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) { |
| 84 | 165 | $css['align-items'] = $attributes['alignment'][ 'value' . $device ]; |
| 85 | 166 | } |
| @@ -85,17 +166,9 @@ | ||
| 85 | 166 | } |
| 86 | 167 | if ( ! empty( $attributes['wrapping'][ 'value' . $device ] ) ) { |
| 87 | 168 | $css['flex-wrap'] = $attributes['wrapping'][ 'value' . $device ]; |
| 88 | 169 | } |
| 89 | - if ( ! empty( $attributes['boxColumnGap'][ 'value' . $device ] ) ) { | |
| 90 | - $css['column-gap'] = $attributes['boxColumnGap'][ 'value' . $device ] | |
| 91 | - . ( ! empty( $attributes['boxColumnGap'][ 'valueUnit' . $device ] ) ? $attributes['boxColumnGap'][ 'valueUnit' . $device ] : 'px' ); | |
| 92 | - } | |
| 93 | 170 | |
| 94 | - if ( ! empty( $attributes['boxRowGap'][ 'value' . $device ] ) ) { | |
| 95 | - $css['row-gap'] = $attributes['boxRowGap'][ 'value' . $device ] | |
| 96 | - . ( ! empty( $attributes['boxRowGap'][ 'valueUnit' . $device ] ) ? $attributes['boxRowGap'][ 'valueUnit' . $device ] : 'px' ); | |
| 97 | - } | |
| 98 | 171 | return array_merge( |
| 99 | 172 | Range::get_css([ |
| 100 | 173 | 'attributeValue' => $attributes['boxSize'], |
| 101 | 174 | 'attribute_object_key' => 'value', |
| @@ -131,51 +204,63 @@ | ||
| 131 | 204 | } |
| 132 | 205 | |
| 133 | 206 | public function get_countdown_item_css( $attributes, $device = '' ) { |
| 134 | 207 | $css = []; |
| 208 | + $width_css = []; | |
| 209 | + // $css['padding'] = '0'; | |
| 210 | + $label_position = ! empty( $attributes['labelPosition'] ) ? $attributes['labelPosition'] : ''; | |
| 211 | + $orient = ! empty( $attributes['orient'] ) ? $attributes['orient'] : []; | |
| 135 | 212 | |
| 136 | - $box_background_color = ! empty( $attributes['boxBackgroundColor'] ) ? $attributes['boxBackgroundColor'] : ''; | |
| 213 | + $device_key = $device ? 'value' . ucfirst( $device ) : 'value'; | |
| 214 | + $direction = isset( $orient[ $device_key ] ) ? $orient[ $device_key ] : ( $orient['value'] ?? '' ); | |
| 137 | 215 | |
| 138 | - $label_position = ! empty( $attributes['labelPosition'] ) ? $attributes['labelPosition'] : ''; | |
| 216 | + if ( in_array( $direction, [ 'column', 'column-reverse' ], true ) ) { | |
| 217 | + $width_css = Range::get_css( [ | |
| 218 | + 'attributeValue' => $attributes['boxSize'], | |
| 219 | + 'attribute_object_key' => 'value', | |
| 220 | + 'isResponsive' => true, | |
| 221 | + 'defaultValue' => 130, | |
| 222 | + 'hasUnit' => true, | |
| 223 | + 'unitDefaultValue' => 'px', | |
| 224 | + 'property' => 'width', | |
| 225 | + 'device' => $device, | |
| 226 | + ] ); | |
| 227 | + } else { | |
| 228 | + $width_css = [ 'width' => '130px' ]; | |
| 229 | + } | |
| 230 | + | |
| 139 | 231 | if ( $label_position ) { |
| 140 | 232 | $css['flex-direction'] = $label_position; |
| 141 | 233 | } |
| 142 | - if ( $box_background_color ) { | |
| 143 | - $css['background'] = $box_background_color; | |
| 144 | - } | |
| 234 | + | |
| 145 | 235 | $border_css = []; |
| 146 | 236 | if ( isset( $attributes['boxBorder'] ) ) { |
| 147 | 237 | $border_css = Border::get_css( $attributes['boxBorder'], '', $device ); |
| 148 | 238 | } |
| 239 | + | |
| 149 | 240 | return array_merge( |
| 150 | - Range::get_css([ | |
| 151 | - 'attributeValue' => $attributes['boxSize'], | |
| 241 | + [ 'background' => Color::get_css( isset( $attributes['boxBackgroundColor'] ) ? $attributes['boxBackgroundColor'] : '' ) ], | |
| 242 | + $width_css, | |
| 243 | + Range::get_css( [ | |
| 244 | + 'attributeValue' => $attributes['numberAndLabelGap'], | |
| 152 | 245 | 'attribute_object_key' => 'value', |
| 153 | - 'isResponsive' => true, | |
| 154 | - 'defaultValue' => 130, | |
| 155 | - 'hasUnit' => true, | |
| 156 | - 'unitDefaultValue' => 'px', | |
| 157 | - 'property' => 'width', | |
| 158 | - 'device' => $device, | |
| 159 | - ]), | |
| 160 | - Range::get_css([ | |
| 161 | - 'attributeValue' => $attributes['numberAndLabelGap'], | |
| 162 | - 'attribute_object_key' => 'value', | |
| 163 | - 'isResponsive' => true, | |
| 164 | - 'defaultValue' => 5, | |
| 165 | - 'hasUnit' => true, | |
| 166 | - 'unitDefaultValue' => 'px', | |
| 167 | - 'property' => 'gap', | |
| 168 | - 'device' => $device, | |
| 169 | - ]), | |
| 246 | + 'isResponsive' => true, | |
| 247 | + 'defaultValue' => 5, | |
| 248 | + 'hasUnit' => true, | |
| 249 | + 'unitDefaultValue' => 'px', | |
| 250 | + 'property' => 'gap', | |
| 251 | + 'device' => $device, | |
| 252 | + ] ), | |
| 170 | 253 | $border_css, |
| 171 | 254 | $css, |
| 172 | - BoxShadow::get_css( ! empty( $attributes['boxShadow'] ) ? $attributes['boxShadow'] : '', $device ) | |
| 255 | + BoxShadow::get_css( ! empty( $attributes['boxShadow'] ) ? $attributes['boxShadow'] : '', $device ), | |
| 256 | + Dimensions::get_css( $attributes['padding'], 'padding', $device ), | |
| 173 | 257 | ); |
| 174 | 258 | } |
| 175 | 259 | |
| 176 | 260 | |
| 177 | 261 | |
| 262 | + | |
| 178 | 263 | public function get_countdown_item_hover_css( $attributes, $device = '' ) { |
| 179 | 264 | return array_merge( |
| 180 | 265 | Border::get_hover_css( ! empty( $attributes['boxBorder'] ) ? $attributes['boxBorder'] : [], '', $device ), |
| 181 | 266 | BoxShadow::get_hover_css( $attributes['boxShadow'], '', $device ) |
| @@ -183,15 +268,8 @@ | ||
| 183 | 268 | } |
| 184 | 269 | |
| 185 | 270 | public function get_label_css( $attributes, $device = '' ) { |
| 186 | 271 | $css = []; |
| 187 | - $label_color = ! empty( $attributes['labelColor'] ) ? $attributes['labelColor'] : ''; | |
| 188 | - if ( $label_color ) { | |
| 189 | - $css['color'] = $label_color; | |
| 190 | - } | |
| 191 | - if ( $attributes['labelBgColor'] ) { | |
| 192 | - $css['background'] = $attributes['labelBgColor']; | |
| 193 | - } | |
| 194 | 272 | if ( $attributes['labelPosition'] === 'column' || $attributes['labelPosition'] === 'column-reverse' ) { |
| 195 | 273 | $css['width'] = '100%'; |
| 196 | 274 | $css['flex'] = '1 1 30%'; |
| 197 | 275 | $css['display'] = 'flex'; |
| @@ -197,10 +275,13 @@ | ||
| 197 | 275 | $css['display'] = 'flex'; |
| 198 | 276 | $css['justify-content'] = 'center'; |
| 199 | 277 | $css['align-items'] = 'center'; |
| 200 | 278 | } |
| 279 | + $typographyGlobal = ( isset( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : '' ); | |
| 201 | 280 | return array_merge( |
| 202 | - ! empty( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device ) : array(), | |
| 281 | + [ 'color' => Color::get_css( isset( $attributes['labelColor'] ) ? $attributes['labelColor'] : '' ) ], | |
| 282 | + [ 'background' => Color::get_css( isset( $attributes['labelBgColor'] ) ? $attributes['labelBgColor'] : '' ) ], | |
| 283 | + ! empty( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device, $typographyGlobal ) : array(), | |
| 203 | 284 | $css |
| 204 | 285 | ); |
| 205 | 286 | } |
| 206 | 287 | |
| @@ -205,15 +286,8 @@ | ||
| 205 | 286 | } |
| 206 | 287 | |
| 207 | 288 | public function get_number_css( $attributes, $device = '' ) { |
| 208 | 289 | $css = []; |
| 209 | - $number_color = ! empty( $attributes['numberColor'] ) ? $attributes['numberColor'] : ''; | |
| 210 | - if ( $number_color ) { | |
| 211 | - $css['color'] = $number_color; | |
| 212 | - } | |
| 213 | - if ( $attributes['numberBgColor'] ) { | |
| 214 | - $css['background'] = $attributes['numberBgColor']; | |
| 215 | - } | |
| 216 | 290 | if ( $attributes['labelPosition'] === 'column' || $attributes['labelPosition'] === 'column-reverse' ) { |
| 217 | 291 | $css['width'] = '100%'; |
| 218 | 292 | $css['flex'] = '1 1 70%'; |
| 219 | 293 | $css['display'] = 'flex'; |
| @@ -219,23 +293,22 @@ | ||
| 219 | 293 | $css['display'] = 'flex'; |
| 220 | 294 | $css['justify-content'] = 'center'; |
| 221 | 295 | $css['align-items'] = 'center'; |
| 222 | 296 | } |
| 297 | + $typographyGlobal = ( isset( $attributes['numberTypographyGlobal'] ) ? $attributes['numberTypographyGlobal'] : '' ); | |
| 223 | 298 | return array_merge( |
| 224 | - ! empty( $attributes['numberTypography'] ) ? Typography::get_css( $attributes['numberTypography'], '', $device ) : array(), | |
| 299 | + [ 'color' => Color::get_css( isset( $attributes['numberColor'] ) ? $attributes['numberColor'] : '' ) ], | |
| 300 | + [ 'background' => Color::get_css( isset( $attributes['numberBgColor'] ) ? $attributes['numberBgColor'] : '' ) ], | |
| 301 | + ! empty( $attributes['numberTypography'] ) ? Typography::get_css( $attributes['numberTypography'], '', $device, $typographyGlobal ) : array(), | |
| 225 | 302 | $css |
| 226 | 303 | ); |
| 227 | 304 | } |
| 228 | 305 | |
| 229 | 306 | public function get_separator_css( $attributes, $device = '' ) { |
| 230 | - $css = []; | |
| 231 | - $separator_color = ! empty( $attributes['separatorColor'] ) ? $attributes['separatorColor'] : ''; | |
| 232 | - if ( $separator_color ) { | |
| 233 | - $css['color'] = $separator_color; | |
| 234 | - } | |
| 307 | + $typographyGlobal = ( isset( $attributes['separatorTypographyGlobal'] ) ? $attributes['separatorTypographyGlobal'] : '' ); | |
| 235 | 308 | return array_merge( |
| 236 | - ! empty( $attributes['separatorTypography'] ) ? Typography::get_css( $attributes['separatorTypography'], '', $device ) : array(), | |
| 237 | - $css | |
| 309 | + [ 'color' => Color::get_css( isset( $attributes['separatorColor'] ) ? $attributes['separatorColor'] : '' ) ], | |
| 310 | + ! empty( $attributes['separatorTypography'] ) ? Typography::get_css( $attributes['separatorTypography'], '', $device, $typographyGlobal ) : array(), | |
| 238 | 311 | ); |
| 239 | 312 | } |
| 240 | 313 | } |
| 241 | 314 | |
