← All changes | includes/elements/column.php +76 -102 4.1.5 → 3.9.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	],
		@@ -570,9 +544,9 @@
570	544	'border_radius',
571	545	[
572	546	'label' => esc_html__( 'Border Radius', 'elementor' ),
573	547	'type' => Controls_Manager::DIMENSIONS,
574		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	548	+ 'size_units' => [ 'px', '%', 'em' ],
575	549	'selectors' => [
576	550	'{{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	551	],
578	552	]
		@@ -607,9 +581,9 @@
607	581	'border_radius_hover',
608	582	[
609	583	'label' => esc_html__( 'Border Radius', 'elementor' ),
610	584	'type' => Controls_Manager::DIMENSIONS,
611		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	585	+ 'size_units' => [ 'px', '%', 'em' ],
612	586	'selectors' => [
613	587	'{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
614	588	],
615	589	]
		@@ -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	]
		@@ -775,9 +744,9 @@
775	744	'margin',
776	745	[
777	746	'label' => esc_html__( 'Margin', 'elementor' ),
778	747	'type' => Controls_Manager::DIMENSIONS,
779		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	748	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
780	749	'selectors' => [
781	750	'{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
782	751	--e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
783	752	],
		@@ -783,16 +752,22 @@
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' ),
791	766	'type' => Controls_Manager::DIMENSIONS,
792		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	767	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
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
		@@ -813,11 +788,8 @@
813	788	[
814	789	'label' => esc_html__( 'CSS ID', 'elementor' ),
815	790	'type' => Controls_Manager::TEXT,
816	791	'default' => '',
817		- 'ai' => [
818		- 'active' => false,
819		- ],
820	792	'dynamic' => [
821	793	'active' => true,
822	794	],
823	795	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -831,11 +803,8 @@
831	803	[
832	804	'label' => esc_html__( 'CSS Classes', 'elementor' ),
833	805	'type' => Controls_Manager::TEXT,
834	806	'default' => '',
835		- 'ai' => [
836		- 'active' => false,
837		- ],
838	807	'dynamic' => [
839	808	'active' => true,
840	809	],
841	810	'prefix_class' => '',
		@@ -843,11 +812,9 @@
843	812	'classes' => 'elementor-control-direction-ltr',
844	813	]
845	814	);
846	815
847		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848		-
849		- // TODO: Backward comparability for deprecated controls.
	816	+ // TODO: Backward comparability for deprecated controls
850	817	$this->add_control(
851	818	'screen_sm',
852	819	[
853	820	'type' => Controls_Manager::HIDDEN,
		@@ -863,9 +830,9 @@
863	830	],
864	831	'prefix_class' => 'elementor-sm-',
865	832	]
866	833	);
867		- // END Backward comparability.
	834	+ // END Backward comparability
868	835
869	836	$this->end_controls_section();
870	837
871	838	$this->start_controls_section(
		@@ -875,10 +842,8 @@
875	842	'tab' => Controls_Manager::TAB_ADVANCED,
876	843	]
877	844	);
878	845
879		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880		-
881	846	$this->add_responsive_control(
882	847	'animation',
883	848	[
884	849	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -933,14 +898,9 @@
933	898
934	899	$this->add_control(
935	900	'responsive_description',
936	901	[
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		- ),
	902	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
943	903	'type' => Controls_Manager::RAW_HTML,
944	904	'content_classes' => 'elementor-descriptor',
945	905	]
946	906	);
		@@ -962,11 +922,17 @@
962	922	* @since 2.9.0
963	923	* @access protected
964	924	*/
965	925	protected function content_template() {
	926	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	927	+ $wrapper_element = $is_dom_optimization_active ? 'widget' : 'column';
	928	+
966	929	?>
967		- <div class="elementor-widget-wrap">
	930	+ <div class="elementor-<?php echo esc_attr( $wrapper_element ); ?>-wrap">
968	931	<div class="elementor-background-overlay"></div>
	932	+ <?php if ( ! $is_dom_optimization_active ) { ?>
	933	+ <div class="elementor-widget-wrap"></div>
	934	+ <?php } ?>
969	935	</div>
970	936	<?php
971	937	}
972	938
		@@ -980,15 +946,15 @@
980	946	*/
981	947	public function before_render() {
982	948	$settings = $this->get_settings_for_display();
983	949
984		- $overlay_background = $settings['background_overlay_background'] ?? '';
985		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	950	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	951	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
986	952
987		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
988		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
	953	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	954	+ $wrapper_attribute_string = $is_dom_optimization_active ? '_widget_wrapper' : '_inner_wrapper';
989	955
990		- $column_wrap_classes = [ 'elementor-widget-wrap' ];
	956	+ $column_wrap_classes = $is_dom_optimization_active ? [ 'elementor-widget-wrap' ] : [ 'elementor-column-wrap' ];
991	957
992	958	if ( $this->get_children() ) {
993	959	$column_wrap_classes[] = 'elementor-element-populated';
994	960	}
		@@ -993,10 +959,13 @@
993	959	$column_wrap_classes[] = 'elementor-element-populated';
994	960	}
995	961
996	962	$this->add_render_attribute( [
	963	+ '_inner_wrapper' => [
	964	+ 'class' => $column_wrap_classes,
	965	+ ],
997	966	'_widget_wrapper' => [
998		- 'class' => $column_wrap_classes,
	967	+ 'class' => $is_dom_optimization_active ? $column_wrap_classes : 'elementor-widget-wrap',
999	968	],
1000	969	'_background_overlay' => [
1001	970	'class' => [ 'elementor-background-overlay' ],
1002	971	],
		@@ -1005,12 +974,15 @@
1005	974	<<?php
1006	975	// PHPCS - the method get_html_tag is safe.
1007	976	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008	977	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009		- <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	978	+ <div <?php $this->print_render_attribute_string( $wrapper_attribute_string ); ?>>
1010	979	<?php if ( $has_background_overlay ) : ?>
1011	980	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1012	981	<?php endif; ?>
	982	+ <?php if ( ! $is_dom_optimization_active ) : ?>
	983	+ <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	984	+ <?php endif; ?>
1013	985	<?php
1014	986	}
1015	987
1016	988	/**
		@@ -1021,9 +993,11 @@
1021	993	* @since 1.0.0
1022	994	* @access public
1023	995	*/
1024	996	public function after_render() {
1025		- ?>
	997	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	998	+ </div>
	999	+ <?php } ?>
1026	1000	</div>
1027	1001	</<?php
1028	1002	// PHPCS - the method get_html_tag is safe.
1029	1003	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>