← All changes | includes/elements/section.php +263 -308 4.1.0-dev1 → 3.1.3 View file →

		@@ -74,9 +74,9 @@
74	74	*
75	75	* @return string Section title.
76	76	*/
77	77	public function get_title() {
78		- return esc_html__( 'Section', 'elementor' );
	78	+ return __( 'Section', 'elementor' );
79	79	}
80	80
81	81	/**
82	82	* Get section icon.
		@@ -91,12 +91,8 @@
91	91	public function get_icon() {
92	92	return 'eicon-columns';
93	93	}
94	94
95		- protected function is_dynamic_content(): bool {
96		- return false;
97		- }
98		-
99	95	/**
100	96	* Get presets.
101	97	*
102	98	* Retrieve a specific preset columns for a given columns count, or a list
		@@ -227,18 +223,18 @@
227	223	protected function register_controls() {
228	224	$this->start_controls_section(
229	225	'section_layout',
230	226	[
231		- 'label' => esc_html__( 'Layout', 'elementor' ),
	227	+ 'label' => __( 'Layout', 'elementor' ),
232	228	'tab' => Controls_Manager::TAB_LAYOUT,
233	229	]
234	230	);
235	231
236		- // Element Name for the Navigator.
	232	+ // Element Name for the Navigator
237	233	$this->add_control(
238	234	'_title',
239	235	[
240		- 'label' => esc_html__( 'Title', 'elementor' ),
	236	+ 'label' => __( 'Title', 'elementor' ),
241	237	'type' => Controls_Manager::HIDDEN,
242	238	'render_type' => 'none',
243	239	]
244	240	);
		@@ -245,23 +241,23 @@
245	241
246	242	$this->add_control(
247	243	'layout',
248	244	[
249		- 'label' => esc_html__( 'Content Width', 'elementor' ),
	245	+ 'label' => __( 'Content Width', 'elementor' ),
250	246	'type' => Controls_Manager::SELECT,
251	247	'default' => 'boxed',
252	248	'options' => [
253		- 'boxed' => esc_html__( 'Boxed', 'elementor' ),
254		- 'full_width' => esc_html__( 'Full Width', 'elementor' ),
	249	+ 'boxed' => __( 'Boxed', 'elementor' ),
	250	+ 'full_width' => __( 'Full Width', 'elementor' ),
255	251	],
256	252	'prefix_class' => 'elementor-section-',
257	253	]
258	254	);
259	255
260		- $this->add_responsive_control(
	256	+ $this->add_control(
261	257	'content_width',
262	258	[
263		- 'label' => esc_html__( 'Width', 'elementor' ),
	259	+ 'label' => __( 'Content Width', 'elementor' ),
264	260	'type' => Controls_Manager::SLIDER,
265	261	'range' => [
266	262	'px' => [
267	263	'min' => 500,
		@@ -273,8 +269,10 @@
273	269	],
274	270	'condition' => [
275	271	'layout' => [ 'boxed' ],
276	272	],
	273	+ 'show_label' => false,
	274	+ 'separator' => 'none',
277	275	]
278	276	);
279	277
280	278	$this->add_control(
		@@ -279,19 +277,19 @@
279	277
280	278	$this->add_control(
281	279	'gap',
282	280	[
283		- 'label' => esc_html__( 'Columns Gap', 'elementor' ),
	281	+ 'label' => __( 'Columns Gap', 'elementor' ),
284	282	'type' => Controls_Manager::SELECT,
285	283	'default' => 'default',
286	284	'options' => [
287		- 'default' => esc_html__( 'Default', 'elementor' ),
288		- 'no' => esc_html__( 'No Gap', 'elementor' ),
289		- 'narrow' => esc_html__( 'Narrow', 'elementor' ),
290		- 'extended' => esc_html__( 'Extended', 'elementor' ),
291		- 'wide' => esc_html__( 'Wide', 'elementor' ),
292		- 'wider' => esc_html__( 'Wider', 'elementor' ),
293		- 'custom' => esc_html__( 'Custom', 'elementor' ),
	285	+ 'default' => __( 'Default', 'elementor' ),
	286	+ 'no' => __( 'No Gap', 'elementor' ),
	287	+ 'narrow' => __( 'Narrow', 'elementor' ),
	288	+ 'extended' => __( 'Extended', 'elementor' ),
	289	+ 'wide' => __( 'Wide', 'elementor' ),
	290	+ 'wider' => __( 'Wider', 'elementor' ),
	291	+ 'custom' => __( 'Custom', 'elementor' ),
294	292	],
295	293	]
296	294	);
297	295
		@@ -297,16 +295,29 @@
297	295
298	296	$this->add_responsive_control(
299	297	'gap_columns_custom',
300	298	[
301		- 'label' => esc_html__( 'Custom Columns Gap', 'elementor' ),
	299	+ 'label' => __( 'Custom Columns Gap', 'elementor' ),
302	300	'type' => Controls_Manager::SLIDER,
303	301	'range' => [
304	302	'px' => [
	303	+ 'min' => 0,
305	304	'max' => 500,
306	305	],
	306	+ '%' => [
	307	+ 'min' => 0,
	308	+ 'max' => 100,
	309	+ ],
	310	+ 'vh' => [
	311	+ 'min' => 0,
	312	+ 'max' => 100,
	313	+ ],
	314	+ 'vw' => [
	315	+ 'min' => 0,
	316	+ 'max' => 100,
	317	+ ],
307	318	],
308		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
	319	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
309	320	'selectors' => [
310	321	'{{WRAPPER}} .elementor-column-gap-custom .elementor-column > .elementor-element-populated' => 'padding: {{SIZE}}{{UNIT}};',
311	322	],
312	323	'condition' => [
		@@ -317,15 +328,15 @@
317	328
318	329	$this->add_control(
319	330	'height',
320	331	[
321		- 'label' => esc_html__( 'Height', 'elementor' ),
	332	+ 'label' => __( 'Height', 'elementor' ),
322	333	'type' => Controls_Manager::SELECT,
323	334	'default' => 'default',
324	335	'options' => [
325		- 'default' => esc_html__( 'Default', 'elementor' ),
326		- 'full' => esc_html__( 'Fit To Screen', 'elementor' ),
327		- 'min-height' => esc_html__( 'Min Height', 'elementor' ),
	336	+ 'default' => __( 'Default', 'elementor' ),
	337	+ 'full' => __( 'Fit To Screen', 'elementor' ),
	338	+ 'min-height' => __( 'Min Height', 'elementor' ),
328	339	],
329	340	'prefix_class' => 'elementor-section-height-',
330	341	'hide_in_inner' => true,
331	342	]
		@@ -333,9 +344,9 @@
333	344
334	345	$this->add_responsive_control(
335	346	'custom_height',
336	347	[
337		- 'label' => esc_html__( 'Minimum Height', 'elementor' ),
	348	+ 'label' => __( 'Minimum Height', 'elementor' ),
338	349	'type' => Controls_Manager::SLIDER,
339	350	'default' => [
340	351	'size' => 400,
341	352	],
		@@ -340,12 +351,21 @@
340	351	'size' => 400,
341	352	],
342	353	'range' => [
343	354	'px' => [
	355	+ 'min' => 0,
344	356	'max' => 1440,
345	357	],
	358	+ 'vh' => [
	359	+ 'min' => 0,
	360	+ 'max' => 100,
	361	+ ],
	362	+ 'vw' => [
	363	+ 'min' => 0,
	364	+ 'max' => 100,
	365	+ ],
346	366	],
347		- 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
	367	+ 'size_units' => [ 'px', 'vh', 'vw' ],
348	368	'selectors' => [
349	369	'{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};',
350	370	],
351	371	'condition' => [
		@@ -357,15 +377,14 @@
357	377
358	378	$this->add_control(
359	379	'height_inner',
360	380	[
361		- 'label' => esc_html__( 'Height', 'elementor' ),
	381	+ 'label' => __( 'Height', 'elementor' ),
362	382	'type' => Controls_Manager::SELECT,
363	383	'default' => 'default',
364	384	'options' => [
365		- 'default' => esc_html__( 'Default', 'elementor' ),
366		- 'full' => esc_html__( 'Fit To Screen', 'elementor' ),
367		- 'min-height' => esc_html__( 'Min Height', 'elementor' ),
	385	+ 'default' => __( 'Default', 'elementor' ),
	386	+ 'min-height' => __( 'Min Height', 'elementor' ),
368	387	],
369	388	'prefix_class' => 'elementor-section-height-',
370	389	'hide_in_top' => true,
371	390	]
		@@ -373,9 +392,9 @@
373	392
374	393	$this->add_responsive_control(
375	394	'custom_height_inner',
376	395	[
377		- 'label' => esc_html__( 'Minimum Height', 'elementor' ),
	396	+ 'label' => __( 'Minimum Height', 'elementor' ),
378	397	'type' => Controls_Manager::SLIDER,
379	398	'default' => [
380	399	'size' => 400,
381	400	],
		@@ -380,8 +399,9 @@
380	399	'size' => 400,
381	400	],
382	401	'range' => [
383	402	'px' => [
	403	+ 'min' => 0,
384	404	'max' => 1440,
385	405	],
386	406	],
387	407	'selectors' => [
		@@ -389,9 +409,8 @@
389	409	],
390	410	'condition' => [
391	411	'height_inner' => [ 'min-height' ],
392	412	],
393		- 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
394	413	'hide_in_top' => true,
395	414	]
396	415	);
397	416
		@@ -397,16 +416,16 @@
397	416
398	417	$this->add_control(
399	418	'column_position',
400	419	[
401		- 'label' => esc_html__( 'Column Position', 'elementor' ),
	420	+ 'label' => __( 'Column Position', 'elementor' ),
402	421	'type' => Controls_Manager::SELECT,
403	422	'default' => 'middle',
404	423	'options' => [
405		- 'stretch' => esc_html__( 'Stretch', 'elementor' ),
406		- 'top' => esc_html__( 'Top', 'elementor' ),
407		- 'middle' => esc_html__( 'Middle', 'elementor' ),
408		- 'bottom' => esc_html__( 'Bottom', 'elementor' ),
	424	+ 'stretch' => __( 'Stretch', 'elementor' ),
	425	+ 'top' => __( 'Top', 'elementor' ),
	426	+ 'middle' => __( 'Middle', 'elementor' ),
	427	+ 'bottom' => __( 'Bottom', 'elementor' ),
409	428	],
410	429	'prefix_class' => 'elementor-section-items-',
411	430	'condition' => [
412	431	'height' => [ 'full', 'min-height' ],
		@@ -413,22 +432,26 @@
413	432	],
414	433	]
415	434	);
416	435
	436	+ $content_position_selector = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ?
	437	+ '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' :
	438	+ '{{WRAPPER}} > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap';
	439	+
417	440	$this->add_control(
418	441	'content_position',
419	442	[
420		- 'label' => esc_html__( 'Vertical Align', 'elementor' ),
	443	+ 'label' => __( 'Vertical Align', 'elementor' ),
421	444	'type' => Controls_Manager::SELECT,
422	445	'default' => '',
423	446	'options' => [
424		- '' => esc_html__( 'Default', 'elementor' ),
425		- 'top' => esc_html__( 'Top', 'elementor' ),
426		- 'middle' => esc_html__( 'Middle', 'elementor' ),
427		- 'bottom' => esc_html__( 'Bottom', 'elementor' ),
428		- 'space-between' => esc_html__( 'Space Between', 'elementor' ),
429		- 'space-around' => esc_html__( 'Space Around', 'elementor' ),
430		- 'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
	447	+ '' => __( 'Default', 'elementor' ),
	448	+ 'top' => __( 'Top', 'elementor' ),
	449	+ 'middle' => __( 'Middle', 'elementor' ),
	450	+ 'bottom' => __( 'Bottom', 'elementor' ),
	451	+ 'space-between' => __( 'Space Between', 'elementor' ),
	452	+ 'space-around' => __( 'Space Around', 'elementor' ),
	453	+ 'space-evenly' => __( 'Space Evenly', 'elementor' ),
431	454	],
432	455	'selectors_dictionary' => [
433	456	'top' => 'flex-start',
434	457	'middle' => 'center',
		@@ -434,11 +457,11 @@
434	457	'middle' => 'center',
435	458	'bottom' => 'flex-end',
436	459	],
437	460	'selectors' => [
438		- '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
	461	+ $content_position_selector => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
439	462	],
440		- // TODO: The following line is for BC since 2.7.0.
	463	+ // TODO: The following line is for BC since 2.7.0
441	464	'prefix_class' => 'elementor-section-content-',
442	465	]
443	466	);
444	467
		@@ -444,14 +467,14 @@
444	467
445	468	$this->add_control(
446	469	'overflow',
447	470	[
448		- 'label' => esc_html__( 'Overflow', 'elementor' ),
	471	+ 'label' => __( 'Overflow', 'elementor' ),
449	472	'type' => Controls_Manager::SELECT,
450	473	'default' => '',
451	474	'options' => [
452		- '' => esc_html__( 'Default', 'elementor' ),
453		- 'hidden' => esc_html__( 'Hidden', 'elementor' ),
	475	+ '' => __( 'Default', 'elementor' ),
	476	+ 'hidden' => __( 'Hidden', 'elementor' ),
454	477	],
455	478	'selectors' => [
456	479	'{{WRAPPER}}' => 'overflow: {{VALUE}}',
457	480	],
		@@ -460,19 +483,15 @@
460	483
461	484	$this->add_control(
462	485	'stretch_section',
463	486	[
464		- 'label' => esc_html__( 'Stretch Section', 'elementor' ),
	487	+ 'label' => __( 'Stretch Section', 'elementor' ),
465	488	'type' => Controls_Manager::SWITCHER,
466	489	'default' => '',
467	490	'return_value' => 'section-stretched',
468	491	'prefix_class' => 'elementor-',
469	492	'hide_in_inner' => true,
470		- 'description' => sprintf(
471		- '%1$s <a href="https://go.elementor.com/stretch-section/" target="_blank">%2$s</a>',
472		- esc_html__( 'Stretch the section to the full width of the page using JS.', 'elementor' ),
473		- esc_html__( 'Learn more', 'elementor' )
474		- ),
	493	+ 'description' => __( 'Stretch the section to the full width of the page using JS.', 'elementor' ) . sprintf( ' <a href="%1$s" target="_blank">%2$s</a>', 'https://go.elementor.com/stretch-section/', __( 'Learn more.', 'elementor' ) ),
475	494	'render_type' => 'none',
476	495	'frontend_available' => true,
477	496	]
478	497	);
		@@ -488,15 +507,15 @@
488	507	'nav',
489	508	];
490	509
491	510	$options = [
492		- '' => esc_html__( 'Default', 'elementor' ),
	511	+ '' => __( 'Default', 'elementor' ),
493	512	] + array_combine( $possible_tags, $possible_tags );
494	513
495	514	$this->add_control(
496	515	'html_tag',
497	516	[
498		- 'label' => esc_html__( 'HTML Tag', 'elementor' ),
	517	+ 'label' => __( 'HTML Tag', 'elementor' ),
499	518	'type' => Controls_Manager::SELECT,
500	519	'options' => $options,
501	520	'separator' => 'before',
502	521	]
		@@ -503,13 +522,13 @@
503	522	);
504	523
505	524	$this->end_controls_section();
506	525
507		- // Section Structure.
	526	+ // Section Structure
508	527	$this->start_controls_section(
509	528	'section_structure',
510	529	[
511		- 'label' => esc_html__( 'Structure', 'elementor' ),
	530	+ 'label' => __( 'Structure', 'elementor' ),
512	531	'tab' => Controls_Manager::TAB_LAYOUT,
513	532	]
514	533	);
515	534
		@@ -515,9 +534,9 @@
515	534
516	535	$this->add_control(
517	536	'structure',
518	537	[
519		- 'label' => esc_html__( 'Structure', 'elementor' ),
	538	+ 'label' => __( 'Structure', 'elementor' ),
520	539	'type' => Controls_Manager::STRUCTURE,
521	540	'default' => '10',
522	541	'render_type' => 'none',
523	542	'style_transfer' => false,
		@@ -525,13 +544,13 @@
525	544	);
526	545
527	546	$this->end_controls_section();
528	547
529		- // Section background.
	548	+ // Section background
530	549	$this->start_controls_section(
531	550	'section_background',
532	551	[
533		- 'label' => esc_html__( 'Background', 'elementor' ),
	552	+ 'label' => __( 'Background', 'elementor' ),
534	553	'tab' => Controls_Manager::TAB_STYLE,
535	554	]
536	555	);
537	556
		@@ -539,9 +558,9 @@
539	558
540	559	$this->start_controls_tab(
541	560	'tab_background_normal',
542	561	[
543		- 'label' => esc_html__( 'Normal', 'elementor' ),
	562	+ 'label' => __( 'Normal', 'elementor' ),
544	563	]
545	564	);
546	565
547	566	$this->add_group_control(
		@@ -556,51 +575,14 @@
556	575	],
557	576	]
558	577	);
559	578
560		- $this->add_control(
561		- 'handle_slideshow_asset_loading',
562		- [
563		- 'type' => Controls_Manager::HIDDEN,
564		- 'assets' => [
565		- 'styles' => [
566		- [
567		- 'name' => 'e-swiper',
568		- 'conditions' => [
569		- 'terms' => [
570		- [
571		- 'name' => 'background_background',
572		- 'operator' => '===',
573		- 'value' => 'slideshow',
574		- ],
575		- ],
576		- ],
577		- ],
578		- ],
579		- 'scripts' => [
580		- [
581		- 'name' => 'swiper',
582		- 'conditions' => [
583		- 'terms' => [
584		- [
585		- 'name' => 'background_background',
586		- 'operator' => '===',
587		- 'value' => 'slideshow',
588		- ],
589		- ],
590		- ],
591		- ],
592		- ],
593		- ],
594		- ]
595		- );
596		-
597	579	$this->end_controls_tab();
598	580
599	581	$this->start_controls_tab(
600	582	'tab_background_hover',
601	583	[
602		- 'label' => esc_html__( 'Hover', 'elementor' ),
	584	+ 'label' => __( 'Hover', 'elementor' ),
603	585	]
604	586	);
605	587
606	588	$this->add_group_control(
		@@ -613,9 +595,9 @@
613	595
614	596	$this->add_control(
615	597	'background_hover_transition',
616	598	[
617		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	599	+ 'label' => __( 'Transition Duration', 'elementor' ),
618	600	'type' => Controls_Manager::SLIDER,
619	601	'default' => [
620	602	'size' => 0.3,
621	603	],
		@@ -620,9 +602,8 @@
620	602	'size' => 0.3,
621	603	],
622	604	'range' => [
623	605	'px' => [
624		- 'min' => 0,
625	606	'max' => 3,
626	607	'step' => 0.1,
627	608	],
628	609	],
		@@ -636,13 +617,13 @@
636	617	$this->end_controls_tabs();
637	618
638	619	$this->end_controls_section();
639	620
640		- // Background Overlay.
	621	+ // Background Overlay
641	622	$this->start_controls_section(
642	623	'section_background_overlay',
643	624	[
644		- 'label' => esc_html__( 'Background Overlay', 'elementor' ),
	625	+ 'label' => __( 'Background Overlay', 'elementor' ),
645	626	'tab' => Controls_Manager::TAB_STYLE,
646	627	]
647	628	);
648	629
		@@ -650,9 +631,9 @@
650	631
651	632	$this->start_controls_tab(
652	633	'tab_background_overlay_normal',
653	634	[
654		- 'label' => esc_html__( 'Normal', 'elementor' ),
	635	+ 'label' => __( 'Normal', 'elementor' ),
655	636	]
656	637	);
657	638
658	639	$this->add_group_control(
		@@ -662,12 +643,12 @@
662	643	'selector' => '{{WRAPPER}} > .elementor-background-overlay',
663	644	]
664	645	);
665	646
666		- $this->add_responsive_control(
	647	+ $this->add_control(
667	648	'background_overlay_opacity',
668	649	[
669		- 'label' => esc_html__( 'Opacity', 'elementor' ),
	650	+ 'label' => __( 'Opacity', 'elementor' ),
670	651	'type' => Controls_Manager::SLIDER,
671	652	'default' => [
672	653	'size' => .5,
673	654	],
		@@ -711,24 +692,21 @@
711	692
712	693	$this->add_control(
713	694	'overlay_blend_mode',
714	695	[
715		- 'label' => esc_html__( 'Blend Mode', 'elementor' ),
	696	+ 'label' => __( 'Blend Mode', 'elementor' ),
716	697	'type' => Controls_Manager::SELECT,
717	698	'options' => [
718		- '' => esc_html__( 'Normal', 'elementor' ),
719		- 'multiply' => esc_html__( 'Multiply', 'elementor' ),
720		- 'screen' => esc_html__( 'Screen', 'elementor' ),
721		- 'overlay' => esc_html__( 'Overlay', 'elementor' ),
722		- 'darken' => esc_html__( 'Darken', 'elementor' ),
723		- 'lighten' => esc_html__( 'Lighten', 'elementor' ),
724		- 'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
725		- 'saturation' => esc_html__( 'Saturation', 'elementor' ),
726		- 'color' => esc_html__( 'Color', 'elementor' ),
727		- 'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
728		- 'difference' => esc_html__( 'Difference', 'elementor' ),
729		- 'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
730		- 'hue' => esc_html__( 'Hue', 'elementor' ),
	699	+ '' => __( 'Normal', 'elementor' ),
	700	+ 'multiply' => 'Multiply',
	701	+ 'screen' => 'Screen',
	702	+ 'overlay' => 'Overlay',
	703	+ 'darken' => 'Darken',
	704	+ 'lighten' => 'Lighten',
	705	+ 'color-dodge' => 'Color Dodge',
	706	+ 'saturation' => 'Saturation',
	707	+ 'color' => 'Color',
	708	+ 'luminosity' => 'Luminosity',
731	709	],
732	710	'selectors' => [
733	711	'{{WRAPPER}} > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
734	712	],
		@@ -754,9 +732,9 @@
754	732
755	733	$this->start_controls_tab(
756	734	'tab_background_overlay_hover',
757	735	[
758		- 'label' => esc_html__( 'Hover', 'elementor' ),
	736	+ 'label' => __( 'Hover', 'elementor' ),
759	737	]
760	738	);
761	739
762	740	$this->add_group_control(
		@@ -766,12 +744,12 @@
766	744	'selector' => '{{WRAPPER}}:hover > .elementor-background-overlay',
767	745	]
768	746	);
769	747
770		- $this->add_responsive_control(
	748	+ $this->add_control(
771	749	'background_overlay_hover_opacity',
772	750	[
773		- 'label' => esc_html__( 'Opacity', 'elementor' ),
	751	+ 'label' => __( 'Opacity', 'elementor' ),
774	752	'type' => Controls_Manager::SLIDER,
775	753	'default' => [
776	754	'size' => .5,
777	755	],
		@@ -800,9 +778,9 @@
800	778
801	779	$this->add_control(
802	780	'background_overlay_hover_transition',
803	781	[
804		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	782	+ 'label' => __( 'Transition Duration', 'elementor' ),
805	783	'type' => Controls_Manager::SLIDER,
806	784	'default' => [
807	785	'size' => 0.3,
808	786	],
		@@ -807,9 +785,8 @@
807	785	'size' => 0.3,
808	786	],
809	787	'range' => [
810	788	'px' => [
811		- 'min' => 0,
812	789	'max' => 3,
813	790	'step' => 0.1,
814	791	],
815	792	],
		@@ -823,13 +800,13 @@
823	800	$this->end_controls_tabs();
824	801
825	802	$this->end_controls_section();
826	803
827		- // Section border.
	804	+ // Section border
828	805	$this->start_controls_section(
829	806	'section_border',
830	807	[
831		- 'label' => esc_html__( 'Border', 'elementor' ),
	808	+ 'label' => __( 'Border', 'elementor' ),
832	809	'tab' => Controls_Manager::TAB_STYLE,
833	810	]
834	811	);
835	812
		@@ -837,9 +814,9 @@
837	814
838	815	$this->start_controls_tab(
839	816	'tab_border_normal',
840	817	[
841		- 'label' => esc_html__( 'Normal', 'elementor' ),
	818	+ 'label' => __( 'Normal', 'elementor' ),
842	819	]
843	820	);
844	821
845	822	$this->add_group_control(
		@@ -851,11 +828,11 @@
851	828
852	829	$this->add_responsive_control(
853	830	'border_radius',
854	831	[
855		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	832	+ 'label' => __( 'Border Radius', 'elementor' ),
856	833	'type' => Controls_Manager::DIMENSIONS,
857		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	834	+ 'size_units' => [ 'px', '%' ],
858	835	'selectors' => [
859	836	'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860	837	],
861	838	]
		@@ -872,9 +849,9 @@
872	849
873	850	$this->start_controls_tab(
874	851	'tab_border_hover',
875	852	[
876		- 'label' => esc_html__( 'Hover', 'elementor' ),
	853	+ 'label' => __( 'Hover', 'elementor' ),
877	854	]
878	855	);
879	856
880	857	$this->add_group_control(
		@@ -887,11 +864,11 @@
887	864
888	865	$this->add_responsive_control(
889	866	'border_radius_hover',
890	867	[
891		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	868	+ 'label' => __( 'Border Radius', 'elementor' ),
892	869	'type' => Controls_Manager::DIMENSIONS,
893		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	870	+ 'size_units' => [ 'px', '%' ],
894	871	'selectors' => [
895	872	'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	873	],
897	874	]
		@@ -907,9 +884,9 @@
907	884
908	885	$this->add_control(
909	886	'border_hover_transition',
910	887	[
911		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	888	+ 'label' => __( 'Transition Duration', 'elementor' ),
912	889	'type' => Controls_Manager::SLIDER,
913	890	'separator' => 'before',
914	891	'default' => [
915	892	'size' => 0.3,
		@@ -915,9 +892,8 @@
915	892	'size' => 0.3,
916	893	],
917	894	'range' => [
918	895	'px' => [
919		- 'min' => 0,
920	896	'max' => 3,
921	897	'step' => 0.1,
922	898	],
923	899	],
		@@ -929,9 +905,9 @@
929	905	'operator' => '!==',
930	906	'value' => '',
931	907	],
932	908	[
933		- 'name' => 'border_hover_border',
	909	+ 'name' => 'border_border',
934	910	'operator' => '!==',
935	911	'value' => '',
936	912	],
937	913	],
		@@ -948,13 +924,13 @@
948	924	$this->end_controls_tabs();
949	925
950	926	$this->end_controls_section();
951	927
952		- // Section Shape Divider.
	928	+ // Section Shape Divider
953	929	$this->start_controls_section(
954	930	'section_shape_divider',
955	931	[
956		- 'label' => esc_html__( 'Shape Divider', 'elementor' ),
	932	+ 'label' => __( 'Shape Divider', 'elementor' ),
957	933	'tab' => Controls_Manager::TAB_STYLE,
958	934	]
959	935	);
960	936
		@@ -959,11 +935,19 @@
959	935	);
960	936
961	937	$this->start_controls_tabs( 'tabs_shape_dividers' );
962	938
	939	+ $shapes_options = [
	940	+ '' => __( 'None', 'elementor' ),
	941	+ ];
	942	+
	943	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	944	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	945	+ }
	946	+
963	947	foreach ( [
964		- 'top' => esc_html__( 'Top', 'elementor' ),
965		- 'bottom' => esc_html__( 'Bottom', 'elementor' ),
	948	+ 'top' => __( 'Top', 'elementor' ),
	949	+ 'bottom' => __( 'Bottom', 'elementor' ),
966	950	] as $side => $side_label ) {
967	951	$base_control_key = "shape_divider_$side";
968	952
969	953	$this->start_controls_tab(
		@@ -975,31 +959,13 @@
975	959
976	960	$this->add_control(
977	961	$base_control_key,
978	962	[
979		- 'label' => esc_html__( 'Type', 'elementor' ),
980		- 'type' => Controls_Manager::VISUAL_CHOICE,
981		- 'label_block' => true,
982		- 'columns' => 2,
983		- 'options' => Shapes::get_shapes(),
	963	+ 'label' => __( 'Type', 'elementor' ),
	964	+ 'type' => Controls_Manager::SELECT,
	965	+ 'options' => $shapes_options,
984	966	'render_type' => 'none',
985	967	'frontend_available' => true,
986		- 'assets' => [
987		- 'styles' => [
988		- [
989		- 'name' => 'e-shapes',
990		- 'conditions' => [
991		- 'terms' => [
992		- [
993		- 'name' => $base_control_key,
994		- 'operator' => '!==',
995		- 'value' => '',
996		- ],
997		- ],
998		- ],
999		- ],
1000		- ],
1001		- ],
1002	968	]
1003	969	);
1004	970
1005	971	$this->add_control(
		@@ -1004,9 +970,9 @@
1004	970
1005	971	$this->add_control(
1006	972	$base_control_key . '_color',
1007	973	[
1008		- 'label' => esc_html__( 'Color', 'elementor' ),
	974	+ 'label' => __( 'Color', 'elementor' ),
1009	975	'type' => Controls_Manager::COLOR,
1010	976	'condition' => [
1011	977	"shape_divider_$side!" => '',
1012	978	],
		@@ -1018,11 +984,10 @@
1018	984
1019	985	$this->add_responsive_control(
1020	986	$base_control_key . '_width',
1021	987	[
1022		- 'label' => esc_html__( 'Width', 'elementor' ),
	988	+ 'label' => __( 'Width', 'elementor' ),
1023	989	'type' => Controls_Manager::SLIDER,
1024		- 'size_units' => [ '%', 'vw', 'custom' ],
1025	990	'default' => [
1026	991	'unit' => '%',
1027	992	],
1028	993	'tablet_default' => [
		@@ -1035,12 +1000,8 @@
1035	1000	'%' => [
1036	1001	'min' => 100,
1037	1002	'max' => 300,
1038	1003	],
1039		- 'vw' => [
1040		- 'min' => 100,
1041		- 'max' => 300,
1042		- ],
1043	1004	],
1044	1005	'condition' => [
1045	1006	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046	1007	],
		@@ -1052,21 +1013,14 @@
1052	1013
1053	1014	$this->add_responsive_control(
1054	1015	$base_control_key . '_height',
1055	1016	[
1056		- 'label' => esc_html__( 'Height', 'elementor' ),
	1017	+ 'label' => __( 'Height', 'elementor' ),
1057	1018	'type' => Controls_Manager::SLIDER,
1058		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059	1019	'range' => [
1060	1020	'px' => [
1061	1021	'max' => 500,
1062	1022	],
1063		- 'em' => [
1064		- 'max' => 50,
1065		- ],
1066		- 'rem' => [
1067		- 'max' => 50,
1068		- ],
1069	1023	],
1070	1024	'condition' => [
1071	1025	"shape_divider_$side!" => '',
1072	1026	],
		@@ -1078,9 +1032,9 @@
1078	1032
1079	1033	$this->add_control(
1080	1034	$base_control_key . '_flip',
1081	1035	[
1082		- 'label' => esc_html__( 'Flip', 'elementor' ),
	1036	+ 'label' => __( 'Flip', 'elementor' ),
1083	1037	'type' => Controls_Manager::SWITCHER,
1084	1038	'condition' => [
1085	1039	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_flip' ) ),
1086	1040	],
		@@ -1092,9 +1046,9 @@
1092	1046
1093	1047	$this->add_control(
1094	1048	$base_control_key . '_negative',
1095	1049	[
1096		- 'label' => esc_html__( 'Invert', 'elementor' ),
	1050	+ 'label' => __( 'Invert', 'elementor' ),
1097	1051	'type' => Controls_Manager::SWITCHER,
1098	1052	'frontend_available' => true,
1099	1053	'condition' => [
1100	1054	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_negative' ) ),
		@@ -1105,9 +1059,9 @@
1105	1059
1106	1060	$this->add_control(
1107	1061	$base_control_key . '_above_content',
1108	1062	[
1109		- 'label' => esc_html__( 'Bring to Front', 'elementor' ),
	1063	+ 'label' => __( 'Bring to Front', 'elementor' ),
1110	1064	'type' => Controls_Manager::SWITCHER,
1111	1065	'selectors' => [
1112	1066	"{{WRAPPER}} > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
1113	1067	],
		@@ -1123,13 +1077,13 @@
1123	1077	$this->end_controls_tabs();
1124	1078
1125	1079	$this->end_controls_section();
1126	1080
1127		- // Section Typography.
	1081	+ // Section Typography
1128	1082	$this->start_controls_section(
1129	1083	'section_typo',
1130	1084	[
1131		- 'label' => esc_html__( 'Typography', 'elementor' ),
	1085	+ 'label' => __( 'Typography', 'elementor' ),
1132	1086	'tab' => Controls_Manager::TAB_STYLE,
1133	1087	]
1134	1088	);
1135	1089
		@@ -1135,14 +1089,15 @@
1135	1089
1136	1090	$this->add_control(
1137	1091	'heading_color',
1138	1092	[
1139		- 'label' => esc_html__( 'Heading Color', 'elementor' ),
	1093	+ 'label' => __( 'Heading Color', 'elementor' ),
1140	1094	'type' => Controls_Manager::COLOR,
1141	1095	'default' => '',
1142	1096	'selectors' => [
1143	1097	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144	1098	],
	1099	+ 'separator' => 'none',
1145	1100	]
1146	1101	);
1147	1102
1148	1103	$this->add_control(
		@@ -1147,9 +1102,9 @@
1147	1102
1148	1103	$this->add_control(
1149	1104	'color_text',
1150	1105	[
1151		- 'label' => esc_html__( 'Text Color', 'elementor' ),
	1106	+ 'label' => __( 'Text Color', 'elementor' ),
1152	1107	'type' => Controls_Manager::COLOR,
1153	1108	'default' => '',
1154	1109	'selectors' => [
1155	1110	'{{WRAPPER}}' => 'color: {{VALUE}};',
		@@ -1159,9 +1114,9 @@
1159	1114
1160	1115	$this->add_control(
1161	1116	'color_link',
1162	1117	[
1163		- 'label' => esc_html__( 'Link Color', 'elementor' ),
	1118	+ 'label' => __( 'Link Color', 'elementor' ),
1164	1119	'type' => Controls_Manager::COLOR,
1165	1120	'default' => '',
1166	1121	'selectors' => [
1167	1122	'{{WRAPPER}} a' => 'color: {{VALUE}};',
		@@ -1171,9 +1126,9 @@
1171	1126
1172	1127	$this->add_control(
1173	1128	'color_link_hover',
1174	1129	[
1175		- 'label' => esc_html__( 'Link Hover Color', 'elementor' ),
	1130	+ 'label' => __( 'Link Hover Color', 'elementor' ),
1176	1131	'type' => Controls_Manager::COLOR,
1177	1132	'default' => '',
1178	1133	'selectors' => [
1179	1134	'{{WRAPPER}} a:hover' => 'color: {{VALUE}};',
		@@ -1180,36 +1135,27 @@
1180	1135	],
1181	1136	]
1182	1137	);
1183	1138
1184		- $this->add_responsive_control(
	1139	+ $this->add_control(
1185	1140	'text_align',
1186	1141	[
1187		- 'label' => esc_html__( 'Text Align', 'elementor' ),
	1142	+ 'label' => __( 'Text Align', 'elementor' ),
1188	1143	'type' => Controls_Manager::CHOOSE,
1189	1144	'options' => [
1190		- 'start' => [
1191		- 'title' => esc_html__( 'Start', 'elementor' ),
	1145	+ 'left' => [
	1146	+ 'title' => __( 'Left', 'elementor' ),
1192	1147	'icon' => 'eicon-text-align-left',
1193	1148	],
1194	1149	'center' => [
1195		- 'title' => esc_html__( 'Center', 'elementor' ),
	1150	+ 'title' => __( 'Center', 'elementor' ),
1196	1151	'icon' => 'eicon-text-align-center',
1197	1152	],
1198		- 'end' => [
1199		- 'title' => esc_html__( 'End', 'elementor' ),
	1153	+ 'right' => [
	1154	+ 'title' => __( 'Right', 'elementor' ),
1200	1155	'icon' => 'eicon-text-align-right',
1201	1156	],
1202		- 'justify' => [
1203		- 'title' => esc_html__( 'Justified', 'elementor' ),
1204		- 'icon' => 'eicon-text-align-justify',
1205		- ],
1206	1157	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1158	'selectors' => [
1213	1159	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1160	],
1215	1161	]
		@@ -1216,13 +1162,13 @@
1216	1162	);
1217	1163
1218	1164	$this->end_controls_section();
1219	1165
1220		- // Section Advanced.
	1166	+ // Section Advanced
1221	1167	$this->start_controls_section(
1222	1168	'section_advanced',
1223	1169	[
1224		- 'label' => esc_html__( 'Advanced', 'elementor' ),
	1170	+ 'label' => __( 'Advanced', 'elementor' ),
1225	1171	'tab' => Controls_Manager::TAB_ADVANCED,
1226	1172	]
1227	1173	);
1228	1174
		@@ -1228,11 +1174,11 @@
1228	1174
1229	1175	$this->add_responsive_control(
1230	1176	'margin',
1231	1177	[
1232		- 'label' => esc_html__( 'Margin', 'elementor' ),
	1178	+ 'label' => __( 'Margin', 'elementor' ),
1233	1179	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1180	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235	1181	'allowed_dimensions' => 'vertical',
1236	1182	'placeholder' => [
1237	1183	'top' => '',
1238	1184	'right' => 'auto',
		@@ -1247,11 +1193,11 @@
1247	1193
1248	1194	$this->add_responsive_control(
1249	1195	'padding',
1250	1196	[
1251		- 'label' => esc_html__( 'Padding', 'elementor' ),
	1197	+ 'label' => __( 'Padding', 'elementor' ),
1252	1198	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1199	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254	1200	'selectors' => [
1255	1201	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1202	],
1257	1203	]
		@@ -1259,9 +1205,9 @@
1259	1205
1260	1206	$this->add_responsive_control(
1261	1207	'z_index',
1262	1208	[
1263		- 'label' => esc_html__( 'Z-Index', 'elementor' ),
	1209	+ 'label' => __( 'Z-Index', 'elementor' ),
1264	1210	'type' => Controls_Manager::NUMBER,
1265	1211	'min' => 0,
1266	1212	'selectors' => [
1267	1213	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
		@@ -1271,18 +1217,15 @@
1271	1217
1272	1218	$this->add_control(
1273	1219	'_element_id',
1274	1220	[
1275		- 'label' => esc_html__( 'CSS ID', 'elementor' ),
	1221	+ 'label' => __( 'CSS ID', 'elementor' ),
1276	1222	'type' => Controls_Manager::TEXT,
1277	1223	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1224	'dynamic' => [
1282	1225	'active' => true,
1283	1226	],
1284		- 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
	1227	+ 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1285	1228	'style_transfer' => false,
1286	1229	'classes' => 'elementor-control-direction-ltr',
1287	1230	]
1288	1231	);
		@@ -1289,41 +1232,34 @@
1289	1232
1290	1233	$this->add_control(
1291	1234	'css_classes',
1292	1235	[
1293		- 'label' => esc_html__( 'CSS Classes', 'elementor' ),
	1236	+ 'label' => __( 'CSS Classes', 'elementor' ),
1294	1237	'type' => Controls_Manager::TEXT,
1295	1238	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1239	'dynamic' => [
1300	1240	'active' => true,
1301	1241	],
1302	1242	'prefix_class' => '',
1303		- 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
	1243	+ 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1304	1244	'classes' => 'elementor-control-direction-ltr',
1305	1245	]
1306	1246	);
1307	1247
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1248	$this->end_controls_section();
1311	1249
1312	1250	$this->start_controls_section(
1313	1251	'section_effects',
1314	1252	[
1315		- 'label' => esc_html__( 'Motion Effects', 'elementor' ),
	1253	+ 'label' => __( 'Motion Effects', 'elementor' ),
1316	1254	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1255	]
1318	1256	);
1319	1257
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1258	$this->add_responsive_control(
1323	1259	'animation',
1324	1260	[
1325		- 'label' => esc_html__( 'Entrance Animation', 'elementor' ),
	1261	+ 'label' => __( 'Entrance Animation', 'elementor' ),
1326	1262	'type' => Controls_Manager::ANIMATION,
1327	1263	'frontend_available' => true,
1328	1264	]
1329	1265	);
		@@ -1330,15 +1266,15 @@
1330	1266
1331	1267	$this->add_control(
1332	1268	'animation_duration',
1333	1269	[
1334		- 'label' => esc_html__( 'Animation Duration', 'elementor' ),
	1270	+ 'label' => __( 'Animation Duration', 'elementor' ),
1335	1271	'type' => Controls_Manager::SELECT,
1336	1272	'default' => '',
1337	1273	'options' => [
1338		- 'slow' => esc_html__( 'Slow', 'elementor' ),
1339		- '' => esc_html__( 'Normal', 'elementor' ),
1340		- 'fast' => esc_html__( 'Fast', 'elementor' ),
	1274	+ 'slow' => __( 'Slow', 'elementor' ),
	1275	+ '' => __( 'Normal', 'elementor' ),
	1276	+ 'fast' => __( 'Fast', 'elementor' ),
1341	1277	],
1342	1278	'prefix_class' => 'animated-',
1343	1279	'condition' => [
1344	1280	'animation!' => '',
		@@ -1348,9 +1284,9 @@
1348	1284
1349	1285	$this->add_control(
1350	1286	'animation_delay',
1351	1287	[
1352		- 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
	1288	+ 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
1353	1289	'type' => Controls_Manager::NUMBER,
1354	1290	'default' => '',
1355	1291	'min' => 0,
1356	1292	'step' => 100,
		@@ -1363,37 +1299,43 @@
1363	1299	);
1364	1300
1365	1301	$this->end_controls_section();
1366	1302
1367		- // Section Responsive.
	1303	+ // Section Responsive
1368	1304	$this->start_controls_section(
1369	1305	'_section_responsive',
1370	1306	[
1371		- 'label' => esc_html__( 'Responsive', 'elementor' ),
	1307	+ 'label' => __( 'Responsive', 'elementor' ),
1372	1308	'tab' => Controls_Manager::TAB_ADVANCED,
1373	1309	]
1374	1310	);
1375	1311
1376		- // The controls should be displayed from largest to smallest breakpoint, so we reverse the array.
1377		- $active_breakpoints = array_reverse( Plugin::$instance->breakpoints->get_active_breakpoints() );
	1312	+ $this->add_control(
	1313	+ 'reverse_order_tablet',
	1314	+ [
	1315	+ 'label' => __( 'Reverse Columns', 'elementor' ) . ' (' . __( 'Tablet', 'elementor' ) . ')',
	1316	+ 'type' => Controls_Manager::SWITCHER,
	1317	+ 'default' => '',
	1318	+ 'prefix_class' => 'elementor-',
	1319	+ 'return_value' => 'reverse-tablet',
	1320	+ ]
	1321	+ );
1378	1322
1379		- foreach ( $active_breakpoints as $breakpoint_key => $breakpoint ) {
1380		- $this->add_control(
1381		- 'reverse_order_' . $breakpoint_key,
1382		- [
1383		- 'label' => esc_html__( 'Reverse Columns', 'elementor' ) . ' (' . $breakpoint->get_label() . ')',
1384		- 'type' => Controls_Manager::SWITCHER,
1385		- 'default' => '',
1386		- 'prefix_class' => 'elementor-',
1387		- 'return_value' => 'reverse-' . $breakpoint_key,
1388		- ]
1389		- );
1390		- }
	1323	+ $this->add_control(
	1324	+ 'reverse_order_mobile',
	1325	+ [
	1326	+ 'label' => __( 'Reverse Columns', 'elementor' ) . ' (' . __( 'Mobile', 'elementor' ) . ')',
	1327	+ 'type' => Controls_Manager::SWITCHER,
	1328	+ 'default' => '',
	1329	+ 'prefix_class' => 'elementor-',
	1330	+ 'return_value' => 'reverse-mobile',
	1331	+ ]
	1332	+ );
1391	1333
1392	1334	$this->add_control(
1393	1335	'heading_visibility',
1394	1336	[
1395		- 'label' => esc_html__( 'Visibility', 'elementor' ),
	1337	+ 'label' => __( 'Visibility', 'elementor' ),
1396	1338	'type' => Controls_Manager::HEADING,
1397	1339	'separator' => 'before',
1398	1340	]
1399	1341	);
		@@ -1400,21 +1342,53 @@
1400	1342
1401	1343	$this->add_control(
1402	1344	'responsive_description',
1403	1345	[
1404		- 'raw' => sprintf(
1405		- /* translators: 1: Link open tag, 2: Link close tag. */
1406		- 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' ),
1407		- '<a href="javascript: $e.run( \'panel/close\' )">',
1408		- '</a>'
1409		- ),
	1346	+ 'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1347	'type' => Controls_Manager::RAW_HTML,
1411	1348	'content_classes' => 'elementor-descriptor',
1412	1349	]
1413	1350	);
1414	1351
1415		- $this->add_hidden_device_controls();
	1352	+ $this->add_control(
	1353	+ 'hide_desktop',
	1354	+ [
	1355	+ 'label' => __( 'Hide On Desktop', 'elementor' ),
	1356	+ 'type' => Controls_Manager::SWITCHER,
	1357	+ 'default' => '',
	1358	+ 'prefix_class' => 'elementor-',
	1359	+ 'label_on' => __( 'Hide', 'elementor' ),
	1360	+ 'label_off' => __( 'Show', 'elementor' ),
	1361	+ 'return_value' => 'hidden-desktop',
	1362	+ ]
	1363	+ );
1416	1364
	1365	+ $this->add_control(
	1366	+ 'hide_tablet',
	1367	+ [
	1368	+ 'label' => __( 'Hide On Tablet', 'elementor' ),
	1369	+ 'type' => Controls_Manager::SWITCHER,
	1370	+ 'default' => '',
	1371	+ 'prefix_class' => 'elementor-',
	1372	+ 'label_on' => __( 'Hide', 'elementor' ),
	1373	+ 'label_off' => __( 'Show', 'elementor' ),
	1374	+ 'return_value' => 'hidden-tablet',
	1375	+ ]
	1376	+ );
	1377	+
	1378	+ $this->add_control(
	1379	+ 'hide_mobile',
	1380	+ [
	1381	+ 'label' => __( 'Hide On Mobile', 'elementor' ),
	1382	+ 'type' => Controls_Manager::SWITCHER,
	1383	+ 'default' => '',
	1384	+ 'prefix_class' => 'elementor-',
	1385	+ 'label_on' => __( 'Hide', 'elementor' ),
	1386	+ 'label_off' => __( 'Show', 'elementor' ),
	1387	+ 'return_value' => 'hidden-phone',
	1388	+ ]
	1389	+ );
	1390	+
1417	1391	$this->end_controls_section();
1418	1392
1419	1393	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1420	1394
		@@ -1438,28 +1412,27 @@
1438	1412	if ( ! settings.background_play_once ) {
1439	1413	videoAttributes += ' loop';
1440	1414	}
1441	1415
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1416	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1417
1449	1418	if ( ! settings.background_play_on_mobile ) {
1450		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1419	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1451	1420	}
1452	1421	#>
1453	1422	<div {{{ view.getRenderAttributeString( 'background-video-container' ) }}}>
1454		- <div class="elementor-background-video-embed" role="presentation"></div>
1455		- <video class="elementor-background-video-hosted" role="presentation" {{ videoAttributes }}></video>
	1423	+ <div class="elementor-background-video-embed"></div>
	1424	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1425	</div>
1457	1426	<# } #>
1458	1427	<div class="elementor-background-overlay"></div>
1459		- <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
1460		- <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
1461		- <div class="elementor-container elementor-column-gap-{{ settings.gap }}"></div>
	1428	+ <div class="elementor-shape elementor-shape-top"></div>
	1429	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1430	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1431	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1432	+ <div class="elementor-row"></div>
	1433	+ <?php } ?>
	1434	+ </div>
1462	1435	<?php
1463	1436	}
1464	1437
1465	1438	/**
		@@ -1472,31 +1445,23 @@
1472	1445	*/
1473	1446	public function before_render() {
1474	1447	$settings = $this->get_settings_for_display();
1475	1448	?>
1476		- <<?php
1477		- // PHPCS - the method get_html_tag is safe.
1478		- echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1479		- ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
	1449	+ <<?php echo $this->get_html_tag(); ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480	1450	<?php
1481	1451	if ( 'video' === $settings['background_background'] ) :
1482	1452	if ( $settings['background_video_link'] ) :
1483	1453	$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1454
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1455	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1456
1492	1457	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1458	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1459	}
1495	1460	?>
1496		- <div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
	1461	+ <div <?php echo $this->get_render_attribute_string( 'background-video-container' ); ?>>
1497	1462	<?php if ( $video_properties ) : ?>
1498		- <div class="elementor-background-video-embed" role="presentation"></div>
	1463	+ <div class="elementor-background-video-embed"></div>
1499	1464	<?php
1500	1465	else :
1501	1466	$video_tag_attributes = 'autoplay muted playsinline';
1502	1467	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,12 +1467,9 @@
1502	1467	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1468	$video_tag_attributes .= ' loop';
1504	1469	endif;
1505	1470	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
1507		- // PHPCS - the variable $video_tag_attributes is a plain string.
1508		- echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509		- ?>></video>
	1471	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php echo $video_tag_attributes; ?>></video>
1510	1472	<?php endif; ?>
1511	1473	</div>
1512	1474	<?php
1513	1475	endif;
		@@ -1512,14 +1474,11 @@
1512	1474	<?php
1513	1475	endif;
1514	1476	endif;
1515	1477
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1478	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1479	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1480
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1481	if ( $has_background_overlay ) :
1523	1482	?>
1524	1483	<div class="elementor-background-overlay"></div>
1525	1484	<?php
		@@ -1533,9 +1492,11 @@
1533	1492	$this->print_shape_divider( 'bottom' );
1534	1493	}
1535	1494	?>
1536	1495	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1496	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1497	+ <div class="elementor-row">
	1498	+ <?php }
1538	1499	}
1539	1500
1540	1501	/**
1541	1502	* After section rendering.
		@@ -1546,13 +1507,13 @@
1546	1507	* @access public
1547	1508	*/
1548	1509	public function after_render() {
1549	1510	?>
	1511	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1512	+ </div>
	1513	+ <?php } ?>
1550	1514	</div>
1551		- </<?php
1552		- // PHPCS - the method get_html_tag is safe.
1553		- echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1554		- ?>>
	1515	+ </<?php echo $this->get_html_tag(); ?>>
1555	1516	<?php
1556	1517	}
1557	1518
1558	1519	/**
		@@ -1602,9 +1563,9 @@
1602	1563	* @access private
1603	1564	*
1604	1565	* @return string Section HTML tag.
1605	1566	*/
1606		- protected function get_html_tag() {
	1567	+ private function get_html_tag() {
1607	1568	$html_tag = $this->get_settings( 'html_tag' );
1608	1569
1609	1570	if ( empty( $html_tag ) ) {
1610	1571	$html_tag = 'section';
		@@ -1622,9 +1583,9 @@
1622	1583	* @access private
1623	1584	*
1624	1585	* @param string $side Shape divider side, used to set the shape key.
1625	1586	*/
1626		- protected function print_shape_divider( $side ) {
	1587	+ private function print_shape_divider( $side ) {
1627	1588	$settings = $this->get_active_settings();
1628	1589	$base_setting_key = "shape_divider_$side";
1629	1590	$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
1630	1591	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
		@@ -1630,17 +1591,11 @@
1630	1591	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
1631	1592	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
1632	1593	return;
1633	1594	}
1634		-
1635	1595	?>
1636		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
1637		- Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
1638		- ?>">
1639		- <?php
1640		- // PHPCS - The file content is being read from a strict file path structure.
1641		- echo Utils::file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1642		- ?>
	1596	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php echo var_export( $negative ); ?>">
	1597	+ <?php echo file_get_contents( $shape_path ); ?>
1643	1598	</div>
1644	1599	<?php
1645	1600	}
1646	1601	}