PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.0
2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 All 81 releases
← All changes | includes/blocks/info-box/block.php +108 -33 2.9.0 → 2.14.0 View file →
@@ -27,15 +27,17 @@
27 27 $css_generator->add_class_styles(
28 28 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
29 29 $this->get_info_box( $attributes ),
30 30 $this->get_info_box( $attributes, 'Tablet' ),
31 - $this->get_info_box( $attributes, 'Mobile' )
31 + $this->get_info_box( $attributes, 'Mobile' ),
32 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box( $attributes, $device ); } )
32 33 );
33 34 $css_generator->add_class_styles(
34 35 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content',
35 36 $this->get_info_box_content( $attributes ),
36 37 $this->get_info_box_content( $attributes, 'Tablet' ),
37 - $this->get_info_box_content( $attributes, 'Mobile' )
38 + $this->get_info_box_content( $attributes, 'Mobile' ),
39 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box_content( $attributes, $device ); } )
38 40 );
39 41
40 42 // badge starts
41 43 $css_generator->add_class_styles(
@@ -41,15 +43,17 @@
41 43 $css_generator->add_class_styles(
42 44 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link',
43 45 $this->get_badge_css( $attributes ),
44 46 $this->get_badge_css( $attributes, 'Tablet' ),
45 - $this->get_badge_css( $attributes, 'Mobile' )
47 + $this->get_badge_css( $attributes, 'Mobile' ),
48 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_css( $attributes, $device ); } )
46 49 );
47 50 $css_generator->add_class_styles(
48 51 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link:hover',
49 52 $this->get_badge_hover_css( $attributes ),
50 53 $this->get_badge_hover_css( $attributes, 'Tablet' ),
51 - $this->get_badge_hover_css( $attributes, 'Mobile' )
54 + $this->get_badge_hover_css( $attributes, 'Mobile' ),
55 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_hover_css( $attributes, $device ); } )
52 56 );
53 57 $css_generator->add_class_styles(
54 58 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
55 59 $this->get_badge_text_css( $attributes )
@@ -59,15 +63,17 @@
59 63 $css_generator->add_class_styles(
60 64 '{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
61 65 Icon::get_wrapper_css( $attributes ),
62 66 Icon::get_wrapper_css( $attributes, 'Tablet' ),
63 - Icon::get_wrapper_css( $attributes, 'Mobile' )
67 + Icon::get_wrapper_css( $attributes, 'Mobile' ),
68 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
64 69 );
65 70 $css_generator->add_class_styles(
66 71 '{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
67 72 $this->get_icon_wrapper_extra_css( $attributes ),
68 73 $this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
69 - $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
74 + $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' ),
75 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_wrapper_extra_css( $attributes, $device ); } )
70 76 );
71 77 $css_generator->add_class_styles(
72 78 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > a .ablocks-icon-wrap > img.ablocks-image-icon',
73 79 Icon::get_element_image_css( $attributes ),
@@ -109,15 +115,17 @@
109 115 $css_generator->add_class_styles(
110 116 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
111 117 $desktop_heading_text_styles,
112 118 $this->get_heading_text_css( $attributes, 'Tablet' ),
113 - $this->get_heading_text_css( $attributes, 'Mobile' )
119 + $this->get_heading_text_css( $attributes, 'Mobile' ),
120 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css( $attributes, $device ); } )
114 121 );
115 122 $css_generator->add_class_styles(
116 123 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
117 124 $this->get_heading_text_css_hover( $attributes ),
118 125 $this->get_heading_text_css_hover( $attributes, 'Tablet' ),
119 - $this->get_heading_text_css_hover( $attributes, 'Mobile' )
126 + $this->get_heading_text_css_hover( $attributes, 'Mobile' ),
127 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css_hover( $attributes, $device ); } )
120 128 );
121 129
122 130 // Sub Heading starts
123 131 $desktop_sub_heading_text_styles = $this->get_sub_heading_text_css( $attributes );
@@ -127,15 +135,17 @@
127 135 $css_generator->add_class_styles(
128 136 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
129 137 $desktop_sub_heading_text_styles,
130 138 $this->get_sub_heading_text_css( $attributes, 'Tablet' ),
131 - $this->get_sub_heading_text_css( $attributes, 'Mobile' )
139 + $this->get_sub_heading_text_css( $attributes, 'Mobile' ),
140 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css( $attributes, $device ); } )
132 141 );
133 142 $css_generator->add_class_styles(
134 143 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
135 144 $this->get_sub_heading_text_css_hover( $attributes ),
136 145 $this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
137 - $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
146 + $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' ),
147 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css_hover( $attributes, $device ); } )
138 148 );
139 149
140 150 // Description starts
141 151 $desktop_des_text_style = $this->get_des_text_css( $attributes );
@@ -151,9 +161,10 @@
151 161 $css_generator->add_class_styles(
152 162 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text',
153 163 $this->get_des_text_css_hover( $attributes ),
154 164 $this->get_des_text_css_hover( $attributes, 'Tablet' ),
155 - $this->get_des_text_css_hover( $attributes, 'Mobile' )
165 + $this->get_des_text_css_hover( $attributes, 'Mobile' ),
166 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css_hover( $attributes, $device ); } )
156 167 );
157 168 $css_generator->add_class_styles(
158 169 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
159 170 $this->get_des_drop_text_css( $attributes ),
@@ -177,9 +188,10 @@
177 188 $css_generator->add_class_styles(
178 189 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
179 190 Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
180 191 Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
181 - Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
192 + Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' ),
193 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'starIcon' ); } )
182 194 );
183 195 // rating icon spacing css
184 196 $css_generator->add_class_styles(
185 197 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
@@ -223,9 +235,10 @@
223 235 $css_generator->add_class_styles(
224 236 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
225 237 $this->get_button_css( $attributes ),
226 238 $this->get_button_css( $attributes, 'Tablet' ),
227 - $this->get_button_css( $attributes, 'Mobile' )
239 + $this->get_button_css( $attributes, 'Mobile' ),
240 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
228 241 );
229 242 // Generate button CSS end
230 243 // Generate button hover CSS start
231 244 $css_generator->add_class_styles(
@@ -231,9 +244,10 @@
231 244 $css_generator->add_class_styles(
232 245 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
233 246 $this->get_button_hover_css( $attributes ),
234 247 $this->get_button_hover_css( $attributes, 'Tablet' ),
235 - $this->get_button_hover_css( $attributes, 'Mobile' )
248 + $this->get_button_hover_css( $attributes, 'Mobile' ),
249 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
236 250 );
237 251 // Generate button icon hover CSS
238 252 $css_generator->add_class_styles(
239 253 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
@@ -238,9 +252,10 @@
238 252 $css_generator->add_class_styles(
239 253 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
240 254 $this->get_button_icon_hover_css( $attributes ),
241 255 $this->get_button_icon_hover_css( $attributes, 'Tablet' ),
242 - $this->get_button_icon_hover_css( $attributes, 'Mobile' )
256 + $this->get_button_icon_hover_css( $attributes, 'Mobile' ),
257 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_icon_hover_css( $attributes, $device ); } )
243 258 );
244 259 // Generate button text CSS start
245 260 $css_generator->add_class_styles(
246 261 '{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
@@ -250,9 +265,10 @@
250 265 $css_generator->add_class_styles(
251 266 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
252 267 Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
253 268 Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
254 - Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
269 + Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' ),
270 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'btnIcon' ); } )
255 271 );
256 272 $css_generator->add_class_styles(
257 273 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
258 274 Icon::get_element_css( $attributes, '', 'btnIcon' ),
@@ -270,8 +286,23 @@
270 286 Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
271 287 Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
272 288 Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
273 289 );
290 + // Specificity override: the flex rule above has (0,2,0); the global hide rule also has (0,2,0) but
291 + // comes earlier in the CSS output, so flex wins due to source order. This override uses
292 + // {{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-* → (0,3,0), placed last,
293 + // so display:none always beats display:flex regardless of order. Restore uses flex (not block)
294 + // so the Info Box layout stays intact when a device-hidden block becomes visible at a smaller breakpoint.
295 + $css_generator->add_class_styles(
296 + '{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile',
297 + ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [],
298 + ! empty( $attributes['_hide_on_tablet'] )
299 + ? [ 'display' => 'none' ]
300 + : ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ),
301 + ! empty( $attributes['_hide_on_mobile'] )
302 + ? [ 'display' => 'none' ]
303 + : ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] )
304 + );
274 305 return $css_generator->generate_css();
275 306 }
276 307 public function build_css_v2( $attributes ) {
277 308 $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
@@ -279,15 +310,17 @@
279 310 $css_generator->add_class_styles(
280 311 '{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
281 312 $this->get_info_box( $attributes ),
282 313 $this->get_info_box( $attributes, 'Tablet' ),
283 - $this->get_info_box( $attributes, 'Mobile' )
314 + $this->get_info_box( $attributes, 'Mobile' ),
315 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box( $attributes, $device ); } )
284 316 );
285 317 $css_generator->add_class_styles(
286 318 '{{WRAPPER}} .ablocks-block--info-box__content',
287 319 $this->get_info_box_content( $attributes ),
288 320 $this->get_info_box_content( $attributes, 'Tablet' ),
289 - $this->get_info_box_content( $attributes, 'Mobile' )
321 + $this->get_info_box_content( $attributes, 'Mobile' ),
322 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_info_box_content( $attributes, $device ); } )
290 323 );
291 324
292 325 // badge starts
293 326 $css_generator->add_class_styles(
@@ -293,15 +326,17 @@
293 326 $css_generator->add_class_styles(
294 327 '{{WRAPPER}} .ablocks-info-box-badge-link',
295 328 $this->get_badge_css( $attributes ),
296 329 $this->get_badge_css( $attributes, 'Tablet' ),
297 - $this->get_badge_css( $attributes, 'Mobile' )
330 + $this->get_badge_css( $attributes, 'Mobile' ),
331 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_css( $attributes, $device ); } )
298 332 );
299 333 $css_generator->add_class_styles(
300 334 '{{WRAPPER}} .ablocks-info-box-badge-link:hover',
301 335 $this->get_badge_hover_css( $attributes ),
302 336 $this->get_badge_hover_css( $attributes, 'Tablet' ),
303 - $this->get_badge_hover_css( $attributes, 'Mobile' )
337 + $this->get_badge_hover_css( $attributes, 'Mobile' ),
338 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_badge_hover_css( $attributes, $device ); } )
304 339 );
305 340 $css_generator->add_class_styles(
306 341 '{{WRAPPER}} .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
307 342 $this->get_badge_text_css( $attributes )
@@ -314,9 +349,10 @@
314 349 {{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
315 350 {{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
316 351 Icon::get_wrapper_css( $attributes ),
317 352 Icon::get_wrapper_css( $attributes, 'Tablet' ),
318 - Icon::get_wrapper_css( $attributes, 'Mobile' )
353 + Icon::get_wrapper_css( $attributes, 'Mobile' ),
354 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
319 355 );
320 356 // Icon Style
321 357 $css_generator->add_class_styles(
322 358 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap:hover,
@@ -324,9 +360,10 @@
324 360 {{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap:hover,
325 361 {{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap:hover',
326 362 Icon::get_wrapper_hover_css( $attributes ),
327 363 Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
328 - Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
364 + Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
365 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
329 366 );
330 367 $css_generator->add_class_styles(
331 368 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
332 369 {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
@@ -333,9 +370,10 @@
333 370 {{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
334 371 {{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
335 372 $this->get_icon_wrapper_extra_css( $attributes ),
336 373 $this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
337 - $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
374 + $this->get_icon_wrapper_extra_css( $attributes, 'Mobile' ),
375 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_wrapper_extra_css( $attributes, $device ); } )
338 376 );
339 377 $css_generator->add_class_styles(
340 378 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > a .ablocks-icon-wrap > img.ablocks-image-icon',
341 379 Icon::get_element_image_css( $attributes ),
@@ -340,8 +378,9 @@
340 378 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > a .ablocks-icon-wrap > img.ablocks-image-icon',
341 379 Icon::get_element_image_css( $attributes ),
342 380 Icon::get_element_image_css( $attributes, 'Tablet' ),
343 381 Icon::get_element_image_css( $attributes, 'Mobile' ),
382 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
344 383 );
345 384 $css_generator->add_class_styles(
346 385 '{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon , {{WRAPPER}}:hover > a .ablocks-icon-wrap > img.ablocks-image-icon',
347 386 Icon::get_element_image_hover_css( $attributes ),
@@ -346,8 +385,9 @@
346 385 '{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon , {{WRAPPER}}:hover > a .ablocks-icon-wrap > img.ablocks-image-icon',
347 386 Icon::get_element_image_hover_css( $attributes ),
348 387 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
349 388 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
389 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
350 390 );
351 391 $css_generator->add_class_styles(
352 392 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
353 393 Icon::get_element_css( $attributes ),
@@ -352,8 +392,9 @@
352 392 '{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
353 393 Icon::get_element_css( $attributes ),
354 394 Icon::get_element_css( $attributes, 'Tablet' ),
355 395 Icon::get_element_css( $attributes, 'Mobile' ),
396 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
356 397 );
357 398 $css_generator->add_class_styles(
358 399 '{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
359 400 Icon::get_element_image_hover_css( $attributes ),
@@ -358,8 +399,9 @@
358 399 '{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
359 400 Icon::get_element_image_hover_css( $attributes ),
360 401 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
361 402 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
403 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
362 404 );
363 405 $css_generator->add_class_styles(
364 406 '{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap svg.ablocks-svg-icon ,
365 407 {{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon ,
@@ -379,15 +421,17 @@
379 421 $css_generator->add_class_styles(
380 422 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-heading',
381 423 $this->get_heading_text_css( $attributes ),
382 424 $this->get_heading_text_css( $attributes, 'Tablet' ),
383 - $this->get_heading_text_css( $attributes, 'Mobile' )
425 + $this->get_heading_text_css( $attributes, 'Mobile' ),
426 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css( $attributes, $device ); } )
384 427 );
385 428 $css_generator->add_class_styles(
386 429 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-heading',
387 430 $this->get_heading_text_css_hover( $attributes ),
388 431 $this->get_heading_text_css_hover( $attributes, 'Tablet' ),
389 - $this->get_heading_text_css_hover( $attributes, 'Mobile' )
432 + $this->get_heading_text_css_hover( $attributes, 'Mobile' ),
433 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css_hover( $attributes, $device ); } )
390 434 );
391 435
392 436 // Sub Heading starts
393 437 $css_generator->add_class_styles(
@@ -393,15 +437,17 @@
393 437 $css_generator->add_class_styles(
394 438 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
395 439 $this->get_sub_heading_text_css( $attributes ),
396 440 $this->get_sub_heading_text_css( $attributes, 'Tablet' ),
397 - $this->get_sub_heading_text_css( $attributes, 'Mobile' )
441 + $this->get_sub_heading_text_css( $attributes, 'Mobile' ),
442 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css( $attributes, $device ); } )
398 443 );
399 444 $css_generator->add_class_styles(
400 445 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
401 446 $this->get_sub_heading_text_css_hover( $attributes ),
402 447 $this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
403 - $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
448 + $this->get_sub_heading_text_css_hover( $attributes, 'Mobile' ),
449 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_heading_text_css_hover( $attributes, $device ); } )
404 450 );
405 451
406 452 // Description starts
407 453 $css_generator->add_class_styles(
@@ -408,14 +454,16 @@
408 454 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text',
409 455 $this->get_des_text_css( $attributes ),
410 456 $this->get_des_text_css( $attributes, 'Tablet' ),
411 457 $this->get_des_text_css( $attributes, 'Mobile' ),
458 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css( $attributes, $device ); } )
412 459 );
413 460 $css_generator->add_class_styles(
414 461 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-text',
415 462 $this->get_des_text_css_hover( $attributes ),
416 463 $this->get_des_text_css_hover( $attributes, 'Tablet' ),
417 - $this->get_des_text_css_hover( $attributes, 'Mobile' )
464 + $this->get_des_text_css_hover( $attributes, 'Mobile' ),
465 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_text_css_hover( $attributes, $device ); } )
418 466 );
419 467 $css_generator->add_class_styles(
420 468 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
421 469 $this->get_des_drop_text_css( $attributes ),
@@ -420,8 +468,9 @@
420 468 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
421 469 $this->get_des_drop_text_css( $attributes ),
422 470 $this->get_des_drop_text_css( $attributes, 'Tablet' ),
423 471 $this->get_des_drop_text_css( $attributes, 'Mobile' ),
472 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_des_drop_text_css( $attributes, $device ); } )
424 473 );
425 474
426 475 // rating icon css
427 476 $css_generator->add_class_styles(
@@ -428,8 +477,9 @@
428 477 '{{WRAPPER}} .ablocks-info-box-star-ratings',
429 478 $this->get_container_css( $attributes ),
430 479 $this->get_container_css( $attributes, 'Tablet' ),
431 480 $this->get_container_css( $attributes, 'Mobile' ),
481 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_css( $attributes, $device ); } )
432 482 );
433 483 $css_generator->add_class_styles(
434 484 '{{WRAPPER}} .ablocks-info-box-star-ratings',
435 485 $this->get_rating_css( $attributes ),
@@ -434,14 +484,16 @@
434 484 '{{WRAPPER}} .ablocks-info-box-star-ratings',
435 485 $this->get_rating_css( $attributes ),
436 486 $this->get_rating_css( $attributes, 'Tablet' ),
437 487 $this->get_rating_css( $attributes, 'Mobile' ),
488 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_css( $attributes, $device ); } )
438 489 );
439 490 $css_generator->add_class_styles(
440 491 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
441 492 Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
442 493 Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
443 - Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
494 + Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' ),
495 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'starIcon' ); } )
444 496 );
445 497 // rating icon spacing css
446 498 $css_generator->add_class_styles(
447 499 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
@@ -447,8 +499,9 @@
447 499 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
448 500 $this->get_rating_icon_spacing_css( $attributes ),
449 501 $this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
450 502 $this->get_rating_icon_spacing_css( $attributes, 'Mobile' ),
503 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_icon_spacing_css( $attributes, $device ); } )
451 504 );
452 505 $css_generator->add_class_styles(
453 506 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
454 507 $this->get_fill_rating_css( $attributes ),
@@ -453,8 +506,9 @@
453 506 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
454 507 $this->get_fill_rating_css( $attributes ),
455 508 $this->get_fill_rating_css( $attributes, 'Tablet' ),
456 509 $this->get_fill_rating_css( $attributes, 'Mobile' ),
510 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_fill_rating_css( $attributes, $device ); } )
457 511 );
458 512 $css_generator->add_class_styles(
459 513 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
460 514 $this->get_unfill_rating_css( $attributes ),
@@ -459,8 +513,9 @@
459 513 '{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
460 514 $this->get_unfill_rating_css( $attributes ),
461 515 $this->get_unfill_rating_css( $attributes, 'Tablet' ),
462 516 $this->get_unfill_rating_css( $attributes, 'Mobile' ),
517 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_unfill_rating_css( $attributes, $device ); } )
463 518 );
464 519 $css_generator->add_class_styles(
465 520 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
466 521 $this->get_fill_rating_css_hover( $attributes ),
@@ -465,8 +520,9 @@
465 520 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
466 521 $this->get_fill_rating_css_hover( $attributes ),
467 522 $this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
468 523 $this->get_fill_rating_css_hover( $attributes, 'Mobile' ),
524 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_fill_rating_css_hover( $attributes, $device ); } )
469 525 );
470 526 $css_generator->add_class_styles(
471 527 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
472 528 $this->get_unfill_rating_css_hover( $attributes ),
@@ -471,8 +527,9 @@
471 527 '{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
472 528 $this->get_unfill_rating_css_hover( $attributes ),
473 529 $this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
474 530 $this->get_unfill_rating_css_hover( $attributes, 'Mobile' ),
531 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_unfill_rating_css_hover( $attributes, $device ); } )
475 532 );
476 533 // rating number css
477 534 $css_generator->add_class_styles(
478 535 '{{WRAPPER}} .ablocks-info-box-star-rating-number',
@@ -478,8 +535,9 @@
478 535 '{{WRAPPER}} .ablocks-info-box-star-rating-number',
479 536 $this->get_rating_number_css( $attributes ),
480 537 $this->get_rating_number_css( $attributes, 'Tablet' ),
481 538 $this->get_rating_number_css( $attributes, 'Mobile' ),
539 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_number_css( $attributes, $device ); } )
482 540 );
483 541
484 542 // Generate button CSS start
485 543 $css_generator->add_class_styles(
@@ -485,9 +543,10 @@
485 543 $css_generator->add_class_styles(
486 544 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
487 545 $this->get_button_css( $attributes ),
488 546 $this->get_button_css( $attributes, 'Tablet' ),
489 - $this->get_button_css( $attributes, 'Mobile' )
547 + $this->get_button_css( $attributes, 'Mobile' ),
548 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
490 549 );
491 550 // Generate button CSS end
492 551 // Generate button hover CSS start
493 552 $css_generator->add_class_styles(
@@ -493,9 +552,10 @@
493 552 $css_generator->add_class_styles(
494 553 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
495 554 $this->get_button_hover_css( $attributes ),
496 555 $this->get_button_hover_css( $attributes, 'Tablet' ),
497 - $this->get_button_hover_css( $attributes, 'Mobile' )
556 + $this->get_button_hover_css( $attributes, 'Mobile' ),
557 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
498 558 );
499 559 // Generate button icon hover CSS
500 560 $css_generator->add_class_styles(
501 561 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
@@ -500,9 +560,10 @@
500 560 $css_generator->add_class_styles(
501 561 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
502 562 $this->get_button_icon_hover_css( $attributes ),
503 563 $this->get_button_icon_hover_css( $attributes, 'Tablet' ),
504 - $this->get_button_icon_hover_css( $attributes, 'Mobile' )
564 + $this->get_button_icon_hover_css( $attributes, 'Mobile' ),
565 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_icon_hover_css( $attributes, $device ); } )
505 566 );
506 567 // Generate button text CSS start
507 568 $css_generator->add_class_styles(
508 569 '{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
@@ -512,9 +573,10 @@
512 573 $css_generator->add_class_styles(
513 574 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
514 575 Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
515 576 Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
516 - Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
577 + Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' ),
578 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device, 'btnIcon' ); } )
517 579 );
518 580 $css_generator->add_class_styles(
519 581 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
520 582 Icon::get_element_css( $attributes, '', 'btnIcon' ),
@@ -519,8 +581,9 @@
519 581 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
520 582 Icon::get_element_css( $attributes, '', 'btnIcon' ),
521 583 Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
522 584 Icon::get_element_css( $attributes, 'Mobile', 'btnIcon' ),
585 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device, 'btnIcon' ); } )
523 586 );
524 587 $css_generator->add_class_styles(
525 588 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
526 589 Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
@@ -525,8 +588,9 @@
525 588 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
526 589 Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
527 590 Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
528 591 Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
592 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device, 'btnIcon' ); } )
529 593 );
530 594 $css_generator->add_class_styles(
531 595 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
532 596 Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
@@ -531,8 +595,19 @@
531 595 '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
532 596 Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
533 597 Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
534 598 Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
599 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device, 'btnIcon' ); } )
600 + );
601 + $css_generator->add_class_styles(
602 + '{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile',
603 + ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [],
604 + ! empty( $attributes['_hide_on_tablet'] )
605 + ? [ 'display' => 'none' ]
606 + : ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ),
607 + ! empty( $attributes['_hide_on_mobile'] )
608 + ? [ 'display' => 'none' ]
609 + : ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] )
535 610 );
536 611 return $css_generator->generate_css();
537 612 }
538 613 public function build_css( $attributes ) {