elementor / includes / widgets / icon-box.php

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

959 lines 24.2 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	'bottom' => [
255	'title' => esc_html__( 'Bottom', 'elementor' ),
256	'icon' => 'eicon-v-align-bottom',
257	],
258	],
259	'prefix_class' => 'elementor%s-position-',
260	'condition' => [
261	'selected_icon[value]!' => '',
262	],
263	]
264	);
265
266	$this->add_responsive_control(
267	'content_vertical_alignment',
268	[
269	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
270	'type' => Controls_Manager::CHOOSE,
271	'options' => [
272	'top' => [
273	'title' => esc_html__( 'Top', 'elementor' ),
274	'icon' => 'eicon-v-align-top',
275	],
276	'middle' => [
277	'title' => esc_html__( 'Middle', 'elementor' ),
278	'icon' => 'eicon-v-align-middle',
279	],
280	'bottom' => [
281	'title' => esc_html__( 'Bottom', 'elementor' ),
282	'icon' => 'eicon-v-align-bottom',
283	],
284	],
285	'default' => 'top',
286	'selectors_dictionary' => [
287	'top' => 'start',
288	'middle' => 'center',
289	'bottom' => 'end',
290	],
291	'selectors' => [
292	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'align-items: {{VALUE}};',
293	],
294	'condition' => [
295	'selected_icon[value]!' => '',
296	'position' => [ 'left', 'right' ],
297	],
298	]
299	);
300
301	$this->add_responsive_control(
302	'text_align',
303	[
304	'label' => esc_html__( 'Alignment', 'elementor' ),
305	'type' => Controls_Manager::CHOOSE,
306	'options' => [
307	'left' => [
308	'title' => esc_html__( 'Left', 'elementor' ),
309	'icon' => 'eicon-text-align-left',
310	],
311	'center' => [
312	'title' => esc_html__( 'Center', 'elementor' ),
313	'icon' => 'eicon-text-align-center',
314	],
315	'right' => [
316	'title' => esc_html__( 'Right', 'elementor' ),
317	'icon' => 'eicon-text-align-right',
318	],
319	'justify' => [
320	'title' => esc_html__( 'Justified', 'elementor' ),
321	'icon' => 'eicon-text-align-justify',
322	],
323	],
324	'selectors' => [
325	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
326	],
327	'separator' => 'after',
328	]
329	);
330
331	$this->add_responsive_control(
332	'icon_space',
333	[
334	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
335	'type' => Controls_Manager::SLIDER,
336	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
337	'default' => [
338	'size' => 15,
339	],
340	'range' => [
341	'px' => [
342	'max' => 100,
343	],
344	'em' => [
345	'max' => 10,
346	],
347	'rem' => [
348	'max' => 10,
349	],
350	],
351	'selectors' => [
352	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
353	],
354	'condition' => [
355	'selected_icon[value]!' => '',
356	],
357	]
358	);
359
360	$this->add_responsive_control(
361	'title_bottom_space',
362	[
363	'label' => esc_html__( 'Content Spacing', 'elementor' ),
364	'type' => Controls_Manager::SLIDER,
365	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
366	'range' => [
367	'px' => [
368	'max' => 100,
369	],
370	'em' => [
371	'min' => 0,
372	'max' => 10,
373	],
374	'rem' => [
375	'min' => 0,
376	'max' => 10,
377	],
378	],
379	'selectors' => [
380	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
381	],
382	]
383	);
384
385	$this->end_controls_section();
386
387	$this->start_controls_section(
388	'section_style_icon',
389	[
390	'label' => esc_html__( 'Icon', 'elementor' ),
391	'tab' => Controls_Manager::TAB_STYLE,
392	'condition' => [
393	'selected_icon[value]!' => '',
394	],
395	]
396	);
397
398	$this->start_controls_tabs( 'icon_colors' );
399
400	$this->start_controls_tab(
401	'icon_colors_normal',
402	[
403	'label' => esc_html__( 'Normal', 'elementor' ),
404	]
405	);
406
407	$this->add_control(
408	'primary_color',
409	[
410	'label' => esc_html__( 'Primary Color', 'elementor' ),
411	'type' => Controls_Manager::COLOR,
412	'global' => [
413	'default' => Global_Colors::COLOR_PRIMARY,
414	],
415	'default' => '',
416	'selectors' => [
417	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
418	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
419	],
420	]
421	);
422
423	$this->add_control(
424	'secondary_color',
425	[
426	'label' => esc_html__( 'Secondary Color', 'elementor' ),
427	'type' => Controls_Manager::COLOR,
428	'default' => '',
429	'condition' => [
430	'view!' => 'default',
431	],
432	'selectors' => [
433	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
434	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
435	],
436	]
437	);
438
439	$this->end_controls_tab();
440
441	$this->start_controls_tab(
442	'icon_colors_hover',
443	[
444	'label' => esc_html__( 'Hover', 'elementor' ),
445	]
446	);
447
448	$this->add_control(
449	'hover_primary_color',
450	[
451	'label' => esc_html__( 'Primary Color', 'elementor' ),
452	'type' => Controls_Manager::COLOR,
453	'default' => '',
454	'selectors' => [
455	'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
456	{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
457	'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
458	{{WRAPPER}}.elementor-view-default:has(:hover) .elementor-icon,
459	{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon,
460	{{WRAPPER}}.elementor-view-default:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
461	],
462	]
463	);
464
465	$this->add_control(
466	'hover_secondary_color',
467	[
468	'label' => esc_html__( 'Secondary Color', 'elementor' ),
469	'type' => Controls_Manager::COLOR,
470	'default' => '',
471	'condition' => [
472	'view!' => 'default',
473	],
474	'selectors' => [
475	'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
476	{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
477	'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
478	{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
479	],
480	]
481	);
482
483	$this->add_control(
484	'hover_icon_colors_transition_duration',
485	[
486	'label' => esc_html__( 'Transition Duration', 'elementor' ),
487	'type' => Controls_Manager::SLIDER,
488	'size_units' => [ 's', 'ms', 'custom' ],
489	'default' => [
490	'unit' => 's',
491	],
492	'selectors' => [
493	'{{WRAPPER}} .elementor-icon' => 'transition-duration: {{SIZE}}{{UNIT}};',
494	],
495	]
496	);
497
498	$this->add_control(
499	'hover_animation',
500	[
501	'label' => esc_html__( 'Hover Animation', 'elementor' ),
502	'type' => Controls_Manager::HOVER_ANIMATION,
503	]
504	);
505
506	$this->end_controls_tab();
507
508	$this->end_controls_tabs();
509
510	$this->add_responsive_control(
511	'icon_size',
512	[
513	'label' => esc_html__( 'Size', 'elementor' ),
514	'type' => Controls_Manager::SLIDER,
515	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
516	'range' => [
517	'px' => [
518	'min' => 6,
519	'max' => 300,
520	],
521	],
522	'selectors' => [
523	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
524	],
525	]
526	);
527
528	$this->add_responsive_control(
529	'icon_padding',
530	[
531	'label' => esc_html__( 'Padding', 'elementor' ),
532	'type' => Controls_Manager::SLIDER,
533	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
534	'selectors' => [
535	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
536	],
537	'range' => [
538	'px' => [
539	'max' => 50,
540	],
541	'em' => [
542	'min' => 0,
543	'max' => 5,
544	],
545	'rem' => [
546	'min' => 0,
547	'max' => 5,
548	],
549	],
550	'condition' => [
551	'view!' => 'default',
552	],
553	]
554	);
555
556	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
557
558	$rotate_device_args = [];
559
560	$rotate_device_settings = [
561	'default' => [
562	'unit' => 'deg',
563	],
564	];
565
566	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
567	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
568	}
569
570	$this->add_responsive_control(
571	'rotate',
572	[
573	'label' => esc_html__( 'Rotate', 'elementor' ),
574	'type' => Controls_Manager::SLIDER,
575	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
576	'default' => [
577	'unit' => 'deg',
578	],
579	'tablet_default' => [
580	'unit' => 'deg',
581	],
582	'mobile_default' => [
583	'unit' => 'deg',
584	],
585	'device_args' => $rotate_device_args,
586	'selectors' => [
587	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
588	],
589	]
590	);
591
592	$this->add_responsive_control(
593	'border_width',
594	[
595	'label' => esc_html__( 'Border Width', 'elementor' ),
596	'type' => Controls_Manager::DIMENSIONS,
597	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
598	'selectors' => [
599	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
600	],
601	'condition' => [
602	'view' => 'framed',
603	],
604	]
605	);
606
607	$this->add_responsive_control(
608	'border_radius',
609	[
610	'label' => esc_html__( 'Border Radius', 'elementor' ),
611	'type' => Controls_Manager::DIMENSIONS,
612	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
613	'selectors' => [
614	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
615	],
616	'condition' => [
617	'view!' => 'default',
618	],
619	'separator' => 'before',
620	]
621	);
622
623	$this->end_controls_section();
624
625	$this->start_controls_section(
626	'section_style_content',
627	[
628	'label' => esc_html__( 'Content', 'elementor' ),
629	'tab' => Controls_Manager::TAB_STYLE,
630	]
631	);
632
633	$this->add_control(
634	'heading_title',
635	[
636	'label' => esc_html__( 'Title', 'elementor' ),
637	'type' => Controls_Manager::HEADING,
638	'separator' => 'before',
639	]
640	);
641
642	$this->add_group_control(
643	Group_Control_Typography::get_type(),
644	[
645	'name' => 'title_typography',
646	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
647	'global' => [
648	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
649	],
650	]
651	);
652
653	$this->add_group_control(
654	Group_Control_Text_Stroke::get_type(),
655	[
656	'name' => 'text_stroke',
657	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
658	]
659	);
660
661	$this->add_group_control(
662	Group_Control_Text_Shadow::get_type(),
663	[
664	'name' => 'title_shadow',
665	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
666	]
667	);
668
669	$this->start_controls_tabs( 'icon_box_title_colors' );
670
671	$this->start_controls_tab(
672	'icon_box_title_colors_normal',
673	[
674	'label' => esc_html__( 'Normal', 'elementor' ),
675	]
676	);
677
678	$this->add_control(
679	'title_color',
680	[
681	'label' => esc_html__( 'Color', 'elementor' ),
682	'type' => Controls_Manager::COLOR,
683	'default' => '',
684	'selectors' => [
685	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
686	],
687	'global' => [
688	'default' => Global_Colors::COLOR_PRIMARY,
689	],
690	]
691	);
692
693	$this->end_controls_tab();
694
695	$this->start_controls_tab(
696	'icon_box_title_colors_hover',
697	[
698	'label' => esc_html__( 'Hover', 'elementor' ),
699	]
700	);
701
702	$this->add_control(
703	'hover_title_color',
704	[
705	'label' => esc_html__( 'Color', 'elementor' ),
706	'type' => Controls_Manager::COLOR,
707	'default' => '',
708	'selectors' => [
709	'{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
710	{{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
711	],
712	'global' => [
713	'default' => Global_Colors::COLOR_PRIMARY,
714	],
715	]
716	);
717
718	$this->add_control(
719	'hover_title_color_transition_duration',
720	[
721	'label' => esc_html__( 'Transition Duration', 'elementor' ),
722	'type' => Controls_Manager::SLIDER,
723	'size_units' => [ 's', 'ms', 'custom' ],
724	'default' => [
725	'unit' => 's',
726	],
727	'selectors' => [
728	'{{WRAPPER}} .elementor-icon-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
729	],
730	]
731	);
732
733	$this->end_controls_tab();
734
735	$this->end_controls_tabs();
736
737	$this->add_control(
738	'heading_description',
739	[
740	'label' => esc_html__( 'Description', 'elementor' ),
741	'type' => Controls_Manager::HEADING,
742	'separator' => 'before',
743	]
744	);
745
746	$this->add_group_control(
747	Group_Control_Typography::get_type(),
748	[
749	'name' => 'description_typography',
750	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
751	'global' => [
752	'default' => Global_Typography::TYPOGRAPHY_TEXT,
753	],
754	]
755	);
756
757	$this->add_group_control(
758	Group_Control_Text_Shadow::get_type(),
759	[
760	'name' => 'description_shadow',
761	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
762	]
763	);
764
765	$this->add_control(
766	'description_color',
767	[
768	'label' => esc_html__( 'Color', 'elementor' ),
769	'type' => Controls_Manager::COLOR,
770	'default' => '',
771	'selectors' => [
772	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
773	],
774	'global' => [
775	'default' => Global_Colors::COLOR_TEXT,
776	],
777	]
778	);
779
780	$this->end_controls_section();
781	}
782
783	/**
784	* Render icon box widget output on the frontend.
785	*
786	* Written in PHP and used to generate the final HTML.
787	*
788	* @since 1.0.0
789	* @access protected
790	*/
791	protected function render() {
792	$settings = $this->get_settings_for_display();
793	$has_link = ! empty( $settings['link']['url'] );
794	$html_tag = $has_link ? 'a' : 'span';
795
796	$this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
797
798	if ( ! empty( $settings['hover_animation'] ) ) {
799	$this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
800	}
801
802	$has_icon = ! empty( $settings['selected_icon']['value'] );
803	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
804
805	if ( ! $has_icon && ! $has_content ) {
806	return;
807	}
808
809	if ( $has_link ) {
810	$this->add_link_attributes( 'link', $settings['link'] );
811	$this->add_render_attribute( 'icon', 'tabindex', '-1' );
812	if ( ! empty( $settings['title_text'] ) ) {
813	$this->add_render_attribute( 'icon', 'aria-label', $settings['title_text'] );
814	}
815	}
816
817	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
818	// add old default
819	$settings['icon'] = 'fa fa-star';
820	}
821
822	if ( ! empty( $settings['icon'] ) ) {
823	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
824	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
825	}
826
827	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
828
829	$this->add_inline_editing_attributes( 'title_text', 'none' );
830	$this->add_inline_editing_attributes( 'description_text' );
831
832	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
833	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
834	?>
835	<div class="elementor-icon-box-wrapper">
836
837	<?php if ( $has_icon ) : ?>
838	<div class="elementor-icon-box-icon">
839	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
840	<?php
841	if ( $is_new \|\| $migrated ) {
842	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
843	} elseif ( ! empty( $settings['icon'] ) ) {
844	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
845	}
846	?>
847	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
848	</div>
849	<?php endif; ?>
850
851	<?php if ( $has_content ) : ?>
852	<div class="elementor-icon-box-content">
853
854	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
855	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
856	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
857	<?php echo wp_kses_post( $settings['title_text'] ); ?>
858	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
859	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
860	<?php endif; ?>
861
862	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
863	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
864	<?php echo wp_kses_post( $settings['description_text'] ); ?>
865	</p>
866	<?php endif; ?>
867
868	</div>
869	<?php endif; ?>
870
871	</div>
872	<?php
873	}
874
875	/**
876	* Render icon box widget output in the editor.
877	*
878	* Written as a Backbone JavaScript template and used to generate the live preview.
879	*
880	* @since 2.9.0
881	* @access protected
882	*/
883	protected function content_template() {
884	?>
885	<#
886	// For older version `settings.icon` is needed.
887	var hasIcon = settings.icon \|\| settings.selected_icon.value;
888	var hasContent = settings.title_text \|\| settings.description_text;
889
890	if ( ! hasIcon && ! hasContent ) {
891	return;
892	}
893
894	var hasLink = settings.link?.url,
895	htmlTag = hasLink ? 'a' : 'span',
896	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
897	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
898	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
899
900	view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
901
902	if ( '' !== settings.hover_animation ) {
903	view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
904	}
905
906	if ( hasLink ) {
907	view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
908	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
909	if ( '' !== settings.title_text ) {
910	view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
911	}
912	}
913
914	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
915
916	view.addInlineEditingAttributes( 'title_text', 'none' );
917	view.addInlineEditingAttributes( 'description_text' );
918	#>
919	<div class="elementor-icon-box-wrapper">
920
921	<# if ( hasIcon ) { #>
922	<div class="elementor-icon-box-icon">
923	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
924	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
925	{{{ elementor.helpers.sanitize( iconHTML.value ) }}}
926	<# } else { #>
927	<i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
928	<# } #>
929	</{{{ htmlTag }}}>
930	</div>
931	<# } #>
932
933	<# if ( hasContent ) { #>
934	<div class="elementor-icon-box-content">
935
936	<# if ( settings.title_text ) { #>
937	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
938	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
939	{{{ elementor.helpers.sanitize( settings.title_text ) }}}
940	</{{{ htmlTag }}}>
941	</{{{ titleSizeTag }}}>
942	<# } #>
943
944	<# if ( settings.description_text ) { #>
945	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
946	<# } #>
947
948	</div>
949	<# } #>
950
951	</div>
952	<?php
953	}
954
955	public function on_import( $element ) {
956	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
957	}
958	}
959