← All changes | includes/widgets/icon-list.php +48 -244 4.2.0 → 3.10.0-dev1 View file →

		@@ -72,31 +72,9 @@
72	72	public function get_keywords() {
73	73	return [ 'icon list', 'icon', 'list' ];
74	74	}
75	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	76	/**
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-list' ];
96		- }
97		-
98		- /**
99	77	* Register icon list widget controls.
100	78	*
101	79	* Adds different input fields to allow the user to change and customize the widget settings.
102	80	*
		@@ -170,8 +148,9 @@
170	148	'type' => Controls_Manager::URL,
171	149	'dynamic' => [
172	150	'active' => true,
173	151	],
	152	+ 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
174	153	]
175	154	);
176	155
177	156	$this->add_control(
		@@ -236,9 +215,8 @@
236	215	'space_between',
237	216	[
238	217	'label' => esc_html__( 'Space Between', 'elementor' ),
239	218	'type' => Controls_Manager::SLIDER,
240		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
241	219	'range' => [
242	220	'px' => [
243	221	'max' => 50,
244	222	],
		@@ -243,13 +221,14 @@
243	221	'max' => 50,
244	222	],
245	223	],
246	224	'selectors' => [
247		- '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child)' => 'padding-block-end: calc({{SIZE}}{{UNIT}}/2)',
248		- '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child)' => 'margin-block-start: calc({{SIZE}}{{UNIT}}/2)',
249		- '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item' => 'margin-inline: calc({{SIZE}}{{UNIT}}/2)',
250		- '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items' => 'margin-inline: calc(-{{SIZE}}{{UNIT}}/2)',
251		- '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'inset-inline-end: calc(-{{SIZE}}{{UNIT}}/2)',
	225	+ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child)' => 'padding-bottom: calc({{SIZE}}{{UNIT}}/2)',
	226	+ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child)' => 'margin-top: calc({{SIZE}}{{UNIT}}/2)',
	227	+ '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item' => 'margin-right: calc({{SIZE}}{{UNIT}}/2); margin-left: calc({{SIZE}}{{UNIT}}/2)',
	228	+ '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items' => 'margin-right: calc(-{{SIZE}}{{UNIT}}/2); margin-left: calc(-{{SIZE}}{{UNIT}}/2)',
	229	+ 'body.rtl {{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'left: calc(-{{SIZE}}{{UNIT}}/2)',
	230	+ 'body:not(.rtl) {{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'right: calc(-{{SIZE}}{{UNIT}}/2)',
252	231	],
253	232	]
254	233	);
255	234
		@@ -258,10 +237,10 @@
258	237	[
259	238	'label' => esc_html__( 'Alignment', 'elementor' ),
260	239	'type' => Controls_Manager::CHOOSE,
261	240	'options' => [
262		- 'start' => [
263		- 'title' => esc_html__( 'Start', 'elementor' ),
	241	+ 'left' => [
	242	+ 'title' => esc_html__( 'Left', 'elementor' ),
264	243	'icon' => 'eicon-h-align-left',
265	244	],
266	245	'center' => [
267	246	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -266,19 +245,14 @@
266	245	'center' => [
267	246	'title' => esc_html__( 'Center', 'elementor' ),
268	247	'icon' => 'eicon-h-align-center',
269	248	],
270		- 'end' => [
271		- 'title' => esc_html__( 'End', 'elementor' ),
	249	+ 'right' => [
	250	+ 'title' => esc_html__( 'Right', 'elementor' ),
272	251	'icon' => 'eicon-h-align-right',
273	252	],
274	253	],
275		- 'classes_dictionary' => [
276		- 'left' => is_rtl() ? 'end' : 'start',
277		- 'right' => is_rtl() ? 'start' : 'end',
278		- ],
279	254	'prefix_class' => 'elementor%s-align-',
280		- 'classes' => 'elementor-control-start-end',
281	255	]
282	256	);
283	257
284	258	$this->add_control(
		@@ -310,10 +284,10 @@
310	284	'condition' => [
311	285	'divider' => 'yes',
312	286	],
313	287	'selectors' => [
314		- '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-block-start-style: {{VALUE}}',
315		- '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-inline-start-style: {{VALUE}}',
	288	+ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-top-style: {{VALUE}}',
	289	+ '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-left-style: {{VALUE}}',
316	290	],
317	291	]
318	292	);
319	293
		@@ -321,9 +295,8 @@
321	295	'divider_weight',
322	296	[
323	297	'label' => esc_html__( 'Weight', 'elementor' ),
324	298	'type' => Controls_Manager::SLIDER,
325		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
326	299	'default' => [
327	300	'size' => 1,
328	301	],
329	302	'range' => [
		@@ -335,10 +308,10 @@
335	308	'condition' => [
336	309	'divider' => 'yes',
337	310	],
338	311	'selectors' => [
339		- '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-block-start-width: {{SIZE}}{{UNIT}}',
340		- '{{WRAPPER}} .elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-inline-start-width: {{SIZE}}{{UNIT}}',
	312	+ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-top-width: {{SIZE}}{{UNIT}}',
	313	+ '{{WRAPPER}} .elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-left-width: {{SIZE}}{{UNIT}}',
341	314	],
342	315	]
343	316	);
344	317
		@@ -346,9 +319,8 @@
346	319	'divider_width',
347	320	[
348	321	'label' => esc_html__( 'Width', 'elementor' ),
349	322	'type' => Controls_Manager::SLIDER,
350		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
351	323	'default' => [
352	324	'unit' => '%',
353	325	],
354	326	'condition' => [
		@@ -365,9 +337,9 @@
365	337	'divider_height',
366	338	[
367	339	'label' => esc_html__( 'Height', 'elementor' ),
368	340	'type' => Controls_Manager::SLIDER,
369		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
	341	+ 'size_units' => [ '%', 'px' ],
370	342	'default' => [
371	343	'unit' => '%',
372	344	],
373	345	'range' => [
		@@ -378,12 +350,8 @@
378	350	'%' => [
379	351	'min' => 1,
380	352	'max' => 100,
381	353	],
382		- 'vh' => [
383		- 'min' => 1,
384		- 'max' => 100,
385		- ],
386	354	],
387	355	'condition' => [
388	356	'divider' => 'yes',
389	357	'view' => 'inline',
		@@ -421,17 +389,8 @@
421	389	'tab' => Controls_Manager::TAB_STYLE,
422	390	]
423	391	);
424	392
425		- $this->start_controls_tabs( 'icon_colors' );
426		-
427		- $this->start_controls_tab(
428		- 'icon_colors_normal',
429		- [
430		- 'label' => esc_html__( 'Normal', 'elementor' ),
431		- ]
432		- );
433		-
434	393	$this->add_control(
435	394	'icon_color',
436	395	[
437	396	'label' => esc_html__( 'Color', 'elementor' ),
		@@ -446,21 +405,12 @@
446	405	],
447	406	]
448	407	);
449	408
450		- $this->end_controls_tab();
451		-
452		- $this->start_controls_tab(
453		- 'icon_colors_hover',
454		- [
455		- 'label' => esc_html__( 'Hover', 'elementor' ),
456		- ]
457		- );
458		-
459	409	$this->add_control(
460	410	'icon_color_hover',
461	411	[
462		- 'label' => esc_html__( 'Color', 'elementor' ),
	412	+ 'label' => esc_html__( 'Hover', 'elementor' ),
463	413	'type' => Controls_Manager::COLOR,
464	414	'default' => '',
465	415	'selectors' => [
466	416	'{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-icon i' => 'color: {{VALUE}};',
		@@ -468,35 +418,13 @@
468	418	],
469	419	]
470	420	);
471	421
472		- $this->add_control(
473		- 'icon_color_hover_transition',
474		- [
475		- 'label' => esc_html__( 'Transition Duration', 'elementor' ),
476		- 'type' => Controls_Manager::SLIDER,
477		- 'size_units' => [ 's', 'ms', 'custom' ],
478		- 'default' => [
479		- 'unit' => 's',
480		- 'size' => 0.3,
481		- ],
482		- 'selectors' => [
483		- '{{WRAPPER}} .elementor-icon-list-icon i' => 'transition: color {{SIZE}}{{UNIT}}',
484		- '{{WRAPPER}} .elementor-icon-list-icon svg' => 'transition: fill {{SIZE}}{{UNIT}}',
485		- ],
486		- ]
487		- );
488		-
489		- $this->end_controls_tab();
490		-
491		- $this->end_controls_tabs();
492		-
493	422	$this->add_responsive_control(
494	423	'icon_size',
495	424	[
496	425	'label' => esc_html__( 'Size', 'elementor' ),
497	426	'type' => Controls_Manager::SLIDER,
498		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
499	427	'default' => [
500	428	'size' => 14,
501	429	],
502	430	'range' => [
		@@ -502,16 +430,9 @@
502	430	'range' => [
503	431	'px' => [
504	432	'min' => 6,
505	433	],
506		- '%' => [
507		- 'min' => 6,
508		- ],
509		- 'vw' => [
510		- 'min' => 6,
511		- ],
512	434	],
513		- 'separator' => 'before',
514	435	'selectors' => [
515	436	'{{WRAPPER}}' => '--e-icon-list-icon-size: {{SIZE}}{{UNIT}};',
516	437	],
517	438	]
		@@ -516,26 +437,8 @@
516	437	],
517	438	]
518	439	);
519	440
520		- $this->add_control(
521		- 'text_indent',
522		- [
523		- 'label' => esc_html__( 'Gap', 'elementor' ),
524		- 'type' => Controls_Manager::SLIDER,
525		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
526		- 'range' => [
527		- 'px' => [
528		- 'max' => 50,
529		- ],
530		- ],
531		- 'separator' => 'after',
532		- 'selectors' => [
533		- '{{WRAPPER}} .elementor-icon-list-icon' => 'padding-inline-end: {{SIZE}}{{UNIT}};',
534		- ],
535		- ]
536		- );
537		-
538	441	$e_icon_list_icon_css_var = 'var(--e-icon-list-icon-size, 1em)';
539	442	$e_icon_list_icon_align_left = sprintf( '0 calc(%s * 0.25) 0 0', $e_icon_list_icon_css_var );
540	443	$e_icon_list_icon_align_center = sprintf( '0 calc(%s * 0.125)', $e_icon_list_icon_css_var );
541	444	$e_icon_list_icon_align_right = sprintf( '0 0 0 calc(%s * 0.25)', $e_icon_list_icon_css_var );
		@@ -542,9 +445,9 @@
542	445
543	446	$this->add_responsive_control(
544	447	'icon_self_align',
545	448	[
546		- 'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
	449	+ 'label' => esc_html__( 'Alignment', 'elementor' ),
547	450	'type' => Controls_Manager::CHOOSE,
548	451	'options' => [
549	452	'left' => [
550	453	'title' => esc_html__( 'Left', 'elementor' ),
		@@ -570,59 +473,8 @@
570	473	],
571	474	]
572	475	);
573	476
574		- $this->add_responsive_control(
575		- 'icon_self_vertical_align',
576		- [
577		- 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
578		- 'type' => Controls_Manager::CHOOSE,
579		- 'options' => [
580		- 'flex-start' => [
581		- 'title' => esc_html__( 'Start', 'elementor' ),
582		- 'icon' => 'eicon-v-align-top',
583		- ],
584		- 'center' => [
585		- 'title' => esc_html__( 'Center', 'elementor' ),
586		- 'icon' => 'eicon-v-align-middle',
587		- ],
588		- 'flex-end' => [
589		- 'title' => esc_html__( 'End', 'elementor' ),
590		- 'icon' => 'eicon-v-align-bottom',
591		- ],
592		- ],
593		- 'default' => '',
594		- 'selectors' => [
595		- '{{WRAPPER}}' => '--icon-vertical-align: {{VALUE}};',
596		- ],
597		- ]
598		- );
599		-
600		- $this->add_responsive_control(
601		- 'icon_vertical_offset',
602		- [
603		- 'label' => esc_html__( 'Adjust Vertical Position', 'elementor' ),
604		- 'type' => Controls_Manager::SLIDER,
605		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
606		- 'default' => [
607		- 'size' => 0,
608		- ],
609		- 'range' => [
610		- 'px' => [
611		- 'min' => -15,
612		- 'max' => 15,
613		- ],
614		- 'em' => [
615		- 'min' => -1,
616		- 'max' => 1,
617		- ],
618		- ],
619		- 'selectors' => [
620		- '{{WRAPPER}}' => '--icon-vertical-offset: {{SIZE}}{{UNIT}};',
621		- ],
622		- ]
623		- );
624		-
625	477	$this->end_controls_section();
626	478
627	479	$this->start_controls_section(
628	480	'section_text_style',
		@@ -631,40 +483,12 @@
631	483	'tab' => Controls_Manager::TAB_STYLE,
632	484	]
633	485	);
634	486
635		- $this->add_group_control(
636		- Group_Control_Typography::get_type(),
637		- [
638		- 'name' => 'icon_typography',
639		- 'selector' => '{{WRAPPER}} .elementor-icon-list-item > .elementor-icon-list-text, {{WRAPPER}} .elementor-icon-list-item > a',
640		- 'global' => [
641		- 'default' => Global_Typography::TYPOGRAPHY_TEXT,
642		- ],
643		- ]
644		- );
645		-
646		- $this->add_group_control(
647		- Group_Control_Text_Shadow::get_type(),
648		- [
649		- 'name' => 'text_shadow',
650		- 'selector' => '{{WRAPPER}} .elementor-icon-list-text',
651		- ]
652		- );
653		-
654		- $this->start_controls_tabs( 'text_colors' );
655		-
656		- $this->start_controls_tab(
657		- 'text_colors_normal',
658		- [
659		- 'label' => esc_html__( 'Normal', 'elementor' ),
660		- ]
661		- );
662		-
663	487	$this->add_control(
664	488	'text_color',
665	489	[
666		- 'label' => esc_html__( 'Color', 'elementor' ),
	490	+ 'label' => esc_html__( 'Text Color', 'elementor' ),
667	491	'type' => Controls_Manager::COLOR,
668	492	'default' => '',
669	493	'selectors' => [
670	494	'{{WRAPPER}} .elementor-icon-list-text' => 'color: {{VALUE}};',
		@@ -674,21 +498,12 @@
674	498	],
675	499	]
676	500	);
677	501
678		- $this->end_controls_tab();
679		-
680		- $this->start_controls_tab(
681		- 'text_colors_hover',
682		- [
683		- 'label' => esc_html__( 'Hover', 'elementor' ),
684		- ]
685		- );
686		-
687	502	$this->add_control(
688	503	'text_color_hover',
689	504	[
690		- 'label' => esc_html__( 'Color', 'elementor' ),
	505	+ 'label' => esc_html__( 'Hover', 'elementor' ),
691	506	'type' => Controls_Manager::COLOR,
692	507	'default' => '',
693	508	'selectors' => [
694	509	'{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'color: {{VALUE}};',
		@@ -696,26 +511,41 @@
696	511	]
697	512	);
698	513
699	514	$this->add_control(
700		- 'text_color_hover_transition',
	515	+ 'text_indent',
701	516	[
702		- 'label' => esc_html__( 'Transition Duration', 'elementor' ),
	517	+ 'label' => esc_html__( 'Text Indent', 'elementor' ),
703	518	'type' => Controls_Manager::SLIDER,
704		- 'size_units' => [ 's', 'ms', 'custom' ],
705		- 'default' => [
706		- 'unit' => 's',
707		- 'size' => 0.3,
	519	+ 'range' => [
	520	+ 'px' => [
	521	+ 'max' => 50,
	522	+ ],
708	523	],
709	524	'selectors' => [
710		- '{{WRAPPER}} .elementor-icon-list-text' => 'transition: color {{SIZE}}{{UNIT}}',
	525	+ '{{WRAPPER}} .elementor-icon-list-text' => is_rtl() ? 'padding-right: {{SIZE}}{{UNIT}};' : 'padding-left: {{SIZE}}{{UNIT}};',
711	526	],
712	527	]
713	528	);
714	529
715		- $this->end_controls_tab();
	530	+ $this->add_group_control(
	531	+ Group_Control_Typography::get_type(),
	532	+ [
	533	+ 'name' => 'icon_typography',
	534	+ 'selector' => '{{WRAPPER}} .elementor-icon-list-item > .elementor-icon-list-text, {{WRAPPER}} .elementor-icon-list-item > a',
	535	+ 'global' => [
	536	+ 'default' => Global_Typography::TYPOGRAPHY_TEXT,
	537	+ ],
	538	+ ]
	539	+ );
716	540
717		- $this->end_controls_tabs();
	541	+ $this->add_group_control(
	542	+ Group_Control_Text_Shadow::get_type(),
	543	+ [
	544	+ 'name' => 'text_shadow',
	545	+ 'selector' => '{{WRAPPER}} .elementor-icon-list-text',
	546	+ ]
	547	+ );
718	548
719	549	$this->end_controls_section();
720	550	}
721	551
		@@ -782,9 +612,9 @@
782	612	<i class="<?php echo esc_attr( $item['icon'] ); ?>" aria-hidden="true"></i>
783	613	<?php } ?>
784	614	</span>
785	615	<?php endif; ?>
786		- <span <?php $this->print_render_attribute_string( $repeater_setting_key ); ?>><?php echo wp_kses_post( $item['text'] ); ?></span>
	616	+ <span <?php $this->print_render_attribute_string( $repeater_setting_key ); ?>><?php $this->print_unescaped_setting( 'text', 'icon_list', $index ); ?></span>
787	617	<?php if ( ! empty( $item['link']['url'] ) ) : ?>
788	618	</a>
789	619	<?php endif; ?>
790	620	</li>
		@@ -802,34 +632,8 @@
802	632	*
803	633	* @since 2.9.0
804	634	* @access protected
805	635	*/
806		- public function render_markdown(): string {
807		- $settings = $this->get_settings_for_display();
808		-
809		- if ( empty( $settings['icon_list'] ) ) {
810		- return '';
811		- }
812		-
813		- $lines = [];
814		-
815		- foreach ( $settings['icon_list'] as $item ) {
816		- $text = Utils::html_to_plain_text( $item['text'] ?? '' );
817		-
818		- if ( empty( $text ) ) {
819		- continue;
820		- }
821		-
822		- if ( ! empty( $item['link']['url'] ) ) {
823		- $text = '[' . $text . '](' . esc_url( $item['link']['url'] ) . ')';
824		- }
825		-
826		- $lines[] = '- ' . $text;
827		- }
828		-
829		- return implode( "\n", $lines );
830		- }
831		-
832	636	protected function content_template() {
833	637	?>
834	638	<#
835	639	view.addRenderAttribute( 'icon_list', 'class', 'elementor-icon-list-items' );
		@@ -852,10 +656,10 @@
852	656
853	657	view.addInlineEditingAttributes( iconTextKey ); #>
854	658
855	659	<li {{{ view.getRenderAttributeString( 'list_item' ) }}}>
856		- <# if ( item.link && item.link?.url ) { #>
857		- <a href="{{ elementor.helpers.sanitizeUrl( item.link?.url ) }}">
	660	+ <# if ( item.link && item.link.url ) { #>
	661	+ <a href="{{ item.link.url }}">
858	662	<# } #>
859	663	<# if ( item.icon || item.selected_icon.value ) { #>
860	664	<span class="elementor-icon-list-icon">
861	665	<#
		@@ -869,9 +673,9 @@
869	673	#>
870	674	</span>
871	675	<# } #>
872	676	<span {{{ view.getRenderAttributeString( iconTextKey ) }}}>{{{ item.text }}}</span>
873		- <# if ( item.link && item.link?.url ) { #>
	677	+ <# if ( item.link && item.link.url ) { #>
874	678	</a>
875	679	<# } #>
876	680	</li>
877	681	<#