← All changes | includes/elements/section.php +102 -173 4.0.9 → 3.10.0-dev1 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' ),
		@@ -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,20 +602,15 @@
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,
	608	+ 'size_units' => [ 's', 'ms' ],
619	609	'default' => [
	610	+ 'unit' => 's',
620	611	'size' => 0.3,
621	612	],
622		- 'range' => [
623		- 'px' => [
624		- 'min' => 0,
625		- 'max' => 3,
626		- 'step' => 0.1,
627		- ],
628		- ],
629	613	'render_type' => 'ui',
630	614	'separator' => 'before',
631	615	]
632	616	);
		@@ -636,9 +620,9 @@
636	620	$this->end_controls_tabs();
637	621
638	622	$this->end_controls_section();
639	623
640		- // Background Overlay.
	624	+ // Background Overlay
641	625	$this->start_controls_section(
642	626	'section_background_overlay',
643	627	[
644	628	'label' => esc_html__( 'Background Overlay', 'elementor' ),
		@@ -800,20 +784,15 @@
800	784
801	785	$this->add_control(
802	786	'background_overlay_hover_transition',
803	787	[
804		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	788	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
805	789	'type' => Controls_Manager::SLIDER,
	790	+ 'size_units' => [ 's', 'ms' ],
806	791	'default' => [
	792	+ 'unit' => 's',
807	793	'size' => 0.3,
808	794	],
809		- 'range' => [
810		- 'px' => [
811		- 'min' => 0,
812		- 'max' => 3,
813		- 'step' => 0.1,
814		- ],
815		- ],
816	795	'render_type' => 'ui',
817	796	'separator' => 'before',
818	797	]
819	798	);
		@@ -823,9 +802,9 @@
823	802	$this->end_controls_tabs();
824	803
825	804	$this->end_controls_section();
826	805
827		- // Section border.
	806	+ // Section border
828	807	$this->start_controls_section(
829	808	'section_border',
830	809	[
831	810	'label' => esc_html__( 'Border', 'elementor' ),
		@@ -853,9 +832,9 @@
853	832	'border_radius',
854	833	[
855	834	'label' => esc_html__( 'Border Radius', 'elementor' ),
856	835	'type' => Controls_Manager::DIMENSIONS,
857		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	836	+ 'size_units' => [ 'px', '%', 'em' ],
858	837	'selectors' => [
859	838	'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860	839	],
861	840	]
		@@ -889,9 +868,9 @@
889	868	'border_radius_hover',
890	869	[
891	870	'label' => esc_html__( 'Border Radius', 'elementor' ),
892	871	'type' => Controls_Manager::DIMENSIONS,
893		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	872	+ 'size_units' => [ 'px', '%', 'em' ],
894	873	'selectors' => [
895	874	'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	875	],
897	876	]
		@@ -907,21 +886,16 @@
907	886
908	887	$this->add_control(
909	888	'border_hover_transition',
910	889	[
911		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	890	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
912	891	'type' => Controls_Manager::SLIDER,
913	892	'separator' => 'before',
	893	+ 'size_units' => [ 's', 'ms' ],
914	894	'default' => [
	895	+ 'unit' => 's',
915	896	'size' => 0.3,
916	897	],
917		- 'range' => [
918		- 'px' => [
919		- 'min' => 0,
920		- 'max' => 3,
921		- 'step' => 0.1,
922		- ],
923		- ],
924	898	'conditions' => [
925	899	'relation' => 'or',
926	900	'terms' => [
927	901	[
		@@ -929,9 +903,9 @@
929	903	'operator' => '!==',
930	904	'value' => '',
931	905	],
932	906	[
933		- 'name' => 'border_hover_border',
	907	+ 'name' => 'border_border',
934	908	'operator' => '!==',
935	909	'value' => '',
936	910	],
937	911	],
		@@ -936,10 +910,10 @@
936	910	],
937	911	],
938	912	],
939	913	'selectors' => [
940		- '{{WRAPPER}}' => 'transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
941		- '{{WRAPPER}} > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}s, border-radius {{SIZE}}s, opacity {{background_overlay_hover_transition.SIZE}}s',
	914	+ '{{WRAPPER}}' => 'transition: background {{background_hover_transition.SIZE}}{{background_hover_transition.UNIT}}, border {{SIZE}}{{UNIT}}, border-radius {{SIZE}}{{UNIT}}, box-shadow {{SIZE}}{{UNIT}}',
	915	+ '{{WRAPPER}} > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}{{background_overlay_hover_transition.UNIT}}, border-radius {{SIZE}}{{UNIT}}, opacity {{background_overlay_hover_transition.SIZE}}{{background_overlay_hover_transition.UNIT}}',
942	916	],
943	917	]
944	918	);
945	919
		@@ -948,9 +922,9 @@
948	922	$this->end_controls_tabs();
949	923
950	924	$this->end_controls_section();
951	925
952		- // Section Shape Divider.
	926	+ // Section Shape Divider
953	927	$this->start_controls_section(
954	928	'section_shape_divider',
955	929	[
956	930	'label' => esc_html__( 'Shape Divider', 'elementor' ),
		@@ -959,8 +933,16 @@
959	933	);
960	934
961	935	$this->start_controls_tabs( 'tabs_shape_dividers' );
962	936
	937	+ $shapes_options = [
	938	+ '' => esc_html__( 'None', 'elementor' ),
	939	+ ];
	940	+
	941	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	942	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	943	+ }
	944	+
963	945	foreach ( [
964	946	'top' => esc_html__( 'Top', 'elementor' ),
965	947	'bottom' => esc_html__( 'Bottom', 'elementor' ),
966	948	] as $side => $side_label ) {
		@@ -976,30 +958,12 @@
976	958	$this->add_control(
977	959	$base_control_key,
978	960	[
979	961	'label' => esc_html__( 'Type', 'elementor' ),
980		- 'type' => Controls_Manager::VISUAL_CHOICE,
981		- 'label_block' => true,
982		- 'columns' => 2,
983		- 'options' => Shapes::get_shapes(),
	962	+ 'type' => Controls_Manager::SELECT,
	963	+ 'options' => $shapes_options,
984	964	'render_type' => 'none',
985	965	'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	966	]
1003	967	);
1004	968
1005	969	$this->add_control(
		@@ -1020,9 +984,8 @@
1020	984	$base_control_key . '_width',
1021	985	[
1022	986	'label' => esc_html__( 'Width', 'elementor' ),
1023	987	'type' => Controls_Manager::SLIDER,
1024		- 'size_units' => [ '%', 'vw', 'custom' ],
1025	988	'default' => [
1026	989	'unit' => '%',
1027	990	],
1028	991	'tablet_default' => [
		@@ -1035,12 +998,8 @@
1035	998	'%' => [
1036	999	'min' => 100,
1037	1000	'max' => 300,
1038	1001	],
1039		- 'vw' => [
1040		- 'min' => 100,
1041		- 'max' => 300,
1042		- ],
1043	1002	],
1044	1003	'condition' => [
1045	1004	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046	1005	],
		@@ -1054,19 +1013,12 @@
1054	1013	$base_control_key . '_height',
1055	1014	[
1056	1015	'label' => esc_html__( 'Height', 'elementor' ),
1057	1016	'type' => Controls_Manager::SLIDER,
1058		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059	1017	'range' => [
1060	1018	'px' => [
1061	1019	'max' => 500,
1062	1020	],
1063		- 'em' => [
1064		- 'max' => 50,
1065		- ],
1066		- 'rem' => [
1067		- 'max' => 50,
1068		- ],
1069	1021	],
1070	1022	'condition' => [
1071	1023	"shape_divider_$side!" => '',
1072	1024	],
		@@ -1123,9 +1075,9 @@
1123	1075	$this->end_controls_tabs();
1124	1076
1125	1077	$this->end_controls_section();
1126	1078
1127		- // Section Typography.
	1079	+ // Section Typography
1128	1080	$this->start_controls_section(
1129	1081	'section_typo',
1130	1082	[
1131	1083	'label' => esc_html__( 'Typography', 'elementor' ),
		@@ -1141,8 +1093,9 @@
1141	1093	'default' => '',
1142	1094	'selectors' => [
1143	1095	'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144	1096	],
	1097	+ 'separator' => 'none',
1145	1098	]
1146	1099	);
1147	1100
1148	1101	$this->add_control(
		@@ -1186,10 +1139,10 @@
1186	1139	[
1187	1140	'label' => esc_html__( 'Text Align', 'elementor' ),
1188	1141	'type' => Controls_Manager::CHOOSE,
1189	1142	'options' => [
1190		- 'start' => [
1191		- 'title' => esc_html__( 'Start', 'elementor' ),
	1143	+ 'left' => [
	1144	+ 'title' => esc_html__( 'Left', 'elementor' ),
1192	1145	'icon' => 'eicon-text-align-left',
1193	1146	],
1194	1147	'center' => [
1195	1148	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -1194,10 +1147,10 @@
1194	1147	'center' => [
1195	1148	'title' => esc_html__( 'Center', 'elementor' ),
1196	1149	'icon' => 'eicon-text-align-center',
1197	1150	],
1198		- 'end' => [
1199		- 'title' => esc_html__( 'End', 'elementor' ),
	1151	+ 'right' => [
	1152	+ 'title' => esc_html__( 'Right', 'elementor' ),
1200	1153	'icon' => 'eicon-text-align-right',
1201	1154	],
1202	1155	'justify' => [
1203	1156	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -1203,13 +1156,8 @@
1203	1156	'title' => esc_html__( 'Justified', 'elementor' ),
1204	1157	'icon' => 'eicon-text-align-justify',
1205	1158	],
1206	1159	],
1207		- 'classes' => 'elementor-control-start-end',
1208		- 'selectors_dictionary' => [
1209		- 'left' => is_rtl() ? 'end' : 'start',
1210		- 'right' => is_rtl() ? 'start' : 'end',
1211		- ],
1212	1160	'selectors' => [
1213	1161	'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214	1162	],
1215	1163	]
		@@ -1216,9 +1164,9 @@
1216	1164	);
1217	1165
1218	1166	$this->end_controls_section();
1219	1167
1220		- // Section Advanced.
	1168	+ // Section Advanced
1221	1169	$this->start_controls_section(
1222	1170	'section_advanced',
1223	1171	[
1224	1172	'label' => esc_html__( 'Advanced', 'elementor' ),
		@@ -1230,9 +1178,9 @@
1230	1178	'margin',
1231	1179	[
1232	1180	'label' => esc_html__( 'Margin', 'elementor' ),
1233	1181	'type' => Controls_Manager::DIMENSIONS,
1234		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1182	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235	1183	'allowed_dimensions' => 'vertical',
1236	1184	'placeholder' => [
1237	1185	'top' => '',
1238	1186	'right' => 'auto',
		@@ -1249,9 +1197,9 @@
1249	1197	'padding',
1250	1198	[
1251	1199	'label' => esc_html__( 'Padding', 'elementor' ),
1252	1200	'type' => Controls_Manager::DIMENSIONS,
1253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1201	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254	1202	'selectors' => [
1255	1203	'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	1204	],
1257	1205	]
		@@ -1274,11 +1222,8 @@
1274	1222	[
1275	1223	'label' => esc_html__( 'CSS ID', 'elementor' ),
1276	1224	'type' => Controls_Manager::TEXT,
1277	1225	'default' => '',
1278		- 'ai' => [
1279		- 'active' => false,
1280		- ],
1281	1226	'dynamic' => [
1282	1227	'active' => true,
1283	1228	],
1284	1229	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1292,11 +1237,8 @@
1292	1237	[
1293	1238	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1294	1239	'type' => Controls_Manager::TEXT,
1295	1240	'default' => '',
1296		- 'ai' => [
1297		- 'active' => false,
1298		- ],
1299	1241	'dynamic' => [
1300	1242	'active' => true,
1301	1243	],
1302	1244	'prefix_class' => '',
		@@ -1304,10 +1246,8 @@
1304	1246	'classes' => 'elementor-control-direction-ltr',
1305	1247	]
1306	1248	);
1307	1249
1308		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309		-
1310	1250	$this->end_controls_section();
1311	1251
1312	1252	$this->start_controls_section(
1313	1253	'section_effects',
		@@ -1316,10 +1256,8 @@
1316	1256	'tab' => Controls_Manager::TAB_ADVANCED,
1317	1257	]
1318	1258	);
1319	1259
1320		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321		-
1322	1260	$this->add_responsive_control(
1323	1261	'animation',
1324	1262	[
1325	1263	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1363,9 +1301,9 @@
1363	1301	);
1364	1302
1365	1303	$this->end_controls_section();
1366	1304
1367		- // Section Responsive.
	1305	+ // Section Responsive
1368	1306	$this->start_controls_section(
1369	1307	'_section_responsive',
1370	1308	[
1371	1309	'label' => esc_html__( 'Responsive', 'elementor' ),
		@@ -1400,14 +1338,9 @@
1400	1338
1401	1339	$this->add_control(
1402	1340	'responsive_description',
1403	1341	[
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		- ),
	1342	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410	1343	'type' => Controls_Manager::RAW_HTML,
1411	1344	'content_classes' => 'elementor-descriptor',
1412	1345	]
1413	1346	);
		@@ -1438,14 +1371,9 @@
1438	1371	if ( ! settings.background_play_once ) {
1439	1372	videoAttributes += ' loop';
1440	1373	}
1441	1374
1442		- view.addRenderAttribute(
1443		- 'background-video-container',
1444		- {
1445		- 'class': 'elementor-background-video-container',
1446		- }
1447		- );
	1375	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448	1376
1449	1377	if ( ! settings.background_play_on_mobile ) {
1450	1378	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1379	}
		@@ -1450,16 +1378,20 @@
1450	1378	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1451	1379	}
1452	1380	#>
1453	1381	<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>
	1382	+ <div class="elementor-background-video-embed"></div>
	1383	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456	1384	</div>
1457	1385	<# } #>
1458	1386	<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>
	1387	+ <div class="elementor-shape elementor-shape-top"></div>
	1388	+ <div class="elementor-shape elementor-shape-bottom"></div>
	1389	+ <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
	1390	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1391	+ <div class="elementor-row"></div>
	1392	+ <?php } ?>
	1393	+ </div>
1462	1394	<?php
1463	1395	}
1464	1396
1465	1397	/**
		@@ -1481,22 +1413,17 @@
1481	1413	if ( 'video' === $settings['background_background'] ) :
1482	1414	if ( $settings['background_video_link'] ) :
1483	1415	$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484	1416
1485		- $this->add_render_attribute(
1486		- 'background-video-container',
1487		- [
1488		- 'class' => 'elementor-background-video-container',
1489		- ]
1490		- );
	1417	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491	1418
1492	1419	if ( ! $settings['background_play_on_mobile'] ) {
1493		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	1420	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494	1421	}
1495	1422	?>
1496	1423	<div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
1497	1424	<?php if ( $video_properties ) : ?>
1498		- <div class="elementor-background-video-embed" role="presentation"></div>
	1425	+ <div class="elementor-background-video-embed"></div>
1499	1426	<?php
1500	1427	else :
1501	1428	$video_tag_attributes = 'autoplay muted playsinline';
1502	1429	if ( 'yes' !== $settings['background_play_once'] ) :
		@@ -1502,9 +1429,9 @@
1502	1429	if ( 'yes' !== $settings['background_play_once'] ) :
1503	1430	$video_tag_attributes .= ' loop';
1504	1431	endif;
1505	1432	?>
1506		- <video class="elementor-background-video-hosted" role="presentation" <?php
	1433	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php
1507	1434	// PHPCS - the variable $video_tag_attributes is a plain string.
1508	1435	echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509	1436	?>></video>
1510	1437	<?php endif; ?>
		@@ -1512,14 +1439,11 @@
1512	1439	<?php
1513	1440	endif;
1514	1441	endif;
1515	1442
1516		- $overlay_background = $settings['background_overlay_background'] ?? '';
1517		- $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
	1443	+ $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
	1444	+ in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518	1445
1519		- $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520		- in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521		-
1522	1446	if ( $has_background_overlay ) :
1523	1447	?>
1524	1448	<div class="elementor-background-overlay"></div>
1525	1449	<?php
		@@ -1533,9 +1457,11 @@
1533	1457	$this->print_shape_divider( 'bottom' );
1534	1458	}
1535	1459	?>
1536	1460	<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537		- <?php
	1461	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1462	+ <div class="elementor-row">
	1463	+ <?php }
1538	1464	}
1539	1465
1540	1466	/**
1541	1467	* After section rendering.
		@@ -1546,8 +1472,11 @@
1546	1472	* @access public
1547	1473	*/
1548	1474	public function after_render() {
1549	1475	?>
	1476	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	1477	+ </div>
	1478	+ <?php } ?>
1550	1479	</div>
1551	1480	</<?php
1552	1481	// PHPCS - the method get_html_tag is safe.
1553	1482	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		@@ -1632,9 +1561,9 @@
1632	1561	return;
1633	1562	}
1634	1563
1635	1564	?>
1636		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	1565	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
1637	1566	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
1638	1567	?>">
1639	1568	<?php
1640	1569	// PHPCS - The file content is being read from a strict file path structure.