← All changes | includes/widgets/icon-box.php +47 -165 4.2.0-dev2 → 3.27.4 View file →

		@@ -235,35 +235,24 @@
235	235	'position',
236	236	[
237	237	'label' => esc_html__( 'Icon Position', 'elementor' ),
238	238	'type' => Controls_Manager::CHOOSE,
239		- 'default' => 'block-start',
240		- 'mobile_default' => 'block-start',
	239	+ 'default' => 'top',
	240	+ 'mobile_default' => 'top',
241	241	'options' => [
242		- 'inline-start' => [
243		- 'title' => esc_html__( 'Start', 'elementor' ),
	242	+ 'left' => [
	243	+ 'title' => esc_html__( 'Left', 'elementor' ),
244	244	'icon' => 'eicon-h-align-left',
245	245	],
246		- 'inline-end' => [
247		- 'title' => esc_html__( 'End', 'elementor' ),
248		- 'icon' => 'eicon-h-align-right',
249		- ],
250		- 'block-start' => [
	246	+ 'top' => [
251	247	'title' => esc_html__( 'Top', 'elementor' ),
252	248	'icon' => 'eicon-v-align-top',
253	249	],
254		- 'block-end' => [
255		- 'title' => esc_html__( 'Bottom', 'elementor' ),
256		- 'icon' => 'eicon-v-align-bottom',
	250	+ 'right' => [
	251	+ 'title' => esc_html__( 'Right', 'elementor' ),
	252	+ 'icon' => 'eicon-h-align-right',
257	253	],
258	254	],
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	255	'prefix_class' => 'elementor%s-position-',
267	256	'condition' => [
268	257	'selected_icon[value]!' => '',
269	258	],
		@@ -289,19 +278,12 @@
289	278	'icon' => 'eicon-v-align-bottom',
290	279	],
291	280	],
292	281	'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		- ],
	282	+ 'toggle' => false,
	283	+ 'prefix_class' => 'elementor-vertical-align-',
301	284	'condition' => [
302		- 'selected_icon[value]!' => '',
303		- 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ],
	285	+ 'position!' => 'top',
304	286	],
305	287	]
306	288	);
307	289
		@@ -310,10 +292,10 @@
310	292	[
311	293	'label' => esc_html__( 'Alignment', 'elementor' ),
312	294	'type' => Controls_Manager::CHOOSE,
313	295	'options' => [
314		- 'start' => [
315		- 'title' => esc_html__( 'Start', 'elementor' ),
	296	+ 'left' => [
	297	+ 'title' => esc_html__( 'Left', 'elementor' ),
316	298	'icon' => 'eicon-text-align-left',
317	299	],
318	300	'center' => [
319	301	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -318,10 +300,10 @@
318	300	'center' => [
319	301	'title' => esc_html__( 'Center', 'elementor' ),
320	302	'icon' => 'eicon-text-align-center',
321	303	],
322		- 'end' => [
323		- 'title' => esc_html__( 'End', 'elementor' ),
	304	+ 'right' => [
	305	+ 'title' => esc_html__( 'Right', 'elementor' ),
324	306	'icon' => 'eicon-text-align-right',
325	307	],
326	308	'justify' => [
327	309	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -327,13 +309,8 @@
327	309	'title' => esc_html__( 'Justified', 'elementor' ),
328	310	'icon' => 'eicon-text-align-justify',
329	311	],
330	312	],
331		- 'classes' => 'elementor-control-start-end',
332		- 'selectors_dictionary' => [
333		- 'left' => is_rtl() ? 'end' : 'start',
334		- 'right' => is_rtl() ? 'start' : 'end',
335		- ],
336	313	'selectors' => [
337	314	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
338	315	],
339	316	'separator' => 'after',
		@@ -360,9 +337,9 @@
360	337	'max' => 10,
361	338	],
362	339	],
363	340	'selectors' => [
364		- '{{WRAPPER}} .elementor-icon-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
	341	+ '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
365	342	],
366	343	'condition' => [
367	344	'selected_icon[value]!' => '',
368	345	],
		@@ -388,9 +365,9 @@
388	365	'max' => 10,
389	366	],
390	367	],
391	368	'selectors' => [
392		- '{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
	369	+ '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
393	370	],
394	371	]
395	372	);
396	373
		@@ -463,14 +440,10 @@
463	440	'label' => esc_html__( 'Primary Color', 'elementor' ),
464	441	'type' => Controls_Manager::COLOR,
465	442	'default' => '',
466	443	'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}};',
	444	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
	445	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473	446	],
474	447	]
475	448	);
476	449
		@@ -483,32 +456,15 @@
483	456	'condition' => [
484	457	'view!' => 'default',
485	458	],
486	459	'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}};',
	460	+ '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
	461	+ '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
491	462	],
492	463	]
493	464	);
494	465
495	466	$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	467	'hover_animation',
512	468	[
513	469	'label' => esc_html__( 'Hover Animation', 'elementor' ),
514	470	'type' => Controls_Manager::HOVER_ANIMATION,
		@@ -650,8 +606,23 @@
650	606	'separator' => 'before',
651	607	]
652	608	);
653	609
	610	+ $this->add_control(
	611	+ 'title_color',
	612	+ [
	613	+ 'label' => esc_html__( 'Color', 'elementor' ),
	614	+ 'type' => Controls_Manager::COLOR,
	615	+ 'default' => '',
	616	+ 'selectors' => [
	617	+ '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
	618	+ ],
	619	+ 'global' => [
	620	+ 'default' => Global_Colors::COLOR_PRIMARY,
	621	+ ],
	622	+ ]
	623	+ );
	624	+
654	625	$this->add_group_control(
655	626	Group_Control_Typography::get_type(),
656	627	[
657	628	'name' => 'title_typography',
		@@ -677,85 +648,32 @@
677	648	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678	649	]
679	650	);
680	651
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	652	$this->add_control(
691		- 'title_color',
	653	+ 'heading_description',
692	654	[
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		- ],
	655	+ 'label' => esc_html__( 'Description', 'elementor' ),
	656	+ 'type' => Controls_Manager::HEADING,
	657	+ 'separator' => 'before',
702	658	]
703	659	);
704	660
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	661	$this->add_control(
715		- 'hover_title_color',
	662	+ 'description_color',
716	663	[
717	664	'label' => esc_html__( 'Color', 'elementor' ),
718	665	'type' => Controls_Manager::COLOR,
719	666	'default' => '',
720	667	'selectors' => [
721		- '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722		- {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
	668	+ '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723	669	],
724	670	'global' => [
725		- 'default' => Global_Colors::COLOR_PRIMARY,
	671	+ 'default' => Global_Colors::COLOR_TEXT,
726	672	],
727	673	]
728	674	);
729	675
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	676	$this->add_group_control(
759	677	Group_Control_Typography::get_type(),
760	678	[
761	679	'name' => 'description_typography',
		@@ -773,23 +691,8 @@
773	691	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774	692	]
775	693	);
776	694
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	695	$this->end_controls_section();
793	696	}
794	697
795	698	/**
		@@ -865,9 +768,9 @@
865	768
866	769	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
867	770	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
868	771	<<?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'] ); ?>
	772	+ <?php $this->print_unescaped_setting( 'title_text' ); ?>
870	773	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
871	774	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
872	775	<?php endif; ?>
873	776
		@@ -872,9 +775,9 @@
872	775	<?php endif; ?>
873	776
874	777	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875	778	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876		- <?php echo wp_kses_post( $settings['description_text'] ); ?>
	779	+ <?php $this->print_unescaped_setting( 'description_text' ); ?>
877	780	</p>
878	781	<?php endif; ?>
879	782
880	783	</div>
		@@ -902,9 +805,9 @@
902	805	if ( ! hasIcon && ! hasContent ) {
903	806	return;
904	807	}
905	808
906		- var hasLink = settings.link?.url,
	809	+ var hasLink = settings.link.url,
907	810	htmlTag = hasLink ? 'a' : 'span',
908	811	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
909	812	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
910	813	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
		@@ -915,9 +818,9 @@
915	818	view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
916	819	}
917	820
918	821	if ( hasLink ) {
919		- view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
	822	+ view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
920	823	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
921	824	if ( '' !== settings.title_text ) {
922	825	view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
923	826	}
		@@ -965,27 +868,6 @@
965	868	}
966	869
967	870	public function on_import( $element ) {
968	871	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	872	}
991	873	}