← All changes | includes/widgets/icon-box.php +49 -185 4.1.0-dev2 → 3.24.4 View file →

		@@ -76,12 +76,8 @@
76	76	protected function is_dynamic_content(): bool {
77	77	return false;
78	78	}
79	79
80		- public function has_widget_inner_wrapper(): bool {
81		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
82		- }
83		-
84	80	/**
85	81	* Get style dependencies.
86	82	*
87	83	* Retrieve the list of style dependencies the widget requires.
		@@ -235,35 +231,24 @@
235	231	'position',
236	232	[
237	233	'label' => esc_html__( 'Icon Position', 'elementor' ),
238	234	'type' => Controls_Manager::CHOOSE,
239		- 'default' => 'block-start',
240		- 'mobile_default' => 'block-start',
	235	+ 'default' => 'top',
	236	+ 'mobile_default' => 'top',
241	237	'options' => [
242		- 'inline-start' => [
243		- 'title' => esc_html__( 'Start', 'elementor' ),
	238	+ 'left' => [
	239	+ 'title' => esc_html__( 'Left', 'elementor' ),
244	240	'icon' => 'eicon-h-align-left',
245	241	],
246		- 'inline-end' => [
247		- 'title' => esc_html__( 'End', 'elementor' ),
248		- 'icon' => 'eicon-h-align-right',
249		- ],
250		- 'block-start' => [
	242	+ 'top' => [
251	243	'title' => esc_html__( 'Top', 'elementor' ),
252	244	'icon' => 'eicon-v-align-top',
253	245	],
254		- 'block-end' => [
255		- 'title' => esc_html__( 'Bottom', 'elementor' ),
256		- 'icon' => 'eicon-v-align-bottom',
	246	+ 'right' => [
	247	+ 'title' => esc_html__( 'Right', 'elementor' ),
	248	+ 'icon' => 'eicon-h-align-right',
257	249	],
258	250	],
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	251	'prefix_class' => 'elementor%s-position-',
267	252	'condition' => [
268	253	'selected_icon[value]!' => '',
269	254	],
		@@ -289,19 +274,12 @@
289	274	'icon' => 'eicon-v-align-bottom',
290	275	],
291	276	],
292	277	'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		- ],
	278	+ 'toggle' => false,
	279	+ 'prefix_class' => 'elementor-vertical-align-',
301	280	'condition' => [
302		- 'selected_icon[value]!' => '',
303		- 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ],
	281	+ 'position!' => 'top',
304	282	],
305	283	]
306	284	);
307	285
		@@ -310,10 +288,10 @@
310	288	[
311	289	'label' => esc_html__( 'Alignment', 'elementor' ),
312	290	'type' => Controls_Manager::CHOOSE,
313	291	'options' => [
314		- 'start' => [
315		- 'title' => esc_html__( 'Start', 'elementor' ),
	292	+ 'left' => [
	293	+ 'title' => esc_html__( 'Left', 'elementor' ),
316	294	'icon' => 'eicon-text-align-left',
317	295	],
318	296	'center' => [
319	297	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -318,10 +296,10 @@
318	296	'center' => [
319	297	'title' => esc_html__( 'Center', 'elementor' ),
320	298	'icon' => 'eicon-text-align-center',
321	299	],
322		- 'end' => [
323		- 'title' => esc_html__( 'End', 'elementor' ),
	300	+ 'right' => [
	301	+ 'title' => esc_html__( 'Right', 'elementor' ),
324	302	'icon' => 'eicon-text-align-right',
325	303	],
326	304	'justify' => [
327	305	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -327,13 +305,8 @@
327	305	'title' => esc_html__( 'Justified', 'elementor' ),
328	306	'icon' => 'eicon-text-align-justify',
329	307	],
330	308	],
331		- 'classes' => 'elementor-control-start-end',
332		- 'selectors_dictionary' => [
333		- 'left' => is_rtl() ? 'end' : 'start',
334		- 'right' => is_rtl() ? 'start' : 'end',
335		- ],
336	309	'selectors' => [
337	310	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
338	311	],
339	312	'separator' => 'after',
		@@ -360,9 +333,9 @@
360	333	'max' => 10,
361	334	],
362	335	],
363	336	'selectors' => [
364		- '{{WRAPPER}} .elementor-icon-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
	337	+ '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
365	338	],
366	339	'condition' => [
367	340	'selected_icon[value]!' => '',
368	341	],
		@@ -388,9 +361,9 @@
388	361	'max' => 10,
389	362	],
390	363	],
391	364	'selectors' => [
392		- '{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
	365	+ '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
393	366	],
394	367	]
395	368	);
396	369
		@@ -463,14 +436,10 @@
463	436	'label' => esc_html__( 'Primary Color', 'elementor' ),
464	437	'type' => Controls_Manager::COLOR,
465	438	'default' => '',
466	439	'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}};',
	440	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
	441	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473	442	],
474	443	]
475	444	);
476	445
		@@ -483,32 +452,15 @@
483	452	'condition' => [
484	453	'view!' => 'default',
485	454	],
486	455	'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}};',
	456	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
	457	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
491	458	],
492	459	]
493	460	);
494	461
495	462	$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	463	'hover_animation',
512	464	[
513	465	'label' => esc_html__( 'Hover Animation', 'elementor' ),
514	466	'type' => Controls_Manager::HOVER_ANIMATION,
		@@ -650,8 +602,23 @@
650	602	'separator' => 'before',
651	603	]
652	604	);
653	605
	606	+ $this->add_control(
	607	+ 'title_color',
	608	+ [
	609	+ 'label' => esc_html__( 'Color', 'elementor' ),
	610	+ 'type' => Controls_Manager::COLOR,
	611	+ 'default' => '',
	612	+ 'selectors' => [
	613	+ '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
	614	+ ],
	615	+ 'global' => [
	616	+ 'default' => Global_Colors::COLOR_PRIMARY,
	617	+ ],
	618	+ ]
	619	+ );
	620	+
654	621	$this->add_group_control(
655	622	Group_Control_Typography::get_type(),
656	623	[
657	624	'name' => 'title_typography',
		@@ -677,85 +644,32 @@
677	644	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678	645	]
679	646	);
680	647
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	648	$this->add_control(
691		- 'title_color',
	649	+ 'heading_description',
692	650	[
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		- ],
	651	+ 'label' => esc_html__( 'Description', 'elementor' ),
	652	+ 'type' => Controls_Manager::HEADING,
	653	+ 'separator' => 'before',
702	654	]
703	655	);
704	656
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	657	$this->add_control(
715		- 'hover_title_color',
	658	+ 'description_color',
716	659	[
717	660	'label' => esc_html__( 'Color', 'elementor' ),
718	661	'type' => Controls_Manager::COLOR,
719	662	'default' => '',
720	663	'selectors' => [
721		- '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722		- {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
	664	+ '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723	665	],
724	666	'global' => [
725		- 'default' => Global_Colors::COLOR_PRIMARY,
	667	+ 'default' => Global_Colors::COLOR_TEXT,
726	668	],
727	669	]
728	670	);
729	671
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	672	$this->add_group_control(
759	673	Group_Control_Typography::get_type(),
760	674	[
761	675	'name' => 'description_typography',
		@@ -773,23 +687,8 @@
773	687	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774	688	]
775	689	);
776	690
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	691	$this->end_controls_section();
793	692	}
794	693
795	694	/**
		@@ -804,14 +703,10 @@
804	703	$settings = $this->get_settings_for_display();
805	704	$has_link = ! empty( $settings['link']['url'] );
806	705	$html_tag = $has_link ? 'a' : 'span';
807	706
808		- $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
	707	+ $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809	708
810		- if ( ! empty( $settings['hover_animation'] ) ) {
811		- $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
812		- }
813		-
814	709	$has_icon = ! empty( $settings['selected_icon']['value'] );
815	710	$has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
816	711
817	712	if ( ! $has_icon && ! $has_content ) {
		@@ -820,11 +715,8 @@
820	715
821	716	if ( $has_link ) {
822	717	$this->add_link_attributes( 'link', $settings['link'] );
823	718	$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	719	}
828	720
829	721	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
830	722	// add old default
		@@ -865,9 +757,9 @@
865	757
866	758	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
867	759	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
868	760	<<?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'] ); ?>
	761	+ <?php $this->print_unescaped_setting( 'title_text' ); ?>
870	762	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
871	763	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
872	764	<?php endif; ?>
873	765
		@@ -872,9 +764,9 @@
872	764	<?php endif; ?>
873	765
874	766	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875	767	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876		- <?php echo wp_kses_post( $settings['description_text'] ); ?>
	768	+ <?php $this->print_unescaped_setting( 'description_text' ); ?>
877	769	</p>
878	770	<?php endif; ?>
879	771
880	772	</div>
		@@ -902,26 +794,19 @@
902	794	if ( ! hasIcon && ! hasContent ) {
903	795	return;
904	796	}
905	797
906		- var hasLink = settings.link?.url,
	798	+ var hasLink = settings.link.url,
907	799	htmlTag = hasLink ? 'a' : 'span',
908	800	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
909	801	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
910	802	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
911	803
912		- view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
	804	+ view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation );
913	805
914		- if ( '' !== settings.hover_animation ) {
915		- view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
916		- }
917		-
918	806	if ( hasLink ) {
919		- view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
	807	+ view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
920	808	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
921		- if ( '' !== settings.title_text ) {
922		- view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
923		- }
924	809	}
925	810
926	811	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927	812
		@@ -965,27 +850,6 @@
965	850	}
966	851
967	852	public function on_import( $element ) {
968	853	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	854	}
991	855	}