← All changes | includes/elements/section.php +99 -167 4.2.4 → 3.5.2 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,
		@@ -724,11 +706,8 @@
724	706	'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
725	707	'saturation' => esc_html__( 'Saturation', 'elementor' ),
726	708	'color' => esc_html__( 'Color', 'elementor' ),
727	709	'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
728		- 'difference' => esc_html__( 'Difference', 'elementor' ),
729		- 'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
730		- 'hue' => esc_html__( 'Hue', 'elementor' ),
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,17 @@
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	1158	'justify' => [
1203		- 'title' => esc_html__( 'Justified', 'elementor' ),
	1159	+ 'title' => __( 'Justified', 'elementor' ),
1204	1160	'icon' => 'eicon-text-align-justify',
1205	1161	],
1206	1162	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1163	'selectors' => [
1213	1164	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1165	],
1215	1166	]
		@@ -1216,9 +1167,9 @@
1216	1167	);
1217	1168
1218	1169	$this->end_controls_section();
1219	1170
1220		- // Section Advanced.
	1171	+ // Section Advanced
1221	1172	$this->start_controls_section(
1222	1173	'section_advanced',
1223	1174	[
1224	1175	'label' => esc_html__( 'Advanced', 'elementor' ),
		@@ -1230,9 +1181,9 @@
1230	1181	'margin',
1231	1182	[
1232	1183	'label' => esc_html__( 'Margin', 'elementor' ),
1233	1184	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1185	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235	1186	'allowed_dimensions' => 'vertical',
1236	1187	'placeholder' => [
1237	1188	'top' => '',
1238	1189	'right' => 'auto',
		@@ -1249,9 +1200,9 @@
1249	1200	'padding',
1250	1201	[
1251	1202	'label' => esc_html__( 'Padding', 'elementor' ),
1252	1203	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1204	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254	1205	'selectors' => [
1255	1206	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1207	],
1257	1208	]
		@@ -1274,11 +1225,8 @@
1274	1225	[
1275	1226	'label' => esc_html__( 'CSS ID', 'elementor' ),
1276	1227	'type' => Controls_Manager::TEXT,
1277	1228	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1229	'dynamic' => [
1282	1230	'active' => true,
1283	1231	],
1284	1232	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1292,11 +1240,8 @@
1292	1240	[
1293	1241	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1294	1242	'type' => Controls_Manager::TEXT,
1295	1243	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1244	'dynamic' => [
1300	1245	'active' => true,
1301	1246	],
1302	1247	'prefix_class' => '',
		@@ -1304,10 +1249,8 @@
1304	1249	'classes' => 'elementor-control-direction-ltr',
1305	1250	]
1306	1251	);
1307	1252
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1253	$this->end_controls_section();
1311	1254
1312	1255	$this->start_controls_section(
1313	1256	'section_effects',
		@@ -1316,10 +1259,8 @@
1316	1259	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1260	]
1318	1261	);
1319	1262
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1263	$this->add_responsive_control(
1323	1264	'animation',
1324	1265	[
1325	1266	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1363,9 +1304,9 @@
1363	1304	);
1364	1305
1365	1306	$this->end_controls_section();
1366	1307
1367		- // Section Responsive.
	1308	+ // Section Responsive
1368	1309	$this->start_controls_section(
1369	1310	'_section_responsive',
1370	1311	[
1371	1312	'label' => esc_html__( 'Responsive', 'elementor' ),
		@@ -1400,14 +1341,9 @@
1400	1341
1401	1342	$this->add_control(
1402	1343	'responsive_description',
1403	1344	[
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		- ),
	1345	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1346	'type' => Controls_Manager::RAW_HTML,
1411	1347	'content_classes' => 'elementor-descriptor',
1412	1348	]
1413	1349	);
		@@ -1438,14 +1374,9 @@
1438	1374	if ( ! settings.background_play_once ) {
1439	1375	videoAttributes += ' loop';
1440	1376	}
1441	1377
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1378	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1379
1449	1380	if ( ! settings.background_play_on_mobile ) {
1450	1381	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1382	}
		@@ -1450,16 +1381,20 @@
1450	1381	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1382	}
1452	1383	#>
1453	1384	<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>
	1385	+ <div class="elementor-background-video-embed"></div>
	1386	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1387	</div>
1457	1388	<# } #>
1458	1389	<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>
	1390	+ <div class="elementor-shape elementor-shape-top"></div>
	1391	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1392	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1393	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1394	+ <div class="elementor-row"></div>
	1395	+ <?php } ?>
	1396	+ </div>
1462	1397	<?php
1463	1398	}
1464	1399
1465	1400	/**
		@@ -1479,24 +1414,19 @@
1479	1414	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480	1415	<?php
1481	1416	if ( 'video' === $settings['background_background'] ) :
1482	1417	if ( $settings['background_video_link'] ) :
1483		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	1418	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1419
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1420	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1421
1492	1422	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1423	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1424	}
1495	1425	?>
1496	1426	<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>
	1427	+ <?php if ( $video_properties ) : ?>
	1428	+ <div class="elementor-background-video-embed"></div>
1499	1429	<?php
1500	1430	else :
1501	1431	$video_tag_attributes = 'autoplay muted playsinline';
1502	1432	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,9 +1432,9 @@
1502	1432	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1433	$video_tag_attributes .= ' loop';
1504	1434	endif;
1505	1435	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
	1436	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php
1507	1437	// PHPCS - the variable $video_tag_attributes is a plain string.
1508	1438	echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509	1439	?>></video>
1510	1440	<?php endif; ?>
		@@ -1512,14 +1442,11 @@
1512	1442	<?php
1513	1443	endif;
1514	1444	endif;
1515	1445
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1446	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1447	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1448
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1449	if ( $has_background_overlay ) :
1523	1450	?>
1524	1451	<div class="elementor-background-overlay"></div>
1525	1452	<?php
		@@ -1533,9 +1460,11 @@
1533	1460	$this->print_shape_divider( 'bottom' );
1534	1461	}
1535	1462	?>
1536	1463	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1464	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1465	+ <div class="elementor-row">
	1466	+ <?php }
1538	1467	}
1539	1468
1540	1469	/**
1541	1470	* After section rendering.
		@@ -1546,8 +1475,11 @@
1546	1475	* @access public
1547	1476	*/
1548	1477	public function after_render() {
1549	1478	?>
	1479	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1480	+ </div>
	1481	+ <?php } ?>
1550	1482	</div>
1551	1483	</<?php
1552	1484	// PHPCS - the method get_html_tag is safe.
1553	1485	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		@@ -1630,16 +1562,16 @@
1630	1562	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
1631	1563	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
1632	1564	return;
1633	1565	}
1634		-
1635	1566	?>
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' );
	1567	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
	1568	+ // PHPCS - the variable $negative is getting a setting value with a strict structure.
	1569	+ echo var_export( $negative ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1638	1570	?>">
1639	1571	<?php
1640	1572	// 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
	1573	+ echo file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1642	1574	?>
1643	1575	</div>
1644	1576	<?php
1645	1577	}