← All changes | includes/elements/column.php +181 -235 4.2.4 → 3.2.2 View file →

		@@ -1,10 +1,7 @@
1	1	<?php
2	2	namespace Elementor;
3	3
4		-use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5		-use Elementor\Plugin;
6		-
7	4	if ( ! defined( 'ABSPATH' ) ) {
8	5	exit; // Exit if accessed directly.
9	6	}
10	7
		@@ -57,9 +54,9 @@
57	54	*
58	55	* @return string Column title.
59	56	*/
60	57	public function get_title() {
61		- return esc_html__( 'Column', 'elementor' );
	58	+ return __( 'Column', 'elementor' );
62	59	}
63	60
64	61	/**
65	62	* Get column icon.
		@@ -74,12 +71,8 @@
74	71	public function get_icon() {
75	72	return 'eicon-column';
76	73	}
77	74
78		- protected function is_dynamic_content(): bool {
79		- return false;
80		- }
81		-
82	75	/**
83	76	* Get initial config.
84	77	*
85	78	* Retrieve the current section initial configuration.
		@@ -114,63 +107,44 @@
114	107	// Section Layout.
115	108	$this->start_controls_section(
116	109	'layout',
117	110	[
118		- 'label' => esc_html__( 'Layout', 'elementor' ),
	111	+ 'label' => __( 'Layout', 'elementor' ),
119	112	'tab' => Controls_Manager::TAB_LAYOUT,
120	113	]
121	114	);
122	115
123		- // Element Name for the Navigator.
	116	+ // Element Name for the Navigator
124	117	$this->add_control(
125	118	'_title',
126	119	[
127		- 'label' => esc_html__( 'Title', 'elementor' ),
	120	+ 'label' => __( 'Title', 'elementor' ),
128	121	'type' => Controls_Manager::HIDDEN,
129	122	'render_type' => 'none',
130	123	]
131	124	);
132	125
133		- $active_breakpoint_keys = array_reverse( array_keys( Plugin::$instance->breakpoints->get_active_breakpoints() ) );
134		- $inline_size_device_args = [
135		- Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [ 'placeholder' => 100 ],
136		- ];
137		-
138		- foreach ( $active_breakpoint_keys as $breakpoint_key ) {
139		- if ( ! isset( $inline_size_device_args[ $breakpoint_key ] ) ) {
140		- $inline_size_device_args[ $breakpoint_key ] = [];
141		- }
142		-
143		- $inline_size_device_args[ $breakpoint_key ] = array_merge_recursive(
144		- $inline_size_device_args[ $breakpoint_key ],
145		- [
146		- 'max' => 100,
147		- 'required' => false,
148		- ]
149		- );
150		- }
151		-
152		- if ( in_array( Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA, $active_breakpoint_keys, true ) ) {
153		- $min_affected_device_value = Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA;
154		- } else {
155		- $min_affected_device_value = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
156		- }
157		-
158	126	$this->add_responsive_control(
159	127	'_inline_size',
160	128	[
161		- 'label' => esc_html__( 'Column Width', 'elementor' ) . ' (%)',
	129	+ 'label' => __( 'Column Width', 'elementor' ) . ' (%)',
162	130	'type' => Controls_Manager::NUMBER,
163	131	'min' => 2,
164	132	'max' => 98,
165	133	'required' => true,
166		- 'device_args' => $inline_size_device_args,
	134	+ 'device_args' => [
	135	+ Controls_Stack::RESPONSIVE_TABLET => [
	136	+ 'max' => 100,
	137	+ 'required' => false,
	138	+ ],
	139	+ Controls_Stack::RESPONSIVE_MOBILE => [
	140	+ 'max' => 100,
	141	+ 'required' => false,
	142	+ ],
	143	+ ],
167	144	'min_affected_device' => [
168		- Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => $min_affected_device_value,
169		- Breakpoints_Manager::BREAKPOINT_KEY_LAPTOP => $min_affected_device_value,
170		- Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device_value,
171		- Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device_value,
172		- Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device_value,
	145	+ Controls_Stack::RESPONSIVE_DESKTOP => Controls_Stack::RESPONSIVE_TABLET,
	146	+ Controls_Stack::RESPONSIVE_TABLET => Controls_Stack::RESPONSIVE_TABLET,
173	147	],
174	148	'selectors' => [
175	149	'{{WRAPPER}}' => 'width: {{VALUE}}%',
176	150	],
		@@ -176,22 +150,27 @@
176	150	],
177	151	]
178	152	);
179	153
	154	+ $is_dome_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	155	+ $main_selector_element = $is_dome_optimization_active ? 'widget' : 'column';
	156	+ $widget_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-widget-wrap';
	157	+ $column_wrap_child = $is_dome_optimization_active ? '' : ' > .elementor-column-wrap';
	158	+
180	159	$this->add_responsive_control(
181	160	'content_position',
182	161	[
183		- 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
	162	+ 'label' => __( 'Vertical Align', 'elementor' ),
184	163	'type' => Controls_Manager::SELECT,
185	164	'default' => '',
186	165	'options' => [
187		- '' => esc_html__( 'Default', 'elementor' ),
188		- 'top' => esc_html__( 'Top', 'elementor' ),
189		- 'center' => esc_html__( 'Middle', 'elementor' ),
190		- 'bottom' => esc_html__( 'Bottom', 'elementor' ),
191		- 'space-between' => esc_html__( 'Space Between', 'elementor' ),
192		- 'space-around' => esc_html__( 'Space Around', 'elementor' ),
193		- 'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
	166	+ '' => __( 'Default', 'elementor' ),
	167	+ 'top' => __( 'Top', 'elementor' ),
	168	+ 'center' => __( 'Middle', 'elementor' ),
	169	+ 'bottom' => __( 'Bottom', 'elementor' ),
	170	+ 'space-between' => __( 'Space Between', 'elementor' ),
	171	+ 'space-around' => __( 'Space Around', 'elementor' ),
	172	+ 'space-evenly' => __( 'Space Evenly', 'elementor' ),
194	173	],
195	174	'selectors_dictionary' => [
196	175	'top' => 'flex-start',
197	176	'bottom' => 'flex-end',
		@@ -196,12 +175,12 @@
196	175	'top' => 'flex-start',
197	176	'bottom' => 'flex-end',
198	177	],
199	178	'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}};',
	179	+ // TODO: The following line is for BC since 2.7.0
	180	+ '.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-' . $main_selector_element . '-wrap' => 'align-items: {{VALUE}}',
	181	+ // This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position)
	182	+ '{{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	183	],
205	184	]
206	185	);
207	186
		@@ -207,39 +186,36 @@
207	186
208	187	$this->add_responsive_control(
209	188	'align',
210	189	[
211		- 'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
	190	+ 'label' => __( 'Horizontal Align', 'elementor' ),
212	191	'type' => Controls_Manager::SELECT,
213	192	'default' => '',
214	193	'options' => [
215		- '' => esc_html__( 'Default', 'elementor' ),
216		- 'flex-start' => esc_html__( 'Start', 'elementor' ),
217		- 'center' => esc_html__( 'Center', 'elementor' ),
218		- 'flex-end' => esc_html__( 'End', 'elementor' ),
219		- 'space-between' => esc_html__( 'Space Between', 'elementor' ),
220		- 'space-around' => esc_html__( 'Space Around', 'elementor' ),
221		- 'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
	194	+ '' => __( 'Default', 'elementor' ),
	195	+ 'flex-start' => __( 'Start', 'elementor' ),
	196	+ 'center' => __( 'Center', 'elementor' ),
	197	+ 'flex-end' => __( 'End', 'elementor' ),
	198	+ 'space-between' => __( 'Space Between', 'elementor' ),
	199	+ 'space-around' => __( 'Space Around', 'elementor' ),
	200	+ 'space-evenly' => __( 'Space Evenly', 'elementor' ),
222	201	],
223	202	'selectors' => [
224		- '{{WRAPPER}}.elementor-column > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
	203	+ '{{WRAPPER}}.elementor-column' . $column_wrap_child . ' > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
225	204	],
226	205	]
227	206	);
228	207
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';
	208	+ $space_between_widgets_selector = $is_dome_optimization_active ? '' : '> .elementor-column-wrap ';
233	209
234	210	$this->add_responsive_control(
235	211	'space_between_widgets',
236	212	[
237		- 'label' => esc_html__( 'Widgets Space', 'elementor' ) . ' (px)',
	213	+ 'label' => __( 'Widgets Space', 'elementor' ) . ' (px)',
238	214	'type' => Controls_Manager::NUMBER,
239	215	'placeholder' => 20,
240	216	'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.
	217	+ '{{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	218	],
243	219	]
244	220	);
245	221
		@@ -254,15 +230,15 @@
254	230	'nav',
255	231	];
256	232
257	233	$options = [
258		- '' => esc_html__( 'Default', 'elementor' ),
	234	+ '' => __( 'Default', 'elementor' ),
259	235	] + array_combine( $possible_tags, $possible_tags );
260	236
261	237	$this->add_control(
262	238	'html_tag',
263	239	[
264		- 'label' => esc_html__( 'HTML Tag', 'elementor' ),
	240	+ 'label' => __( 'HTML Tag', 'elementor' ),
265	241	'type' => Controls_Manager::SELECT,
266	242	'options' => $options,
267	243	'render_type' => 'none',
268	244	]
		@@ -272,9 +248,9 @@
272	248
273	249	$this->start_controls_section(
274	250	'section_style',
275	251	[
276		- 'label' => esc_html__( 'Background', 'elementor' ),
	252	+ 'label' => __( 'Background', 'elementor' ),
277	253	'tab' => Controls_Manager::TAB_STYLE,
278	254	]
279	255	);
280	256
		@@ -282,9 +258,9 @@
282	258
283	259	$this->start_controls_tab(
284	260	'tab_background_normal',
285	261	[
286		- 'label' => esc_html__( 'Normal', 'elementor' ),
	262	+ 'label' => __( 'Normal', 'elementor' ),
287	263	]
288	264	);
289	265
290	266	$this->add_group_control(
		@@ -291,9 +267,9 @@
291	267	Group_Control_Background::get_type(),
292	268	[
293	269	'name' => 'background',
294	270	'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',
	271	+ '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	272	'fields_options' => [
297	273	'background' => [
298	274	'frontend_available' => true,
299	275	],
		@@ -300,51 +276,14 @@
300	276	],
301	277	]
302	278	);
303	279
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	280	$this->end_controls_tab();
342	281
343	282	$this->start_controls_tab(
344	283	'tab_background_hover',
345	284	[
346		- 'label' => esc_html__( 'Hover', 'elementor' ),
	285	+ 'label' => __( 'Hover', 'elementor' ),
347	286	]
348	287	);
349	288
350	289	$this->add_group_control(
		@@ -357,9 +296,9 @@
357	296
358	297	$this->add_control(
359	298	'background_hover_transition',
360	299	[
361		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	300	+ 'label' => __( 'Transition Duration', 'elementor' ),
362	301	'type' => Controls_Manager::SLIDER,
363	302	'default' => [
364	303	'size' => 0.3,
365	304	],
		@@ -364,9 +303,8 @@
364	303	'size' => 0.3,
365	304	],
366	305	'range' => [
367	306	'px' => [
368		- 'min' => 0,
369	307	'max' => 3,
370	308	'step' => 0.1,
371	309	],
372	310	],
		@@ -384,9 +322,9 @@
384	322	// Section Column Background Overlay.
385	323	$this->start_controls_section(
386	324	'section_background_overlay',
387	325	[
388		- 'label' => esc_html__( 'Background Overlay', 'elementor' ),
	326	+ 'label' => __( 'Background Overlay', 'elementor' ),
389	327	'tab' => Controls_Manager::TAB_STYLE,
390	328	'condition' => [
391	329	'background_background' => [ 'classic', 'gradient' ],
392	330	],
		@@ -397,9 +335,9 @@
397	335
398	336	$this->start_controls_tab(
399	337	'tab_background_overlay_normal',
400	338	[
401		- 'label' => esc_html__( 'Normal', 'elementor' ),
	339	+ 'label' => __( 'Normal', 'elementor' ),
402	340	]
403	341	);
404	342
405	343	$this->add_group_control(
		@@ -409,12 +347,12 @@
409	347	'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
410	348	]
411	349	);
412	350
413		- $this->add_responsive_control(
	351	+ $this->add_control(
414	352	'background_overlay_opacity',
415	353	[
416		- 'label' => esc_html__( 'Opacity', 'elementor' ),
	354	+ 'label' => __( 'Opacity', 'elementor' ),
417	355	'type' => Controls_Manager::SLIDER,
418	356	'default' => [
419	357	'size' => .5,
420	358	],
		@@ -443,24 +381,21 @@
443	381
444	382	$this->add_control(
445	383	'overlay_blend_mode',
446	384	[
447		- 'label' => esc_html__( 'Blend Mode', 'elementor' ),
	385	+ 'label' => __( 'Blend Mode', 'elementor' ),
448	386	'type' => Controls_Manager::SELECT,
449	387	'options' => [
450		- '' => esc_html__( 'Normal', 'elementor' ),
451		- 'multiply' => esc_html__( 'Multiply', 'elementor' ),
452		- 'screen' => esc_html__( 'Screen', 'elementor' ),
453		- 'overlay' => esc_html__( 'Overlay', 'elementor' ),
454		- 'darken' => esc_html__( 'Darken', 'elementor' ),
455		- 'lighten' => esc_html__( 'Lighten', 'elementor' ),
456		- 'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
457		- 'saturation' => esc_html__( 'Saturation', 'elementor' ),
458		- 'color' => esc_html__( 'Color', 'elementor' ),
459		- 'difference' => esc_html__( 'Difference', 'elementor' ),
460		- 'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
461		- 'hue' => esc_html__( 'Hue', 'elementor' ),
462		- 'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
	388	+ '' => __( 'Normal', 'elementor' ),
	389	+ 'multiply' => 'Multiply',
	390	+ 'screen' => 'Screen',
	391	+ 'overlay' => 'Overlay',
	392	+ 'darken' => 'Darken',
	393	+ 'lighten' => 'Lighten',
	394	+ 'color-dodge' => 'Color Dodge',
	395	+ 'saturation' => 'Saturation',
	396	+ 'color' => 'Color',
	397	+ 'luminosity' => 'Luminosity',
463	398	],
464	399	'selectors' => [
465	400	'{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
466	401	],
		@@ -471,9 +406,9 @@
471	406
472	407	$this->start_controls_tab(
473	408	'tab_background_overlay_hover',
474	409	[
475		- 'label' => esc_html__( 'Hover', 'elementor' ),
	410	+ 'label' => __( 'Hover', 'elementor' ),
476	411	]
477	412	);
478	413
479	414	$this->add_group_control(
		@@ -483,12 +418,12 @@
483	418	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
484	419	]
485	420	);
486	421
487		- $this->add_responsive_control(
	422	+ $this->add_control(
488	423	'background_overlay_hover_opacity',
489	424	[
490		- 'label' => esc_html__( 'Opacity', 'elementor' ),
	425	+ 'label' => __( 'Opacity', 'elementor' ),
491	426	'type' => Controls_Manager::SLIDER,
492	427	'default' => [
493	428	'size' => .5,
494	429	],
		@@ -517,9 +452,9 @@
517	452
518	453	$this->add_control(
519	454	'background_overlay_hover_transition',
520	455	[
521		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	456	+ 'label' => __( 'Transition Duration', 'elementor' ),
522	457	'type' => Controls_Manager::SLIDER,
523	458	'default' => [
524	459	'size' => 0.3,
525	460	],
		@@ -524,9 +459,8 @@
524	459	'size' => 0.3,
525	460	],
526	461	'range' => [
527	462	'px' => [
528		- 'min' => 0,
529	463	'max' => 3,
530	464	'step' => 0.1,
531	465	],
532	466	],
		@@ -543,9 +477,9 @@
543	477
544	478	$this->start_controls_section(
545	479	'section_border',
546	480	[
547		- 'label' => esc_html__( 'Border', 'elementor' ),
	481	+ 'label' => __( 'Border', 'elementor' ),
548	482	'tab' => Controls_Manager::TAB_STYLE,
549	483	]
550	484	);
551	485
		@@ -553,9 +487,9 @@
553	487
554	488	$this->start_controls_tab(
555	489	'tab_border_normal',
556	490	[
557		- 'label' => esc_html__( 'Normal', 'elementor' ),
	491	+ 'label' => __( 'Normal', 'elementor' ),
558	492	]
559	493	);
560	494
561	495	$this->add_group_control(
		@@ -568,11 +502,11 @@
568	502
569	503	$this->add_responsive_control(
570	504	'border_radius',
571	505	[
572		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	506	+ 'label' => __( 'Border Radius', 'elementor' ),
573	507	'type' => Controls_Manager::DIMENSIONS,
574		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	508	+ 'size_units' => [ 'px', '%' ],
575	509	'selectors' => [
576	510	'{{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	511	],
578	512	]
		@@ -590,9 +524,9 @@
590	524
591	525	$this->start_controls_tab(
592	526	'tab_border_hover',
593	527	[
594		- 'label' => esc_html__( 'Hover', 'elementor' ),
	528	+ 'label' => __( 'Hover', 'elementor' ),
595	529	]
596	530	);
597	531
598	532	$this->add_group_control(
		@@ -605,11 +539,11 @@
605	539
606	540	$this->add_responsive_control(
607	541	'border_radius_hover',
608	542	[
609		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	543	+ 'label' => __( 'Border Radius', 'elementor' ),
610	544	'type' => Controls_Manager::DIMENSIONS,
611		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	545	+ 'size_units' => [ 'px', '%' ],
612	546	'selectors' => [
613	547	'{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
614	548	],
615	549	]
		@@ -625,9 +559,9 @@
625	559
626	560	$this->add_control(
627	561	'border_hover_transition',
628	562	[
629		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	563	+ 'label' => __( 'Transition Duration', 'elementor' ),
630	564	'type' => Controls_Manager::SLIDER,
631	565	'separator' => 'before',
632	566	'default' => [
633	567	'size' => 0.3,
		@@ -633,9 +567,8 @@
633	567	'size' => 0.3,
634	568	],
635	569	'range' => [
636	570	'px' => [
637		- 'min' => 0,
638	571	'max' => 3,
639	572	'step' => 0.1,
640	573	],
641	574	],
		@@ -647,9 +580,9 @@
647	580	'operator' => '!==',
648	581	'value' => '',
649	582	],
650	583	[
651		- 'name' => 'border_hover_border',
	584	+ 'name' => 'border_border',
652	585	'operator' => '!==',
653	586	'value' => '',
654	587	],
655	588	],
		@@ -670,9 +603,9 @@
670	603	// Section Typography.
671	604	$this->start_controls_section(
672	605	'section_typo',
673	606	[
674		- 'label' => esc_html__( 'Typography', 'elementor' ),
	607	+ 'label' => __( 'Typography', 'elementor' ),
675	608	'type' => Controls_Manager::SECTION,
676	609	'tab' => Controls_Manager::TAB_STYLE,
677	610	]
678	611	);
		@@ -679,14 +612,15 @@
679	612
680	613	$this->add_control(
681	614	'heading_color',
682	615	[
683		- 'label' => esc_html__( 'Heading Color', 'elementor' ),
	616	+ 'label' => __( 'Heading Color', 'elementor' ),
684	617	'type' => Controls_Manager::COLOR,
685	618	'default' => '',
686	619	'selectors' => [
687	620	'{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
688	621	],
	622	+ 'separator' => 'none',
689	623	]
690	624	);
691	625
692	626	$this->add_control(
		@@ -691,9 +625,9 @@
691	625
692	626	$this->add_control(
693	627	'color_text',
694	628	[
695		- 'label' => esc_html__( 'Text Color', 'elementor' ),
	629	+ 'label' => __( 'Text Color', 'elementor' ),
696	630	'type' => Controls_Manager::COLOR,
697	631	'default' => '',
698	632	'selectors' => [
699	633	'{{WRAPPER}} > .elementor-element-populated' => 'color: {{VALUE}};',
		@@ -703,9 +637,9 @@
703	637
704	638	$this->add_control(
705	639	'color_link',
706	640	[
707		- 'label' => esc_html__( 'Link Color', 'elementor' ),
	641	+ 'label' => __( 'Link Color', 'elementor' ),
708	642	'type' => Controls_Manager::COLOR,
709	643	'default' => '',
710	644	'selectors' => [
711	645	'{{WRAPPER}} .elementor-element-populated a' => 'color: {{VALUE}};',
		@@ -715,9 +649,9 @@
715	649
716	650	$this->add_control(
717	651	'color_link_hover',
718	652	[
719		- 'label' => esc_html__( 'Link Hover Color', 'elementor' ),
	653	+ 'label' => __( 'Link Hover Color', 'elementor' ),
720	654	'type' => Controls_Manager::COLOR,
721	655	'default' => '',
722	656	'selectors' => [
723	657	'{{WRAPPER}} .elementor-element-populated a:hover' => 'color: {{VALUE}};',
		@@ -724,36 +658,27 @@
724	658	],
725	659	]
726	660	);
727	661
728		- $this->add_responsive_control(
	662	+ $this->add_control(
729	663	'text_align',
730	664	[
731		- 'label' => esc_html__( 'Text Align', 'elementor' ),
	665	+ 'label' => __( 'Text Align', 'elementor' ),
732	666	'type' => Controls_Manager::CHOOSE,
733	667	'options' => [
734		- 'start' => [
735		- 'title' => esc_html__( 'Start', 'elementor' ),
	668	+ 'left' => [
	669	+ 'title' => __( 'Left', 'elementor' ),
736	670	'icon' => 'eicon-text-align-left',
737	671	],
738	672	'center' => [
739		- 'title' => esc_html__( 'Center', 'elementor' ),
	673	+ 'title' => __( 'Center', 'elementor' ),
740	674	'icon' => 'eicon-text-align-center',
741	675	],
742		- 'end' => [
743		- 'title' => esc_html__( 'End', 'elementor' ),
	676	+ 'right' => [
	677	+ 'title' => __( 'Right', 'elementor' ),
744	678	'icon' => 'eicon-text-align-right',
745	679	],
746		- 'justify' => [
747		- 'title' => esc_html__( 'Justified', 'elementor' ),
748		- 'icon' => 'eicon-text-align-justify',
749		- ],
750	680	],
751		- 'classes' => 'elementor-control-start-end',
752		- 'selectors_dictionary' => [
753		- 'left' => is_rtl() ? 'end' : 'start',
754		- 'right' => is_rtl() ? 'start' : 'end',
755		- ],
756	681	'selectors' => [
757	682	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
758	683	],
759	684	]
		@@ -764,9 +689,9 @@
764	689	// Section Advanced.
765	690	$this->start_controls_section(
766	691	'section_advanced',
767	692	[
768		- 'label' => esc_html__( 'Advanced', 'elementor' ),
	693	+ 'label' => __( 'Advanced', 'elementor' ),
769	694	'type' => Controls_Manager::SECTION,
770	695	'tab' => Controls_Manager::TAB_ADVANCED,
771	696	]
772	697	);
		@@ -773,14 +698,13 @@
773	698
774	699	$this->add_responsive_control(
775	700	'margin',
776	701	[
777		- 'label' => esc_html__( 'Margin', 'elementor' ),
	702	+ 'label' => __( 'Margin', 'elementor' ),
778	703	'type' => Controls_Manager::DIMENSIONS,
779		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	704	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
780	705	'selectors' => [
781		- '{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
782		- --e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
	706	+ '{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
783	707	],
784	708	]
785	709	);
786	710
		@@ -786,11 +710,11 @@
786	710
787	711	$this->add_responsive_control(
788	712	'padding',
789	713	[
790		- 'label' => esc_html__( 'Padding', 'elementor' ),
	714	+ 'label' => __( 'Padding', 'elementor' ),
791	715	'type' => Controls_Manager::DIMENSIONS,
792		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	716	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
793	717	'selectors' => [
794	718	'{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
795	719	],
796	720	]
		@@ -798,9 +722,9 @@
798	722
799	723	$this->add_responsive_control(
800	724	'z_index',
801	725	[
802		- 'label' => esc_html__( 'Z-Index', 'elementor' ),
	726	+ 'label' => __( 'Z-Index', 'elementor' ),
803	727	'type' => Controls_Manager::NUMBER,
804	728	'min' => 0,
805	729	'selectors' => [
806	730	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
		@@ -810,18 +734,15 @@
810	734
811	735	$this->add_control(
812	736	'_element_id',
813	737	[
814		- 'label' => esc_html__( 'CSS ID', 'elementor' ),
	738	+ 'label' => __( 'CSS ID', 'elementor' ),
815	739	'type' => Controls_Manager::TEXT,
816	740	'default' => '',
817		- 'ai' => [
818		- 'active' => false,
819		- ],
820	741	'dynamic' => [
821	742	'active' => true,
822	743	],
823		- 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
	744	+ 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
824	745	'style_transfer' => false,
825	746	'classes' => 'elementor-control-direction-ltr',
826	747	]
827	748	);
		@@ -828,26 +749,21 @@
828	749
829	750	$this->add_control(
830	751	'css_classes',
831	752	[
832		- 'label' => esc_html__( 'CSS Classes', 'elementor' ),
	753	+ 'label' => __( 'CSS Classes', 'elementor' ),
833	754	'type' => Controls_Manager::TEXT,
834	755	'default' => '',
835		- 'ai' => [
836		- 'active' => false,
837		- ],
838	756	'dynamic' => [
839	757	'active' => true,
840	758	],
841	759	'prefix_class' => '',
842		- 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
	760	+ 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
843	761	'classes' => 'elementor-control-direction-ltr',
844	762	]
845	763	);
846	764
847		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848		-
849		- // TODO: Backward comparability for deprecated controls.
	765	+ // TODO: Backward comparability for deprecated controls
850	766	$this->add_control(
851	767	'screen_sm',
852	768	[
853	769	'type' => Controls_Manager::HIDDEN,
		@@ -863,9 +779,9 @@
863	779	],
864	780	'prefix_class' => 'elementor-sm-',
865	781	]
866	782	);
867		- // END Backward comparability.
	783	+ // END Backward comparability
868	784
869	785	$this->end_controls_section();
870	786
871	787	$this->start_controls_section(
		@@ -870,19 +786,17 @@
870	786
871	787	$this->start_controls_section(
872	788	'section_effects',
873	789	[
874		- 'label' => esc_html__( 'Motion Effects', 'elementor' ),
	790	+ 'label' => __( 'Motion Effects', 'elementor' ),
875	791	'tab' => Controls_Manager::TAB_ADVANCED,
876	792	]
877	793	);
878	794
879		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880		-
881	795	$this->add_responsive_control(
882	796	'animation',
883	797	[
884		- 'label' => esc_html__( 'Entrance Animation', 'elementor' ),
	798	+ 'label' => __( 'Entrance Animation', 'elementor' ),
885	799	'type' => Controls_Manager::ANIMATION,
886	800	'frontend_available' => true,
887	801	]
888	802	);
		@@ -889,15 +803,15 @@
889	803
890	804	$this->add_control(
891	805	'animation_duration',
892	806	[
893		- 'label' => esc_html__( 'Animation Duration', 'elementor' ),
	807	+ 'label' => __( 'Animation Duration', 'elementor' ),
894	808	'type' => Controls_Manager::SELECT,
895	809	'default' => '',
896	810	'options' => [
897		- 'slow' => esc_html__( 'Slow', 'elementor' ),
898		- '' => esc_html__( 'Normal', 'elementor' ),
899		- 'fast' => esc_html__( 'Fast', 'elementor' ),
	811	+ 'slow' => __( 'Slow', 'elementor' ),
	812	+ '' => __( 'Normal', 'elementor' ),
	813	+ 'fast' => __( 'Fast', 'elementor' ),
900	814	],
901	815	'prefix_class' => 'animated-',
902	816	'condition' => [
903	817	'animation!' => '',
		@@ -907,9 +821,9 @@
907	821
908	822	$this->add_control(
909	823	'animation_delay',
910	824	[
911		- 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
	825	+ 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
912	826	'type' => Controls_Manager::NUMBER,
913	827	'default' => '',
914	828	'min' => 0,
915	829	'step' => 100,
		@@ -925,9 +839,9 @@
925	839
926	840	$this->start_controls_section(
927	841	'_section_responsive',
928	842	[
929		- 'label' => esc_html__( 'Responsive', 'elementor' ),
	843	+ 'label' => __( 'Responsive', 'elementor' ),
930	844	'tab' => Controls_Manager::TAB_ADVANCED,
931	845	]
932	846	);
933	847
		@@ -933,21 +847,53 @@
933	847
934	848	$this->add_control(
935	849	'responsive_description',
936	850	[
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		- ),
	851	+ 'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
943	852	'type' => Controls_Manager::RAW_HTML,
944	853	'content_classes' => 'elementor-descriptor',
945	854	]
946	855	);
947	856
948		- $this->add_hidden_device_controls();
	857	+ $this->add_control(
	858	+ 'hide_desktop',
	859	+ [
	860	+ 'label' => __( 'Hide On Desktop', 'elementor' ),
	861	+ 'type' => Controls_Manager::SWITCHER,
	862	+ 'default' => '',
	863	+ 'prefix_class' => 'elementor-',
	864	+ 'label_on' => 'Hide',
	865	+ 'label_off' => 'Show',
	866	+ 'return_value' => 'hidden-desktop',
	867	+ ]
	868	+ );
949	869
	870	+ $this->add_control(
	871	+ 'hide_tablet',
	872	+ [
	873	+ 'label' => __( 'Hide On Tablet', 'elementor' ),
	874	+ 'type' => Controls_Manager::SWITCHER,
	875	+ 'default' => '',
	876	+ 'prefix_class' => 'elementor-',
	877	+ 'label_on' => 'Hide',
	878	+ 'label_off' => 'Show',
	879	+ 'return_value' => 'hidden-tablet',
	880	+ ]
	881	+ );
	882	+
	883	+ $this->add_control(
	884	+ 'hide_mobile',
	885	+ [
	886	+ 'label' => __( 'Hide On Mobile', 'elementor' ),
	887	+ 'type' => Controls_Manager::SWITCHER,
	888	+ 'default' => '',
	889	+ 'prefix_class' => 'elementor-',
	890	+ 'label_on' => 'Hide',
	891	+ 'label_off' => 'Show',
	892	+ 'return_value' => 'hidden-phone',
	893	+ ]
	894	+ );
	895	+
950	896	$this->end_controls_section();
951	897
952	898	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
953	899
		@@ -962,11 +908,17 @@
962	908	* @since 2.9.0
963	909	* @access protected
964	910	*/
965	911	protected function content_template() {
	912	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	913	+ $wrapper_element = $is_dom_optimization_active ? 'widget' : 'column';
	914	+
966	915	?>
967		- <div class="elementor-widget-wrap">
	916	+ <div class="elementor-<?php echo $wrapper_element; ?>-wrap">
968	917	<div class="elementor-background-overlay"></div>
	918	+ <?php if ( ! $is_dom_optimization_active ) { ?>
	919	+ <div class="elementor-widget-wrap"></div>
	920	+ <?php } ?>
969	921	</div>
970	922	<?php
971	923	}
972	924
		@@ -980,15 +932,15 @@
980	932	*/
981	933	public function before_render() {
982	934	$settings = $this->get_settings_for_display();
983	935
984		- $overlay_background = $settings['background_overlay_background'] ?? '';
985		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	936	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	937	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
986	938
987		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
988		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
	939	+ $is_dom_optimization_active = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' );
	940	+ $wrapper_attribute_string = $is_dom_optimization_active ? '_widget_wrapper' : '_inner_wrapper';
989	941
990		- $column_wrap_classes = [ 'elementor-widget-wrap' ];
	942	+ $column_wrap_classes = $is_dom_optimization_active ? [ 'elementor-widget-wrap' ] : [ 'elementor-column-wrap' ];
991	943
992	944	if ( $this->get_children() ) {
993	945	$column_wrap_classes[] = 'elementor-element-populated';
994	946	}
		@@ -993,10 +945,13 @@
993	945	$column_wrap_classes[] = 'elementor-element-populated';
994	946	}
995	947
996	948	$this->add_render_attribute( [
	949	+ '_inner_wrapper' => [
	950	+ 'class' => $column_wrap_classes,
	951	+ ],
997	952	'_widget_wrapper' => [
998		- 'class' => $column_wrap_classes,
	953	+ 'class' => $is_dom_optimization_active ? $column_wrap_classes : 'elementor-widget-wrap',
999	954	],
1000	955	'_background_overlay' => [
1001	956	'class' => [ 'elementor-background-overlay' ],
1002	957	],
		@@ -1001,16 +956,16 @@
1001	956	'class' => [ 'elementor-background-overlay' ],
1002	957	],
1003	958	] );
1004	959	?>
1005		- <<?php
1006		- // PHPCS - the method get_html_tag is safe.
1007		- echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008		- ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009		- <div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
	960	+ <<?php echo $this->get_html_tag() . ' ' . $this->get_render_attribute_string( '_wrapper' ); ?>>
	961	+ <div <?php echo $this->get_render_attribute_string( $wrapper_attribute_string ); ?>>
1010	962	<?php if ( $has_background_overlay ) : ?>
1011		- <div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
	963	+ <div <?php echo $this->get_render_attribute_string( '_background_overlay' ); ?>></div>
1012	964	<?php endif; ?>
	965	+ <?php if ( ! $is_dom_optimization_active ) : ?>
	966	+ <div <?php echo $this->get_render_attribute_string( '_widget_wrapper' ); ?>>
	967	+ <?php endif; ?>
1013	968	<?php
1014	969	}
1015	970
1016	971	/**
		@@ -1021,13 +976,13 @@
1021	976	* @since 1.0.0
1022	977	* @access public
1023	978	*/
1024	979	public function after_render() {
1025		- ?>
	980	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	981	+ </div>
	982	+ <?php } ?>
1026	983	</div>
1027		- </<?php
1028		- // PHPCS - the method get_html_tag is safe.
1029		- echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
	984	+ </<?php echo $this->get_html_tag(); ?>>
1030	985	<?php
1031	986	}
1032	987
1033	988	/**
		@@ -1066,22 +1021,13 @@
1066	1021	* @access protected
1067	1022	*
1068	1023	* @param array $element_data Element ID.
1069	1024	*
1070		- * @return Element_Base|false Column default child type.
	1025	+ * @return Element_Base Column default child type.
1071	1026	*/
1072	1027	protected function _get_default_child_type( array $element_data ) {
1073	1028	if ( 'section' === $element_data['elType'] ) {
1074	1029	return Plugin::$instance->elements_manager->get_element_types( 'section' );
1075		- }
1076		-
1077		- if ( 'container' === $element_data['elType'] ) {
1078		- return Plugin::$instance->elements_manager->get_element_types( 'container' );
1079		- }
1080		-
1081		- // If the element doesn't exists (disabled element, experiment, etc.), return false to prevent errors.
1082		- if ( empty( $element_data['widgetType'] ) ) {
1083		- return false;
1084	1030	}
1085	1031
1086	1032	return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
1087	1033	}