← All changes | includes/elements/section.php +168 -197 4.2.1 → 3.4.0-dev9 View file →

		@@ -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
		@@ -232,9 +228,9 @@
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	236	'label' => esc_html__( 'Title', 'elementor' ),
		@@ -273,8 +269,9 @@
273	269	],
274	270	'condition' => [
275	271	'layout' => [ 'boxed' ],
276	272	],
	273	+ 'separator' => 'none',
277	274	]
278	275	);
279	276
280	277	$this->add_control(
		@@ -301,12 +298,25 @@
301	298	'label' => esc_html__( 'Custom Columns Gap', 'elementor' ),
302	299	'type' => Controls_Manager::SLIDER,
303	300	'range' => [
304	301	'px' => [
	302	+ 'min' => 0,
305	303	'max' => 500,
306	304	],
	305	+ '%' => [
	306	+ 'min' => 0,
	307	+ 'max' => 100,
	308	+ ],
	309	+ 'vh' => [
	310	+ 'min' => 0,
	311	+ 'max' => 100,
	312	+ ],
	313	+ 'vw' => [
	314	+ 'min' => 0,
	315	+ 'max' => 100,
	316	+ ],
307	317	],
308		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
	318	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
309	319	'selectors' => [
310	320	'{{WRAPPER}} .elementor-column-gap-custom .elementor-column > .elementor-element-populated' => 'padding: {{SIZE}}{{UNIT}};',
311	321	],
312	322	'condition' => [
		@@ -340,12 +350,21 @@
340	350	'size' => 400,
341	351	],
342	352	'range' => [
343	353	'px' => [
	354	+ 'min' => 0,
344	355	'max' => 1440,
345	356	],
	357	+ 'vh' => [
	358	+ 'min' => 0,
	359	+ 'max' => 100,
	360	+ ],
	361	+ 'vw' => [
	362	+ 'min' => 0,
	363	+ 'max' => 100,
	364	+ ],
346	365	],
347		- 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
	366	+ 'size_units' => [ 'px', 'vh', 'vw' ],
348	367	'selectors' => [
349	368	'{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};',
350	369	],
351	370	'condition' => [
		@@ -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,9 @@
389	409	],
390	410	'condition' => [
391	411	'height_inner' => [ 'min-height' ],
392	412	],
393		- 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
	413	+ 'size_units' => [ 'px', 'vh', 'vw' ],
394	414	'hide_in_top' => true,
395	415	]
396	416	);
397	417
		@@ -413,8 +433,12 @@
413	433	],
414	434	]
415	435	);
416	436
	437	+ $content_position_selector = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ?
	438	+ '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' :
	439	+ '{{WRAPPER}} > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap';
	440	+
417	441	$this->add_control(
418	442	'content_position',
419	443	[
420	444	'label' => esc_html__( 'Vertical Align', 'elementor' ),
		@@ -434,11 +458,11 @@
434	458	'middle' => 'center',
435	459	'bottom' => 'flex-end',
436	460	],
437	461	'selectors' => [
438		- '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
	462	+ $content_position_selector => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
439	463	],
440		- // TODO: The following line is for BC since 2.7.0.
	464	+ // TODO: The following line is for BC since 2.7.0
441	465	'prefix_class' => 'elementor-section-content-',
442	466	]
443	467	);
444	468
		@@ -466,13 +490,9 @@
466	490	'default' => '',
467	491	'return_value' => 'section-stretched',
468	492	'prefix_class' => 'elementor-',
469	493	'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		- ),
	494	+ 'description' => esc_html__( '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/', esc_html__( 'Learn more.', 'elementor' ) ),
475	495	'render_type' => 'none',
476	496	'frontend_available' => true,
477	497	]
478	498	);
		@@ -503,9 +523,9 @@
503	523	);
504	524
505	525	$this->end_controls_section();
506	526
507		- // Section Structure.
	527	+ // Section Structure
508	528	$this->start_controls_section(
509	529	'section_structure',
510	530	[
511	531	'label' => esc_html__( 'Structure', 'elementor' ),
		@@ -525,9 +545,9 @@
525	545	);
526	546
527	547	$this->end_controls_section();
528	548
529		- // Section background.
	549	+ // Section background
530	550	$this->start_controls_section(
531	551	'section_background',
532	552	[
533	553	'label' => esc_html__( 'Background', 'elementor' ),
		@@ -556,45 +576,8 @@
556	576	],
557	577	]
558	578	);
559	579
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	580	$this->end_controls_tab();
598	581
599	582	$this->start_controls_tab(
600	583	'tab_background_hover',
		@@ -613,9 +596,9 @@
613	596
614	597	$this->add_control(
615	598	'background_hover_transition',
616	599	[
617		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	600	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
618	601	'type' => Controls_Manager::SLIDER,
619	602	'default' => [
620	603	'size' => 0.3,
621	604	],
		@@ -620,9 +603,8 @@
620	603	'size' => 0.3,
621	604	],
622	605	'range' => [
623	606	'px' => [
624		- 'min' => 0,
625	607	'max' => 3,
626	608	'step' => 0.1,
627	609	],
628	610	],
		@@ -636,9 +618,9 @@
636	618	$this->end_controls_tabs();
637	619
638	620	$this->end_controls_section();
639	621
640		- // Background Overlay.
	622	+ // Background Overlay
641	623	$this->start_controls_section(
642	624	'section_background_overlay',
643	625	[
644	626	'label' => esc_html__( 'Background Overlay', 'elementor' ),
		@@ -662,9 +644,9 @@
662	644	'selector' => '{{WRAPPER}} > .elementor-background-overlay',
663	645	]
664	646	);
665	647
666		- $this->add_responsive_control(
	648	+ $this->add_control(
667	649	'background_overlay_opacity',
668	650	[
669	651	'label' => esc_html__( 'Opacity', 'elementor' ),
670	652	'type' => Controls_Manager::SLIDER,
		@@ -715,20 +697,17 @@
715	697	'label' => esc_html__( 'Blend Mode', 'elementor' ),
716	698	'type' => Controls_Manager::SELECT,
717	699	'options' => [
718	700	'' => 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' ),
	701	+ 'multiply' => 'Multiply',
	702	+ 'screen' => 'Screen',
	703	+ 'overlay' => 'Overlay',
	704	+ 'darken' => 'Darken',
	705	+ 'lighten' => 'Lighten',
	706	+ 'color-dodge' => 'Color Dodge',
	707	+ 'saturation' => 'Saturation',
	708	+ 'color' => 'Color',
	709	+ 'luminosity' => 'Luminosity',
731	710	],
732	711	'selectors' => [
733	712	'{{WRAPPER}} > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
734	713	],
		@@ -766,9 +745,9 @@
766	745	'selector' => '{{WRAPPER}}:hover > .elementor-background-overlay',
767	746	]
768	747	);
769	748
770		- $this->add_responsive_control(
	749	+ $this->add_control(
771	750	'background_overlay_hover_opacity',
772	751	[
773	752	'label' => esc_html__( 'Opacity', 'elementor' ),
774	753	'type' => Controls_Manager::SLIDER,
		@@ -800,9 +779,9 @@
800	779
801	780	$this->add_control(
802	781	'background_overlay_hover_transition',
803	782	[
804		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	783	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
805	784	'type' => Controls_Manager::SLIDER,
806	785	'default' => [
807	786	'size' => 0.3,
808	787	],
		@@ -807,9 +786,8 @@
807	786	'size' => 0.3,
808	787	],
809	788	'range' => [
810	789	'px' => [
811		- 'min' => 0,
812	790	'max' => 3,
813	791	'step' => 0.1,
814	792	],
815	793	],
		@@ -823,9 +801,9 @@
823	801	$this->end_controls_tabs();
824	802
825	803	$this->end_controls_section();
826	804
827		- // Section border.
	805	+ // Section border
828	806	$this->start_controls_section(
829	807	'section_border',
830	808	[
831	809	'label' => esc_html__( 'Border', 'elementor' ),
		@@ -853,9 +831,9 @@
853	831	'border_radius',
854	832	[
855	833	'label' => esc_html__( 'Border Radius', 'elementor' ),
856	834	'type' => Controls_Manager::DIMENSIONS,
857		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	835	+ 'size_units' => [ 'px', '%' ],
858	836	'selectors' => [
859	837	'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860	838	],
861	839	]
		@@ -889,9 +867,9 @@
889	867	'border_radius_hover',
890	868	[
891	869	'label' => esc_html__( 'Border Radius', 'elementor' ),
892	870	'type' => Controls_Manager::DIMENSIONS,
893		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	871	+ 'size_units' => [ 'px', '%' ],
894	872	'selectors' => [
895	873	'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	874	],
897	875	]
		@@ -907,9 +885,9 @@
907	885
908	886	$this->add_control(
909	887	'border_hover_transition',
910	888	[
911		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	889	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
912	890	'type' => Controls_Manager::SLIDER,
913	891	'separator' => 'before',
914	892	'default' => [
915	893	'size' => 0.3,
		@@ -915,9 +893,8 @@
915	893	'size' => 0.3,
916	894	],
917	895	'range' => [
918	896	'px' => [
919		- 'min' => 0,
920	897	'max' => 3,
921	898	'step' => 0.1,
922	899	],
923	900	],
		@@ -929,9 +906,9 @@
929	906	'operator' => '!==',
930	907	'value' => '',
931	908	],
932	909	[
933		- 'name' => 'border_hover_border',
	910	+ 'name' => 'border_border',
934	911	'operator' => '!==',
935	912	'value' => '',
936	913	],
937	914	],
		@@ -948,9 +925,9 @@
948	925	$this->end_controls_tabs();
949	926
950	927	$this->end_controls_section();
951	928
952		- // Section Shape Divider.
	929	+ // Section Shape Divider
953	930	$this->start_controls_section(
954	931	'section_shape_divider',
955	932	[
956	933	'label' => esc_html__( 'Shape Divider', 'elementor' ),
		@@ -959,8 +936,16 @@
959	936	);
960	937
961	938	$this->start_controls_tabs( 'tabs_shape_dividers' );
962	939
	940	+ $shapes_options = [
	941	+ '' => esc_html__( 'None', 'elementor' ),
	942	+ ];
	943	+
	944	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	945	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	946	+ }
	947	+
963	948	foreach ( [
964	949	'top' => esc_html__( 'Top', 'elementor' ),
965	950	'bottom' => esc_html__( 'Bottom', 'elementor' ),
966	951	] as $side => $side_label ) {
		@@ -976,30 +961,12 @@
976	961	$this->add_control(
977	962	$base_control_key,
978	963	[
979	964	'label' => esc_html__( 'Type', 'elementor' ),
980		- 'type' => Controls_Manager::VISUAL_CHOICE,
981		- 'label_block' => true,
982		- 'columns' => 2,
983		- 'options' => Shapes::get_shapes(),
	965	+ 'type' => Controls_Manager::SELECT,
	966	+ 'options' => $shapes_options,
984	967	'render_type' => 'none',
985	968	'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	969	]
1003	970	);
1004	971
1005	972	$this->add_control(
		@@ -1020,9 +987,8 @@
1020	987	$base_control_key . '_width',
1021	988	[
1022	989	'label' => esc_html__( 'Width', 'elementor' ),
1023	990	'type' => Controls_Manager::SLIDER,
1024		- 'size_units' => [ '%', 'vw', 'custom' ],
1025	991	'default' => [
1026	992	'unit' => '%',
1027	993	],
1028	994	'tablet_default' => [
		@@ -1035,12 +1001,8 @@
1035	1001	'%' => [
1036	1002	'min' => 100,
1037	1003	'max' => 300,
1038	1004	],
1039		- 'vw' => [
1040		- 'min' => 100,
1041		- 'max' => 300,
1042		- ],
1043	1005	],
1044	1006	'condition' => [
1045	1007	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046	1008	],
		@@ -1054,19 +1016,12 @@
1054	1016	$base_control_key . '_height',
1055	1017	[
1056	1018	'label' => esc_html__( 'Height', 'elementor' ),
1057	1019	'type' => Controls_Manager::SLIDER,
1058		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059	1020	'range' => [
1060	1021	'px' => [
1061	1022	'max' => 500,
1062	1023	],
1063		- 'em' => [
1064		- 'max' => 50,
1065		- ],
1066		- 'rem' => [
1067		- 'max' => 50,
1068		- ],
1069	1024	],
1070	1025	'condition' => [
1071	1026	"shape_divider_$side!" => '',
1072	1027	],
		@@ -1123,9 +1078,9 @@
1123	1078	$this->end_controls_tabs();
1124	1079
1125	1080	$this->end_controls_section();
1126	1081
1127		- // Section Typography.
	1082	+ // Section Typography
1128	1083	$this->start_controls_section(
1129	1084	'section_typo',
1130	1085	[
1131	1086	'label' => esc_html__( 'Typography', 'elementor' ),
		@@ -1141,8 +1096,9 @@
1141	1096	'default' => '',
1142	1097	'selectors' => [
1143	1098	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144	1099	],
	1100	+ 'separator' => 'none',
1145	1101	]
1146	1102	);
1147	1103
1148	1104	$this->add_control(
		@@ -1180,16 +1136,16 @@
1180	1136	],
1181	1137	]
1182	1138	);
1183	1139
1184		- $this->add_responsive_control(
	1140	+ $this->add_control(
1185	1141	'text_align',
1186	1142	[
1187	1143	'label' => esc_html__( 'Text Align', 'elementor' ),
1188	1144	'type' => Controls_Manager::CHOOSE,
1189	1145	'options' => [
1190		- 'start' => [
1191		- 'title' => esc_html__( 'Start', 'elementor' ),
	1146	+ 'left' => [
	1147	+ 'title' => esc_html__( 'Left', 'elementor' ),
1192	1148	'icon' => 'eicon-text-align-left',
1193	1149	],
1194	1150	'center' => [
1195	1151	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -1194,22 +1150,13 @@
1194	1150	'center' => [
1195	1151	'title' => esc_html__( 'Center', 'elementor' ),
1196	1152	'icon' => 'eicon-text-align-center',
1197	1153	],
1198		- 'end' => [
1199		- 'title' => esc_html__( 'End', 'elementor' ),
	1154	+ 'right' => [
	1155	+ 'title' => esc_html__( 'Right', 'elementor' ),
1200	1156	'icon' => 'eicon-text-align-right',
1201	1157	],
1202		- 'justify' => [
1203		- 'title' => esc_html__( 'Justified', 'elementor' ),
1204		- 'icon' => 'eicon-text-align-justify',
1205		- ],
1206	1158	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1159	'selectors' => [
1213	1160	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1161	],
1215	1162	]
		@@ -1216,9 +1163,9 @@
1216	1163	);
1217	1164
1218	1165	$this->end_controls_section();
1219	1166
1220		- // Section Advanced.
	1167	+ // Section Advanced
1221	1168	$this->start_controls_section(
1222	1169	'section_advanced',
1223	1170	[
1224	1171	'label' => esc_html__( 'Advanced', 'elementor' ),
		@@ -1230,9 +1177,9 @@
1230	1177	'margin',
1231	1178	[
1232	1179	'label' => esc_html__( 'Margin', 'elementor' ),
1233	1180	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1181	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235	1182	'allowed_dimensions' => 'vertical',
1236	1183	'placeholder' => [
1237	1184	'top' => '',
1238	1185	'right' => 'auto',
		@@ -1249,9 +1196,9 @@
1249	1196	'padding',
1250	1197	[
1251	1198	'label' => esc_html__( 'Padding', 'elementor' ),
1252	1199	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1200	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254	1201	'selectors' => [
1255	1202	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1203	],
1257	1204	]
		@@ -1274,11 +1221,8 @@
1274	1221	[
1275	1222	'label' => esc_html__( 'CSS ID', 'elementor' ),
1276	1223	'type' => Controls_Manager::TEXT,
1277	1224	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1225	'dynamic' => [
1282	1226	'active' => true,
1283	1227	],
1284	1228	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1292,11 +1236,8 @@
1292	1236	[
1293	1237	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1294	1238	'type' => Controls_Manager::TEXT,
1295	1239	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1240	'dynamic' => [
1300	1241	'active' => true,
1301	1242	],
1302	1243	'prefix_class' => '',
		@@ -1304,10 +1245,8 @@
1304	1245	'classes' => 'elementor-control-direction-ltr',
1305	1246	]
1306	1247	);
1307	1248
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1249	$this->end_controls_section();
1311	1250
1312	1251	$this->start_controls_section(
1313	1252	'section_effects',
		@@ -1316,10 +1255,8 @@
1316	1255	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1256	]
1318	1257	);
1319	1258
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1259	$this->add_responsive_control(
1323	1260	'animation',
1324	1261	[
1325	1262	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1363,9 +1300,9 @@
1363	1300	);
1364	1301
1365	1302	$this->end_controls_section();
1366	1303
1367		- // Section Responsive.
	1304	+ // Section Responsive
1368	1305	$this->start_controls_section(
1369	1306	'_section_responsive',
1370	1307	[
1371	1308	'label' => esc_html__( 'Responsive', 'elementor' ),
		@@ -1372,23 +1309,29 @@
1372	1309	'tab' => Controls_Manager::TAB_ADVANCED,
1373	1310	]
1374	1311	);
1375	1312
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() );
	1313	+ $this->add_control(
	1314	+ 'reverse_order_tablet',
	1315	+ [
	1316	+ 'label' => esc_html__( 'Reverse Columns', 'elementor' ) . ' (' . esc_html__( 'Tablet', 'elementor' ) . ')',
	1317	+ 'type' => Controls_Manager::SWITCHER,
	1318	+ 'default' => '',
	1319	+ 'prefix_class' => 'elementor-',
	1320	+ 'return_value' => 'reverse-tablet',
	1321	+ ]
	1322	+ );
1378	1323
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		- }
	1324	+ $this->add_control(
	1325	+ 'reverse_order_mobile',
	1326	+ [
	1327	+ 'label' => esc_html__( 'Reverse Columns', 'elementor' ) . ' (' . esc_html__( 'Mobile', 'elementor' ) . ')',
	1328	+ 'type' => Controls_Manager::SWITCHER,
	1329	+ 'default' => '',
	1330	+ 'prefix_class' => 'elementor-',
	1331	+ 'return_value' => 'reverse-mobile',
	1332	+ ]
	1333	+ );
1391	1334
1392	1335	$this->add_control(
1393	1336	'heading_visibility',
1394	1337	[
		@@ -1400,21 +1343,53 @@
1400	1343
1401	1344	$this->add_control(
1402	1345	'responsive_description',
1403	1346	[
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		- ),
	1347	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1348	'type' => Controls_Manager::RAW_HTML,
1411	1349	'content_classes' => 'elementor-descriptor',
1412	1350	]
1413	1351	);
1414	1352
1415		- $this->add_hidden_device_controls();
	1353	+ $this->add_control(
	1354	+ 'hide_desktop',
	1355	+ [
	1356	+ 'label' => esc_html__( 'Hide On Desktop', 'elementor' ),
	1357	+ 'type' => Controls_Manager::SWITCHER,
	1358	+ 'default' => '',
	1359	+ 'prefix_class' => 'elementor-',
	1360	+ 'label_on' => esc_html__( 'Hide', 'elementor' ),
	1361	+ 'label_off' => esc_html__( 'Show', 'elementor' ),
	1362	+ 'return_value' => 'hidden-desktop',
	1363	+ ]
	1364	+ );
1416	1365
	1366	+ $this->add_control(
	1367	+ 'hide_tablet',
	1368	+ [
	1369	+ 'label' => esc_html__( 'Hide On Tablet', 'elementor' ),
	1370	+ 'type' => Controls_Manager::SWITCHER,
	1371	+ 'default' => '',
	1372	+ 'prefix_class' => 'elementor-',
	1373	+ 'label_on' => esc_html__( 'Hide', 'elementor' ),
	1374	+ 'label_off' => esc_html__( 'Show', 'elementor' ),
	1375	+ 'return_value' => 'hidden-tablet',
	1376	+ ]
	1377	+ );
	1378	+
	1379	+ $this->add_control(
	1380	+ 'hide_mobile',
	1381	+ [
	1382	+ 'label' => esc_html__( 'Hide On Mobile', 'elementor' ),
	1383	+ 'type' => Controls_Manager::SWITCHER,
	1384	+ 'default' => '',
	1385	+ 'prefix_class' => 'elementor-',
	1386	+ 'label_on' => esc_html__( 'Hide', 'elementor' ),
	1387	+ 'label_off' => esc_html__( 'Show', 'elementor' ),
	1388	+ 'return_value' => 'hidden-phone',
	1389	+ ]
	1390	+ );
	1391	+
1417	1392	$this->end_controls_section();
1418	1393
1419	1394	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1420	1395
		@@ -1438,28 +1413,27 @@
1438	1413	if ( ! settings.background_play_once ) {
1439	1414	videoAttributes += ' loop';
1440	1415	}
1441	1416
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1417	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1418
1449	1419	if ( ! settings.background_play_on_mobile ) {
1450		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1420	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1451	1421	}
1452	1422	#>
1453	1423	<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>
	1424	+ <div class="elementor-background-video-embed"></div>
	1425	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1426	</div>
1457	1427	<# } #>
1458	1428	<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>
	1429	+ <div class="elementor-shape elementor-shape-top"></div>
	1430	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1431	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1432	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1433	+ <div class="elementor-row"></div>
	1434	+ <?php } ?>
	1435	+ </div>
1462	1436	<?php
1463	1437	}
1464	1438
1465	1439	/**
		@@ -1479,24 +1453,19 @@
1479	1453	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480	1454	<?php
1481	1455	if ( 'video' === $settings['background_background'] ) :
1482	1456	if ( $settings['background_video_link'] ) :
1483		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	1457	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1458
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1459	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1460
1492	1461	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1462	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1463	}
1495	1464	?>
1496	1465	<div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
1497		- <?php if ( $is_embed_video ) : ?>
1498		- <div class="elementor-background-video-embed" role="presentation"></div>
	1466	+ <?php if ( $video_properties ) : ?>
	1467	+ <div class="elementor-background-video-embed"></div>
1499	1468	<?php
1500	1469	else :
1501	1470	$video_tag_attributes = 'autoplay muted playsinline';
1502	1471	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,9 +1471,9 @@
1502	1471	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1472	$video_tag_attributes .= ' loop';
1504	1473	endif;
1505	1474	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
	1475	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php
1507	1476	// PHPCS - the variable $video_tag_attributes is a plain string.
1508	1477	echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509	1478	?>></video>
1510	1479	<?php endif; ?>
		@@ -1512,14 +1481,11 @@
1512	1481	<?php
1513	1482	endif;
1514	1483	endif;
1515	1484
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1485	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1486	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1487
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1488	if ( $has_background_overlay ) :
1523	1489	?>
1524	1490	<div class="elementor-background-overlay"></div>
1525	1491	<?php
		@@ -1533,9 +1499,11 @@
1533	1499	$this->print_shape_divider( 'bottom' );
1534	1500	}
1535	1501	?>
1536	1502	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1503	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1504	+ <div class="elementor-row">
	1505	+ <?php }
1538	1506	}
1539	1507
1540	1508	/**
1541	1509	* After section rendering.
		@@ -1546,8 +1514,11 @@
1546	1514	* @access public
1547	1515	*/
1548	1516	public function after_render() {
1549	1517	?>
	1518	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1519	+ </div>
	1520	+ <?php } ?>
1550	1521	</div>
1551	1522	</<?php
1552	1523	// PHPCS - the method get_html_tag is safe.
1553	1524	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		@@ -1602,9 +1573,9 @@
1602	1573	* @access private
1603	1574	*
1604	1575	* @return string Section HTML tag.
1605	1576	*/
1606		- protected function get_html_tag() {
	1577	+ private function get_html_tag() {
1607	1578	$html_tag = $this->get_settings( 'html_tag' );
1608	1579
1609	1580	if ( empty( $html_tag ) ) {
1610	1581	$html_tag = 'section';
		@@ -1622,9 +1593,9 @@
1622	1593	* @access private
1623	1594	*
1624	1595	* @param string $side Shape divider side, used to set the shape key.
1625	1596	*/
1626		- protected function print_shape_divider( $side ) {
	1597	+ private function print_shape_divider( $side ) {
1627	1598	$settings = $this->get_active_settings();
1628	1599	$base_setting_key = "shape_divider_$side";
1629	1600	$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
1630	1601	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
		@@ -1630,16 +1601,16 @@
1630	1601	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
1631	1602	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
1632	1603	return;
1633	1604	}
1634		-
1635	1605	?>
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' );
	1606	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
	1607	+ // PHPCS - the variable $negative is getting a setting value with a strict structure.
	1608	+ echo var_export( $negative ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1638	1609	?>">
1639	1610	<?php
1640	1611	// 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
	1612	+ echo file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1642	1613	?>
1643	1614	</div>
1644	1615	<?php
1645	1616	}