elementor / includes / widgets / icon-box.php

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

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