← All changes | includes/elements/section.php +105 -155 4.2.4 → 3.11.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', 'custom' ],
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', 'custom' ],
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', 'custom' ],
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' ),
		@@ -552,45 +572,14 @@
552	572	'fields_options' => [
553	573	'background' => [
554	574	'frontend_available' => true,
555	575	],
556		- ],
557		- ]
558		- );
559		-
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		- ],
	576	+ 'image' => [
	577	+ 'background_lazyload' => [
	578	+ 'active' => true,
	579	+ 'keys' => [ 'background_image', 'url' ],
577	580	],
578	581	],
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	582	],
594	583	]
595	584	);
596	585
		@@ -613,9 +602,9 @@
613	602
614	603	$this->add_control(
615	604	'background_hover_transition',
616	605	[
617		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	606	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
618	607	'type' => Controls_Manager::SLIDER,
619	608	'default' => [
620	609	'size' => 0.3,
621	610	],
		@@ -620,9 +609,8 @@
620	609	'size' => 0.3,
621	610	],
622	611	'range' => [
623	612	'px' => [
624		- 'min' => 0,
625	613	'max' => 3,
626	614	'step' => 0.1,
627	615	],
628	616	],
		@@ -636,9 +624,9 @@
636	624	$this->end_controls_tabs();
637	625
638	626	$this->end_controls_section();
639	627
640		- // Background Overlay.
	628	+ // Background Overlay
641	629	$this->start_controls_section(
642	630	'section_background_overlay',
643	631	[
644	632	'label' => esc_html__( 'Background Overlay', 'elementor' ),
		@@ -659,8 +647,17 @@
659	647	Group_Control_Background::get_type(),
660	648	[
661	649	'name' => 'background_overlay',
662	650	'selector' => '{{WRAPPER}} > .elementor-background-overlay',
	651	+ 'fields_options' => [
	652	+ 'image' => [
	653	+ 'background_lazyload' => [
	654	+ 'active' => true,
	655	+ 'keys' => [ 'background_overlay_image', 'url' ],
	656	+ 'selector' => '.elementor-background-overlay',
	657	+ ],
	658	+ ],
	659	+ ],
663	660	]
664	661	);
665	662
666	663	$this->add_responsive_control(
		@@ -800,9 +797,9 @@
800	797
801	798	$this->add_control(
802	799	'background_overlay_hover_transition',
803	800	[
804		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	801	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
805	802	'type' => Controls_Manager::SLIDER,
806	803	'default' => [
807	804	'size' => 0.3,
808	805	],
		@@ -807,9 +804,8 @@
807	804	'size' => 0.3,
808	805	],
809	806	'range' => [
810	807	'px' => [
811		- 'min' => 0,
812	808	'max' => 3,
813	809	'step' => 0.1,
814	810	],
815	811	],
		@@ -823,9 +819,9 @@
823	819	$this->end_controls_tabs();
824	820
825	821	$this->end_controls_section();
826	822
827		- // Section border.
	823	+ // Section border
828	824	$this->start_controls_section(
829	825	'section_border',
830	826	[
831	827	'label' => esc_html__( 'Border', 'elementor' ),
		@@ -853,9 +849,9 @@
853	849	'border_radius',
854	850	[
855	851	'label' => esc_html__( 'Border Radius', 'elementor' ),
856	852	'type' => Controls_Manager::DIMENSIONS,
857		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	853	+ 'size_units' => [ 'px', '%', 'em', 'custom' ],
858	854	'selectors' => [
859	855	'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860	856	],
861	857	]
		@@ -889,9 +885,9 @@
889	885	'border_radius_hover',
890	886	[
891	887	'label' => esc_html__( 'Border Radius', 'elementor' ),
892	888	'type' => Controls_Manager::DIMENSIONS,
893		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	889	+ 'size_units' => [ 'px', '%', 'em', 'custom' ],
894	890	'selectors' => [
895	891	'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	892	],
897	893	]
		@@ -907,9 +903,9 @@
907	903
908	904	$this->add_control(
909	905	'border_hover_transition',
910	906	[
911		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	907	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
912	908	'type' => Controls_Manager::SLIDER,
913	909	'separator' => 'before',
914	910	'default' => [
915	911	'size' => 0.3,
		@@ -915,9 +911,8 @@
915	911	'size' => 0.3,
916	912	],
917	913	'range' => [
918	914	'px' => [
919		- 'min' => 0,
920	915	'max' => 3,
921	916	'step' => 0.1,
922	917	],
923	918	],
		@@ -929,9 +924,9 @@
929	924	'operator' => '!==',
930	925	'value' => '',
931	926	],
932	927	[
933		- 'name' => 'border_hover_border',
	928	+ 'name' => 'border_border',
934	929	'operator' => '!==',
935	930	'value' => '',
936	931	],
937	932	],
		@@ -948,9 +943,9 @@
948	943	$this->end_controls_tabs();
949	944
950	945	$this->end_controls_section();
951	946
952		- // Section Shape Divider.
	947	+ // Section Shape Divider
953	948	$this->start_controls_section(
954	949	'section_shape_divider',
955	950	[
956	951	'label' => esc_html__( 'Shape Divider', 'elementor' ),
		@@ -959,8 +954,16 @@
959	954	);
960	955
961	956	$this->start_controls_tabs( 'tabs_shape_dividers' );
962	957
	958	+ $shapes_options = [
	959	+ '' => esc_html__( 'None', 'elementor' ),
	960	+ ];
	961	+
	962	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	963	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	964	+ }
	965	+
963	966	foreach ( [
964	967	'top' => esc_html__( 'Top', 'elementor' ),
965	968	'bottom' => esc_html__( 'Bottom', 'elementor' ),
966	969	] as $side => $side_label ) {
		@@ -976,30 +979,12 @@
976	979	$this->add_control(
977	980	$base_control_key,
978	981	[
979	982	'label' => esc_html__( 'Type', 'elementor' ),
980		- 'type' => Controls_Manager::VISUAL_CHOICE,
981		- 'label_block' => true,
982		- 'columns' => 2,
983		- 'options' => Shapes::get_shapes(),
	983	+ 'type' => Controls_Manager::SELECT,
	984	+ 'options' => $shapes_options,
984	985	'render_type' => 'none',
985	986	'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	987	]
1003	988	);
1004	989
1005	990	$this->add_control(
		@@ -1020,9 +1005,8 @@
1020	1005	$base_control_key . '_width',
1021	1006	[
1022	1007	'label' => esc_html__( 'Width', 'elementor' ),
1023	1008	'type' => Controls_Manager::SLIDER,
1024		- 'size_units' => [ '%', 'vw', 'custom' ],
1025	1009	'default' => [
1026	1010	'unit' => '%',
1027	1011	],
1028	1012	'tablet_default' => [
		@@ -1035,12 +1019,8 @@
1035	1019	'%' => [
1036	1020	'min' => 100,
1037	1021	'max' => 300,
1038	1022	],
1039		- 'vw' => [
1040		- 'min' => 100,
1041		- 'max' => 300,
1042		- ],
1043	1023	],
1044	1024	'condition' => [
1045	1025	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046	1026	],
		@@ -1054,19 +1034,12 @@
1054	1034	$base_control_key . '_height',
1055	1035	[
1056	1036	'label' => esc_html__( 'Height', 'elementor' ),
1057	1037	'type' => Controls_Manager::SLIDER,
1058		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059	1038	'range' => [
1060	1039	'px' => [
1061	1040	'max' => 500,
1062	1041	],
1063		- 'em' => [
1064		- 'max' => 50,
1065		- ],
1066		- 'rem' => [
1067		- 'max' => 50,
1068		- ],
1069	1042	],
1070	1043	'condition' => [
1071	1044	"shape_divider_$side!" => '',
1072	1045	],
		@@ -1123,9 +1096,9 @@
1123	1096	$this->end_controls_tabs();
1124	1097
1125	1098	$this->end_controls_section();
1126	1099
1127		- // Section Typography.
	1100	+ // Section Typography
1128	1101	$this->start_controls_section(
1129	1102	'section_typo',
1130	1103	[
1131	1104	'label' => esc_html__( 'Typography', 'elementor' ),
		@@ -1141,8 +1114,9 @@
1141	1114	'default' => '',
1142	1115	'selectors' => [
1143	1116	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144	1117	],
	1118	+ 'separator' => 'none',
1145	1119	]
1146	1120	);
1147	1121
1148	1122	$this->add_control(
		@@ -1186,10 +1160,10 @@
1186	1160	[
1187	1161	'label' => esc_html__( 'Text Align', 'elementor' ),
1188	1162	'type' => Controls_Manager::CHOOSE,
1189	1163	'options' => [
1190		- 'start' => [
1191		- 'title' => esc_html__( 'Start', 'elementor' ),
	1164	+ 'left' => [
	1165	+ 'title' => esc_html__( 'Left', 'elementor' ),
1192	1166	'icon' => 'eicon-text-align-left',
1193	1167	],
1194	1168	'center' => [
1195	1169	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -1194,10 +1168,10 @@
1194	1168	'center' => [
1195	1169	'title' => esc_html__( 'Center', 'elementor' ),
1196	1170	'icon' => 'eicon-text-align-center',
1197	1171	],
1198		- 'end' => [
1199		- 'title' => esc_html__( 'End', 'elementor' ),
	1172	+ 'right' => [
	1173	+ 'title' => esc_html__( 'Right', 'elementor' ),
1200	1174	'icon' => 'eicon-text-align-right',
1201	1175	],
1202	1176	'justify' => [
1203	1177	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -1203,13 +1177,8 @@
1203	1177	'title' => esc_html__( 'Justified', 'elementor' ),
1204	1178	'icon' => 'eicon-text-align-justify',
1205	1179	],
1206	1180	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1181	'selectors' => [
1213	1182	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1183	],
1215	1184	]
		@@ -1216,9 +1185,9 @@
1216	1185	);
1217	1186
1218	1187	$this->end_controls_section();
1219	1188
1220		- // Section Advanced.
	1189	+ // Section Advanced
1221	1190	$this->start_controls_section(
1222	1191	'section_advanced',
1223	1192	[
1224	1193	'label' => esc_html__( 'Advanced', 'elementor' ),
		@@ -1230,9 +1199,9 @@
1230	1199	'margin',
1231	1200	[
1232	1201	'label' => esc_html__( 'Margin', 'elementor' ),
1233	1202	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1203	+ 'size_units' => [ 'px', 'em', '%', 'rem', 'custom' ],
1235	1204	'allowed_dimensions' => 'vertical',
1236	1205	'placeholder' => [
1237	1206	'top' => '',
1238	1207	'right' => 'auto',
		@@ -1249,9 +1218,9 @@
1249	1218	'padding',
1250	1219	[
1251	1220	'label' => esc_html__( 'Padding', 'elementor' ),
1252	1221	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1222	+ 'size_units' => [ 'px', 'em', '%', 'rem', 'custom' ],
1254	1223	'selectors' => [
1255	1224	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1225	],
1257	1226	]
		@@ -1274,11 +1243,8 @@
1274	1243	[
1275	1244	'label' => esc_html__( 'CSS ID', 'elementor' ),
1276	1245	'type' => Controls_Manager::TEXT,
1277	1246	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1247	'dynamic' => [
1282	1248	'active' => true,
1283	1249	],
1284	1250	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1292,11 +1258,8 @@
1292	1258	[
1293	1259	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1294	1260	'type' => Controls_Manager::TEXT,
1295	1261	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1262	'dynamic' => [
1300	1263	'active' => true,
1301	1264	],
1302	1265	'prefix_class' => '',
		@@ -1304,10 +1267,8 @@
1304	1267	'classes' => 'elementor-control-direction-ltr',
1305	1268	]
1306	1269	);
1307	1270
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1271	$this->end_controls_section();
1311	1272
1312	1273	$this->start_controls_section(
1313	1274	'section_effects',
		@@ -1316,10 +1277,8 @@
1316	1277	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1278	]
1318	1279	);
1319	1280
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1281	$this->add_responsive_control(
1323	1282	'animation',
1324	1283	[
1325	1284	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1363,9 +1322,9 @@
1363	1322	);
1364	1323
1365	1324	$this->end_controls_section();
1366	1325
1367		- // Section Responsive.
	1326	+ // Section Responsive
1368	1327	$this->start_controls_section(
1369	1328	'_section_responsive',
1370	1329	[
1371	1330	'label' => esc_html__( 'Responsive', 'elementor' ),
		@@ -1400,14 +1359,9 @@
1400	1359
1401	1360	$this->add_control(
1402	1361	'responsive_description',
1403	1362	[
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		- ),
	1363	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1364	'type' => Controls_Manager::RAW_HTML,
1411	1365	'content_classes' => 'elementor-descriptor',
1412	1366	]
1413	1367	);
		@@ -1438,14 +1392,9 @@
1438	1392	if ( ! settings.background_play_once ) {
1439	1393	videoAttributes += ' loop';
1440	1394	}
1441	1395
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1396	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1397
1449	1398	if ( ! settings.background_play_on_mobile ) {
1450	1399	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1400	}
		@@ -1450,16 +1399,20 @@
1450	1399	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1400	}
1452	1401	#>
1453	1402	<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>
	1403	+ <div class="elementor-background-video-embed"></div>
	1404	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1405	</div>
1457	1406	<# } #>
1458	1407	<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>
	1408	+ <div class="elementor-shape elementor-shape-top"></div>
	1409	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1410	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1411	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1412	+ <div class="elementor-row"></div>
	1413	+ <?php } ?>
	1414	+ </div>
1462	1415	<?php
1463	1416	}
1464	1417
1465	1418	/**
		@@ -1479,24 +1432,19 @@
1479	1432	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480	1433	<?php
1481	1434	if ( 'video' === $settings['background_background'] ) :
1482	1435	if ( $settings['background_video_link'] ) :
1483		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	1436	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1437
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1438	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1439
1492	1440	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1441	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1442	}
1495	1443	?>
1496	1444	<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>
	1445	+ <?php if ( $video_properties ) : ?>
	1446	+ <div class="elementor-background-video-embed"></div>
1499	1447	<?php
1500	1448	else :
1501	1449	$video_tag_attributes = 'autoplay muted playsinline';
1502	1450	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,9 +1450,9 @@
1502	1450	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1451	$video_tag_attributes .= ' loop';
1504	1452	endif;
1505	1453	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
	1454	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php
1507	1455	// PHPCS - the variable $video_tag_attributes is a plain string.
1508	1456	echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509	1457	?>></video>
1510	1458	<?php endif; ?>
		@@ -1512,14 +1460,11 @@
1512	1460	<?php
1513	1461	endif;
1514	1462	endif;
1515	1463
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1464	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1465	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1466
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1467	if ( $has_background_overlay ) :
1523	1468	?>
1524	1469	<div class="elementor-background-overlay"></div>
1525	1470	<?php
		@@ -1533,9 +1478,11 @@
1533	1478	$this->print_shape_divider( 'bottom' );
1534	1479	}
1535	1480	?>
1536	1481	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1482	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1483	+ <div class="elementor-row">
	1484	+ <?php }
1538	1485	}
1539	1486
1540	1487	/**
1541	1488	* After section rendering.
		@@ -1546,8 +1493,11 @@
1546	1493	* @access public
1547	1494	*/
1548	1495	public function after_render() {
1549	1496	?>
	1497	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1498	+ </div>
	1499	+ <?php } ?>
1550	1500	</div>
1551	1501	</<?php
1552	1502	// PHPCS - the method get_html_tag is safe.
1553	1503	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		@@ -1632,9 +1582,9 @@
1632	1582	return;
1633	1583	}
1634	1584
1635	1585	?>
1636		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	1586	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
1637	1587	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
1638	1588	?>">
1639	1589	<?php
1640	1590	// PHPCS - The file content is being read from a strict file path structure.