← All changes | includes/elements/container.php +159 -553 4.1.4 → 3.6.2 View file →

		@@ -10,9 +10,8 @@
10	10	use Elementor\Group_Control_Box_Shadow;
11	11	use Elementor\Group_Control_Css_Filter;
12	12	use Elementor\Group_Control_Flex_Container;
13	13	use Elementor\Group_Control_Flex_Item;
14		-use Elementor\Group_Control_Grid_Container;
15	14	use Elementor\Plugin;
16	15	use Elementor\Shapes;
17	16	use Elementor\Utils;
18	17
		@@ -26,12 +25,8 @@
26	25	* @var \Elementor\Core\Kits\Documents\Kit
27	26	*/
28	27	private $active_kit;
29	28
30		- protected function is_dynamic_content(): bool {
31		- return false;
32		- }
33		-
34	29	/**
35	30	* Container constructor.
36	31	*
37	32	* @param array $data
		@@ -38,9 +33,9 @@
38	33	* @param array|null $args
39	34	*
40	35	* @return void
41	36	*/
42		- public function __construct( array $data = [], ?array $args = null ) {
	37	+ public function __construct( array $data = [], array $args = null ) {
43	38	parent::__construct( $data, $args );
44	39
45	40	$this->active_kit = Plugin::$instance->kits_manager->get_active_kit();
46	41	}
		@@ -80,37 +75,8 @@
80	75	public function get_icon() {
81	76	return 'eicon-container';
82	77	}
83	78
84		- public function get_keywords() {
85		- return [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Grid', 'Grid Container', 'CSS Grid', 'Layout' ];
86		- }
87		-
88		- public function get_panel_presets() {
89		- return [
90		- 'container_grid' => [
91		- 'replacements' => [
92		- 'name' => 'container_grid',
93		- 'controls' => [
94		- 'container_type' => [ 'default' => 'grid' ],
95		- ],
96		- 'title' => esc_html__( 'Grid', 'elementor' ),
97		- 'icon' => 'eicon-container-grid',
98		- 'custom' => [
99		- 'isPreset' => true,
100		- 'originalWidget' => $this->get_name(),
101		- 'presetWidget' => 'container_grid',
102		- 'preset_settings' => [
103		- 'container_type' => 'grid',
104		- 'presetTitle' => esc_html__( 'Grid', 'elementor' ),
105		- 'presetIcon' => 'eicon-container-grid',
106		- ],
107		- ],
108		- ],
109		- ],
110		- ];
111		- }
112		-
113	79	/**
114	80	* Override the render attributes to add a custom wrapper class.
115	81	*
116	82	* @return void
		@@ -117,14 +83,11 @@
117	83	*/
118	84	protected function add_render_attributes() {
119	85	parent::add_render_attributes();
120	86
121		- $is_nested_class_name = $this->get_data( 'isInner' ) ? 'e-child' : 'e-parent';
122		-
123	87	$this->add_render_attribute( '_wrapper', [
124	88	'class' => [
125		- 'e-con',
126		- $is_nested_class_name,
	89	+ 'e-container',
127	90	],
128	91	] );
129	92	}
130	93
		@@ -138,10 +101,9 @@
138	101
139	102	$config['controls'] = $this->get_controls();
140	103	$config['tabs_controls'] = $this->get_tabs_controls();
141	104	$config['show_in_panel'] = true;
142		- $config['categories'] = [ 'layout' ];
143		- $config['include_in_widgets_config'] = true;
	105	+ $config['categories'] = [ 'basic' ];
144	106
145	107	return $config;
146	108	}
147	109
		@@ -151,12 +113,9 @@
151	113	* @return void
152	114	*/
153	115	protected function content_template() {
154	116	?>
155		- <# if ( 'boxed' === settings.content_width ) { #>
156		- <div class="e-con-inner">
157	117	<#
158		- }
159	118	if ( settings.background_video_link ) {
160	119	let videoAttributes = 'autoplay muted playsinline';
161	120
162	121	if ( ! settings.background_play_once ) {
		@@ -162,29 +121,21 @@
162	121	if ( ! settings.background_play_once ) {
163	122	videoAttributes += ' loop';
164	123	}
165	124
166		- view.addRenderAttribute(
167		- 'background-video-container',
168		- {
169		- 'class': 'elementor-background-video-container',
170		- }
171		- );
	125	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
172	126
173	127	if ( ! settings.background_play_on_mobile ) {
174		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	128	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
175	129	}
176	130	#>
177	131	<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>
	132	+ <div class="elementor-background-video-embed"></div>
	133	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
180	134	</div>
181	135	<# } #>
182		- <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
183		- <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
184		- <# if ( 'boxed' === settings.content_width ) { #>
185		- </div>
186		- <# } #>
	136	+ <div class="elementor-shape elementor-shape-top"></div>
	137	+ <div class="elementor-shape elementor-shape-bottom"></div>
187	138	<?php
188	139	}
189	140
190	141	/**
		@@ -191,9 +142,9 @@
191	142	* Render the video background markup.
192	143	*
193	144	* @return void
194	145	*/
195		- protected function render_video_background() {
	146	+ private function render_video_background() {
196	147	$settings = $this->get_settings_for_display();
197	148
198	149	if ( 'video' !== $settings['background_background'] ) {
199	150	return;
		@@ -204,22 +155,17 @@
204	155	}
205	156
206	157	$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
207	158
208		- $this->add_render_attribute(
209		- 'background-video-container',
210		- [
211		- 'class' => 'elementor-background-video-container',
212		- ]
213		- );
	159	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
214	160
215	161	if ( ! $settings['background_play_on_mobile'] ) {
216		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	162	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
217	163	}
218	164
219	165	?><div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
220	166	<?php if ( $video_properties ) : ?>
221		- <div class="elementor-background-video-embed" role="presentation"></div>
	167	+ <div class="elementor-background-video-embed"></div>
222	168	<?php
223	169	else :
224	170	$video_tag_attributes = 'autoplay muted playsinline';
225	171
		@@ -226,9 +172,9 @@
226	172	if ( 'yes' !== $settings['background_play_once'] ) {
227	173	$video_tag_attributes .= ' loop';
228	174	}
229	175	?>
230		- <video class="elementor-background-video-hosted" role="presentation" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
	176	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
231	177	<?php endif; ?>
232	178	</div><?php
233	179	}
234	180
		@@ -241,9 +187,9 @@
241	187	* @param string $side - Shape divider side, used to set the shape key.
242	188	*
243	189	* @return void
244	190	*/
245		- protected function render_shape_divider( $side ) {
	191	+ private function render_shape_divider( $side ) {
246	192	$settings = $this->get_active_settings();
247	193	$base_setting_key = "shape_divider_$side";
248	194	$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
249	195	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
		@@ -251,14 +197,15 @@
251	197	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
252	198	return;
253	199	}
254	200	?>
255		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
256		- Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
	201	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
	202	+ // PHPCS - the variable $negative is getting a setting value with a strict structure.
	203	+ echo var_export( $negative ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
257	204	?>">
258	205	<?php
259	206	// PHPCS - The file content is being read from a strict file path structure.
260		- echo Utils::file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	207	+ echo file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
261	208	?>
262	209	</div>
263	210	<?php
264	211	}
		@@ -267,9 +214,9 @@
267	214	* Print safe HTML tag for the element based on the element settings.
268	215	*
269	216	* @return void
270	217	*/
271		- protected function print_html_tag() {
	218	+ private function print_html_tag() {
272	219	$html_tag = $this->get_settings( 'html_tag' );
273	220
274	221	if ( empty( $html_tag ) ) {
275	222	$html_tag = 'div';
		@@ -290,16 +237,13 @@
290	237	if ( ! empty( $link['url'] ) ) {
291	238	$this->add_link_attributes( '_wrapper', $link );
292	239	}
293	240
294		- ?><<?php $this->print_html_tag(); ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
	241	+ ?><<?php $this->print_html_tag(); ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>><?php
	242	+ $this->render_video_background();
	243	+?>
295	244	<?php
296		- if ( $this->is_boxed_container( $settings ) ) { ?>
297		- <div class="e-con-inner">
298		- <?php }
299	245
300		- $this->render_video_background();
301		-
302	246	if ( ! empty( $settings['shape_divider_top'] ) ) {
303	247	$this->render_shape_divider( 'top' );
304	248	}
305	249
		@@ -313,20 +257,11 @@
313	257	*
314	258	* @return void
315	259	*/
316	260	public function after_render() {
317		- $settings = $this->get_settings_for_display();
318		- if ( $this->is_boxed_container( $settings ) ) { ?>
319		- </div>
320		- <?php } ?>
321		- </<?php $this->print_html_tag(); ?>>
322		- <?php
	261	+ ?></<?php $this->print_html_tag(); ?>><?php
323	262	}
324	263
325		- protected function is_boxed_container( array $settings ) {
326		- return ! empty( $settings['content_width'] ) && 'boxed' === $settings['content_width'];
327		- }
328		-
329	264	/**
330	265	* Override the default child type to allow widgets & containers as children.
331	266	*
332	267	* @param array $element_data
		@@ -333,18 +268,12 @@
333	268	*
334	269	* @return \Elementor\Element_Base|\Elementor\Widget_Base|null
335	270	*/
336	271	protected function _get_default_child_type( array $element_data ) {
337		- $el_types = array_keys( Plugin::$instance->elements_manager->get_element_types() );
338		-
339		- if ( in_array( $element_data['elType'], $el_types, true ) ) {
340		- return Plugin::$instance->elements_manager->get_element_types( $element_data['elType'] );
	272	+ if ( 'container' === $element_data['elType'] ) {
	273	+ return Plugin::$instance->elements_manager->get_element_types( 'container' );
341	274	}
342	275
343		- if ( ! isset( $element_data['widgetType'] ) ) {
344		- return null;
345		- }
346		-
347	276	return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
348	277	}
349	278
350	279	/**
		@@ -360,35 +289,21 @@
360	289	'tab' => Controls_Manager::TAB_LAYOUT,
361	290	]
362	291	);
363	292
364		- $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
365		-
366		- if ( array_key_exists( Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA, $active_breakpoints ) ) {
367		- $min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA;
368		- } else {
369		- $min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
370		- }
371		-
372	293	$this->add_control(
373	294	'container_type',
374	295	[
375		- 'label' => esc_html__( 'Container Layout', 'elementor' ),
376		- 'type' => Controls_Manager::SELECT,
	296	+ 'type' => Controls_Manager::HIDDEN,
377	297	'default' => 'flex',
378		- 'prefix_class' => 'e-',
379		- 'options' => [
380		- 'flex' => esc_html__( 'Flexbox', 'elementor' ),
381		- 'grid' => esc_html__( 'Grid', 'elementor' ),
382		- ],
383	298	'selectors' => [
384	299	'{{WRAPPER}}' => '--display: {{VALUE}}',
385	300	],
386		- 'separator' => 'after',
387		- 'editor_available' => true,
388	301	]
389	302	);
390	303
	304	+ $min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
	305	+
391	306	$this->add_control(
392	307	'content_width',
393	308	[
394	309	'label' => esc_html__( 'Content Width', 'elementor' ),
		@@ -397,11 +312,16 @@
397	312	'options' => [
398	313	'boxed' => esc_html__( 'Boxed', 'elementor' ),
399	314	'full' => esc_html__( 'Full Width', 'elementor' ),
400	315	],
401		- 'render_type' => 'template',
402		- 'prefix_class' => 'e-con-',
403		- 'editor_available' => true,
	316	+ 'render_type' => 'ui',
	317	+ 'selectors' => [
	318	+ '{{WRAPPER}}' => '{{VALUE}}',
	319	+ ],
	320	+ 'selectors_dictionary' => [
	321	+ 'boxed' => '--width: 100%;',
	322	+ 'full' => '--content-width: 100%;',
	323	+ ],
404	324	]
405	325	);
406	326
407	327	$width_control_settings = [
		@@ -406,14 +326,22 @@
406	326
407	327	$width_control_settings = [
408	328	'label' => esc_html__( 'Width', 'elementor' ),
409	329	'type' => Controls_Manager::SLIDER,
410		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	330	+ 'size_units' => [ 'px', '%', 'vw' ],
411	331	'range' => [
412	332	'px' => [
413	333	'min' => 500,
414	334	'max' => 1600,
415	335	],
	336	+ '%' => [
	337	+ 'min' => 0,
	338	+ 'max' => 100,
	339	+ ],
	340	+ 'vw' => [
	341	+ 'min' => 0,
	342	+ 'max' => 100,
	343	+ ],
416	344	],
417	345	'default' => [
418	346	'unit' => '%',
419	347	],
		@@ -421,10 +349,10 @@
421	349	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => $min_affected_device,
422	350	Breakpoints_Manager::BREAKPOINT_KEY_LAPTOP => $min_affected_device,
423	351	Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device,
424	352	Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device,
425		- Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device,
426	353	],
	354	+ 'separator' => 'none',
427	355	];
428	356
429	357	$this->add_responsive_control(
430	358	'width',
		@@ -434,22 +362,11 @@
434	362	],
435	363	'condition' => [
436	364	'content_width' => 'full',
437	365	],
438		- 'device_args' => [
439		- Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
440		- 'placeholder' => [
441		- 'size' => 100,
442		- 'unit' => '%',
443		- ],
444		- ],
445		- Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [
446		- // The mobile width is not inherited from the higher breakpoint width controls.
447		- 'placeholder' => [
448		- 'size' => 100,
449		- 'unit' => '%',
450		- ],
451		- ],
	366	+ 'placeholder' => [
	367	+ 'size' => '100',
	368	+ 'unit' => '%',
452	369	],
453	370	] )
454	371	);
455	372
		@@ -469,15 +386,8 @@
469	386	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
470	387	// Use the default width from the kit as a placeholder.
471	388	'placeholder' => $this->active_kit->get_settings_for_display( 'container_width' ),
472	389	],
473		- Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [
474		- // The mobile width is not inherited from the higher breakpoint width controls.
475		- 'placeholder' => [
476		- 'size' => 100,
477		- 'unit' => '%',
478		- ],
479		- ],
480	390	],
481	391	] )
482	392	);
483	393
		@@ -485,16 +395,20 @@
485	395	'min_height',
486	396	[
487	397	'label' => esc_html__( 'Min Height', 'elementor' ),
488	398	'type' => Controls_Manager::SLIDER,
489		- 'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
	399	+ 'size_units' => [ 'px', 'vh' ],
490	400	'range' => [
491	401	'px' => [
	402	+ 'min' => 0,
492	403	'max' => 1440,
493	404	],
	405	+ 'vh' => [
	406	+ 'min' => 0,
	407	+ 'max' => 100,
	408	+ ],
494	409	],
495	410	'description' => sprintf(
496		- /* translators: %s: 100vh. */
497	411	esc_html__( 'To achieve full height Container use %s.', 'elementor' ),
498	412	'100vh'
499	413	),
500	414	'selectors' => [
		@@ -502,63 +416,14 @@
502	416	],
503	417	]
504	418	);
505	419
506		- $this->add_group_control(
507		- 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		- ]
526		- );
527		-
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		- );
538		-
539		- $this->end_controls_section();
540		- }
541		-
542		- /**
543		- * Register the Container's items layout controls.
544		- *
545		- * @return void
546		- */
547		- protected function register_items_layout_controls() {
548		- $this->start_controls_section(
549		- 'section_layout_additional_options',
550		- [
551		- 'label' => esc_html__( 'Additional Options', 'elementor' ),
552		- 'tab' => Controls_Manager::TAB_LAYOUT,
553		- ]
554		- );
555		-
556	420	$this->add_control(
557	421	'overflow',
558	422	[
559	423	'label' => esc_html__( 'Overflow', 'elementor' ),
560	424	'type' => Controls_Manager::SELECT,
	425	+ 'separator' => 'before',
561	426	'default' => '',
562	427	'options' => [
563	428	'' => esc_html__( 'Default', 'elementor' ),
564	429	'hidden' => esc_html__( 'Hidden', 'elementor' ),
		@@ -578,9 +443,9 @@
578	443	'article' => 'article',
579	444	'section' => 'section',
580	445	'aside' => 'aside',
581	446	'nav' => 'nav',
582		- 'a' => 'a ' . esc_html__( '(link)', 'elementor' ),
	447	+ 'a' => 'a',
583	448	];
584	449
585	450	$options = [
586	451	'' => esc_html__( 'Default', 'elementor' ),
		@@ -595,29 +460,55 @@
595	460	]
596	461	);
597	462
598	463	$this->add_control(
599		- 'link_note',
	464	+ 'link',
600	465	[
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' ),
	466	+ 'label' => esc_html__( 'Link', 'elementor' ),
	467	+ 'type' => Controls_Manager::URL,
	468	+ 'dynamic' => [
	469	+ 'active' => true,
	470	+ ],
	471	+ 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
604	472	'condition' => [
605	473	'html_tag' => 'a',
606	474	],
	475	+ 'description' => esc_html__( 'Don\'t use for nested links, this will cause semantic issues and unexpected behavior.', 'elementor' ),
607	476	]
608	477	);
609	478
610		- $this->add_control(
611		- 'link',
	479	+ $this->end_controls_section();
	480	+
	481	+ }
	482	+
	483	+ /**
	484	+ * Register the Container's items layout controls.
	485	+ *
	486	+ * @return void
	487	+ */
	488	+ protected function register_items_layout_controls() {
	489	+ $this->start_controls_section(
	490	+ 'section_layout_items',
612	491	[
613		- 'label' => esc_html__( 'Link', 'elementor' ),
614		- 'type' => Controls_Manager::URL,
615		- 'dynamic' => [
616		- 'active' => true,
	492	+ 'label' => esc_html__( 'Items', 'elementor' ),
	493	+ 'tab' => Controls_Manager::TAB_LAYOUT,
	494	+ ]
	495	+ );
	496	+
	497	+ $this->add_group_control(
	498	+ Group_Control_Flex_Container::get_type(),
	499	+ [
	500	+ 'name' => 'flex',
	501	+ 'selector' => '{{WRAPPER}}',
	502	+ 'fields_options' => [
	503	+ 'gap' => [
	504	+ 'label' => esc_html_x( 'Elements Gap', 'Flex Container Control', 'elementor' ),
	505	+ // Use the default "elements gap" from the kit as a placeholder.
	506	+ 'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
	507	+ ],
617	508	],
618	509	'condition' => [
619		- 'html_tag' => 'a',
	510	+ 'container_type' => 'flex',
620	511	],
621	512	]
622	513	);
623	514
		@@ -673,45 +564,8 @@
673	564	],
674	565	]
675	566	);
676	567
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		- ],
694		- ],
695		- ],
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		- ],
711		- ]
712		- );
713		-
714	568	$this->end_controls_tab();
715	569
716	570	/**
717	571	* Hover.
		@@ -733,9 +587,9 @@
733	587
734	588	$this->add_control(
735	589	'background_hover_transition',
736	590	[
737		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	591	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
738	592	'type' => Controls_Manager::SLIDER,
739	593	'default' => [
740	594	'size' => 0.3,
741	595	],
		@@ -740,9 +594,8 @@
740	594	'size' => 0.3,
741	595	],
742	596	'range' => [
743	597	'px' => [
744		- 'min' => 0,
745	598	'max' => 3,
746	599	'step' => 0.1,
747	600	],
748	601	],
		@@ -747,14 +600,8 @@
747	600	],
748	601	],
749	602	'render_type' => 'ui',
750	603	'separator' => 'before',
751		- 'condition' => [
752		- 'background_hover_background' => [ 'classic', 'gradient' ],
753		- ],
754		- 'selectors' => [
755		- '{{WRAPPER}}' => '--background-transition: {{SIZE}}s;',
756		- ],
757	604	]
758	605	);
759	606
760	607	$this->end_controls_tab();
		@@ -789,20 +636,18 @@
789	636	'label' => esc_html__( 'Normal', 'elementor' ),
790	637	]
791	638	);
792	639
793		- $background_overlay_selector = '{{WRAPPER}}::before, {{WRAPPER}} > .elementor-background-video-container::before, {{WRAPPER}} > .e-con-inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow::before, {{WRAPPER}} > .e-con-inner > .elementor-background-slideshow::before, {{WRAPPER}} > .elementor-motion-effects-container > .elementor-motion-effects-layer::before';
794		-
795	640	$this->add_group_control(
796	641	Group_Control_Background::get_type(),
797	642	[
798	643	'name' => 'background_overlay',
799		- 'selector' => $background_overlay_selector,
	644	+ 'selector' => '{{WRAPPER}}::before',
800	645	'fields_options' => [
801	646	'background' => [
802	647	'selectors' => [
803	648	// Hack to set the `::before` content in order to render it only when there is a background overlay.
804		- $background_overlay_selector => '--background-overlay: \'\';',
	649	+ '{{WRAPPER}}::before' => '--background-overlay: \'\';',
805	650	],
806	651	],
807	652	],
808	653	]
		@@ -807,9 +652,9 @@
807	652	],
808	653	]
809	654	);
810	655
811		- $this->add_responsive_control(
	656	+ $this->add_control(
812	657	'background_overlay_opacity',
813	658	[
814	659	'label' => esc_html__( 'Opacity', 'elementor' ),
815	660	'type' => Controls_Manager::SLIDER,
		@@ -903,20 +748,18 @@
903	748	'label' => esc_html__( 'Hover', 'elementor' ),
904	749	]
905	750	);
906	751
907		- $background_overlay_hover_selector = '{{WRAPPER}}:hover::before, {{WRAPPER}}:hover > .elementor-background-video-container::before, {{WRAPPER}}:hover > .e-con-inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow:hover::before, {{WRAPPER}} > .e-con-inner > .elementor-background-slideshow:hover::before';
908		-
909	752	$this->add_group_control(
910	753	Group_Control_Background::get_type(),
911	754	[
912	755	'name' => 'background_overlay_hover',
913		- 'selector' => $background_overlay_hover_selector,
	756	+ 'selector' => '{{WRAPPER}}:hover::before',
914	757	'fields_options' => [
915	758	'background' => [
916	759	'selectors' => [
917	760	// Hack to set the `::before` content in order to render it only when there is a background overlay.
918		- $background_overlay_hover_selector => '--background-overlay: \'\';',
	761	+ '{{WRAPPER}}:hover::before' => '--background-overlay: \'\';',
919	762	],
920	763	],
921	764	],
922	765	]
		@@ -921,9 +764,9 @@
921	764	],
922	765	]
923	766	);
924	767
925		- $this->add_responsive_control(
	768	+ $this->add_control(
926	769	'background_overlay_hover_opacity',
927	770	[
928	771	'label' => esc_html__( 'Opacity', 'elementor' ),
929	772	'type' => Controls_Manager::SLIDER,
		@@ -944,16 +787,26 @@
944	787	],
945	788	]
946	789	);
947	790
	791	+ $this->add_group_control(
	792	+ Group_Control_Css_Filter::get_type(),
	793	+ [
	794	+ 'name' => 'css_filters_hover',
	795	+ 'selector' => '{{WRAPPER}}:hover::before',
	796	+ ]
	797	+ );
	798	+
948	799	$this->add_control(
949	800	'background_overlay_hover_transition',
950	801	[
951		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	802	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
952	803	'type' => Controls_Manager::SLIDER,
	804	+ 'default' => [
	805	+ 'size' => 0.3,
	806	+ ],
953	807	'range' => [
954	808	'px' => [
955		- 'min' => 0,
956	809	'max' => 3,
957	810	'step' => 0.1,
958	811	],
959	812	],
		@@ -958,25 +811,14 @@
958	811	],
959	812	],
960	813	'render_type' => 'ui',
961	814	'separator' => 'before',
962		- 'condition' => [
963		- 'background_overlay_hover_background' => [ 'classic', 'gradient' ],
964		- ],
965	815	'selectors' => [
966		- '{{WRAPPER}}, {{WRAPPER}}::before' => '--overlay-transition: {{SIZE}}s;',
	816	+ '{{WRAPPER}}' => '--overlay-transition: {{SIZE}}s;',
967	817	],
968	818	]
969	819	);
970	820
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	821	$this->end_controls_tab();
980	822
981	823	$this->end_controls_tabs();
982	824
		@@ -1012,26 +854,8 @@
1012	854	$this->add_group_control(
1013	855	Group_Control_Border::get_type(),
1014	856	[
1015	857	'name' => 'border',
1016		- 'selector' => '{{WRAPPER}}',
1017		- 'fields_options' => [
1018		- 'width' => [
1019		- '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}};',
1021		- ],
1022		- ],
1023		- 'color' => [
1024		- 'selectors' => [
1025		- '{{SELECTOR}}' => 'border-color: {{VALUE}}; --border-color: {{VALUE}};',
1026		- ],
1027		- ],
1028		- 'border' => [
1029		- 'selectors' => [
1030		- '{{SELECTOR}}' => 'border-style: {{VALUE}}; --border-style: {{VALUE}};',
1031		- ],
1032		- ],
1033		- ],
1034	858	]
1035	859	);
1036	860
1037	861	$this->add_responsive_control(
		@@ -1038,9 +862,9 @@
1038	862	'border_radius',
1039	863	[
1040	864	'label' => esc_html__( 'Border Radius', 'elementor' ),
1041	865	'type' => Controls_Manager::DIMENSIONS,
1042		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	866	+ 'size_units' => [ 'px', '%' ],
1043	867	'selectors' => [
1044	868	'{{WRAPPER}}' => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1045	869	],
1046	870	]
		@@ -1069,20 +893,8 @@
1069	893	Group_Control_Border::get_type(),
1070	894	[
1071	895	'name' => 'border_hover',
1072	896	'selector' => '{{WRAPPER}}:hover',
1073		- 'fields_options' => [
1074		- 'width' => [
1075		- '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}};',
1077		- ],
1078		- ],
1079		- 'color' => [
1080		- 'selectors' => [
1081		- '{{SELECTOR}}' => 'border-color: {{VALUE}}; --border-color: {{VALUE}};',
1082		- ],
1083		- ],
1084		- ],
1085	897	]
1086	898	);
1087	899
1088	900	$this->add_responsive_control(
		@@ -1089,11 +901,11 @@
1089	901	'border_radius_hover',
1090	902	[
1091	903	'label' => esc_html__( 'Border Radius', 'elementor' ),
1092	904	'type' => Controls_Manager::DIMENSIONS,
1093		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	905	+ 'size_units' => [ 'px', '%' ],
1094	906	'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}};',
	907	+ '{{WRAPPER}}:hover' => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1096	908	],
1097	909	]
1098	910	);
1099	911
		@@ -1107,9 +919,9 @@
1107	919
1108	920	$this->add_control(
1109	921	'border_hover_transition',
1110	922	[
1111		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	923	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
1112	924	'type' => Controls_Manager::SLIDER,
1113	925	'separator' => 'before',
1114	926	'default' => [
1115	927	'size' => 0.3,
		@@ -1115,9 +927,8 @@
1115	927	'size' => 0.3,
1116	928	],
1117	929	'range' => [
1118	930	'px' => [
1119		- 'min' => 0,
1120	931	'max' => 3,
1121	932	'step' => 0.1,
1122	933	],
1123	934	],
		@@ -1124,36 +935,22 @@
1124	935	'conditions' => [
1125	936	'relation' => 'or',
1126	937	'terms' => [
1127	938	[
1128		- 'name' => 'border_hover_border',
	939	+ 'name' => 'background_background',
1129	940	'operator' => '!==',
1130	941	'value' => '',
1131	942	],
1132	943	[
1133		- 'name' => 'border_radius_hover[top]',
	944	+ 'name' => 'border_border',
1134	945	'operator' => '!==',
1135	946	'value' => '',
1136	947	],
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	948	],
1153	949	],
1154	950	'selectors' => [
1155		- '{{WRAPPER}}, {{WRAPPER}}::before' => '--border-transition: {{SIZE}}s;',
	951	+ '{{WRAPPER}}' => '--transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s;
	952	+ --overlay-transition: background {{background_overlay_hover_transition.SIZE}}s, border-radius {{SIZE}}s, opacity {{background_overlay_hover_transition.SIZE}}s',
1156	953	],
1157	954	]
1158	955	);
1159	956
		@@ -1180,8 +977,16 @@
1180	977	);
1181	978
1182	979	$this->start_controls_tabs( 'tabs_shape_dividers' );
1183	980
	981	+ $shapes_options = [
	982	+ '' => esc_html__( 'None', 'elementor' ),
	983	+ ];
	984	+
	985	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	986	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	987	+ }
	988	+
1184	989	foreach ( [
1185	990	'top' => esc_html__( 'Top', 'elementor' ),
1186	991	'bottom' => esc_html__( 'Bottom', 'elementor' ),
1187	992	] as $side => $side_label ) {
		@@ -1197,30 +1002,12 @@
1197	1002	$this->add_control(
1198	1003	$base_control_key,
1199	1004	[
1200	1005	'label' => esc_html__( 'Type', 'elementor' ),
1201		- 'type' => Controls_Manager::VISUAL_CHOICE,
1202		- 'label_block' => true,
1203		- 'columns' => 2,
1204		- 'options' => Shapes::get_shapes(),
	1006	+ 'type' => Controls_Manager::SELECT,
	1007	+ 'options' => $shapes_options,
1205	1008	'render_type' => 'none',
1206	1009	'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	1010	]
1224	1011	);
1225	1012
1226	1013	$this->add_control(
		@@ -1231,9 +1018,9 @@
1231	1018	'condition' => [
1232	1019	"shape_divider_$side!" => '',
1233	1020	],
1234	1021	'selectors' => [
1235		- "{{WRAPPER}} > .elementor-shape-$side .elementor-shape-fill, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side .elementor-shape-fill" => 'fill: {{UNIT}};',
	1022	+ "{{WRAPPER}} > .elementor-shape-$side .elementor-shape-fill" => 'fill: {{UNIT}};',
1236	1023	],
1237	1024	]
1238	1025	);
1239	1026
		@@ -1241,9 +1028,8 @@
1241	1028	$base_control_key . '_width',
1242	1029	[
1243	1030	'label' => esc_html__( 'Width', 'elementor' ),
1244	1031	'type' => Controls_Manager::SLIDER,
1245		- 'size_units' => [ '%', 'vw', 'custom' ],
1246	1032	'default' => [
1247	1033	'unit' => '%',
1248	1034	],
1249	1035	'tablet_default' => [
		@@ -1256,18 +1042,14 @@
1256	1042	'%' => [
1257	1043	'min' => 100,
1258	1044	'max' => 300,
1259	1045	],
1260		- 'vw' => [
1261		- 'min' => 100,
1262		- 'max' => 300,
1263		- ],
1264	1046	],
1265	1047	'condition' => [
1266	1048	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1267	1049	],
1268	1050	'selectors' => [
1269		- "{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'width: calc({{SIZE}}{{UNIT}} + 1.3px)',
	1051	+ "{{WRAPPER}} > .elementor-shape-$side svg" => 'width: calc({{SIZE}}{{UNIT}} + 1.3px)',
1270	1052	],
1271	1053	]
1272	1054	);
1273	1055
		@@ -1275,25 +1057,18 @@
1275	1057	$base_control_key . '_height',
1276	1058	[
1277	1059	'label' => esc_html__( 'Height', 'elementor' ),
1278	1060	'type' => Controls_Manager::SLIDER,
1279		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1280	1061	'range' => [
1281	1062	'px' => [
1282	1063	'max' => 500,
1283	1064	],
1284		- 'em' => [
1285		- 'max' => 50,
1286		- ],
1287		- 'rem' => [
1288		- 'max' => 50,
1289		- ],
1290	1065	],
1291	1066	'condition' => [
1292	1067	"shape_divider_$side!" => '',
1293	1068	],
1294	1069	'selectors' => [
1295		- "{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'height: {{SIZE}}{{UNIT}};',
	1070	+ "{{WRAPPER}} > .elementor-shape-$side svg" => 'height: {{SIZE}}{{UNIT}};',
1296	1071	],
1297	1072	]
1298	1073	);
1299	1074
		@@ -1305,9 +1080,9 @@
1305	1080	'condition' => [
1306	1081	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_flip' ) ),
1307	1082	],
1308	1083	'selectors' => [
1309		- "{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'transform: translateX(-50%) rotateY(180deg)',
	1084	+ "{{WRAPPER}} > .elementor-shape-$side svg" => 'transform: translateX(-50%) rotateY(180deg)',
1310	1085	],
1311	1086	]
1312	1087	);
1313	1088
		@@ -1329,9 +1104,9 @@
1329	1104	[
1330	1105	'label' => esc_html__( 'Bring to Front', 'elementor' ),
1331	1106	'type' => Controls_Manager::SWITCHER,
1332	1107	'selectors' => [
1333		- "{{WRAPPER}} > .elementor-shape-$side, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
	1108	+ "{{WRAPPER}} > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
1334	1109	],
1335	1110	'condition' => [
1336	1111	"shape_divider_$side!" => '',
1337	1112	],
		@@ -1378,11 +1153,11 @@
1378	1153	'margin',
1379	1154	[
1380	1155	'label' => esc_html__( 'Margin', 'elementor' ),
1381	1156	'type' => Controls_Manager::DIMENSIONS,
1382		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1157	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1383	1158	'selectors' => [
1384		- '{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left: {{LEFT}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}};',
	1159	+ '{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left:{{LEFT}}{{UNIT}};',
1385	1160	],
1386	1161	]
1387	1162	);
1388	1163
		@@ -1390,113 +1165,15 @@
1390	1165	'padding',
1391	1166	[
1392	1167	'label' => esc_html__( 'Padding', 'elementor' ),
1393	1168	'type' => Controls_Manager::DIMENSIONS,
1394		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	1169	+ 'size_units' => [ 'px', 'em', '%', 'rem' ],
1395	1170	'selectors' => [
1396		- '{{WRAPPER}}' => '--padding-top: {{TOP}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}};',
	1171	+ '{{WRAPPER}}' => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};',
1397	1172	],
1398	1173	]
1399	1174	);
1400	1175
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	1176	$this->add_group_control(
1500	1177	Group_Control_Flex_Item::get_type(),
1501	1178	[
1502	1179	'name' => '_flex',
		@@ -1507,9 +1184,9 @@
1507	1184	'size',
1508	1185	'grow',
1509	1186	'shrink',
1510	1187	],
1511		- 'selector' => '{{WRAPPER}}.e-con', // Hack to increase specificity.
	1188	+ 'selector' => '{{WRAPPER}}.e-container', // Hack to increase specificity.
1512	1189	'separator' => 'before',
1513	1190	]
1514	1191	);
1515	1192
		@@ -1515,12 +1192,11 @@
1515	1192
1516	1193	$this->add_control(
1517	1194	'position_description',
1518	1195	[
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' ),
	1196	+ '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' ),
	1197	+ 'type' => Controls_Manager::RAW_HTML,
	1198	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
1523	1199	'render_type' => 'ui',
1524	1200	'condition' => [
1525	1201	'position!' => '',
1526	1202	],
		@@ -1586,8 +1262,9 @@
1586	1262	'range' => [
1587	1263	'px' => [
1588	1264	'min' => -1000,
1589	1265	'max' => 1000,
	1266	+ 'step' => 1,
1590	1267	],
1591	1268	'%' => [
1592	1269	'min' => -200,
1593	1270	'max' => 200,
		@@ -1601,11 +1278,11 @@
1601	1278	'max' => 200,
1602	1279	],
1603	1280	],
1604	1281	'default' => [
1605		- 'size' => 0,
	1282	+ 'size' => '0',
1606	1283	],
1607		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
	1284	+ 'size_units' => [ 'px', '%', 'vw', 'vh' ],
1608	1285	'selectors' => [
1609	1286	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
1610	1287	'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
1611	1288	],
		@@ -1624,8 +1301,9 @@
1624	1301	'range' => [
1625	1302	'px' => [
1626	1303	'min' => -1000,
1627	1304	'max' => 1000,
	1305	+ 'step' => 0.1,
1628	1306	],
1629	1307	'%' => [
1630	1308	'min' => -200,
1631	1309	'max' => 200,
		@@ -1639,11 +1317,11 @@
1639	1317	'max' => 200,
1640	1318	],
1641	1319	],
1642	1320	'default' => [
1643		- 'size' => 0,
	1321	+ 'size' => '0',
1644	1322	],
1645		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
	1323	+ 'size_units' => [ 'px', '%', 'vw', 'vh' ],
1646	1324	'selectors' => [
1647	1325	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
1648	1326	'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
1649	1327	],
		@@ -1686,8 +1364,9 @@
1686	1364	'range' => [
1687	1365	'px' => [
1688	1366	'min' => -1000,
1689	1367	'max' => 1000,
	1368	+ 'step' => 1,
1690	1369	],
1691	1370	'%' => [
1692	1371	'min' => -200,
1693	1372	'max' => 200,
		@@ -1700,11 +1379,11 @@
1700	1379	'min' => -200,
1701	1380	'max' => 200,
1702	1381	],
1703	1382	],
1704		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
	1383	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
1705	1384	'default' => [
1706		- 'size' => 0,
	1385	+ 'size' => '0',
1707	1386	],
1708	1387	'selectors' => [
1709	1388	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
1710	1389	],
		@@ -1723,8 +1402,9 @@
1723	1402	'range' => [
1724	1403	'px' => [
1725	1404	'min' => -1000,
1726	1405	'max' => 1000,
	1406	+ 'step' => 1,
1727	1407	],
1728	1408	'%' => [
1729	1409	'min' => -200,
1730	1410	'max' => 200,
		@@ -1737,11 +1417,11 @@
1737	1417	'min' => -200,
1738	1418	'max' => 200,
1739	1419	],
1740	1420	],
1741		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
	1421	+ 'size_units' => [ 'px', '%', 'vh', 'vw' ],
1742	1422	'default' => [
1743		- 'size' => 0,
	1423	+ 'size' => '0',
1744	1424	],
1745	1425	'selectors' => [
1746	1426	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
1747	1427	],
		@@ -1769,11 +1449,8 @@
1769	1449	[
1770	1450	'label' => esc_html__( 'CSS ID', 'elementor' ),
1771	1451	'type' => Controls_Manager::TEXT,
1772	1452	'default' => '',
1773		- 'ai' => [
1774		- 'active' => false,
1775		- ],
1776	1453	'dynamic' => [
1777	1454	'active' => true,
1778	1455	],
1779	1456	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
		@@ -1787,11 +1464,8 @@
1787	1464	[
1788	1465	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1789	1466	'type' => Controls_Manager::TEXT,
1790	1467	'default' => '',
1791		- 'ai' => [
1792		- 'active' => false,
1793		- ],
1794	1468	'dynamic' => [
1795	1469	'active' => true,
1796	1470	],
1797	1471	'prefix_class' => '',
		@@ -1799,10 +1473,8 @@
1799	1473	'classes' => 'elementor-control-direction-ltr',
1800	1474	]
1801	1475	);
1802	1476
1803		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1804		-
1805	1477	$this->end_controls_section();
1806	1478	}
1807	1479
1808	1480	/**
		@@ -1818,10 +1490,8 @@
1818	1490	'tab' => Controls_Manager::TAB_ADVANCED,
1819	1491	]
1820	1492	);
1821	1493
1822		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1823		-
1824	1494	$this->add_responsive_control(
1825	1495	'animation',
1826	1496	[
1827	1497	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1891,14 +1561,9 @@
1891	1561
1892	1562	$this->add_control(
1893	1563	'responsive_description',
1894	1564	[
1895		- 'raw' => sprintf(
1896		- /* translators: 1: Link open tag, 2: Link close tag. */
1897		- 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' ),
1898		- '<a href="javascript: $e.run( \'panel/close\' )">',
1899		- '</a>'
1900		- ),
	1565	+ 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1901	1566	'type' => Controls_Manager::RAW_HTML,
1902	1567	'content_classes' => 'elementor-descriptor',
1903	1568	]
1904	1569	);
		@@ -1917,12 +1582,8 @@
1917	1582	$this->register_advanced_controls();
1918	1583
1919	1584	$this->register_motion_effects_controls();
1920	1585
1921		- $this->hook_sticky_notice_into_transform_section();
1922		-
1923		- $this->register_transform_section( 'con' );
1924		-
1925	1586	$this->register_responsive_controls();
1926	1587
1927	1588	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1928	1589
		@@ -1928,25 +1589,8 @@
1928	1589
1929	1590	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1930	1591	}
1931	1592
1932		- protected function hook_sticky_notice_into_transform_section() {
1933		- add_action( 'elementor/element/container/_section_transform/after_section_start', function( Container $container ) {
1934		- if ( ! empty( $container->get_controls( 'transform_sticky_notice' ) ) ) {
1935		- return;
1936		- }
1937		-
1938		- $container->add_control(
1939		- 'transform_sticky_notice',
1940		- [
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' ),
1944		- ]
1945		- );
1946		- } );
1947		- }
1948		-
1949	1593	/**
1950	1594	* Register the Container's controls.
1951	1595	*
1952	1596	* @return void
		@@ -1954,44 +1598,6 @@
1954	1598	protected function register_controls() {
1955	1599	$this->register_layout_tab();
1956	1600	$this->register_style_tab();
1957	1601	$this->register_advanced_tab();
1958		- }
1959		-
1960		- public function on_import( $element ) {
1961		- return self::slider_to_gaps_converter( $element );
1962		- }
1963		-
1964		- /**
1965		- * Convert slider to gaps control for the 3.16 upgrade script
1966		- *
1967		- * @param array $element
1968		- * @return array
1969		- */
1970		- public static function slider_to_gaps_converter( $element ) {
1971		- $breakpoints = array_keys( (array) Plugin::$instance->breakpoints->get_breakpoints() );
1972		- $breakpoints[] = 'desktop';
1973		- $control_name = 'flex_gap';
1974		-
1975		- foreach ( $breakpoints as $breakpoint ) {
1976		- $control = 'desktop' !== $breakpoint
1977		- ? $control_name . '_' . $breakpoint
1978		- : $control_name;
1979		-
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 ) {
1987		- $old_size = strval( $element['settings'][ $control ]['size'] );
1988		-
1989		- $element['settings'][ $control ]['column'] = $old_size;
1990		- $element['settings'][ $control ]['row'] = $old_size;
1991		- $element['settings'][ $control ]['isLinked'] = true;
1992		- }
1993		- }
1994		-
1995		- return $element;
1996	1602	}
1997	1603	}