← All changes | includes/elements/column.php +71 -86 4.1.0-dev1 → 3.13.2 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,50 +288,20 @@
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		- ],
301		- ]
302		- );
303		-
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		- ],
	297	+ 'image' => [
	298	+ 'background_lazyload' => [
	299	+ 'active' => true,
	300	+ 'keys' => [ 'background_image', 'url' ],
	301	+ 'selector' => '.elementor-element-populated',
321	302	],
322	303	],
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	304	],
338	305	]
339	306	);
340	307
		@@ -357,9 +324,9 @@
357	324
358	325	$this->add_control(
359	326	'background_hover_transition',
360	327	[
361		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	328	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
362	329	'type' => Controls_Manager::SLIDER,
363	330	'default' => [
364	331	'size' => 0.3,
365	332	],
		@@ -364,9 +331,8 @@
364	331	'size' => 0.3,
365	332	],
366	333	'range' => [
367	334	'px' => [
368		- 'min' => 0,
369	335	'max' => 3,
370	336	'step' => 0.1,
371	337	],
372	338	],
		@@ -406,8 +372,17 @@
406	372	Group_Control_Background::get_type(),
407	373	[
408	374	'name' => 'background_overlay',
409	375	'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
	376	+ 'fields_options' => [
	377	+ 'image' => [
	378	+ 'background_lazyload' => [
	379	+ 'active' => true,
	380	+ 'keys' => [ '_background_overlay', 'url' ],
	381	+ 'selector' => '.elementor-background-overlay,',
	382	+ ],
	383	+ ],
	384	+ ],
410	385	]
411	386	);
412	387
413	388	$this->add_responsive_control(
		@@ -517,9 +492,9 @@
517	492
518	493	$this->add_control(
519	494	'background_overlay_hover_transition',
520	495	[
521		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	496	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
522	497	'type' => Controls_Manager::SLIDER,
523	498	'default' => [
524	499	'size' => 0.3,
525	500	],
		@@ -524,9 +499,8 @@
524	499	'size' => 0.3,
525	500	],
526	501	'range' => [
527	502	'px' => [
528		- 'min' => 0,
529	503	'max' => 3,
530	504	'step' => 0.1,
531	505	],
532	506	],
		@@ -625,9 +599,9 @@
625	599
626	600	$this->add_control(
627	601	'border_hover_transition',
628	602	[
629		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	603	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
630	604	'type' => Controls_Manager::SLIDER,
631	605	'separator' => 'before',
632	606	'default' => [
633	607	'size' => 0.3,
		@@ -633,9 +607,8 @@
633	607	'size' => 0.3,
634	608	],
635	609	'range' => [
636	610	'px' => [
637		- 'min' => 0,
638	611	'max' => 3,
639	612	'step' => 0.1,
640	613	],
641	614	],
		@@ -647,9 +620,9 @@
647	620	'operator' => '!==',
648	621	'value' => '',
649	622	],
650	623	[
651		- 'name' => 'border_hover_border',
	624	+ 'name' => 'border_border',
652	625	'operator' => '!==',
653	626	'value' => '',
654	627	],
655	628	],
		@@ -685,8 +658,9 @@
685	658	'default' => '',
686	659	'selectors' => [
687	660	'{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
688	661	],
	662	+ 'separator' => 'none',
689	663	]
690	664	);
691	665
692	666	$this->add_control(
		@@ -730,10 +704,10 @@
730	704	[
731	705	'label' => esc_html__( 'Text Align', 'elementor' ),
732	706	'type' => Controls_Manager::CHOOSE,
733	707	'options' => [
734		- 'start' => [
735		- 'title' => esc_html__( 'Start', 'elementor' ),
	708	+ 'left' => [
	709	+ 'title' => esc_html__( 'Left', 'elementor' ),
736	710	'icon' => 'eicon-text-align-left',
737	711	],
738	712	'center' => [
739	713	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -738,10 +712,10 @@
738	712	'center' => [
739	713	'title' => esc_html__( 'Center', 'elementor' ),
740	714	'icon' => 'eicon-text-align-center',
741	715	],
742		- 'end' => [
743		- 'title' => esc_html__( 'End', 'elementor' ),
	716	+ 'right' => [
	717	+ 'title' => esc_html__( 'Right', 'elementor' ),
744	718	'icon' => 'eicon-text-align-right',
745	719	],
746	720	'justify' => [
747	721	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -747,13 +721,8 @@
747	721	'title' => esc_html__( 'Justified', 'elementor' ),
748	722	'icon' => 'eicon-text-align-justify',
749	723	],
750	724	],
751		- 'classes' => 'elementor-control-start-end',
752		- 'selectors_dictionary' => [
753		- 'left' => is_rtl() ? 'end' : 'start',
754		- 'right' => is_rtl() ? 'start' : 'end',
755		- ],
756	725	'selectors' => [
757	726	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
758	727	],
759	728	]
		@@ -783,8 +752,14 @@
783	752	],
784	753	]
785	754	);
786	755
	756	+ $padding_selector = '{{WRAPPER}} > .elementor-element-populated';
	757	+
	758	+ if ( ! $is_dome_optimization_active ) {
	759	+ $padding_selector .= ' > .elementor-widget-wrap';
	760	+ }
	761	+
787	762	$this->add_responsive_control(
788	763	'padding',
789	764	[
790	765	'label' => esc_html__( 'Padding', 'elementor' ),
		@@ -790,9 +765,9 @@
790	765	'label' => esc_html__( 'Padding', 'elementor' ),
791	766	'type' => Controls_Manager::DIMENSIONS,
792	767	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
793	768	'selectors' => [
794		- '{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	769	+ $padding_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
795	770	],
796	771	]
797	772	);
798	773
		@@ -843,11 +818,9 @@
843	818	'classes' => 'elementor-control-direction-ltr',
844	819	]
845	820	);
846	821
847		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848		-
849		- // TODO: Backward comparability for deprecated controls.
	822	+ // TODO: Backward comparability for deprecated controls
850	823	$this->add_control(
851	824	'screen_sm',
852	825	[
853	826	'type' => Controls_Manager::HIDDEN,
		@@ -863,9 +836,9 @@
863	836	],
864	837	'prefix_class' => 'elementor-sm-',
865	838	]
866	839	);
867		- // END Backward comparability.
	840	+ // END Backward comparability
868	841
869	842	$this->end_controls_section();
870	843
871	844	$this->start_controls_section(
		@@ -875,10 +848,8 @@
875	848	'tab' => Controls_Manager::TAB_ADVANCED,
876	849	]
877	850	);
878	851
879		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880		-
881	852	$this->add_responsive_control(
882	853	'animation',
883	854	[
884	855	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -962,11 +933,17 @@
962	933	* @since 2.9.0
963	934	* @access protected
964	935	*/
965	936	protected function content_template() {
	937	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	938	+ $wrapper_element = $is_dom_optimization_active ? 'widget' : 'column';
	939	+
966	940	?>
967		- <div class="elementor-widget-wrap">
	941	+ <div class="elementor-<?php echo esc_attr( $wrapper_element ); ?>-wrap">
968	942	<div class="elementor-background-overlay"></div>
	943	+ <?php if ( ! $is_dom_optimization_active ) { ?>
	944	+ <div class="elementor-widget-wrap"></div>
	945	+ <?php } ?>
969	946	</div>
970	947	<?php
971	948	}
972	949
		@@ -980,15 +957,15 @@
980	957	*/
981	958	public function before_render() {
982	959	$settings = $this->get_settings_for_display();
983	960
984		- $overlay_background = $settings['background_overlay_background'] ?? '';
985		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	961	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	962	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
986	963
987		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
988		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
	964	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	965	+ $wrapper_attribute_string = $is_dom_optimization_active ? '_widget_wrapper' : '_inner_wrapper';
989	966
990		- $column_wrap_classes = [ 'elementor-widget-wrap' ];
	967	+ $column_wrap_classes = $is_dom_optimization_active ? [ 'elementor-widget-wrap' ] : [ 'elementor-column-wrap' ];
991	968
992	969	if ( $this->get_children() ) {
993	970	$column_wrap_classes[] = 'elementor-element-populated';
994	971	}
		@@ -993,10 +970,13 @@
993	970	$column_wrap_classes[] = 'elementor-element-populated';
994	971	}
995	972
996	973	$this->add_render_attribute( [
	974	+ '_inner_wrapper' => [
	975	+ 'class' => $column_wrap_classes,
	976	+ ],
997	977	'_widget_wrapper' => [
998		- 'class' => $column_wrap_classes,
	978	+ 'class' => $is_dom_optimization_active ? $column_wrap_classes : 'elementor-widget-wrap',
999	979	],
1000	980	'_background_overlay' => [
1001	981	'class' => [ 'elementor-background-overlay' ],
1002	982	],
		@@ -1005,12 +985,15 @@
1005	985	<<?php
1006	986	// PHPCS - the method get_html_tag is safe.
1007	987	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008	988	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009		- <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	989	+ <div <?php $this->print_render_attribute_string( $wrapper_attribute_string ); ?>>
1010	990	<?php if ( $has_background_overlay ) : ?>
1011	991	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1012	992	<?php endif; ?>
	993	+ <?php if ( ! $is_dom_optimization_active ) : ?>
	994	+ <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	995	+ <?php endif; ?>
1013	996	<?php
1014	997	}
1015	998
1016	999	/**
		@@ -1021,9 +1004,11 @@
1021	1004	* @since 1.0.0
1022	1005	* @access public
1023	1006	*/
1024	1007	public function after_render() {
1025		- ?>
	1008	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1009	+ </div>
	1010	+ <?php } ?>
1026	1011	</div>
1027	1012	</<?php
1028	1013	// PHPCS - the method get_html_tag is safe.
1029	1014	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>