elementor / includes / widgets / icon-box.php

icon-box.php in Elementor Website Builder – more than just a page builder 3.31.2, at includes/widgets/icon-box.php

955 lines 24.1 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor icon box widget.
13	*
14	* Elementor widget that displays an icon, a headline and a text.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Icon_Box extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve icon box widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'icon-box';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve icon box widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Icon Box', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve icon box widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-icon-box';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'icon box', 'icon' ];
74	}
75
76	protected function is_dynamic_content(): bool {
77	return false;
78	}
79
80	public function has_widget_inner_wrapper(): bool {
81	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
82	}
83
84	/**
85	* Get style dependencies.
86	*
87	* Retrieve the list of style dependencies the widget requires.
88	*
89	* @since 3.24.0
90	* @access public
91	*
92	* @return array Widget style dependencies.
93	*/
94	public function get_style_depends(): array {
95	return [ 'widget-icon-box' ];
96	}
97
98	/**
99	* Register icon box widget controls.
100	*
101	* Adds different input fields to allow the user to change and customize the widget settings.
102	*
103	* @since 3.1.0
104	* @access protected
105	*/
106	protected function register_controls() {
107	$this->start_controls_section(
108	'section_icon',
109	[
110	'label' => esc_html__( 'Icon Box', 'elementor' ),
111	]
112	);
113
114	$this->add_control(
115	'selected_icon',
116	[
117	'label' => esc_html__( 'Icon', 'elementor' ),
118	'type' => Controls_Manager::ICONS,
119	'fa4compatibility' => 'icon',
120	'default' => [
121	'value' => 'fas fa-star',
122	'library' => 'fa-solid',
123	],
124	]
125	);
126
127	$this->add_control(
128	'view',
129	[
130	'label' => esc_html__( 'View', 'elementor' ),
131	'type' => Controls_Manager::SELECT,
132	'options' => [
133	'default' => esc_html__( 'Default', 'elementor' ),
134	'stacked' => esc_html__( 'Stacked', 'elementor' ),
135	'framed' => esc_html__( 'Framed', 'elementor' ),
136	],
137	'default' => 'default',
138	'prefix_class' => 'elementor-view-',
139	'condition' => [
140	'selected_icon[value]!' => '',
141	],
142	]
143	);
144
145	$this->add_control(
146	'shape',
147	[
148	'label' => esc_html__( 'Shape', 'elementor' ),
149	'type' => Controls_Manager::SELECT,
150	'options' => [
151	'square' => esc_html__( 'Square', 'elementor' ),
152	'rounded' => esc_html__( 'Rounded', 'elementor' ),
153	'circle' => esc_html__( 'Circle', 'elementor' ),
154	],
155	'default' => 'circle',
156	'condition' => [
157	'view!' => 'default',
158	'selected_icon[value]!' => '',
159	],
160	'prefix_class' => 'elementor-shape-',
161	]
162	);
163
164	$this->add_control(
165	'title_text',
166	[
167	'label' => esc_html__( 'Title', 'elementor' ),
168	'type' => Controls_Manager::TEXT,
169	'dynamic' => [
170	'active' => true,
171	],
172	'default' => esc_html__( 'This is the heading', 'elementor' ),
173	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
174	'label_block' => true,
175	]
176	);
177
178	$this->add_control(
179	'description_text',
180	[
181	'label' => esc_html__( 'Description', 'elementor' ),
182	'type' => Controls_Manager::TEXTAREA,
183	'dynamic' => [
184	'active' => true,
185	],
186	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
187	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
188	'rows' => 10,
189	]
190	);
191
192	$this->add_control(
193	'link',
194	[
195	'label' => esc_html__( 'Link', 'elementor' ),
196	'type' => Controls_Manager::URL,
197	'dynamic' => [
198	'active' => true,
199	],
200	'separator' => 'before',
201	]
202	);
203
204	$this->add_control(
205	'title_size',
206	[
207	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
208	'type' => Controls_Manager::SELECT,
209	'options' => [
210	'h1' => 'H1',
211	'h2' => 'H2',
212	'h3' => 'H3',
213	'h4' => 'H4',
214	'h5' => 'H5',
215	'h6' => 'H6',
216	'div' => 'div',
217	'span' => 'span',
218	'p' => 'p',
219	],
220	'default' => 'h3',
221	]
222	);
223
224	$this->end_controls_section();
225
226	$this->start_controls_section(
227	'section_style_box',
228	[
229	'label' => esc_html__( 'Box', 'elementor' ),
230	'tab' => Controls_Manager::TAB_STYLE,
231	]
232	);
233
234	$this->add_responsive_control(
235	'position',
236	[
237	'label' => esc_html__( 'Icon Position', 'elementor' ),
238	'type' => Controls_Manager::CHOOSE,
239	'default' => 'top',
240	'mobile_default' => 'top',
241	'options' => [
242	'left' => [
243	'title' => esc_html__( 'Left', 'elementor' ),
244	'icon' => 'eicon-h-align-left',
245	],
246	'top' => [
247	'title' => esc_html__( 'Top', 'elementor' ),
248	'icon' => 'eicon-v-align-top',
249	],
250	'right' => [
251	'title' => esc_html__( 'Right', 'elementor' ),
252	'icon' => 'eicon-h-align-right',
253	],
254	],
255	'prefix_class' => 'elementor%s-position-',
256	'condition' => [
257	'selected_icon[value]!' => '',
258	],
259	]
260	);
261
262	$this->add_responsive_control(
263	'content_vertical_alignment',
264	[
265	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
266	'type' => Controls_Manager::CHOOSE,
267	'options' => [
268	'top' => [
269	'title' => esc_html__( 'Top', 'elementor' ),
270	'icon' => 'eicon-v-align-top',
271	],
272	'middle' => [
273	'title' => esc_html__( 'Middle', 'elementor' ),
274	'icon' => 'eicon-v-align-middle',
275	],
276	'bottom' => [
277	'title' => esc_html__( 'Bottom', 'elementor' ),
278	'icon' => 'eicon-v-align-bottom',
279	],
280	],
281	'default' => 'top',
282	'selectors_dictionary' => [
283	'top' => 'start',
284	'middle' => 'center',
285	'bottom' => 'end',
286	],
287	'selectors' => [
288	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'align-items: {{VALUE}};',
289	],
290	'condition' => [
291	'selected_icon[value]!' => '',
292	'position' => [ 'left', 'right' ],
293	],
294	]
295	);
296
297	$this->add_responsive_control(
298	'text_align',
299	[
300	'label' => esc_html__( 'Alignment', 'elementor' ),
301	'type' => Controls_Manager::CHOOSE,
302	'options' => [
303	'left' => [
304	'title' => esc_html__( 'Left', 'elementor' ),
305	'icon' => 'eicon-text-align-left',
306	],
307	'center' => [
308	'title' => esc_html__( 'Center', 'elementor' ),
309	'icon' => 'eicon-text-align-center',
310	],
311	'right' => [
312	'title' => esc_html__( 'Right', 'elementor' ),
313	'icon' => 'eicon-text-align-right',
314	],
315	'justify' => [
316	'title' => esc_html__( 'Justified', 'elementor' ),
317	'icon' => 'eicon-text-align-justify',
318	],
319	],
320	'selectors' => [
321	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
322	],
323	'separator' => 'after',
324	]
325	);
326
327	$this->add_responsive_control(
328	'icon_space',
329	[
330	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
331	'type' => Controls_Manager::SLIDER,
332	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
333	'default' => [
334	'size' => 15,
335	],
336	'range' => [
337	'px' => [
338	'max' => 100,
339	],
340	'em' => [
341	'max' => 10,
342	],
343	'rem' => [
344	'max' => 10,
345	],
346	],
347	'selectors' => [
348	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
349	],
350	'condition' => [
351	'selected_icon[value]!' => '',
352	],
353	]
354	);
355
356	$this->add_responsive_control(
357	'title_bottom_space',
358	[
359	'label' => esc_html__( 'Content Spacing', 'elementor' ),
360	'type' => Controls_Manager::SLIDER,
361	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
362	'range' => [
363	'px' => [
364	'max' => 100,
365	],
366	'em' => [
367	'min' => 0,
368	'max' => 10,
369	],
370	'rem' => [
371	'min' => 0,
372	'max' => 10,
373	],
374	],
375	'selectors' => [
376	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
377	],
378	]
379	);
380
381	$this->end_controls_section();
382
383	$this->start_controls_section(
384	'section_style_icon',
385	[
386	'label' => esc_html__( 'Icon', 'elementor' ),
387	'tab' => Controls_Manager::TAB_STYLE,
388	'condition' => [
389	'selected_icon[value]!' => '',
390	],
391	]
392	);
393
394	$this->start_controls_tabs( 'icon_colors' );
395
396	$this->start_controls_tab(
397	'icon_colors_normal',
398	[
399	'label' => esc_html__( 'Normal', 'elementor' ),
400	]
401	);
402
403	$this->add_control(
404	'primary_color',
405	[
406	'label' => esc_html__( 'Primary Color', 'elementor' ),
407	'type' => Controls_Manager::COLOR,
408	'global' => [
409	'default' => Global_Colors::COLOR_PRIMARY,
410	],
411	'default' => '',
412	'selectors' => [
413	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
414	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
415	],
416	]
417	);
418
419	$this->add_control(
420	'secondary_color',
421	[
422	'label' => esc_html__( 'Secondary Color', 'elementor' ),
423	'type' => Controls_Manager::COLOR,
424	'default' => '',
425	'condition' => [
426	'view!' => 'default',
427	],
428	'selectors' => [
429	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
430	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
431	],
432	]
433	);
434
435	$this->end_controls_tab();
436
437	$this->start_controls_tab(
438	'icon_colors_hover',
439	[
440	'label' => esc_html__( 'Hover', 'elementor' ),
441	]
442	);
443
444	$this->add_control(
445	'hover_primary_color',
446	[
447	'label' => esc_html__( 'Primary Color', 'elementor' ),
448	'type' => Controls_Manager::COLOR,
449	'default' => '',
450	'selectors' => [
451	'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
452	{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
453	'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
454	{{WRAPPER}}.elementor-view-default:has(:hover) .elementor-icon,
455	{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon,
456	{{WRAPPER}}.elementor-view-default:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
457	],
458	]
459	);
460
461	$this->add_control(
462	'hover_secondary_color',
463	[
464	'label' => esc_html__( 'Secondary Color', 'elementor' ),
465	'type' => Controls_Manager::COLOR,
466	'default' => '',
467	'condition' => [
468	'view!' => 'default',
469	],
470	'selectors' => [
471	'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
472	{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
473	'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
474	{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
475	],
476	]
477	);
478
479	$this->add_control(
480	'hover_icon_colors_transition_duration',
481	[
482	'label' => esc_html__( 'Transition Duration', 'elementor' ),
483	'type' => Controls_Manager::SLIDER,
484	'size_units' => [ 's', 'ms', 'custom' ],
485	'default' => [
486	'unit' => 's',
487	],
488	'selectors' => [
489	'{{WRAPPER}} .elementor-icon' => 'transition-duration: {{SIZE}}{{UNIT}};',
490	],
491	]
492	);
493
494	$this->add_control(
495	'hover_animation',
496	[
497	'label' => esc_html__( 'Hover Animation', 'elementor' ),
498	'type' => Controls_Manager::HOVER_ANIMATION,
499	]
500	);
501
502	$this->end_controls_tab();
503
504	$this->end_controls_tabs();
505
506	$this->add_responsive_control(
507	'icon_size',
508	[
509	'label' => esc_html__( 'Size', 'elementor' ),
510	'type' => Controls_Manager::SLIDER,
511	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
512	'range' => [
513	'px' => [
514	'min' => 6,
515	'max' => 300,
516	],
517	],
518	'selectors' => [
519	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
520	],
521	]
522	);
523
524	$this->add_responsive_control(
525	'icon_padding',
526	[
527	'label' => esc_html__( 'Padding', 'elementor' ),
528	'type' => Controls_Manager::SLIDER,
529	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
530	'selectors' => [
531	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
532	],
533	'range' => [
534	'px' => [
535	'max' => 50,
536	],
537	'em' => [
538	'min' => 0,
539	'max' => 5,
540	],
541	'rem' => [
542	'min' => 0,
543	'max' => 5,
544	],
545	],
546	'condition' => [
547	'view!' => 'default',
548	],
549	]
550	);
551
552	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
553
554	$rotate_device_args = [];
555
556	$rotate_device_settings = [
557	'default' => [
558	'unit' => 'deg',
559	],
560	];
561
562	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
563	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
564	}
565
566	$this->add_responsive_control(
567	'rotate',
568	[
569	'label' => esc_html__( 'Rotate', 'elementor' ),
570	'type' => Controls_Manager::SLIDER,
571	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
572	'default' => [
573	'unit' => 'deg',
574	],
575	'tablet_default' => [
576	'unit' => 'deg',
577	],
578	'mobile_default' => [
579	'unit' => 'deg',
580	],
581	'device_args' => $rotate_device_args,
582	'selectors' => [
583	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
584	],
585	]
586	);
587
588	$this->add_responsive_control(
589	'border_width',
590	[
591	'label' => esc_html__( 'Border Width', 'elementor' ),
592	'type' => Controls_Manager::DIMENSIONS,
593	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
594	'selectors' => [
595	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
596	],
597	'condition' => [
598	'view' => 'framed',
599	],
600	]
601	);
602
603	$this->add_responsive_control(
604	'border_radius',
605	[
606	'label' => esc_html__( 'Border Radius', 'elementor' ),
607	'type' => Controls_Manager::DIMENSIONS,
608	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
609	'selectors' => [
610	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
611	],
612	'condition' => [
613	'view!' => 'default',
614	],
615	'separator' => 'before',
616	]
617	);
618
619	$this->end_controls_section();
620
621	$this->start_controls_section(
622	'section_style_content',
623	[
624	'label' => esc_html__( 'Content', 'elementor' ),
625	'tab' => Controls_Manager::TAB_STYLE,
626	]
627	);
628
629	$this->add_control(
630	'heading_title',
631	[
632	'label' => esc_html__( 'Title', 'elementor' ),
633	'type' => Controls_Manager::HEADING,
634	'separator' => 'before',
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Typography::get_type(),
640	[
641	'name' => 'title_typography',
642	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
643	'global' => [
644	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
645	],
646	]
647	);
648
649	$this->add_group_control(
650	Group_Control_Text_Stroke::get_type(),
651	[
652	'name' => 'text_stroke',
653	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
654	]
655	);
656
657	$this->add_group_control(
658	Group_Control_Text_Shadow::get_type(),
659	[
660	'name' => 'title_shadow',
661	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
662	]
663	);
664
665	$this->start_controls_tabs( 'icon_box_title_colors' );
666
667	$this->start_controls_tab(
668	'icon_box_title_colors_normal',
669	[
670	'label' => esc_html__( 'Normal', 'elementor' ),
671	]
672	);
673
674	$this->add_control(
675	'title_color',
676	[
677	'label' => esc_html__( 'Color', 'elementor' ),
678	'type' => Controls_Manager::COLOR,
679	'default' => '',
680	'selectors' => [
681	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
682	],
683	'global' => [
684	'default' => Global_Colors::COLOR_PRIMARY,
685	],
686	]
687	);
688
689	$this->end_controls_tab();
690
691	$this->start_controls_tab(
692	'icon_box_title_colors_hover',
693	[
694	'label' => esc_html__( 'Hover', 'elementor' ),
695	]
696	);
697
698	$this->add_control(
699	'hover_title_color',
700	[
701	'label' => esc_html__( 'Color', 'elementor' ),
702	'type' => Controls_Manager::COLOR,
703	'default' => '',
704	'selectors' => [
705	'{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
706	{{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
707	],
708	'global' => [
709	'default' => Global_Colors::COLOR_PRIMARY,
710	],
711	]
712	);
713
714	$this->add_control(
715	'hover_title_color_transition_duration',
716	[
717	'label' => esc_html__( 'Transition Duration', 'elementor' ),
718	'type' => Controls_Manager::SLIDER,
719	'size_units' => [ 's', 'ms', 'custom' ],
720	'default' => [
721	'unit' => 's',
722	],
723	'selectors' => [
724	'{{WRAPPER}} .elementor-icon-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
725	],
726	]
727	);
728
729	$this->end_controls_tab();
730
731	$this->end_controls_tabs();
732
733	$this->add_control(
734	'heading_description',
735	[
736	'label' => esc_html__( 'Description', 'elementor' ),
737	'type' => Controls_Manager::HEADING,
738	'separator' => 'before',
739	]
740	);
741
742	$this->add_group_control(
743	Group_Control_Typography::get_type(),
744	[
745	'name' => 'description_typography',
746	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
747	'global' => [
748	'default' => Global_Typography::TYPOGRAPHY_TEXT,
749	],
750	]
751	);
752
753	$this->add_group_control(
754	Group_Control_Text_Shadow::get_type(),
755	[
756	'name' => 'description_shadow',
757	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
758	]
759	);
760
761	$this->add_control(
762	'description_color',
763	[
764	'label' => esc_html__( 'Color', 'elementor' ),
765	'type' => Controls_Manager::COLOR,
766	'default' => '',
767	'selectors' => [
768	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
769	],
770	'global' => [
771	'default' => Global_Colors::COLOR_TEXT,
772	],
773	]
774	);
775
776	$this->end_controls_section();
777	}
778
779	/**
780	* Render icon box widget output on the frontend.
781	*
782	* Written in PHP and used to generate the final HTML.
783	*
784	* @since 1.0.0
785	* @access protected
786	*/
787	protected function render() {
788	$settings = $this->get_settings_for_display();
789	$has_link = ! empty( $settings['link']['url'] );
790	$html_tag = $has_link ? 'a' : 'span';
791
792	$this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
793
794	if ( ! empty( $settings['hover_animation'] ) ) {
795	$this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
796	}
797
798	$has_icon = ! empty( $settings['selected_icon']['value'] );
799	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
800
801	if ( ! $has_icon && ! $has_content ) {
802	return;
803	}
804
805	if ( $has_link ) {
806	$this->add_link_attributes( 'link', $settings['link'] );
807	$this->add_render_attribute( 'icon', 'tabindex', '-1' );
808	if ( ! empty( $settings['title_text'] ) ) {
809	$this->add_render_attribute( 'icon', 'aria-label', $settings['title_text'] );
810	}
811	}
812
813	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
814	// add old default
815	$settings['icon'] = 'fa fa-star';
816	}
817
818	if ( ! empty( $settings['icon'] ) ) {
819	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
820	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
821	}
822
823	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
824
825	$this->add_inline_editing_attributes( 'title_text', 'none' );
826	$this->add_inline_editing_attributes( 'description_text' );
827
828	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
829	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
830	?>
831	<div class="elementor-icon-box-wrapper">
832
833	<?php if ( $has_icon ) : ?>
834	<div class="elementor-icon-box-icon">
835	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
836	<?php
837	if ( $is_new \|\| $migrated ) {
838	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
839	} elseif ( ! empty( $settings['icon'] ) ) {
840	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
841	}
842	?>
843	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
844	</div>
845	<?php endif; ?>
846
847	<?php if ( $has_content ) : ?>
848	<div class="elementor-icon-box-content">
849
850	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
851	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
852	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
853	<?php echo wp_kses_post( $settings['title_text'] ); ?>
854	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
855	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
856	<?php endif; ?>
857
858	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
859	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
860	<?php echo wp_kses_post( $settings['description_text'] ); ?>
861	</p>
862	<?php endif; ?>
863
864	</div>
865	<?php endif; ?>
866
867	</div>
868	<?php
869	}
870
871	/**
872	* Render icon box widget output in the editor.
873	*
874	* Written as a Backbone JavaScript template and used to generate the live preview.
875	*
876	* @since 2.9.0
877	* @access protected
878	*/
879	protected function content_template() {
880	?>
881	<#
882	// For older version `settings.icon` is needed.
883	var hasIcon = settings.icon \|\| settings.selected_icon.value;
884	var hasContent = settings.title_text \|\| settings.description_text;
885
886	if ( ! hasIcon && ! hasContent ) {
887	return;
888	}
889
890	var hasLink = settings.link.url,
891	htmlTag = hasLink ? 'a' : 'span',
892	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
893	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
894	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
895
896	view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
897
898	if ( '' !== settings.hover_animation ) {
899	view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
900	}
901
902	if ( hasLink ) {
903	view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
904	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
905	if ( '' !== settings.title_text ) {
906	view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
907	}
908	}
909
910	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
911
912	view.addInlineEditingAttributes( 'title_text', 'none' );
913	view.addInlineEditingAttributes( 'description_text' );
914	#>
915	<div class="elementor-icon-box-wrapper">
916
917	<# if ( hasIcon ) { #>
918	<div class="elementor-icon-box-icon">
919	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
920	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
921	{{{ elementor.helpers.sanitize( iconHTML.value ) }}}
922	<# } else { #>
923	<i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
924	<# } #>
925	</{{{ htmlTag }}}>
926	</div>
927	<# } #>
928
929	<# if ( hasContent ) { #>
930	<div class="elementor-icon-box-content">
931
932	<# if ( settings.title_text ) { #>
933	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
934	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
935	{{{ elementor.helpers.sanitize( settings.title_text ) }}}
936	</{{{ htmlTag }}}>
937	</{{{ titleSizeTag }}}>
938	<# } #>
939
940	<# if ( settings.description_text ) { #>
941	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
942	<# } #>
943
944	</div>
945	<# } #>
946
947	</div>
948	<?php
949	}
950
951	public function on_import( $element ) {
952	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
953	}
954	}
955