← All changes | includes/elements/section.php +96 -161 4.2.0 → 3.7.4 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,
		@@ -766,9 +748,9 @@
766	748	'selector' => '{{WRAPPER}}:hover > .elementor-background-overlay',
767	749	]
768	750	);
769	751
770		- $this->add_responsive_control(
	752	+ $this->add_control(
771	753	'background_overlay_hover_opacity',
772	754	[
773	755	'label' => esc_html__( 'Opacity', 'elementor' ),
774	756	'type' => Controls_Manager::SLIDER,
		@@ -800,9 +782,9 @@
800	782
801	783	$this->add_control(
802	784	'background_overlay_hover_transition',
803	785	[
804		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	786	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
805	787	'type' => Controls_Manager::SLIDER,
806	788	'default' => [
807	789	'size' => 0.3,
808	790	],
		@@ -807,9 +789,8 @@
807	789	'size' => 0.3,
808	790	],
809	791	'range' => [
810	792	'px' => [
811		- 'min' => 0,
812	793	'max' => 3,
813	794	'step' => 0.1,
814	795	],
815	796	],
		@@ -823,9 +804,9 @@
823	804	$this->end_controls_tabs();
824	805
825	806	$this->end_controls_section();
826	807
827		- // Section border.
	808	+ // Section border
828	809	$this->start_controls_section(
829	810	'section_border',
830	811	[
831	812	'label' => esc_html__( 'Border', 'elementor' ),
		@@ -853,9 +834,9 @@
853	834	'border_radius',
854	835	[
855	836	'label' => esc_html__( 'Border Radius', 'elementor' ),
856	837	'type' => Controls_Manager::DIMENSIONS,
857		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	838	+ 'size_units' => [ 'px', '%' ],
858	839	'selectors' => [
859	840	'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860	841	],
861	842	]
		@@ -889,9 +870,9 @@
889	870	'border_radius_hover',
890	871	[
891	872	'label' => esc_html__( 'Border Radius', 'elementor' ),
892	873	'type' => Controls_Manager::DIMENSIONS,
893		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	874	+ 'size_units' => [ 'px', '%' ],
894	875	'selectors' => [
895	876	'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	877	],
897	878	]
		@@ -907,9 +888,9 @@
907	888
908	889	$this->add_control(
909	890	'border_hover_transition',
910	891	[
911		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	892	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
912	893	'type' => Controls_Manager::SLIDER,
913	894	'separator' => 'before',
914	895	'default' => [
915	896	'size' => 0.3,
		@@ -915,9 +896,8 @@
915	896	'size' => 0.3,
916	897	],
917	898	'range' => [
918	899	'px' => [
919		- 'min' => 0,
920	900	'max' => 3,
921	901	'step' => 0.1,
922	902	],
923	903	],
		@@ -929,9 +909,9 @@
929	909	'operator' => '!==',
930	910	'value' => '',
931	911	],
932	912	[
933		- 'name' => 'border_hover_border',
	913	+ 'name' => 'border_border',
934	914	'operator' => '!==',
935	915	'value' => '',
936	916	],
937	917	],
		@@ -948,9 +928,9 @@
948	928	$this->end_controls_tabs();
949	929
950	930	$this->end_controls_section();
951	931
952		- // Section Shape Divider.
	932	+ // Section Shape Divider
953	933	$this->start_controls_section(
954	934	'section_shape_divider',
955	935	[
956	936	'label' => esc_html__( 'Shape Divider', 'elementor' ),
		@@ -959,8 +939,16 @@
959	939	);
960	940
961	941	$this->start_controls_tabs( 'tabs_shape_dividers' );
962	942
	943	+ $shapes_options = [
	944	+ '' => esc_html__( 'None', 'elementor' ),
	945	+ ];
	946	+
	947	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	948	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	949	+ }
	950	+
963	951	foreach ( [
964	952	'top' => esc_html__( 'Top', 'elementor' ),
965	953	'bottom' => esc_html__( 'Bottom', 'elementor' ),
966	954	] as $side => $side_label ) {
		@@ -976,30 +964,12 @@
976	964	$this->add_control(
977	965	$base_control_key,
978	966	[
979	967	'label' => esc_html__( 'Type', 'elementor' ),
980		- 'type' => Controls_Manager::VISUAL_CHOICE,
981		- 'label_block' => true,
982		- 'columns' => 2,
983		- 'options' => Shapes::get_shapes(),
	968	+ 'type' => Controls_Manager::SELECT,
	969	+ 'options' => $shapes_options,
984	970	'render_type' => 'none',
985	971	'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	972	]
1003	973	);
1004	974
1005	975	$this->add_control(
		@@ -1020,9 +990,8 @@
1020	990	$base_control_key . '_width',
1021	991	[
1022	992	'label' => esc_html__( 'Width', 'elementor' ),
1023	993	'type' => Controls_Manager::SLIDER,
1024		- 'size_units' => [ '%', 'vw', 'custom' ],
1025	994	'default' => [
1026	995	'unit' => '%',
1027	996	],
1028	997	'tablet_default' => [
		@@ -1035,12 +1004,8 @@
1035	1004	'%' => [
1036	1005	'min' => 100,
1037	1006	'max' => 300,
1038	1007	],
1039		- 'vw' => [
1040		- 'min' => 100,
1041		- 'max' => 300,
1042		- ],
1043	1008	],
1044	1009	'condition' => [
1045	1010	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046	1011	],
		@@ -1054,19 +1019,12 @@
1054	1019	$base_control_key . '_height',
1055	1020	[
1056	1021	'label' => esc_html__( 'Height', 'elementor' ),
1057	1022	'type' => Controls_Manager::SLIDER,
1058		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059	1023	'range' => [
1060	1024	'px' => [
1061	1025	'max' => 500,
1062	1026	],
1063		- 'em' => [
1064		- 'max' => 50,
1065		- ],
1066		- 'rem' => [
1067		- 'max' => 50,
1068		- ],
1069	1027	],
1070	1028	'condition' => [
1071	1029	"shape_divider_$side!" => '',
1072	1030	],
		@@ -1123,9 +1081,9 @@
1123	1081	$this->end_controls_tabs();
1124	1082
1125	1083	$this->end_controls_section();
1126	1084
1127		- // Section Typography.
	1085	+ // Section Typography
1128	1086	$this->start_controls_section(
1129	1087	'section_typo',
1130	1088	[
1131	1089	'label' => esc_html__( 'Typography', 'elementor' ),
		@@ -1141,8 +1099,9 @@
1141	1099	'default' => '',
1142	1100	'selectors' => [
1143	1101	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144	1102	],
	1103	+ 'separator' => 'none',
1145	1104	]
1146	1105	);
1147	1106
1148	1107	$this->add_control(
		@@ -1180,16 +1139,16 @@
1180	1139	],
1181	1140	]
1182	1141	);
1183	1142
1184		- $this->add_responsive_control(
	1143	+ $this->add_control(
1185	1144	'text_align',
1186	1145	[
1187	1146	'label' => esc_html__( 'Text Align', 'elementor' ),
1188	1147	'type' => Controls_Manager::CHOOSE,
1189	1148	'options' => [
1190		- 'start' => [
1191		- 'title' => esc_html__( 'Start', 'elementor' ),
	1149	+ 'left' => [
	1150	+ 'title' => esc_html__( 'Left', 'elementor' ),
1192	1151	'icon' => 'eicon-text-align-left',
1193	1152	],
1194	1153	'center' => [
1195	1154	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -1194,22 +1153,17 @@
1194	1153	'center' => [
1195	1154	'title' => esc_html__( 'Center', 'elementor' ),
1196	1155	'icon' => 'eicon-text-align-center',
1197	1156	],
1198		- 'end' => [
1199		- 'title' => esc_html__( 'End', 'elementor' ),
	1157	+ 'right' => [
	1158	+ 'title' => esc_html__( 'Right', 'elementor' ),
1200	1159	'icon' => 'eicon-text-align-right',
1201	1160	],
1202	1161	'justify' => [
1203		- 'title' => esc_html__( 'Justified', 'elementor' ),
	1162	+ 'title' => __( 'Justified', 'elementor' ),
1204	1163	'icon' => 'eicon-text-align-justify',
1205	1164	],
1206	1165	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1166	'selectors' => [
1213	1167	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1168	],
1215	1169	]
		@@ -1216,9 +1170,9 @@
1216	1170	);
1217	1171
1218	1172	$this->end_controls_section();
1219	1173
1220		- // Section Advanced.
	1174	+ // Section Advanced
1221	1175	$this->start_controls_section(
1222	1176	'section_advanced',
1223	1177	[
1224	1178	'label' => esc_html__( 'Advanced', 'elementor' ),
		@@ -1230,9 +1184,9 @@
1230	1184	'margin',
1231	1185	[
1232	1186	'label' => esc_html__( 'Margin', 'elementor' ),
1233	1187	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1188	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235	1189	'allowed_dimensions' => 'vertical',
1236	1190	'placeholder' => [
1237	1191	'top' => '',
1238	1192	'right' => 'auto',
		@@ -1249,9 +1203,9 @@
1249	1203	'padding',
1250	1204	[
1251	1205	'label' => esc_html__( 'Padding', 'elementor' ),
1252	1206	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1207	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254	1208	'selectors' => [
1255	1209	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1210	],
1257	1211	]
		@@ -1274,11 +1228,8 @@
1274	1228	[
1275	1229	'label' => esc_html__( 'CSS ID', 'elementor' ),
1276	1230	'type' => Controls_Manager::TEXT,
1277	1231	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1232	'dynamic' => [
1282	1233	'active' => true,
1283	1234	],
1284	1235	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1292,11 +1243,8 @@
1292	1243	[
1293	1244	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1294	1245	'type' => Controls_Manager::TEXT,
1295	1246	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1247	'dynamic' => [
1300	1248	'active' => true,
1301	1249	],
1302	1250	'prefix_class' => '',
		@@ -1304,10 +1252,8 @@
1304	1252	'classes' => 'elementor-control-direction-ltr',
1305	1253	]
1306	1254	);
1307	1255
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1256	$this->end_controls_section();
1311	1257
1312	1258	$this->start_controls_section(
1313	1259	'section_effects',
		@@ -1316,10 +1262,8 @@
1316	1262	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1263	]
1318	1264	);
1319	1265
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1266	$this->add_responsive_control(
1323	1267	'animation',
1324	1268	[
1325	1269	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1363,9 +1307,9 @@
1363	1307	);
1364	1308
1365	1309	$this->end_controls_section();
1366	1310
1367		- // Section Responsive.
	1311	+ // Section Responsive
1368	1312	$this->start_controls_section(
1369	1313	'_section_responsive',
1370	1314	[
1371	1315	'label' => esc_html__( 'Responsive', 'elementor' ),
		@@ -1400,14 +1344,9 @@
1400	1344
1401	1345	$this->add_control(
1402	1346	'responsive_description',
1403	1347	[
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		- ),
	1348	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1349	'type' => Controls_Manager::RAW_HTML,
1411	1350	'content_classes' => 'elementor-descriptor',
1412	1351	]
1413	1352	);
		@@ -1438,14 +1377,9 @@
1438	1377	if ( ! settings.background_play_once ) {
1439	1378	videoAttributes += ' loop';
1440	1379	}
1441	1380
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1381	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1382
1449	1383	if ( ! settings.background_play_on_mobile ) {
1450	1384	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1385	}
		@@ -1450,16 +1384,20 @@
1450	1384	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1385	}
1452	1386	#>
1453	1387	<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>
	1388	+ <div class="elementor-background-video-embed"></div>
	1389	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1390	</div>
1457	1391	<# } #>
1458	1392	<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>
	1393	+ <div class="elementor-shape elementor-shape-top"></div>
	1394	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1395	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1396	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1397	+ <div class="elementor-row"></div>
	1398	+ <?php } ?>
	1399	+ </div>
1462	1400	<?php
1463	1401	}
1464	1402
1465	1403	/**
		@@ -1479,24 +1417,19 @@
1479	1417	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480	1418	<?php
1481	1419	if ( 'video' === $settings['background_background'] ) :
1482	1420	if ( $settings['background_video_link'] ) :
1483		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	1421	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1422
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1423	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1424
1492	1425	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1426	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1427	}
1495	1428	?>
1496	1429	<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>
	1430	+ <?php if ( $video_properties ) : ?>
	1431	+ <div class="elementor-background-video-embed"></div>
1499	1432	<?php
1500	1433	else :
1501	1434	$video_tag_attributes = 'autoplay muted playsinline';
1502	1435	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,9 +1435,9 @@
1502	1435	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1436	$video_tag_attributes .= ' loop';
1504	1437	endif;
1505	1438	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
	1439	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php
1507	1440	// PHPCS - the variable $video_tag_attributes is a plain string.
1508	1441	echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509	1442	?>></video>
1510	1443	<?php endif; ?>
		@@ -1512,14 +1445,11 @@
1512	1445	<?php
1513	1446	endif;
1514	1447	endif;
1515	1448
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1449	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1450	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1451
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1452	if ( $has_background_overlay ) :
1523	1453	?>
1524	1454	<div class="elementor-background-overlay"></div>
1525	1455	<?php
		@@ -1533,9 +1463,11 @@
1533	1463	$this->print_shape_divider( 'bottom' );
1534	1464	}
1535	1465	?>
1536	1466	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1467	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1468	+ <div class="elementor-row">
	1469	+ <?php }
1538	1470	}
1539	1471
1540	1472	/**
1541	1473	* After section rendering.
		@@ -1546,8 +1478,11 @@
1546	1478	* @access public
1547	1479	*/
1548	1480	public function after_render() {
1549	1481	?>
	1482	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1483	+ </div>
	1484	+ <?php } ?>
1550	1485	</div>
1551	1486	</<?php
1552	1487	// PHPCS - the method get_html_tag is safe.
1553	1488	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		@@ -1632,9 +1567,9 @@
1632	1567	return;
1633	1568	}
1634	1569
1635	1570	?>
1636		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	1571	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
1637	1572	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
1638	1573	?>">
1639	1574	<?php
1640	1575	// PHPCS - The file content is being read from a strict file path structure.