← All changes | includes/elements/container.php +183 -321 4.2.0 → 3.18.3 View file →

		@@ -25,13 +25,11 @@
25	25	/**
26	26	* @var \Elementor\Core\Kits\Documents\Kit
27	27	*/
28	28	private $active_kit;
	29	+ private $logical_dimensions_inline_start;
	30	+ private $logical_dimensions_inline_end;
29	31
30		- protected function is_dynamic_content(): bool {
31		- return false;
32		- }
33		-
34	32	/**
35	33	* Container constructor.
36	34	*
37	35	* @param array $data
		@@ -38,12 +36,14 @@
38	36	* @param array|null $args
39	37	*
40	38	* @return void
41	39	*/
42		- public function __construct( array $data = [], ?array $args = null ) {
	40	+ public function __construct( array $data = [], array $args = null ) {
43	41	parent::__construct( $data, $args );
44	42
45	43	$this->active_kit = Plugin::$instance->kits_manager->get_active_kit();
	44	+ $this->logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}';
	45	+ $this->logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}';
46	46	}
47	47
48	48	/**
49	49	* Get the element type.
		@@ -81,9 +81,15 @@
81	81	return 'eicon-container';
82	82	}
83	83
84	84	public function get_keywords() {
85		- return [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Grid', 'Grid Container', 'CSS Grid', 'Layout' ];
	85	+ $keywords = [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Layout' ];
	86	+
	87	+ if ( Plugin::$instance->experiments->is_feature_active( 'container_grid' ) ) {
	88	+ array_push( $keywords, 'Grid', 'Grid Container', 'CSS Grid' );
	89	+ }
	90	+
	91	+ return $keywords;
86	92	}
87	93
88	94	public function get_panel_presets() {
89	95	return [
		@@ -125,8 +131,18 @@
125	131	'e-con',
126	132	$is_nested_class_name,
127	133	],
128	134	] );
	135	+
	136	+ if ( $this->get_data( 'isInner' ) ) {
	137	+ return;
	138	+ }
	139	+
	140	+ // Todo: Remove in version 3.21.0: https://elementor.atlassian.net/browse/ED-11884.
	141	+ // Remove together with support for physical properties inside the Mega Menu & Nested Carousel widgets.
	142	+ $this->add_render_attribute( '_wrapper', [
	143	+ 'data-core-v316-plus' => 'true',
	144	+ ] );
129	145	}
130	146
131	147	/**
132	148	* Override the initial element config to display the Container in the panel.
		@@ -139,9 +155,8 @@
139	155	$config['controls'] = $this->get_controls();
140	156	$config['tabs_controls'] = $this->get_tabs_controls();
141	157	$config['show_in_panel'] = true;
142	158	$config['categories'] = [ 'layout' ];
143		- $config['include_in_widgets_config'] = true;
144	159
145	160	return $config;
146	161	}
147	162
		@@ -162,26 +177,21 @@
162	177	if ( ! settings.background_play_once ) {
163	178	videoAttributes += ' loop';
164	179	}
165	180
166		- view.addRenderAttribute(
167		- 'background-video-container',
168		- {
169		- 'class': 'elementor-background-video-container',
170		- }
171		- );
	181	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
172	182
173	183	if ( ! settings.background_play_on_mobile ) {
174		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	184	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
175	185	}
176	186	#>
177	187	<div {{{ view.getRenderAttributeString( 'background-video-container' ) }}}>
178		- <div class="elementor-background-video-embed" role="presentation"></div>
179		- <video class="elementor-background-video-hosted" role="presentation" {{ videoAttributes }}></video>
	188	+ <div class="elementor-background-video-embed"></div>
	189	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
180	190	</div>
181	191	<# } #>
182		- <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
183		- <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
	192	+ <div class="elementor-shape elementor-shape-top"></div>
	193	+ <div class="elementor-shape elementor-shape-bottom"></div>
184	194	<# if ( 'boxed' === settings.content_width ) { #>
185	195	</div>
186	196	<# } #>
187	197	<?php
		@@ -202,24 +212,19 @@
202	212	if ( ! $settings['background_video_link'] ) {
203	213	return;
204	214	}
205	215
206		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	216	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
207	217
208		- $this->add_render_attribute(
209		- 'background-video-container',
210		- [
211		- 'class' => 'elementor-background-video-container',
212		- ]
213		- );
	218	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
214	219
215	220	if ( ! $settings['background_play_on_mobile'] ) {
216		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	221	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
217	222	}
218	223
219	224	?><div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
220		- <?php if ( $is_embed_video ) : ?>
221		- <div class="elementor-background-video-embed" role="presentation"></div>
	225	+ <?php if ( $video_properties ) : ?>
	226	+ <div class="elementor-background-video-embed"></div>
222	227	<?php
223	228	else :
224	229	$video_tag_attributes = 'autoplay muted playsinline';
225	230
		@@ -226,9 +231,9 @@
226	231	if ( 'yes' !== $settings['background_play_once'] ) {
227	232	$video_tag_attributes .= ' loop';
228	233	}
229	234	?>
230		- <video class="elementor-background-video-hosted" role="presentation" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
	235	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
231	236	<?php endif; ?>
232	237	</div><?php
233	238	}
234	239
		@@ -251,9 +256,9 @@
251	256	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
252	257	return;
253	258	}
254	259	?>
255		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	260	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
256	261	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
257	262	?>">
258	263	<?php
259	264	// PHPCS - The file content is being read from a strict file path structure.
		@@ -333,19 +338,72 @@
333	338	*
334	339	* @return \Elementor\Element_Base|\Elementor\Widget_Base|null
335	340	*/
336	341	protected function _get_default_child_type( array $element_data ) {
337		- $el_types = array_keys( Plugin::$instance->elements_manager->get_element_types() );
	342	+ if ( 'container' === $element_data['elType'] ) {
	343	+ return Plugin::$instance->elements_manager->get_element_types( 'container' );
	344	+ }
338	345
339		- if ( in_array( $element_data['elType'], $el_types, true ) ) {
340		- return Plugin::$instance->elements_manager->get_element_types( $element_data['elType'] );
	346	+ return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	347	+ }
	348	+
	349	+ protected function get_flex_control_options( $is_container_grid_active ) {
	350	+ $flex_control_options = [
	351	+ 'name' => 'flex',
	352	+ 'selector' => '{{WRAPPER}}',
	353	+ 'fields_options' => [
	354	+ 'gap' => [
	355	+ 'label' => esc_html__( 'Gaps', 'elementor' ),
	356	+ 'device_args' => [
	357	+ Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
	358	+ // Use the default gap from the kit as a placeholder.
	359	+ 'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
	360	+ ],
	361	+ ],
	362	+ ],
	363	+ ],
	364	+ ];
	365	+
	366	+ if ( $is_container_grid_active ) {
	367	+ $flex_control_options['condition'] = [
	368	+ 'container_type' => 'flex',
	369	+ ];
341	370	}
342	371
343		- if ( ! isset( $element_data['widgetType'] ) ) {
344		- return null;
	372	+ return $flex_control_options;
	373	+ }
	374	+
	375	+ protected function get_container_type_control_options( $is_container_grid_active ) {
	376	+ if ( $is_container_grid_active ) {
	377	+ return [
	378	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	379	+ 'type' => Controls_Manager::SELECT,
	380	+ 'default' => 'flex',
	381	+ 'prefix_class' => 'e-',
	382	+ 'options' => [
	383	+ 'flex' => esc_html__( 'Flexbox', 'elementor' ),
	384	+ 'grid' => esc_html__( 'Grid', 'elementor' ),
	385	+ ],
	386	+ 'selectors' => [
	387	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	388	+ ],
	389	+ 'separator' => 'after',
	390	+ 'frontend_available' => true,
	391	+ ];
345	392	}
346	393
347		- return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	394	+ // TODO: This can be removed when the 'Container Grid Experiment' is merged.
	395	+ return [
	396	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	397	+ 'type' => Controls_Manager::HIDDEN,
	398	+ 'render_type' => 'none',
	399	+ 'default' => 'flex',
	400	+ 'prefix_class' => 'e-',
	401	+ 'selectors' => [
	402	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	403	+ ],
	404	+ 'separator' => 'after',
	405	+ ];
348	406	}
349	407
350	408	/**
351	409	* Register the Container's layout controls.
		@@ -368,25 +426,13 @@
368	426	} else {
369	427	$min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
370	428	}
371	429
	430	+ $is_container_grid_active = Plugin::$instance->experiments->is_feature_active( 'container_grid' );
	431	+
372	432	$this->add_control(
373	433	'container_type',
374		- [
375		- 'label' => esc_html__( 'Container Layout', 'elementor' ),
376		- 'type' => Controls_Manager::SELECT,
377		- 'default' => 'flex',
378		- 'prefix_class' => 'e-',
379		- 'options' => [
380		- 'flex' => esc_html__( 'Flexbox', 'elementor' ),
381		- 'grid' => esc_html__( 'Grid', 'elementor' ),
382		- ],
383		- 'selectors' => [
384		- '{{WRAPPER}}' => '--display: {{VALUE}}',
385		- ],
386		- 'separator' => 'after',
387		- 'editor_available' => true,
388		- ]
	434	+ $this->get_container_type_control_options( $is_container_grid_active )
389	435	);
390	436
391	437	$this->add_control(
392	438	'content_width',
		@@ -399,9 +445,9 @@
399	445	'full' => esc_html__( 'Full Width', 'elementor' ),
400	446	],
401	447	'render_type' => 'template',
402	448	'prefix_class' => 'e-con-',
403		- 'editor_available' => true,
	449	+ 'frontend_available' => true,
404	450	]
405	451	);
406	452
407	453	$width_control_settings = [
		@@ -412,8 +458,16 @@
412	458	'px' => [
413	459	'min' => 500,
414	460	'max' => 1600,
415	461	],
	462	+ '%' => [
	463	+ 'min' => 0,
	464	+ 'max' => 100,
	465	+ ],
	466	+ 'vw' => [
	467	+ 'min' => 0,
	468	+ 'max' => 100,
	469	+ ],
416	470	],
417	471	'default' => [
418	472	'unit' => '%',
419	473	],
		@@ -423,8 +477,9 @@
423	477	Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device,
424	478	Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device,
425	479	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device,
426	480	],
	481	+ 'separator' => 'none',
427	482	];
428	483
429	484	$this->add_responsive_control(
430	485	'width',
		@@ -488,13 +543,17 @@
488	543	'type' => Controls_Manager::SLIDER,
489	544	'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
490	545	'range' => [
491	546	'px' => [
	547	+ 'min' => 0,
492	548	'max' => 1440,
493	549	],
	550	+ 'vh' => [
	551	+ 'min' => 0,
	552	+ 'max' => 100,
	553	+ ],
494	554	],
495	555	'description' => sprintf(
496		- /* translators: %s: 100vh. */
497	556	esc_html__( 'To achieve full height Container use %s.', 'elementor' ),
498	557	'100vh'
499	558	),
500	559	'selectors' => [
		@@ -504,38 +563,23 @@
504	563	);
505	564
506	565	$this->add_group_control(
507	566	Group_Control_Flex_Container::get_type(),
508		- [
509		- 'name' => 'flex',
510		- 'selector' => '{{WRAPPER}}',
511		- 'fields_options' => [
512		- 'gap' => [
513		- 'label' => esc_html__( 'Gaps', 'elementor' ),
514		- 'device_args' => [
515		- Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
516		- // Use the default gap from the kit as a placeholder.
517		- 'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
518		- ],
519		- ],
520		- ],
521		- ],
522		- 'condition' => [
523		- 'container_type' => [ 'flex' ],
524		- ],
525		- ]
	567	+ $this->get_flex_control_options( $is_container_grid_active )
526	568	);
527	569
528		- $this->add_group_control(
529		- Group_Control_Grid_Container::get_type(),
530		- [
531		- 'name' => 'grid',
532		- 'selector' => '{{WRAPPER}}',
533		- 'condition' => [
534		- 'container_type' => [ 'grid' ],
535		- ],
536		- ]
537		- );
	570	+ if ( $is_container_grid_active ) {
	571	+ $this->add_group_control(
	572	+ Group_Control_Grid_Container::get_type(),
	573	+ [
	574	+ 'name' => 'grid',
	575	+ 'selector' => '{{WRAPPER}}',
	576	+ 'condition' => [
	577	+ 'container_type' => [ 'grid' ],
	578	+ ],
	579	+ ]
	580	+ );
	581	+ }
538	582
539	583	$this->end_controls_section();
540	584	}
541	585
		@@ -597,11 +641,11 @@
597	641
598	642	$this->add_control(
599	643	'link_note',
600	644	[
601		- 'type' => Controls_Manager::ALERT,
602		- 'alert_type' => 'warning',
603		- 'content' => esc_html__( 'Don’t add links to elements nested in this container - it will break the layout.', 'elementor' ),
	645	+ 'type' => Controls_Manager::RAW_HTML,
	646	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
	647	+ 'raw' => esc_html__( 'Don’t add links to elements nested in this container - it will break the layout.', 'elementor' ),
604	648	'condition' => [
605	649	'html_tag' => 'a',
606	650	],
607	651	]
		@@ -669,45 +713,14 @@
669	713	'fields_options' => [
670	714	'background' => [
671	715	'frontend_available' => true,
672	716	],
673		- ],
674		- ]
675		- );
676		-
677		- $this->add_control(
678		- 'handle_slideshow_asset_loading',
679		- [
680		- 'type' => Controls_Manager::HIDDEN,
681		- 'assets' => [
682		- 'styles' => [
683		- [
684		- 'name' => 'e-swiper',
685		- 'conditions' => [
686		- 'terms' => [
687		- [
688		- 'name' => 'background_background',
689		- 'operator' => '===',
690		- 'value' => 'slideshow',
691		- ],
692		- ],
693		- ],
	717	+ 'image' => [
	718	+ 'background_lazyload' => [
	719	+ 'active' => true,
	720	+ 'keys' => [ 'background_image', 'url' ],
694	721	],
695	722	],
696		- 'scripts' => [
697		- [
698		- 'name' => 'swiper',
699		- 'conditions' => [
700		- 'terms' => [
701		- [
702		- 'name' => 'background_background',
703		- 'operator' => '===',
704		- 'value' => 'slideshow',
705		- ],
706		- ],
707		- ],
708		- ],
709		- ],
710	723	],
711	724	]
712	725	);
713	726
		@@ -733,25 +746,15 @@
733	746
734	747	$this->add_control(
735	748	'background_hover_transition',
736	749	[
737		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	750	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
738	751	'type' => Controls_Manager::SLIDER,
739	752	'default' => [
740	753	'size' => 0.3,
741	754	],
742		- 'range' => [
743		- 'px' => [
744		- 'min' => 0,
745		- 'max' => 3,
746		- 'step' => 0.1,
747		- ],
748		- ],
749	755	'render_type' => 'ui',
750	756	'separator' => 'before',
751		- 'condition' => [
752		- 'background_hover_background' => [ 'classic', 'gradient' ],
753		- ],
754	757	'selectors' => [
755	758	'{{WRAPPER}}' => '--background-transition: {{SIZE}}s;',
756	759	],
757	760	]
		@@ -803,8 +806,14 @@
803	806	// Hack to set the `::before` content in order to render it only when there is a background overlay.
804	807	$background_overlay_selector => '--background-overlay: \'\';',
805	808	],
806	809	],
	810	+ 'image' => [
	811	+ 'background_lazyload' => [
	812	+ 'active' => true,
	813	+ 'keys' => [ 'background_overlay_image', 'url' ],
	814	+ ],
	815	+ ],
807	816	],
808	817	]
809	818	);
810	819
		@@ -944,16 +953,23 @@
944	953	],
945	954	]
946	955	);
947	956
	957	+ $this->add_group_control(
	958	+ Group_Control_Css_Filter::get_type(),
	959	+ [
	960	+ 'name' => 'css_filters_hover',
	961	+ 'selector' => '{{WRAPPER}}:hover::before',
	962	+ ]
	963	+ );
	964	+
948	965	$this->add_control(
949	966	'background_overlay_hover_transition',
950	967	[
951		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	968	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
952	969	'type' => Controls_Manager::SLIDER,
953	970	'range' => [
954	971	'px' => [
955		- 'min' => 0,
956	972	'max' => 3,
957	973	'step' => 0.1,
958	974	],
959	975	],
		@@ -958,11 +974,8 @@
958	974	],
959	975	],
960	976	'render_type' => 'ui',
961	977	'separator' => 'before',
962		- 'condition' => [
963		- 'background_overlay_hover_background' => [ 'classic', 'gradient' ],
964		- ],
965	978	'selectors' => [
966	979	'{{WRAPPER}}, {{WRAPPER}}::before' => '--overlay-transition: {{SIZE}}s;',
967	980	],
968	981	]
		@@ -967,16 +980,8 @@
967	980	],
968	981	]
969	982	);
970	983
971		- $this->add_group_control(
972		- Group_Control_Css_Filter::get_type(),
973		- [
974		- 'name' => 'css_filters_hover',
975		- 'selector' => '{{WRAPPER}}:hover::before',
976		- ]
977		- );
978		-
979	984	$this->end_controls_tab();
980	985
981	986	$this->end_controls_tabs();
982	987
		@@ -1016,9 +1021,9 @@
1016	1021	'selector' => '{{WRAPPER}}',
1017	1022	'fields_options' => [
1018	1023	'width' => [
1019	1024	'selectors' => [
1020		- '{{SELECTOR}}' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-top-width: {{TOP}}{{UNIT}}; --border-right-width: {{RIGHT}}{{UNIT}}; --border-bottom-width: {{BOTTOM}}{{UNIT}}; --border-left-width: {{LEFT}}{{UNIT}};',
	1025	+ '{{SELECTOR}}' => "border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-block-start-width: {{TOP}}{{UNIT}}; --border-inline-end-width: $this->logical_dimensions_inline_end; --border-block-end-width: {{BOTTOM}}{{UNIT}}; --border-inline-start-width: $this->logical_dimensions_inline_start;",
1021	1026	],
1022	1027	],
1023	1028	'color' => [
1024	1029	'selectors' => [
		@@ -1072,9 +1077,9 @@
1072	1077	'selector' => '{{WRAPPER}}:hover',
1073	1078	'fields_options' => [
1074	1079	'width' => [
1075	1080	'selectors' => [
1076		- '{{SELECTOR}}' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-top-width: {{TOP}}{{UNIT}}; --border-right-width: {{RIGHT}}{{UNIT}}; --border-bottom-width: {{BOTTOM}}{{UNIT}}; --border-left-width: {{LEFT}}{{UNIT}};',
	1081	+ '{{SELECTOR}}' => "border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-block-start-width: {{TOP}}{{UNIT}}; --border-inline-end-width: $this->logical_dimensions_inline_end; --border-block-end-width: {{BOTTOM}}{{UNIT}}; --border-inline-start-width: $this->logical_dimensions_inline_start;",
1077	1082	],
1078	1083	],
1079	1084	'color' => [
1080	1085	'selectors' => [
		@@ -1091,9 +1096,9 @@
1091	1096	'label' => esc_html__( 'Border Radius', 'elementor' ),
1092	1097	'type' => Controls_Manager::DIMENSIONS,
1093	1098	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1094	1099	'selectors' => [
1095		- '{{WRAPPER}}:hover' => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-top-left-radius: {{TOP}}{{UNIT}}; --border-top-right-radius: {{RIGHT}}{{UNIT}}; --border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; --border-bottom-left-radius: {{LEFT}}{{UNIT}};',
	1100	+ '{{WRAPPER}}:hover' => "--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-top-left-radius: {{TOP}}{{UNIT}}; --border-top-right-radius: $this->logical_dimensions_inline_end; --border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; --border-bottom-left-radius: $this->logical_dimensions_inline_start;",
1096	1101	],
1097	1102	]
1098	1103	);
1099	1104
		@@ -1107,9 +1112,9 @@
1107	1112
1108	1113	$this->add_control(
1109	1114	'border_hover_transition',
1110	1115	[
1111		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	1116	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
1112	1117	'type' => Controls_Manager::SLIDER,
1113	1118	'separator' => 'before',
1114	1119	'default' => [
1115	1120	'size' => 0.3,
		@@ -1115,9 +1120,8 @@
1115	1120	'size' => 0.3,
1116	1121	],
1117	1122	'range' => [
1118	1123	'px' => [
1119		- 'min' => 0,
1120	1124	'max' => 3,
1121	1125	'step' => 0.1,
1122	1126	],
1123	1127	],
		@@ -1124,32 +1128,17 @@
1124	1128	'conditions' => [
1125	1129	'relation' => 'or',
1126	1130	'terms' => [
1127	1131	[
1128		- 'name' => 'border_hover_border',
	1132	+ 'name' => 'background_background',
1129	1133	'operator' => '!==',
1130	1134	'value' => '',
1131	1135	],
1132	1136	[
1133		- 'name' => 'border_radius_hover[top]',
	1137	+ 'name' => 'border_border',
1134	1138	'operator' => '!==',
1135	1139	'value' => '',
1136	1140	],
1137		- [
1138		- 'name' => 'border_radius_hover[right]',
1139		- 'operator' => '!==',
1140		- 'value' => '',
1141		- ],
1142		- [
1143		- 'name' => 'border_radius_hover[bottom]',
1144		- 'operator' => '!==',
1145		- 'value' => '',
1146		- ],
1147		- [
1148		- 'name' => 'border_radius_hover[left]',
1149		- 'operator' => '!==',
1150		- 'value' => '',
1151		- ],
1152	1141	],
1153	1142	],
1154	1143	'selectors' => [
1155	1144	'{{WRAPPER}}, {{WRAPPER}}::before' => '--border-transition: {{SIZE}}s;',
		@@ -1180,8 +1169,16 @@
1180	1169	);
1181	1170
1182	1171	$this->start_controls_tabs( 'tabs_shape_dividers' );
1183	1172
	1173	+ $shapes_options = [
	1174	+ '' => esc_html__( 'None', 'elementor' ),
	1175	+ ];
	1176	+
	1177	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	1178	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	1179	+ }
	1180	+
1184	1181	foreach ( [
1185	1182	'top' => esc_html__( 'Top', 'elementor' ),
1186	1183	'bottom' => esc_html__( 'Bottom', 'elementor' ),
1187	1184	] as $side => $side_label ) {
		@@ -1197,30 +1194,12 @@
1197	1194	$this->add_control(
1198	1195	$base_control_key,
1199	1196	[
1200	1197	'label' => esc_html__( 'Type', 'elementor' ),
1201		- 'type' => Controls_Manager::VISUAL_CHOICE,
1202		- 'label_block' => true,
1203		- 'columns' => 2,
1204		- 'options' => Shapes::get_shapes(),
	1198	+ 'type' => Controls_Manager::SELECT,
	1199	+ 'options' => $shapes_options,
1205	1200	'render_type' => 'none',
1206	1201	'frontend_available' => true,
1207		- 'assets' => [
1208		- 'styles' => [
1209		- [
1210		- 'name' => 'e-shapes',
1211		- 'conditions' => [
1212		- 'terms' => [
1213		- [
1214		- 'name' => $base_control_key,
1215		- 'operator' => '!==',
1216		- 'value' => '',
1217		- ],
1218		- ],
1219		- ],
1220		- ],
1221		- ],
1222		- ],
1223	1202	]
1224	1203	);
1225	1204
1226	1205	$this->add_control(
		@@ -1241,9 +1220,8 @@
1241	1220	$base_control_key . '_width',
1242	1221	[
1243	1222	'label' => esc_html__( 'Width', 'elementor' ),
1244	1223	'type' => Controls_Manager::SLIDER,
1245		- 'size_units' => [ '%', 'vw', 'custom' ],
1246	1224	'default' => [
1247	1225	'unit' => '%',
1248	1226	],
1249	1227	'tablet_default' => [
		@@ -1256,12 +1234,8 @@
1256	1234	'%' => [
1257	1235	'min' => 100,
1258	1236	'max' => 300,
1259	1237	],
1260		- 'vw' => [
1261		- 'min' => 100,
1262		- 'max' => 300,
1263		- ],
1264	1238	],
1265	1239	'condition' => [
1266	1240	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1267	1241	],
		@@ -1275,19 +1249,12 @@
1275	1249	$base_control_key . '_height',
1276	1250	[
1277	1251	'label' => esc_html__( 'Height', 'elementor' ),
1278	1252	'type' => Controls_Manager::SLIDER,
1279		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1280	1253	'range' => [
1281	1254	'px' => [
1282	1255	'max' => 500,
1283	1256	],
1284		- 'em' => [
1285		- 'max' => 50,
1286		- ],
1287		- 'rem' => [
1288		- 'max' => 50,
1289		- ],
1290	1257	],
1291	1258	'condition' => [
1292	1259	"shape_divider_$side!" => '',
1293	1260	],
		@@ -1380,9 +1347,9 @@
1380	1347	'label' => esc_html__( 'Margin', 'elementor' ),
1381	1348	'type' => Controls_Manager::DIMENSIONS,
1382	1349	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1383	1350	'selectors' => [
1384		- '{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left: {{LEFT}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}};',
	1351	+ '{{WRAPPER}}' => "--margin-block-start: {{TOP}}{{UNIT}}; --margin-block-end: {{BOTTOM}}{{UNIT}}; --margin-inline-start: $this->logical_dimensions_inline_start; --margin-inline-end: $this->logical_dimensions_inline_end;",
1385	1352	],
1386	1353	]
1387	1354	);
1388	1355
		@@ -1392,111 +1359,13 @@
1392	1359	'label' => esc_html__( 'Padding', 'elementor' ),
1393	1360	'type' => Controls_Manager::DIMENSIONS,
1394	1361	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1395	1362	'selectors' => [
1396		- '{{WRAPPER}}' => '--padding-top: {{TOP}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}};',
	1363	+ '{{WRAPPER}}' => "--padding-block-start: {{TOP}}{{UNIT}}; --padding-block-end: {{BOTTOM}}{{UNIT}}; --padding-inline-start: $this->logical_dimensions_inline_start; --padding-inline-end: $this->logical_dimensions_inline_end;",
1397	1364	],
1398	1365	]
1399	1366	);
1400	1367
1401		- $this->add_control(
1402		- 'heading_grid_item',
1403		- [
1404		- 'type' => Controls_Manager::HEADING,
1405		- 'label' => esc_html__( 'Grid Item', 'elementor' ),
1406		- 'separator' => 'before',
1407		- ]
1408		- );
1409		-
1410		- $this->add_responsive_control(
1411		- 'grid_column',
1412		- [
1413		- 'label' => esc_html__( 'Column Span', 'elementor' ),
1414		- 'type' => Controls_Manager::SELECT,
1415		- 'options' => [
1416		- '' => ' ' . esc_html__( 'Default', 'elementor' ),
1417		- '1' => '1',
1418		- '2' => '2',
1419		- '3' => '3',
1420		- '4' => '4',
1421		- '5' => '5',
1422		- '6' => '6',
1423		- '7' => '7',
1424		- '8' => '8',
1425		- '9' => '9',
1426		- '10' => '10',
1427		- '11' => '11',
1428		- '12' => '12',
1429		- 'custom' => esc_html__( 'Custom', 'elementor' ),
1430		- ],
1431		- 'selectors' => [
1432		- '{{WRAPPER}}' => 'grid-column: span {{VALUE}};',
1433		- ],
1434		- ]
1435		- );
1436		-
1437		- $this->add_responsive_control(
1438		- 'grid_column_custom',
1439		- [
1440		- 'label' => esc_html__( 'Custom', 'elementor' ),
1441		- 'type' => Controls_Manager::TEXT,
1442		- 'ai' => [
1443		- 'active' => false,
1444		- ],
1445		- 'selectors' => [
1446		- '{{WRAPPER}}' => 'grid-column: {{VALUE}}',
1447		- ],
1448		- 'condition' => [
1449		- 'grid_column' => 'custom',
1450		- ],
1451		- ]
1452		- );
1453		-
1454		- $this->add_responsive_control(
1455		- 'grid_row',
1456		- [
1457		- 'label' => esc_html__( 'Row Span', 'elementor' ),
1458		- 'type' => Controls_Manager::SELECT,
1459		- 'options' => [
1460		- '' => ' ' . esc_html__( 'Default', 'elementor' ),
1461		- '1' => '1',
1462		- '2' => '2',
1463		- '3' => '3',
1464		- '4' => '4',
1465		- '5' => '5',
1466		- '6' => '6',
1467		- '7' => '7',
1468		- '8' => '8',
1469		- '9' => '9',
1470		- '10' => '10',
1471		- '11' => '11',
1472		- '12' => '12',
1473		- 'custom' => esc_html__( 'Custom', 'elementor' ),
1474		- ],
1475		- 'selectors' => [
1476		- '{{WRAPPER}}' => 'grid-row: span {{VALUE}};',
1477		- ],
1478		- ]
1479		- );
1480		-
1481		- $this->add_responsive_control(
1482		- 'grid_row_custom',
1483		- [
1484		- 'label' => esc_html__( 'Custom', 'elementor' ),
1485		- 'type' => Controls_Manager::TEXT,
1486		- 'separator' => 'after',
1487		- 'ai' => [
1488		- 'active' => false,
1489		- ],
1490		- 'selectors' => [
1491		- '{{WRAPPER}}' => 'grid-row: {{VALUE}}',
1492		- ],
1493		- 'condition' => [
1494		- 'grid_row' => 'custom',
1495		- ],
1496		- ]
1497		- );
1498		-
1499	1368	$this->add_group_control(
1500	1369	Group_Control_Flex_Item::get_type(),
1501	1370	[
1502	1371	'name' => '_flex',
		@@ -1515,12 +1384,11 @@
1515	1384
1516	1385	$this->add_control(
1517	1386	'position_description',
1518	1387	[
1519		- 'type' => Controls_Manager::ALERT,
1520		- 'alert_type' => 'warning',
1521		- 'heading' => esc_html__( 'Please note!', 'elementor' ),
1522		- 'content' => esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
	1388	+ 'raw' => '<strong>' . esc_html__( 'Please note!', 'elementor' ) . '</strong> ' . esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
	1389	+ 'type' => Controls_Manager::RAW_HTML,
	1390	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
1523	1391	'render_type' => 'ui',
1524	1392	'condition' => [
1525	1393	'position!' => '',
1526	1394	],
		@@ -1586,8 +1454,9 @@
1586	1454	'range' => [
1587	1455	'px' => [
1588	1456	'min' => -1000,
1589	1457	'max' => 1000,
	1458	+ 'step' => 1,
1590	1459	],
1591	1460	'%' => [
1592	1461	'min' => -200,
1593	1462	'max' => 200,
		@@ -1601,9 +1470,9 @@
1601	1470	'max' => 200,
1602	1471	],
1603	1472	],
1604	1473	'default' => [
1605		- 'size' => 0,
	1474	+ 'size' => '0',
1606	1475	],
1607	1476	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1608	1477	'selectors' => [
1609	1478	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
		@@ -1624,8 +1493,9 @@
1624	1493	'range' => [
1625	1494	'px' => [
1626	1495	'min' => -1000,
1627	1496	'max' => 1000,
	1497	+ 'step' => 0.1,
1628	1498	],
1629	1499	'%' => [
1630	1500	'min' => -200,
1631	1501	'max' => 200,
		@@ -1639,9 +1509,9 @@
1639	1509	'max' => 200,
1640	1510	],
1641	1511	],
1642	1512	'default' => [
1643		- 'size' => 0,
	1513	+ 'size' => '0',
1644	1514	],
1645	1515	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1646	1516	'selectors' => [
1647	1517	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
		@@ -1686,8 +1556,9 @@
1686	1556	'range' => [
1687	1557	'px' => [
1688	1558	'min' => -1000,
1689	1559	'max' => 1000,
	1560	+ 'step' => 1,
1690	1561	],
1691	1562	'%' => [
1692	1563	'min' => -200,
1693	1564	'max' => 200,
		@@ -1702,9 +1573,9 @@
1702	1573	],
1703	1574	],
1704	1575	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1705	1576	'default' => [
1706		- 'size' => 0,
	1577	+ 'size' => '0',
1707	1578	],
1708	1579	'selectors' => [
1709	1580	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
1710	1581	],
		@@ -1723,8 +1594,9 @@
1723	1594	'range' => [
1724	1595	'px' => [
1725	1596	'min' => -1000,
1726	1597	'max' => 1000,
	1598	+ 'step' => 1,
1727	1599	],
1728	1600	'%' => [
1729	1601	'min' => -200,
1730	1602	'max' => 200,
		@@ -1739,9 +1611,9 @@
1739	1611	],
1740	1612	],
1741	1613	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1742	1614	'default' => [
1743		- 'size' => 0,
	1615	+ 'size' => '0',
1744	1616	],
1745	1617	'selectors' => [
1746	1618	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
1747	1619	],
		@@ -1799,10 +1671,8 @@
1799	1671	'classes' => 'elementor-control-direction-ltr',
1800	1672	]
1801	1673	);
1802	1674
1803		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1804		-
1805	1675	$this->end_controls_section();
1806	1676	}
1807	1677
1808	1678	/**
		@@ -1818,10 +1688,8 @@
1818	1688	'tab' => Controls_Manager::TAB_ADVANCED,
1819	1689	]
1820	1690	);
1821	1691
1822		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1823		-
1824	1692	$this->add_responsive_control(
1825	1693	'animation',
1826	1694	[
1827	1695	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1937,11 +1805,11 @@
1937	1805
1938	1806	$container->add_control(
1939	1807	'transform_sticky_notice',
1940	1808	[
1941		- 'type' => Controls_Manager::ALERT,
1942		- 'alert_type' => 'warning',
1943		- 'content' => esc_html__( 'Note: Avoid applying transform properties on sticky containers. Doing so might cause unexpected results.', 'elementor' ),
	1809	+ 'type' => Controls_Manager::RAW_HTML,
	1810	+ 'raw' => esc_html__( 'Note: Avoid applying transform properties on sticky containers. Doing so might cause unexpected results.', 'elementor' ),
	1811	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
1944	1812	]
1945	1813	);
1946	1814	} );
1947	1815	}
		@@ -1961,11 +1829,11 @@
1961	1829	return self::slider_to_gaps_converter( $element );
1962	1830	}
1963	1831
1964	1832	/**
1965		- * Convert slider to gaps control for the 3.16 upgrade script
	1833	+ * convert slider to gaps control for the 3.16 upgrade script
1966	1834	*
1967		- * @param array $element
	1835	+ * @param $element
1968	1836	* @return array
1969	1837	*/
1970	1838	public static function slider_to_gaps_converter( $element ) {
1971	1839	$breakpoints = array_keys( (array) Plugin::$instance->breakpoints->get_breakpoints() );
		@@ -1976,15 +1844,9 @@
1976	1844	$control = 'desktop' !== $breakpoint
1977	1845	? $control_name . '_' . $breakpoint
1978	1846	: $control_name;
1979	1847
1980		- if ( ! isset( $element['settings'][ $control ] ) ) {
1981		- continue;
1982		- }
1983		-
1984		- $already_using_gaps_control = isset( $element['settings'][ $control ]['isLinked'] ); // Slider control won't have the 'isLinked' property.
1985		-
1986		- if ( ! $already_using_gaps_control ) {
	1848	+ if ( isset( $element['settings'][ $control ] ) ) {
1987	1849	$old_size = strval( $element['settings'][ $control ]['size'] );
1988	1850
1989	1851	$element['settings'][ $control ]['column'] = $old_size;
1990	1852	$element['settings'][ $control ]['row'] = $old_size;