← All changes | includes/elements/container.php +170 -388 4.1.0-dev1 → 3.13.2 View file →

		@@ -26,12 +26,8 @@
26	26	* @var \Elementor\Core\Kits\Documents\Kit
27	27	*/
28	28	private $active_kit;
29	29
30		- protected function is_dynamic_content(): bool {
31		- return false;
32		- }
33		-
34	30	/**
35	31	* Container constructor.
36	32	*
37	33	* @param array $data
		@@ -38,9 +34,9 @@
38	34	* @param array|null $args
39	35	*
40	36	* @return void
41	37	*/
42		- public function __construct( array $data = [], ?array $args = null ) {
	38	+ public function __construct( array $data = [], array $args = null ) {
43	39	parent::__construct( $data, $args );
44	40
45	41	$this->active_kit = Plugin::$instance->kits_manager->get_active_kit();
46	42	}
		@@ -81,34 +77,15 @@
81	77	return 'eicon-container';
82	78	}
83	79
84	80	public function get_keywords() {
85		- return [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Grid', 'Grid Container', 'CSS Grid', 'Layout' ];
86		- }
	81	+ $keywords = [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Layout' ];
87	82
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		- ];
	83	+ if ( Plugin::$instance->experiments->is_feature_active( 'container_grid' ) ) {
	84	+ array_push( $keywords, 'Grid', 'Grid Container', 'CSS Grid' );
	85	+ }
	86	+
	87	+ return $keywords;
111	88	}
112	89
113	90	/**
114	91	* Override the render attributes to add a custom wrapper class.
		@@ -117,14 +94,11 @@
117	94	*/
118	95	protected function add_render_attributes() {
119	96	parent::add_render_attributes();
120	97
121		- $is_nested_class_name = $this->get_data( 'isInner' ) ? 'e-child' : 'e-parent';
122		-
123	98	$this->add_render_attribute( '_wrapper', [
124	99	'class' => [
125	100	'e-con',
126		- $is_nested_class_name,
127	101	],
128	102	] );
129	103	}
130	104
		@@ -139,9 +113,8 @@
139	113	$config['controls'] = $this->get_controls();
140	114	$config['tabs_controls'] = $this->get_tabs_controls();
141	115	$config['show_in_panel'] = true;
142	116	$config['categories'] = [ 'layout' ];
143		- $config['include_in_widgets_config'] = true;
144	117
145	118	return $config;
146	119	}
147	120
		@@ -162,26 +135,21 @@
162	135	if ( ! settings.background_play_once ) {
163	136	videoAttributes += ' loop';
164	137	}
165	138
166		- view.addRenderAttribute(
167		- 'background-video-container',
168		- {
169		- 'class': 'elementor-background-video-container',
170		- }
171		- );
	139	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
172	140
173	141	if ( ! settings.background_play_on_mobile ) {
174		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	142	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
175	143	}
176	144	#>
177	145	<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>
	146	+ <div class="elementor-background-video-embed"></div>
	147	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
180	148	</div>
181	149	<# } #>
182		- <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
183		- <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
	150	+ <div class="elementor-shape elementor-shape-top"></div>
	151	+ <div class="elementor-shape elementor-shape-bottom"></div>
184	152	<# if ( 'boxed' === settings.content_width ) { #>
185	153	</div>
186	154	<# } #>
187	155	<?php
		@@ -191,9 +159,9 @@
191	159	* Render the video background markup.
192	160	*
193	161	* @return void
194	162	*/
195		- protected function render_video_background() {
	163	+ private function render_video_background() {
196	164	$settings = $this->get_settings_for_display();
197	165
198	166	if ( 'video' !== $settings['background_background'] ) {
199	167	return;
		@@ -204,22 +172,17 @@
204	172	}
205	173
206	174	$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
207	175
208		- $this->add_render_attribute(
209		- 'background-video-container',
210		- [
211		- 'class' => 'elementor-background-video-container',
212		- ]
213		- );
	176	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
214	177
215	178	if ( ! $settings['background_play_on_mobile'] ) {
216		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	179	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
217	180	}
218	181
219	182	?><div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
220	183	<?php if ( $video_properties ) : ?>
221		- <div class="elementor-background-video-embed" role="presentation"></div>
	184	+ <div class="elementor-background-video-embed"></div>
222	185	<?php
223	186	else :
224	187	$video_tag_attributes = 'autoplay muted playsinline';
225	188
		@@ -226,9 +189,9 @@
226	189	if ( 'yes' !== $settings['background_play_once'] ) {
227	190	$video_tag_attributes .= ' loop';
228	191	}
229	192	?>
230		- <video class="elementor-background-video-hosted" role="presentation" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
	193	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
231	194	<?php endif; ?>
232	195	</div><?php
233	196	}
234	197
		@@ -241,9 +204,9 @@
241	204	* @param string $side - Shape divider side, used to set the shape key.
242	205	*
243	206	* @return void
244	207	*/
245		- protected function render_shape_divider( $side ) {
	208	+ private function render_shape_divider( $side ) {
246	209	$settings = $this->get_active_settings();
247	210	$base_setting_key = "shape_divider_$side";
248	211	$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
249	212	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
		@@ -251,9 +214,9 @@
251	214	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
252	215	return;
253	216	}
254	217	?>
255		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	218	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
256	219	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
257	220	?>">
258	221	<?php
259	222	// PHPCS - The file content is being read from a strict file path structure.
		@@ -267,9 +230,9 @@
267	230	* Print safe HTML tag for the element based on the element settings.
268	231	*
269	232	* @return void
270	233	*/
271		- protected function print_html_tag() {
	234	+ private function print_html_tag() {
272	235	$html_tag = $this->get_settings( 'html_tag' );
273	236
274	237	if ( empty( $html_tag ) ) {
275	238	$html_tag = 'div';
		@@ -321,9 +284,9 @@
321	284	</<?php $this->print_html_tag(); ?>>
322	285	<?php
323	286	}
324	287
325		- protected function is_boxed_container( array $settings ) {
	288	+ private function is_boxed_container( array $settings ) {
326	289	return ! empty( $settings['content_width'] ) && 'boxed' === $settings['content_width'];
327	290	}
328	291
329	292	/**
		@@ -333,19 +296,69 @@
333	296	*
334	297	* @return \Elementor\Element_Base|\Elementor\Widget_Base|null
335	298	*/
336	299	protected function _get_default_child_type( array $element_data ) {
337		- $el_types = array_keys( Plugin::$instance->elements_manager->get_element_types() );
	300	+ if ( 'container' === $element_data['elType'] ) {
	301	+ return Plugin::$instance->elements_manager->get_element_types( 'container' );
	302	+ }
338	303
339		- if ( in_array( $element_data['elType'], $el_types, true ) ) {
340		- return Plugin::$instance->elements_manager->get_element_types( $element_data['elType'] );
	304	+ return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	305	+ }
	306	+
	307	+ protected function get_flex_control_options( $is_container_grid_active ) {
	308	+ $flex_control_options = [
	309	+ 'name' => 'flex',
	310	+ 'selector' => '{{WRAPPER}}',
	311	+ 'fields_options' => [
	312	+ 'gap' => [
	313	+ 'label' => esc_html_x( 'Gap between elements', 'Flex Container Control', 'elementor' ),
	314	+ 'device_args' => [
	315	+ Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
	316	+ // Use the default gap from the kit as a placeholder.
	317	+ 'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
	318	+ ],
	319	+ ],
	320	+ ],
	321	+ ],
	322	+ ];
	323	+
	324	+ if ( $is_container_grid_active ) {
	325	+ $flex_control_options['condition'] = [
	326	+ 'container_type' => 'flex',
	327	+ ];
341	328	}
342	329
343		- if ( ! isset( $element_data['widgetType'] ) ) {
344		- return null;
	330	+ return $flex_control_options;
	331	+ }
	332	+
	333	+ protected function get_container_type_control_options( $is_container_grid_active ) {
	334	+ if ( $is_container_grid_active ) {
	335	+ return [
	336	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	337	+ 'type' => Controls_Manager::SELECT,
	338	+ 'default' => 'flex',
	339	+ 'options' => [
	340	+ 'flex' => esc_html__( 'Flexbox', 'elementor' ),
	341	+ 'grid' => esc_html__( 'Grid', 'elementor' ),
	342	+ ],
	343	+ 'selectors' => [
	344	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	345	+ ],
	346	+ 'prefix_class' => 'e-',
	347	+ ];
345	348	}
346	349
347		- return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	350	+ // TODO: This can be removed when the 'Container Grid Experiment' is merged.
	351	+ return [
	352	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	353	+ 'type' => Controls_Manager::HIDDEN,
	354	+ 'render_type' => 'none',
	355	+ 'prefix_class' => 'e-',
	356	+ 'default' => 'flex',
	357	+ 'selectors' => [
	358	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	359	+ ],
	360	+ ];
348	361	}
349	362
350	363	/**
351	364	* Register the Container's layout controls.
		@@ -369,27 +382,8 @@
369	382	$min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
370	383	}
371	384
372	385	$this->add_control(
373		- '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		- ]
389		- );
390		-
391		- $this->add_control(
392	386	'content_width',
393	387	[
394	388	'label' => esc_html__( 'Content Width', 'elementor' ),
395	389	'type' => Controls_Manager::SELECT,
		@@ -399,9 +393,9 @@
399	393	'full' => esc_html__( 'Full Width', 'elementor' ),
400	394	],
401	395	'render_type' => 'template',
402	396	'prefix_class' => 'e-con-',
403		- 'editor_available' => true,
	397	+ 'frontend_available' => true,
404	398	]
405	399	);
406	400
407	401	$width_control_settings = [
		@@ -412,8 +406,16 @@
412	406	'px' => [
413	407	'min' => 500,
414	408	'max' => 1600,
415	409	],
	410	+ '%' => [
	411	+ 'min' => 0,
	412	+ 'max' => 100,
	413	+ ],
	414	+ 'vw' => [
	415	+ 'min' => 0,
	416	+ 'max' => 100,
	417	+ ],
416	418	],
417	419	'default' => [
418	420	'unit' => '%',
419	421	],
		@@ -423,8 +425,9 @@
423	425	Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device,
424	426	Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device,
425	427	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device,
426	428	],
	429	+ 'separator' => 'none',
427	430	];
428	431
429	432	$this->add_responsive_control(
430	433	'width',
		@@ -488,13 +491,17 @@
488	491	'type' => Controls_Manager::SLIDER,
489	492	'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
490	493	'range' => [
491	494	'px' => [
	495	+ 'min' => 0,
492	496	'max' => 1440,
493	497	],
	498	+ 'vh' => [
	499	+ 'min' => 0,
	500	+ 'max' => 100,
	501	+ ],
494	502	],
495	503	'description' => sprintf(
496		- /* translators: %s: 100vh. */
497	504	esc_html__( 'To achieve full height Container use %s.', 'elementor' ),
498	505	'100vh'
499	506	),
500	507	'selectors' => [
		@@ -502,40 +509,32 @@
502	509	],
503	510	]
504	511	);
505	512
	513	+ $is_container_grid_active = Plugin::$instance->experiments->is_feature_active( 'container_grid' );
	514	+
	515	+ $this->add_control(
	516	+ 'container_type',
	517	+ $this->get_container_type_control_options( $is_container_grid_active )
	518	+ );
	519	+
506	520	$this->add_group_control(
507	521	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		- ]
	522	+ $this->get_flex_control_options( $is_container_grid_active )
526	523	);
527	524
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		- );
	525	+ if ( $is_container_grid_active ) {
	526	+ $this->add_group_control(
	527	+ Group_Control_Grid_Container::get_type(),
	528	+ [
	529	+ 'name' => 'grid',
	530	+ 'selector' => '{{WRAPPER}}',
	531	+ 'condition' => [
	532	+ 'container_type' => [ 'grid' ],
	533	+ ],
	534	+ ]
	535	+ );
	536	+ }
538	537
539	538	$this->end_controls_section();
540	539	}
541	540
		@@ -597,11 +596,11 @@
597	596
598	597	$this->add_control(
599	598	'link_note',
600	599	[
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' ),
	600	+ 'type' => Controls_Manager::RAW_HTML,
	601	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
	602	+ 'raw' => esc_html__( 'Don’t add links to elements nested in this container - it will break the layout.', 'elementor' ),
604	603	'condition' => [
605	604	'html_tag' => 'a',
606	605	],
607	606	]
		@@ -614,8 +613,9 @@
614	613	'type' => Controls_Manager::URL,
615	614	'dynamic' => [
616	615	'active' => true,
617	616	],
	617	+ 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
618	618	'condition' => [
619	619	'html_tag' => 'a',
620	620	],
621	621	]
		@@ -669,45 +669,14 @@
669	669	'fields_options' => [
670	670	'background' => [
671	671	'frontend_available' => true,
672	672	],
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		- ],
	673	+ 'image' => [
	674	+ 'background_lazyload' => [
	675	+ 'active' => true,
	676	+ 'keys' => [ 'background_image', 'url' ],
694	677	],
695	678	],
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	679	],
711	680	]
712	681	);
713	682
		@@ -733,25 +702,15 @@
733	702
734	703	$this->add_control(
735	704	'background_hover_transition',
736	705	[
737		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	706	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
738	707	'type' => Controls_Manager::SLIDER,
739	708	'default' => [
740	709	'size' => 0.3,
741	710	],
742		- 'range' => [
743		- 'px' => [
744		- 'min' => 0,
745		- 'max' => 3,
746		- 'step' => 0.1,
747		- ],
748		- ],
749	711	'render_type' => 'ui',
750	712	'separator' => 'before',
751		- 'condition' => [
752		- 'background_hover_background' => [ 'classic', 'gradient' ],
753		- ],
754	713	'selectors' => [
755	714	'{{WRAPPER}}' => '--background-transition: {{SIZE}}s;',
756	715	],
757	716	]
		@@ -803,8 +762,14 @@
803	762	// Hack to set the `::before` content in order to render it only when there is a background overlay.
804	763	$background_overlay_selector => '--background-overlay: \'\';',
805	764	],
806	765	],
	766	+ 'image' => [
	767	+ 'background_lazyload' => [
	768	+ 'active' => true,
	769	+ 'keys' => [ 'background_overlay_image', 'url' ],
	770	+ ],
	771	+ ],
807	772	],
808	773	]
809	774	);
810	775
		@@ -944,16 +909,23 @@
944	909	],
945	910	]
946	911	);
947	912
	913	+ $this->add_group_control(
	914	+ Group_Control_Css_Filter::get_type(),
	915	+ [
	916	+ 'name' => 'css_filters_hover',
	917	+ 'selector' => '{{WRAPPER}}:hover::before',
	918	+ ]
	919	+ );
	920	+
948	921	$this->add_control(
949	922	'background_overlay_hover_transition',
950	923	[
951		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	924	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
952	925	'type' => Controls_Manager::SLIDER,
953	926	'range' => [
954	927	'px' => [
955		- 'min' => 0,
956	928	'max' => 3,
957	929	'step' => 0.1,
958	930	],
959	931	],
		@@ -958,11 +930,8 @@
958	930	],
959	931	],
960	932	'render_type' => 'ui',
961	933	'separator' => 'before',
962		- 'condition' => [
963		- 'background_overlay_hover_background' => [ 'classic', 'gradient' ],
964		- ],
965	934	'selectors' => [
966	935	'{{WRAPPER}}, {{WRAPPER}}::before' => '--overlay-transition: {{SIZE}}s;',
967	936	],
968	937	]
		@@ -967,16 +936,8 @@
967	936	],
968	937	]
969	938	);
970	939
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	940	$this->end_controls_tab();
980	941
981	942	$this->end_controls_tabs();
982	943
		@@ -1016,9 +977,9 @@
1016	977	'selector' => '{{WRAPPER}}',
1017	978	'fields_options' => [
1018	979	'width' => [
1019	980	'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}};',
	981	+ '{{SELECTOR}}' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-width-top: {{TOP}}{{UNIT}}; --border-width-right: {{RIGHT}}{{UNIT}}; --border-width-bottom: {{BOTTOM}}{{UNIT}}; --border-width-left: {{LEFT}}{{UNIT}};',
1021	982	],
1022	983	],
1023	984	'color' => [
1024	985	'selectors' => [
		@@ -1040,9 +1001,9 @@
1040	1001	'label' => esc_html__( 'Border Radius', 'elementor' ),
1041	1002	'type' => Controls_Manager::DIMENSIONS,
1042	1003	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1043	1004	'selectors' => [
1044		- '{{WRAPPER}}' => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1005	+ '{{WRAPPER}}' => '--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}};',
1045	1006	],
1046	1007	]
1047	1008	);
1048	1009
		@@ -1072,9 +1033,9 @@
1072	1033	'selector' => '{{WRAPPER}}:hover',
1073	1034	'fields_options' => [
1074	1035	'width' => [
1075	1036	'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}};',
	1037	+ '{{SELECTOR}}' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-width-top: {{TOP}}{{UNIT}}; --border-width-right: {{RIGHT}}{{UNIT}}; --border-width-bottom: {{BOTTOM}}{{UNIT}}; --border-width-left: {{LEFT}}{{UNIT}};',
1077	1038	],
1078	1039	],
1079	1040	'color' => [
1080	1041	'selectors' => [
		@@ -1107,9 +1068,9 @@
1107	1068
1108	1069	$this->add_control(
1109	1070	'border_hover_transition',
1110	1071	[
1111		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	1072	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
1112	1073	'type' => Controls_Manager::SLIDER,
1113	1074	'separator' => 'before',
1114	1075	'default' => [
1115	1076	'size' => 0.3,
		@@ -1115,9 +1076,8 @@
1115	1076	'size' => 0.3,
1116	1077	],
1117	1078	'range' => [
1118	1079	'px' => [
1119		- 'min' => 0,
1120	1080	'max' => 3,
1121	1081	'step' => 0.1,
1122	1082	],
1123	1083	],
		@@ -1124,32 +1084,17 @@
1124	1084	'conditions' => [
1125	1085	'relation' => 'or',
1126	1086	'terms' => [
1127	1087	[
1128		- 'name' => 'border_hover_border',
	1088	+ 'name' => 'background_background',
1129	1089	'operator' => '!==',
1130	1090	'value' => '',
1131	1091	],
1132	1092	[
1133		- 'name' => 'border_radius_hover[top]',
	1093	+ 'name' => 'border_border',
1134	1094	'operator' => '!==',
1135	1095	'value' => '',
1136	1096	],
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	1097	],
1153	1098	],
1154	1099	'selectors' => [
1155	1100	'{{WRAPPER}}, {{WRAPPER}}::before' => '--border-transition: {{SIZE}}s;',
		@@ -1180,8 +1125,16 @@
1180	1125	);
1181	1126
1182	1127	$this->start_controls_tabs( 'tabs_shape_dividers' );
1183	1128
	1129	+ $shapes_options = [
	1130	+ '' => esc_html__( 'None', 'elementor' ),
	1131	+ ];
	1132	+
	1133	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	1134	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	1135	+ }
	1136	+
1184	1137	foreach ( [
1185	1138	'top' => esc_html__( 'Top', 'elementor' ),
1186	1139	'bottom' => esc_html__( 'Bottom', 'elementor' ),
1187	1140	] as $side => $side_label ) {
		@@ -1197,30 +1150,12 @@
1197	1150	$this->add_control(
1198	1151	$base_control_key,
1199	1152	[
1200	1153	'label' => esc_html__( 'Type', 'elementor' ),
1201		- 'type' => Controls_Manager::VISUAL_CHOICE,
1202		- 'label_block' => true,
1203		- 'columns' => 2,
1204		- 'options' => Shapes::get_shapes(),
	1154	+ 'type' => Controls_Manager::SELECT,
	1155	+ 'options' => $shapes_options,
1205	1156	'render_type' => 'none',
1206	1157	'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	1158	]
1224	1159	);
1225	1160
1226	1161	$this->add_control(
		@@ -1241,9 +1176,8 @@
1241	1176	$base_control_key . '_width',
1242	1177	[
1243	1178	'label' => esc_html__( 'Width', 'elementor' ),
1244	1179	'type' => Controls_Manager::SLIDER,
1245		- 'size_units' => [ '%', 'vw', 'custom' ],
1246	1180	'default' => [
1247	1181	'unit' => '%',
1248	1182	],
1249	1183	'tablet_default' => [
		@@ -1256,12 +1190,8 @@
1256	1190	'%' => [
1257	1191	'min' => 100,
1258	1192	'max' => 300,
1259	1193	],
1260		- 'vw' => [
1261		- 'min' => 100,
1262		- 'max' => 300,
1263		- ],
1264	1194	],
1265	1195	'condition' => [
1266	1196	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1267	1197	],
		@@ -1275,19 +1205,12 @@
1275	1205	$base_control_key . '_height',
1276	1206	[
1277	1207	'label' => esc_html__( 'Height', 'elementor' ),
1278	1208	'type' => Controls_Manager::SLIDER,
1279		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1280	1209	'range' => [
1281	1210	'px' => [
1282	1211	'max' => 500,
1283	1212	],
1284		- 'em' => [
1285		- 'max' => 50,
1286		- ],
1287		- 'rem' => [
1288		- 'max' => 50,
1289		- ],
1290	1213	],
1291	1214	'condition' => [
1292	1215	"shape_divider_$side!" => '',
1293	1216	],
		@@ -1380,9 +1303,9 @@
1380	1303	'label' => esc_html__( 'Margin', 'elementor' ),
1381	1304	'type' => Controls_Manager::DIMENSIONS,
1382	1305	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1383	1306	'selectors' => [
1384		- '{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left: {{LEFT}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}};',
	1307	+ '{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left:{{LEFT}}{{UNIT}};',
1385	1308	],
1386	1309	]
1387	1310	);
1388	1311
		@@ -1392,111 +1315,13 @@
1392	1315	'label' => esc_html__( 'Padding', 'elementor' ),
1393	1316	'type' => Controls_Manager::DIMENSIONS,
1394	1317	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1395	1318	'selectors' => [
1396		- '{{WRAPPER}}' => '--padding-top: {{TOP}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}};',
	1319	+ '{{WRAPPER}}' => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};',
1397	1320	],
1398	1321	]
1399	1322	);
1400	1323
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	1324	$this->add_group_control(
1500	1325	Group_Control_Flex_Item::get_type(),
1501	1326	[
1502	1327	'name' => '_flex',
		@@ -1515,12 +1340,11 @@
1515	1340
1516	1341	$this->add_control(
1517	1342	'position_description',
1518	1343	[
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' ),
	1344	+ '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' ),
	1345	+ 'type' => Controls_Manager::RAW_HTML,
	1346	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
1523	1347	'render_type' => 'ui',
1524	1348	'condition' => [
1525	1349	'position!' => '',
1526	1350	],
		@@ -1586,8 +1410,9 @@
1586	1410	'range' => [
1587	1411	'px' => [
1588	1412	'min' => -1000,
1589	1413	'max' => 1000,
	1414	+ 'step' => 1,
1590	1415	],
1591	1416	'%' => [
1592	1417	'min' => -200,
1593	1418	'max' => 200,
		@@ -1601,9 +1426,9 @@
1601	1426	'max' => 200,
1602	1427	],
1603	1428	],
1604	1429	'default' => [
1605		- 'size' => 0,
	1430	+ 'size' => '0',
1606	1431	],
1607	1432	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1608	1433	'selectors' => [
1609	1434	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
		@@ -1624,8 +1449,9 @@
1624	1449	'range' => [
1625	1450	'px' => [
1626	1451	'min' => -1000,
1627	1452	'max' => 1000,
	1453	+ 'step' => 0.1,
1628	1454	],
1629	1455	'%' => [
1630	1456	'min' => -200,
1631	1457	'max' => 200,
		@@ -1639,9 +1465,9 @@
1639	1465	'max' => 200,
1640	1466	],
1641	1467	],
1642	1468	'default' => [
1643		- 'size' => 0,
	1469	+ 'size' => '0',
1644	1470	],
1645	1471	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1646	1472	'selectors' => [
1647	1473	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
		@@ -1686,8 +1512,9 @@
1686	1512	'range' => [
1687	1513	'px' => [
1688	1514	'min' => -1000,
1689	1515	'max' => 1000,
	1516	+ 'step' => 1,
1690	1517	],
1691	1518	'%' => [
1692	1519	'min' => -200,
1693	1520	'max' => 200,
		@@ -1702,9 +1529,9 @@
1702	1529	],
1703	1530	],
1704	1531	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1705	1532	'default' => [
1706		- 'size' => 0,
	1533	+ 'size' => '0',
1707	1534	],
1708	1535	'selectors' => [
1709	1536	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
1710	1537	],
		@@ -1723,8 +1550,9 @@
1723	1550	'range' => [
1724	1551	'px' => [
1725	1552	'min' => -1000,
1726	1553	'max' => 1000,
	1554	+ 'step' => 1,
1727	1555	],
1728	1556	'%' => [
1729	1557	'min' => -200,
1730	1558	'max' => 200,
		@@ -1739,9 +1567,9 @@
1739	1567	],
1740	1568	],
1741	1569	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1742	1570	'default' => [
1743		- 'size' => 0,
	1571	+ 'size' => '0',
1744	1572	],
1745	1573	'selectors' => [
1746	1574	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
1747	1575	],
		@@ -1799,10 +1627,8 @@
1799	1627	'classes' => 'elementor-control-direction-ltr',
1800	1628	]
1801	1629	);
1802	1630
1803		- Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1804		-
1805	1631	$this->end_controls_section();
1806	1632	}
1807	1633
1808	1634	/**
		@@ -1818,10 +1644,8 @@
1818	1644	'tab' => Controls_Manager::TAB_ADVANCED,
1819	1645	]
1820	1646	);
1821	1647
1822		- Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1823		-
1824	1648	$this->add_responsive_control(
1825	1649	'animation',
1826	1650	[
1827	1651	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
		@@ -1929,19 +1753,15 @@
1929	1753	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1930	1754	}
1931	1755
1932	1756	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		-
	1757	+ add_action( 'elementor/element/container/_section_transform/after_section_start', function( $container ) {
1938	1758	$container->add_control(
1939	1759	'transform_sticky_notice',
1940	1760	[
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' ),
	1761	+ 'type' => Controls_Manager::RAW_HTML,
	1762	+ 'raw' => esc_html__( 'Note: Avoid applying transform properties on sticky containers. Doing so might cause unexpected results.', 'elementor' ),
	1763	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
1944	1764	]
1945	1765	);
1946	1766	} );
1947	1767	}
		@@ -1954,44 +1774,6 @@
1954	1774	protected function register_controls() {
1955	1775	$this->register_layout_tab();
1956	1776	$this->register_style_tab();
1957	1777	$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	1778	}
1997	1779	}