← All changes | includes/blocks/info-box/block.php +120 -35 2.8.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' ),
		@@ -264,9 +280,29 @@
264	280	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
265	281	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
266	282	Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
267	283	);
268		-
	284	+ $css_generator->add_class_styles(
	285	+ '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
	286	+ Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
	287	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
	288	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
	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	+ );
269	305	return $css_generator->generate_css();
270	306	}
271	307	public function build_css_v2( $attributes ) {
272	308	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
		@@ -274,15 +310,17 @@
274	310	$css_generator->add_class_styles(
275	311	'{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
276	312	$this->get_info_box( $attributes ),
277	313	$this->get_info_box( $attributes, 'Tablet' ),
278		- $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 ); } )
279	316	);
280	317	$css_generator->add_class_styles(
281	318	'{{WRAPPER}} .ablocks-block--info-box__content',
282	319	$this->get_info_box_content( $attributes ),
283	320	$this->get_info_box_content( $attributes, 'Tablet' ),
284		- $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 ); } )
285	323	);
286	324
287	325	// badge starts
288	326	$css_generator->add_class_styles(
		@@ -288,15 +326,17 @@
288	326	$css_generator->add_class_styles(
289	327	'{{WRAPPER}} .ablocks-info-box-badge-link',
290	328	$this->get_badge_css( $attributes ),
291	329	$this->get_badge_css( $attributes, 'Tablet' ),
292		- $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 ); } )
293	332	);
294	333	$css_generator->add_class_styles(
295	334	'{{WRAPPER}} .ablocks-info-box-badge-link:hover',
296	335	$this->get_badge_hover_css( $attributes ),
297	336	$this->get_badge_hover_css( $attributes, 'Tablet' ),
298		- $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 ); } )
299	339	);
300	340	$css_generator->add_class_styles(
301	341	'{{WRAPPER}} .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
302	342	$this->get_badge_text_css( $attributes )
		@@ -309,9 +349,10 @@
309	349	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
310	350	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
311	351	Icon::get_wrapper_css( $attributes ),
312	352	Icon::get_wrapper_css( $attributes, 'Tablet' ),
313		- 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 ); } )
314	355	);
315	356	// Icon Style
316	357	$css_generator->add_class_styles(
317	358	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap:hover,
		@@ -319,9 +360,10 @@
319	360	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap:hover,
320	361	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap:hover',
321	362	Icon::get_wrapper_hover_css( $attributes ),
322	363	Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
323		- 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 ); } )
324	366	);
325	367	$css_generator->add_class_styles(
326	368	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
327	369	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
		@@ -328,9 +370,10 @@
328	370	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
329	371	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
330	372	$this->get_icon_wrapper_extra_css( $attributes ),
331	373	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
332		- $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 ); } )
333	376	);
334	377	$css_generator->add_class_styles(
335	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',
336	379	Icon::get_element_image_css( $attributes ),
		@@ -335,8 +378,9 @@
335	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',
336	379	Icon::get_element_image_css( $attributes ),
337	380	Icon::get_element_image_css( $attributes, 'Tablet' ),
338	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 ); } )
339	383	);
340	384	$css_generator->add_class_styles(
341	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',
342	386	Icon::get_element_image_hover_css( $attributes ),
		@@ -341,8 +385,9 @@
341	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',
342	386	Icon::get_element_image_hover_css( $attributes ),
343	387	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
344	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 ); } )
345	390	);
346	391	$css_generator->add_class_styles(
347	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',
348	393	Icon::get_element_css( $attributes ),
		@@ -347,8 +392,9 @@
347	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',
348	393	Icon::get_element_css( $attributes ),
349	394	Icon::get_element_css( $attributes, 'Tablet' ),
350	395	Icon::get_element_css( $attributes, 'Mobile' ),
	396	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
351	397	);
352	398	$css_generator->add_class_styles(
353	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',
354	400	Icon::get_element_image_hover_css( $attributes ),
		@@ -353,8 +399,9 @@
353	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',
354	400	Icon::get_element_image_hover_css( $attributes ),
355	401	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
356	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 ); } )
357	404	);
358	405	$css_generator->add_class_styles(
359	406	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap svg.ablocks-svg-icon ,
360	407	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon ,
		@@ -374,15 +421,17 @@
374	421	$css_generator->add_class_styles(
375	422	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-heading',
376	423	$this->get_heading_text_css( $attributes ),
377	424	$this->get_heading_text_css( $attributes, 'Tablet' ),
378		- $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 ); } )
379	427	);
380	428	$css_generator->add_class_styles(
381	429	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-heading',
382	430	$this->get_heading_text_css_hover( $attributes ),
383	431	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
384		- $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 ); } )
385	434	);
386	435
387	436	// Sub Heading starts
388	437	$css_generator->add_class_styles(
		@@ -388,15 +437,17 @@
388	437	$css_generator->add_class_styles(
389	438	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
390	439	$this->get_sub_heading_text_css( $attributes ),
391	440	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
392		- $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 ); } )
393	443	);
394	444	$css_generator->add_class_styles(
395	445	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
396	446	$this->get_sub_heading_text_css_hover( $attributes ),
397	447	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
398		- $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 ); } )
399	450	);
400	451
401	452	// Description starts
402	453	$css_generator->add_class_styles(
		@@ -403,14 +454,16 @@
403	454	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text',
404	455	$this->get_des_text_css( $attributes ),
405	456	$this->get_des_text_css( $attributes, 'Tablet' ),
406	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 ); } )
407	459	);
408	460	$css_generator->add_class_styles(
409	461	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-text',
410	462	$this->get_des_text_css_hover( $attributes ),
411	463	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
412		- $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 ); } )
413	466	);
414	467	$css_generator->add_class_styles(
415	468	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
416	469	$this->get_des_drop_text_css( $attributes ),
		@@ -415,8 +468,9 @@
415	468	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
416	469	$this->get_des_drop_text_css( $attributes ),
417	470	$this->get_des_drop_text_css( $attributes, 'Tablet' ),
418	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 ); } )
419	473	);
420	474
421	475	// rating icon css
422	476	$css_generator->add_class_styles(
		@@ -423,8 +477,9 @@
423	477	'{{WRAPPER}} .ablocks-info-box-star-ratings',
424	478	$this->get_container_css( $attributes ),
425	479	$this->get_container_css( $attributes, 'Tablet' ),
426	480	$this->get_container_css( $attributes, 'Mobile' ),
	481	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_css( $attributes, $device ); } )
427	482	);
428	483	$css_generator->add_class_styles(
429	484	'{{WRAPPER}} .ablocks-info-box-star-ratings',
430	485	$this->get_rating_css( $attributes ),
		@@ -429,14 +484,16 @@
429	484	'{{WRAPPER}} .ablocks-info-box-star-ratings',
430	485	$this->get_rating_css( $attributes ),
431	486	$this->get_rating_css( $attributes, 'Tablet' ),
432	487	$this->get_rating_css( $attributes, 'Mobile' ),
	488	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_rating_css( $attributes, $device ); } )
433	489	);
434	490	$css_generator->add_class_styles(
435	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',
436	492	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
437	493	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
438		- 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' ); } )
439	496	);
440	497	// rating icon spacing css
441	498	$css_generator->add_class_styles(
442	499	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
		@@ -442,8 +499,9 @@
442	499	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
443	500	$this->get_rating_icon_spacing_css( $attributes ),
444	501	$this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
445	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 ); } )
446	504	);
447	505	$css_generator->add_class_styles(
448	506	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
449	507	$this->get_fill_rating_css( $attributes ),
		@@ -448,8 +506,9 @@
448	506	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
449	507	$this->get_fill_rating_css( $attributes ),
450	508	$this->get_fill_rating_css( $attributes, 'Tablet' ),
451	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 ); } )
452	511	);
453	512	$css_generator->add_class_styles(
454	513	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
455	514	$this->get_unfill_rating_css( $attributes ),
		@@ -454,8 +513,9 @@
454	513	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
455	514	$this->get_unfill_rating_css( $attributes ),
456	515	$this->get_unfill_rating_css( $attributes, 'Tablet' ),
457	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 ); } )
458	518	);
459	519	$css_generator->add_class_styles(
460	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',
461	521	$this->get_fill_rating_css_hover( $attributes ),
		@@ -460,8 +520,9 @@
460	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',
461	521	$this->get_fill_rating_css_hover( $attributes ),
462	522	$this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
463	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 ); } )
464	525	);
465	526	$css_generator->add_class_styles(
466	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',
467	528	$this->get_unfill_rating_css_hover( $attributes ),
		@@ -466,8 +527,9 @@
466	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',
467	528	$this->get_unfill_rating_css_hover( $attributes ),
468	529	$this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
469	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 ); } )
470	532	);
471	533	// rating number css
472	534	$css_generator->add_class_styles(
473	535	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
		@@ -473,8 +535,9 @@
473	535	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
474	536	$this->get_rating_number_css( $attributes ),
475	537	$this->get_rating_number_css( $attributes, 'Tablet' ),
476	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 ); } )
477	540	);
478	541
479	542	// Generate button CSS start
480	543	$css_generator->add_class_styles(
		@@ -480,9 +543,10 @@
480	543	$css_generator->add_class_styles(
481	544	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
482	545	$this->get_button_css( $attributes ),
483	546	$this->get_button_css( $attributes, 'Tablet' ),
484		- $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 ); } )
485	549	);
486	550	// Generate button CSS end
487	551	// Generate button hover CSS start
488	552	$css_generator->add_class_styles(
		@@ -488,9 +552,10 @@
488	552	$css_generator->add_class_styles(
489	553	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
490	554	$this->get_button_hover_css( $attributes ),
491	555	$this->get_button_hover_css( $attributes, 'Tablet' ),
492		- $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 ); } )
493	558	);
494	559	// Generate button icon hover CSS
495	560	$css_generator->add_class_styles(
496	561	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
		@@ -495,9 +560,10 @@
495	560	$css_generator->add_class_styles(
496	561	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
497	562	$this->get_button_icon_hover_css( $attributes ),
498	563	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
499		- $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 ); } )
500	566	);
501	567	// Generate button text CSS start
502	568	$css_generator->add_class_styles(
503	569	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
		@@ -507,9 +573,10 @@
507	573	$css_generator->add_class_styles(
508	574	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
509	575	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
510	576	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
511		- 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' ); } )
512	579	);
513	580	$css_generator->add_class_styles(
514	581	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
515	582	Icon::get_element_css( $attributes, '', 'btnIcon' ),
		@@ -514,8 +581,9 @@
514	581	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
515	582	Icon::get_element_css( $attributes, '', 'btnIcon' ),
516	583	Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
517	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' ); } )
518	586	);
519	587	$css_generator->add_class_styles(
520	588	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
521	589	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
		@@ -520,10 +588,27 @@
520	588	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
521	589	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
522	590	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
523	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' ); } )
524	593	);
525		-
	594	+ $css_generator->add_class_styles(
	595	+ '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
	596	+ Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
	597	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
	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' ] : [] )
	610	+ );
526	611	return $css_generator->generate_css();
527	612	}
528	613	public function build_css( $attributes ) {
529	614	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {