← All changes | includes/elements/column.php +66 -108 4.2.2 → 3.7.8 View file →

		@@ -1,9 +1,8 @@
1	1	<?php
2	2	namespace Elementor;
3	3
4	4	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5		-use Elementor\Plugin;
6	5
7	6	if ( ! defined( 'ABSPATH' ) ) {
8	7	exit; // Exit if accessed directly.
9	8	}
		@@ -74,12 +73,8 @@
74	73	public function get_icon() {
75	74	return 'eicon-column';
76	75	}
77	76
78		- protected function is_dynamic_content(): bool {
79		- return false;
80		- }
81		-
82	77	/**
83	78	* Get initial config.
84	79	*
85	80	* Retrieve the current section initial configuration.
		@@ -119,9 +114,9 @@
119	114	'tab' => Controls_Manager::TAB_LAYOUT,
120	115	]
121	116	);
122	117
123		- // Element Name for the Navigator.
	118	+ // Element Name for the Navigator
124	119	$this->add_control(
125	120	'_title',
126	121	[
127	122	'label' => esc_html__( 'Title', 'elementor' ),
		@@ -176,12 +171,17 @@
176	171	],
177	172	]
178	173	);
179	174
	175	+ $is_dome_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	176	+ $main_selector_element = $is_dome_optimization_active ? 'widget' : 'column';
	177	+ $widget_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-widget-wrap';
	178	+ $column_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-column-wrap';
	179	+
180	180	$this->add_responsive_control(
181	181	'content_position',
182	182	[
183		- 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
	183	+ 'label' => esc_html__( 'Vertical Align', 'elementor' ),
184	184	'type' => Controls_Manager::SELECT,
185	185	'default' => '',
186	186	'options' => [
187	187	'' => esc_html__( 'Default', 'elementor' ),
		@@ -196,12 +196,12 @@
196	196	'top' => 'flex-start',
197	197	'bottom' => 'flex-end',
198	198	],
199	199	'selectors' => [
200		- // TODO: The following line is for BC since 2.7.0.
201		- '.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-widget-wrap' => 'align-items: {{VALUE}}',
202		- // This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position).
203		- '{{WRAPPER}}.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
	200	+ // TODO: The following line is for BC since 2.7.0
	201	+ '.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-' . $main_selector_element . '-wrap' => 'align-items: {{VALUE}}',
	202	+ // This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position)
	203	+ '{{WRAPPER}}.elementor-column.elementor-element[data-element_type="column"] > .elementor-' . $main_selector_element . '-wrap.elementor-element-populated' . $widget_wrap_child => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
204	204	],
205	205	]
206	206	);
207	207
		@@ -207,9 +207,9 @@
207	207
208	208	$this->add_responsive_control(
209	209	'align',
210	210	[
211		- 'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
	211	+ 'label' => esc_html__( 'Horizontal Align', 'elementor' ),
212	212	'type' => Controls_Manager::SELECT,
213	213	'default' => '',
214	214	'options' => [
215	215	'' => esc_html__( 'Default', 'elementor' ),
		@@ -220,17 +220,14 @@
220	220	'space-around' => esc_html__( 'Space Around', 'elementor' ),
221	221	'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
222	222	],
223	223	'selectors' => [
224		- '{{WRAPPER}}.elementor-column > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
	224	+ '{{WRAPPER}}.elementor-column' . $column_wrap_child . ' > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
225	225	],
226	226	]
227	227	);
228	228
229		- $optimized_markup = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
230		- $space_between_widgets = $optimized_markup
231		- ? '--kit-widget-spacing: {{VALUE}}px'
232		- : 'margin-block-end: {{VALUE}}px';
	229	+ $space_between_widgets_selector = $is_dome_optimization_active ? '' : '> .elementor-column-wrap ';
233	230
234	231	$this->add_responsive_control(
235	232	'space_between_widgets',
236	233	[
		@@ -237,9 +234,9 @@
237	234	'label' => esc_html__( 'Widgets Space', 'elementor' ) . ' (px)',
238	235	'type' => Controls_Manager::NUMBER,
239	236	'placeholder' => 20,
240	237	'selectors' => [
241		- '{{WRAPPER}} > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute)' => $space_between_widgets, // Need the full path for exclude the inner section.
	238	+ '{{WRAPPER}} ' . $space_between_widgets_selector . '> .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute)' => 'margin-bottom: {{VALUE}}px', //Need the full path for exclude the inner section
242	239	],
243	240	]
244	241	);
245	242
		@@ -291,9 +288,9 @@
291	288	Group_Control_Background::get_type(),
292	289	[
293	290	'name' => 'background',
294	291	'types' => [ 'classic', 'gradient', 'slideshow' ],
295		- 'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, {{WRAPPER}} > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer',
	292	+ 'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background) > .elementor-' . $main_selector_element . '-wrap, {{WRAPPER}} > .elementor-' . $main_selector_element . '-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer',
296	293	'fields_options' => [
297	294	'background' => [
298	295	'frontend_available' => true,
299	296	],
		@@ -300,45 +297,8 @@
300	297	],
301	298	]
302	299	);
303	300
304		- $this->add_control(
305		- 'handle_slideshow_asset_loading',
306		- [
307		- 'type' => Controls_Manager::HIDDEN,
308		- 'assets' => [
309		- 'styles' => [
310		- [
311		- 'name' => 'e-swiper',
312		- 'conditions' => [
313		- 'terms' => [
314		- [
315		- 'name' => 'background_background',
316		- 'operator' => '===',
317		- 'value' => 'slideshow',
318		- ],
319		- ],
320		- ],
321		- ],
322		- ],
323		- 'scripts' => [
324		- [
325		- 'name' => 'swiper',
326		- 'conditions' => [
327		- 'terms' => [
328		- [
329		- 'name' => 'background_background',
330		- 'operator' => '===',
331		- 'value' => 'slideshow',
332		- ],
333		- ],
334		- ],
335		- ],
336		- ],
337		- ],
338		- ]
339		- );
340		-
341	301	$this->end_controls_tab();
342	302
343	303	$this->start_controls_tab(
344	304	'tab_background_hover',
		@@ -357,9 +317,9 @@
357	317
358	318	$this->add_control(
359	319	'background_hover_transition',
360	320	[
361		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	321	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
362	322	'type' => Controls_Manager::SLIDER,
363	323	'default' => [
364	324	'size' => 0.3,
365	325	],
		@@ -364,9 +324,8 @@
364	324	'size' => 0.3,
365	325	],
366	326	'range' => [
367	327	'px' => [
368		- 'min' => 0,
369	328	'max' => 3,
370	329	'step' => 0.1,
371	330	],
372	331	],
		@@ -409,9 +368,9 @@
409	368	'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
410	369	]
411	370	);
412	371
413		- $this->add_responsive_control(
	372	+ $this->add_control(
414	373	'background_overlay_opacity',
415	374	[
416	375	'label' => esc_html__( 'Opacity', 'elementor' ),
417	376	'type' => Controls_Manager::SLIDER,
		@@ -483,9 +442,9 @@
483	442	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
484	443	]
485	444	);
486	445
487		- $this->add_responsive_control(
	446	+ $this->add_control(
488	447	'background_overlay_hover_opacity',
489	448	[
490	449	'label' => esc_html__( 'Opacity', 'elementor' ),
491	450	'type' => Controls_Manager::SLIDER,
		@@ -517,9 +476,9 @@
517	476
518	477	$this->add_control(
519	478	'background_overlay_hover_transition',
520	479	[
521		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	480	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
522	481	'type' => Controls_Manager::SLIDER,
523	482	'default' => [
524	483	'size' => 0.3,
525	484	],
		@@ -524,9 +483,8 @@
524	483	'size' => 0.3,
525	484	],
526	485	'range' => [
527	486	'px' => [
528		- 'min' => 0,
529	487	'max' => 3,
530	488	'step' => 0.1,
531	489	],
532	490	],
		@@ -570,9 +528,9 @@
570	528	'border_radius',
571	529	[
572	530	'label' => esc_html__( 'Border Radius', 'elementor' ),
573	531	'type' => Controls_Manager::DIMENSIONS,
574		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	532	+ 'size_units' => [ 'px', '%' ],
575	533	'selectors' => [
576	534	'{{WRAPPER}} > .elementor-element-populated, {{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay, {{WRAPPER}} > .elementor-background-slideshow' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
577	535	],
578	536	]
		@@ -607,9 +565,9 @@
607	565	'border_radius_hover',
608	566	[
609	567	'label' => esc_html__( 'Border Radius', 'elementor' ),
610	568	'type' => Controls_Manager::DIMENSIONS,
611		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	569	+ 'size_units' => [ 'px', '%' ],
612	570	'selectors' => [
613	571	'{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
614	572	],
615	573	]
		@@ -625,9 +583,9 @@
625	583
626	584	$this->add_control(
627	585	'border_hover_transition',
628	586	[
629		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	587	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
630	588	'type' => Controls_Manager::SLIDER,
631	589	'separator' => 'before',
632	590	'default' => [
633	591	'size' => 0.3,
		@@ -633,9 +591,8 @@
633	591	'size' => 0.3,
634	592	],
635	593	'range' => [
636	594	'px' => [
637		- 'min' => 0,
638	595	'max' => 3,
639	596	'step' => 0.1,
640	597	],
641	598	],
		@@ -647,9 +604,9 @@
647	604	'operator' => '!==',
648	605	'value' => '',
649	606	],
650	607	[
651		- 'name' => 'border_hover_border',
	608	+ 'name' => 'border_border',
652	609	'operator' => '!==',
653	610	'value' => '',
654	611	],
655	612	],
		@@ -685,8 +642,9 @@
685	642	'default' => '',
686	643	'selectors' => [
687	644	'{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
688	645	],
	646	+ 'separator' => 'none',
689	647	]
690	648	);
691	649
692	650	$this->add_control(
		@@ -724,16 +682,16 @@
724	682	],
725	683	]
726	684	);
727	685
728		- $this->add_responsive_control(
	686	+ $this->add_control(
729	687	'text_align',
730	688	[
731	689	'label' => esc_html__( 'Text Align', 'elementor' ),
732	690	'type' => Controls_Manager::CHOOSE,
733	691	'options' => [
734		- 'start' => [
735		- 'title' => esc_html__( 'Start', 'elementor' ),
	692	+ 'left' => [
	693	+ 'title' => esc_html__( 'Left', 'elementor' ),
736	694	'icon' => 'eicon-text-align-left',
737	695	],
738	696	'center' => [
739	697	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -738,22 +696,17 @@
738	696	'center' => [
739	697	'title' => esc_html__( 'Center', 'elementor' ),
740	698	'icon' => 'eicon-text-align-center',
741	699	],
742		- 'end' => [
743		- 'title' => esc_html__( 'End', 'elementor' ),
	700	+ 'right' => [
	701	+ 'title' => esc_html__( 'Right', 'elementor' ),
744	702	'icon' => 'eicon-text-align-right',
745	703	],
746	704	'justify' => [
747		- 'title' => esc_html__( 'Justified', 'elementor' ),
	705	+ 'title' => __( 'Justified', 'elementor' ),
748	706	'icon' => 'eicon-text-align-justify',
749	707	],
750	708	],
751		- 'classes' => 'elementor-control-start-end',
752		- 'selectors_dictionary' => [
753		- 'left' => is_rtl() ? 'end' : 'start',
754		- 'right' => is_rtl() ? 'start' : 'end',
755		- ],
756	709	'selectors' => [
757	710	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
758	711	],
759	712	]
		@@ -775,9 +728,9 @@
775	728	'margin',
776	729	[
777	730	'label' => esc_html__( 'Margin', 'elementor' ),
778	731	'type' => Controls_Manager::DIMENSIONS,
779		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	732	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
780	733	'selectors' => [
781	734	'{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
782	735	--e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
783	736	],
		@@ -783,16 +736,22 @@
783	736	],
784	737	]
785	738	);
786	739
	740	+ $padding_selector = '{{WRAPPER}} > .elementor-element-populated';
	741	+
	742	+ if ( ! $is_dome_optimization_active ) {
	743	+ $padding_selector .= ' > .elementor-widget-wrap';
	744	+ }
	745	+
787	746	$this->add_responsive_control(
788	747	'padding',
789	748	[
790	749	'label' => esc_html__( 'Padding', 'elementor' ),
791	750	'type' => Controls_Manager::DIMENSIONS,
792		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	751	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
793	752	'selectors' => [
794		- '{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	753	+ $padding_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
795	754	],
796	755	]
797	756	);
798	757
		@@ -813,11 +772,8 @@
813	772	[
814	773	'label' => esc_html__( 'CSS ID', 'elementor' ),
815	774	'type' => Controls_Manager::TEXT,
816	775	'default' => '',
817		- 'ai' => [
818		- 'active' => false,
819		- ],
820	776	'dynamic' => [
821	777	'active' => true,
822	778	],
823	779	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -831,11 +787,8 @@
831	787	[
832	788	'label' => esc_html__( 'CSS Classes', 'elementor' ),
833	789	'type' => Controls_Manager::TEXT,
834	790	'default' => '',
835		- 'ai' => [
836		- 'active' => false,
837		- ],
838	791	'dynamic' => [
839	792	'active' => true,
840	793	],
841	794	'prefix_class' => '',
		@@ -843,11 +796,9 @@
843	796	'classes' => 'elementor-control-direction-ltr',
844	797	]
845	798	);
846	799
847		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848		-
849		- // TODO: Backward comparability for deprecated controls.
	800	+ // TODO: Backward comparability for deprecated controls
850	801	$this->add_control(
851	802	'screen_sm',
852	803	[
853	804	'type' => Controls_Manager::HIDDEN,
		@@ -863,9 +814,9 @@
863	814	],
864	815	'prefix_class' => 'elementor-sm-',
865	816	]
866	817	);
867		- // END Backward comparability.
	818	+ // END Backward comparability
868	819
869	820	$this->end_controls_section();
870	821
871	822	$this->start_controls_section(
		@@ -875,10 +826,8 @@
875	826	'tab' => Controls_Manager::TAB_ADVANCED,
876	827	]
877	828	);
878	829
879		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880		-
881	830	$this->add_responsive_control(
882	831	'animation',
883	832	[
884	833	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -933,14 +882,9 @@
933	882
934	883	$this->add_control(
935	884	'responsive_description',
936	885	[
937		- 'raw' => sprintf(
938		- /* translators: 1: Link open tag, 2: Link close tag. */
939		- esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
940		- '<a href="javascript: $e.run( \'panel/close\' )">',
941		- '</a>'
942		- ),
	886	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
943	887	'type' => Controls_Manager::RAW_HTML,
944	888	'content_classes' => 'elementor-descriptor',
945	889	]
946	890	);
		@@ -962,11 +906,17 @@
962	906	* @since 2.9.0
963	907	* @access protected
964	908	*/
965	909	protected function content_template() {
	910	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	911	+ $wrapper_element = $is_dom_optimization_active ? 'widget' : 'column';
	912	+
966	913	?>
967		- <div class="elementor-widget-wrap">
	914	+ <div class="elementor-<?php echo esc_attr( $wrapper_element ); ?>-wrap">
968	915	<div class="elementor-background-overlay"></div>
	916	+ <?php if ( ! $is_dom_optimization_active ) { ?>
	917	+ <div class="elementor-widget-wrap"></div>
	918	+ <?php } ?>
969	919	</div>
970	920	<?php
971	921	}
972	922
		@@ -980,15 +930,15 @@
980	930	*/
981	931	public function before_render() {
982	932	$settings = $this->get_settings_for_display();
983	933
984		- $overlay_background = $settings['background_overlay_background'] ?? '';
985		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	934	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	935	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
986	936
987		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
988		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
	937	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	938	+ $wrapper_attribute_string = $is_dom_optimization_active ? '_widget_wrapper' : '_inner_wrapper';
989	939
990		- $column_wrap_classes = [ 'elementor-widget-wrap' ];
	940	+ $column_wrap_classes = $is_dom_optimization_active ? [ 'elementor-widget-wrap' ] : [ 'elementor-column-wrap' ];
991	941
992	942	if ( $this->get_children() ) {
993	943	$column_wrap_classes[] = 'elementor-element-populated';
994	944	}
		@@ -993,10 +943,13 @@
993	943	$column_wrap_classes[] = 'elementor-element-populated';
994	944	}
995	945
996	946	$this->add_render_attribute( [
	947	+ '_inner_wrapper' => [
	948	+ 'class' => $column_wrap_classes,
	949	+ ],
997	950	'_widget_wrapper' => [
998		- 'class' => $column_wrap_classes,
	951	+ 'class' => $is_dom_optimization_active ? $column_wrap_classes : 'elementor-widget-wrap',
999	952	],
1000	953	'_background_overlay' => [
1001	954	'class' => [ 'elementor-background-overlay' ],
1002	955	],
		@@ -1005,12 +958,15 @@
1005	958	<<?php
1006	959	// PHPCS - the method get_html_tag is safe.
1007	960	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008	961	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009		- <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	962	+ <div <?php $this->print_render_attribute_string( $wrapper_attribute_string ); ?>>
1010	963	<?php if ( $has_background_overlay ) : ?>
1011	964	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1012	965	<?php endif; ?>
	966	+ <?php if ( ! $is_dom_optimization_active ) : ?>
	967	+ <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	968	+ <?php endif; ?>
1013	969	<?php
1014	970	}
1015	971
1016	972	/**
		@@ -1021,9 +977,11 @@
1021	977	* @since 1.0.0
1022	978	* @access public
1023	979	*/
1024	980	public function after_render() {
1025		- ?>
	981	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	982	+ </div>
	983	+ <?php } ?>
1026	984	</div>
1027	985	</<?php
1028	986	// PHPCS - the method get_html_tag is safe.
1029	987	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>