← All changes | includes/widgets/icon-box.php +50 -201 4.1.0-dev3 → 3.23.0-dev3 View file →

		@@ -76,27 +76,9 @@
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		- * 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	81	* Register icon box widget controls.
100	82	*
101	83	* Adds different input fields to allow the user to change and customize the widget settings.
102	84	*
		@@ -147,11 +129,10 @@
147	129	[
148	130	'label' => esc_html__( 'Shape', 'elementor' ),
149	131	'type' => Controls_Manager::SELECT,
150	132	'options' => [
	133	+ 'circle' => esc_html__( 'Circle', 'elementor' ),
151	134	'square' => esc_html__( 'Square', 'elementor' ),
152		- 'rounded' => esc_html__( 'Rounded', 'elementor' ),
153		- 'circle' => esc_html__( 'Circle', 'elementor' ),
154	135	],
155	136	'default' => 'circle',
156	137	'condition' => [
157	138	'view!' => 'default',
		@@ -235,35 +216,24 @@
235	216	'position',
236	217	[
237	218	'label' => esc_html__( 'Icon Position', 'elementor' ),
238	219	'type' => Controls_Manager::CHOOSE,
239		- 'default' => 'block-start',
240		- 'mobile_default' => 'block-start',
	220	+ 'default' => 'top',
	221	+ 'mobile_default' => 'top',
241	222	'options' => [
242		- 'inline-start' => [
243		- 'title' => esc_html__( 'Start', 'elementor' ),
	223	+ 'left' => [
	224	+ 'title' => esc_html__( 'Left', 'elementor' ),
244	225	'icon' => 'eicon-h-align-left',
245	226	],
246		- 'inline-end' => [
247		- 'title' => esc_html__( 'End', 'elementor' ),
248		- 'icon' => 'eicon-h-align-right',
249		- ],
250		- 'block-start' => [
	227	+ 'top' => [
251	228	'title' => esc_html__( 'Top', 'elementor' ),
252	229	'icon' => 'eicon-v-align-top',
253	230	],
254		- 'block-end' => [
255		- 'title' => esc_html__( 'Bottom', 'elementor' ),
256		- 'icon' => 'eicon-v-align-bottom',
	231	+ 'right' => [
	232	+ 'title' => esc_html__( 'Right', 'elementor' ),
	233	+ 'icon' => 'eicon-h-align-right',
257	234	],
258	235	],
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	236	'prefix_class' => 'elementor%s-position-',
267	237	'condition' => [
268	238	'selected_icon[value]!' => '',
269	239	],
		@@ -289,19 +259,12 @@
289	259	'icon' => 'eicon-v-align-bottom',
290	260	],
291	261	],
292	262	'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		- ],
	263	+ 'toggle' => false,
	264	+ 'prefix_class' => 'elementor-vertical-align-',
301	265	'condition' => [
302		- 'selected_icon[value]!' => '',
303		- 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ],
	266	+ 'position!' => 'top',
304	267	],
305	268	]
306	269	);
307	270
		@@ -310,10 +273,10 @@
310	273	[
311	274	'label' => esc_html__( 'Alignment', 'elementor' ),
312	275	'type' => Controls_Manager::CHOOSE,
313	276	'options' => [
314		- 'start' => [
315		- 'title' => esc_html__( 'Start', 'elementor' ),
	277	+ 'left' => [
	278	+ 'title' => esc_html__( 'Left', 'elementor' ),
316	279	'icon' => 'eicon-text-align-left',
317	280	],
318	281	'center' => [
319	282	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -318,10 +281,10 @@
318	281	'center' => [
319	282	'title' => esc_html__( 'Center', 'elementor' ),
320	283	'icon' => 'eicon-text-align-center',
321	284	],
322		- 'end' => [
323		- 'title' => esc_html__( 'End', 'elementor' ),
	285	+ 'right' => [
	286	+ 'title' => esc_html__( 'Right', 'elementor' ),
324	287	'icon' => 'eicon-text-align-right',
325	288	],
326	289	'justify' => [
327	290	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -327,13 +290,8 @@
327	290	'title' => esc_html__( 'Justified', 'elementor' ),
328	291	'icon' => 'eicon-text-align-justify',
329	292	],
330	293	],
331		- 'classes' => 'elementor-control-start-end',
332		- 'selectors_dictionary' => [
333		- 'left' => is_rtl() ? 'end' : 'start',
334		- 'right' => is_rtl() ? 'start' : 'end',
335		- ],
336	294	'selectors' => [
337	295	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
338	296	],
339	297	'separator' => 'after',
		@@ -360,9 +318,9 @@
360	318	'max' => 10,
361	319	],
362	320	],
363	321	'selectors' => [
364		- '{{WRAPPER}} .elementor-icon-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
	322	+ '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
365	323	],
366	324	'condition' => [
367	325	'selected_icon[value]!' => '',
368	326	],
		@@ -388,9 +346,9 @@
388	346	'max' => 10,
389	347	],
390	348	],
391	349	'selectors' => [
392		- '{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
	350	+ '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
393	351	],
394	352	]
395	353	);
396	354
		@@ -463,14 +421,10 @@
463	421	'label' => esc_html__( 'Primary Color', 'elementor' ),
464	422	'type' => Controls_Manager::COLOR,
465	423	'default' => '',
466	424	'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}};',
	425	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
	426	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473	427	],
474	428	]
475	429	);
476	430
		@@ -483,32 +437,15 @@
483	437	'condition' => [
484	438	'view!' => 'default',
485	439	],
486	440	'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}};',
	441	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
	442	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
491	443	],
492	444	]
493	445	);
494	446
495	447	$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	448	'hover_animation',
512	449	[
513	450	'label' => esc_html__( 'Hover Animation', 'elementor' ),
514	451	'type' => Controls_Manager::HOVER_ANIMATION,
		@@ -650,8 +587,23 @@
650	587	'separator' => 'before',
651	588	]
652	589	);
653	590
	591	+ $this->add_control(
	592	+ 'title_color',
	593	+ [
	594	+ 'label' => esc_html__( 'Color', 'elementor' ),
	595	+ 'type' => Controls_Manager::COLOR,
	596	+ 'default' => '',
	597	+ 'selectors' => [
	598	+ '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
	599	+ ],
	600	+ 'global' => [
	601	+ 'default' => Global_Colors::COLOR_PRIMARY,
	602	+ ],
	603	+ ]
	604	+ );
	605	+
654	606	$this->add_group_control(
655	607	Group_Control_Typography::get_type(),
656	608	[
657	609	'name' => 'title_typography',
		@@ -677,85 +629,32 @@
677	629	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678	630	]
679	631	);
680	632
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	633	$this->add_control(
691		- 'title_color',
	634	+ 'heading_description',
692	635	[
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		- ],
	636	+ 'label' => esc_html__( 'Description', 'elementor' ),
	637	+ 'type' => Controls_Manager::HEADING,
	638	+ 'separator' => 'before',
702	639	]
703	640	);
704	641
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	642	$this->add_control(
715		- 'hover_title_color',
	643	+ 'description_color',
716	644	[
717	645	'label' => esc_html__( 'Color', 'elementor' ),
718	646	'type' => Controls_Manager::COLOR,
719	647	'default' => '',
720	648	'selectors' => [
721		- '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722		- {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
	649	+ '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723	650	],
724	651	'global' => [
725		- 'default' => Global_Colors::COLOR_PRIMARY,
	652	+ 'default' => Global_Colors::COLOR_TEXT,
726	653	],
727	654	]
728	655	);
729	656
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	657	$this->add_group_control(
759	658	Group_Control_Typography::get_type(),
760	659	[
761	660	'name' => 'description_typography',
		@@ -773,23 +672,8 @@
773	672	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774	673	]
775	674	);
776	675
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	676	$this->end_controls_section();
793	677	}
794	678
795	679	/**
		@@ -804,14 +688,10 @@
804	688	$settings = $this->get_settings_for_display();
805	689	$has_link = ! empty( $settings['link']['url'] );
806	690	$html_tag = $has_link ? 'a' : 'span';
807	691
808		- $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
	692	+ $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809	693
810		- if ( ! empty( $settings['hover_animation'] ) ) {
811		- $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
812		- }
813		-
814	694	$has_icon = ! empty( $settings['selected_icon']['value'] );
815	695	$has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
816	696
817	697	if ( ! $has_icon && ! $has_content ) {
		@@ -820,11 +700,8 @@
820	700
821	701	if ( $has_link ) {
822	702	$this->add_link_attributes( 'link', $settings['link'] );
823	703	$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	704	}
828	705
829	706	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
830	707	// add old default
		@@ -865,9 +742,9 @@
865	742
866	743	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
867	744	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
868	745	<<?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'] ); ?>
	746	+ <?php $this->print_unescaped_setting( 'title_text' ); ?>
870	747	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
871	748	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
872	749	<?php endif; ?>
873	750
		@@ -872,9 +749,9 @@
872	749	<?php endif; ?>
873	750
874	751	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875	752	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876		- <?php echo wp_kses_post( $settings['description_text'] ); ?>
	753	+ <?php $this->print_unescaped_setting( 'description_text' ); ?>
877	754	</p>
878	755	<?php endif; ?>
879	756
880	757	</div>
		@@ -902,26 +779,19 @@
902	779	if ( ! hasIcon && ! hasContent ) {
903	780	return;
904	781	}
905	782
906		- var hasLink = settings.link?.url,
	783	+ var hasLink = settings.link.url,
907	784	htmlTag = hasLink ? 'a' : 'span',
908	785	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
909	786	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
910	787	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
911	788
912		- view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
	789	+ view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation );
913	790
914		- if ( '' !== settings.hover_animation ) {
915		- view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
916		- }
917		-
918	791	if ( hasLink ) {
919		- view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
	792	+ view.addRenderAttribute( 'link', 'href', settings.link.url );
920	793	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
921		- if ( '' !== settings.title_text ) {
922		- view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
923		- }
924	794	}
925	795
926	796	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927	797
		@@ -965,27 +835,6 @@
965	835	}
966	836
967	837	public function on_import( $element ) {
968	838	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	839	}
991	840	}