← All changes | includes/elements/container.php +119 -275 4.2.0 → 3.21.3 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,9 +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' ];
	81	+ $keywords = [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Layout' ];
	82	+
	83	+ if ( Plugin::$instance->experiments->is_feature_active( 'container_grid' ) ) {
	84	+ array_push( $keywords, 'Grid', 'Grid Container', 'CSS Grid' );
	85	+ }
	86	+
	87	+ return $keywords;
86	88	}
87	89
88	90	public function get_panel_presets() {
89	91	return [
		@@ -139,9 +141,8 @@
139	141	$config['controls'] = $this->get_controls();
140	142	$config['tabs_controls'] = $this->get_tabs_controls();
141	143	$config['show_in_panel'] = true;
142	144	$config['categories'] = [ 'layout' ];
143		- $config['include_in_widgets_config'] = true;
144	145
145	146	return $config;
146	147	}
147	148
		@@ -162,26 +163,21 @@
162	163	if ( ! settings.background_play_once ) {
163	164	videoAttributes += ' loop';
164	165	}
165	166
166		- view.addRenderAttribute(
167		- 'background-video-container',
168		- {
169		- 'class': 'elementor-background-video-container',
170		- }
171		- );
	167	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
172	168
173	169	if ( ! settings.background_play_on_mobile ) {
174		- view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	170	+ view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
175	171	}
176	172	#>
177	173	<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>
	174	+ <div class="elementor-background-video-embed"></div>
	175	+ <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
180	176	</div>
181	177	<# } #>
182		- <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
183		- <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
	178	+ <div class="elementor-shape elementor-shape-top"></div>
	179	+ <div class="elementor-shape elementor-shape-bottom"></div>
184	180	<# if ( 'boxed' === settings.content_width ) { #>
185	181	</div>
186	182	<# } #>
187	183	<?php
		@@ -202,24 +198,19 @@
202	198	if ( ! $settings['background_video_link'] ) {
203	199	return;
204	200	}
205	201
206		- $is_embed_video = Embed::is_embed_video( $settings['background_video_link'] );
	202	+ $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
207	203
208		- $this->add_render_attribute(
209		- 'background-video-container',
210		- [
211		- 'class' => 'elementor-background-video-container',
212		- ]
213		- );
	204	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
214	205
215	206	if ( ! $settings['background_play_on_mobile'] ) {
216		- $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
	207	+ $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
217	208	}
218	209
219	210	?><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>
	211	+ <?php if ( $video_properties ) : ?>
	212	+ <div class="elementor-background-video-embed"></div>
222	213	<?php
223	214	else :
224	215	$video_tag_attributes = 'autoplay muted playsinline';
225	216
		@@ -226,9 +217,9 @@
226	217	if ( 'yes' !== $settings['background_play_once'] ) {
227	218	$video_tag_attributes .= ' loop';
228	219	}
229	220	?>
230		- <video class="elementor-background-video-hosted" role="presentation" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
	221	+ <video class="elementor-background-video-hosted elementor-html5-video" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
231	222	<?php endif; ?>
232	223	</div><?php
233	224	}
234	225
		@@ -251,9 +242,9 @@
251	242	if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
252	243	return;
253	244	}
254	245	?>
255		- <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
	246	+ <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
256	247	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
257	248	?>">
258	249	<?php
259	250	// PHPCS - The file content is being read from a strict file path structure.
		@@ -333,19 +324,72 @@
333	324	*
334	325	* @return \Elementor\Element_Base|\Elementor\Widget_Base|null
335	326	*/
336	327	protected function _get_default_child_type( array $element_data ) {
337		- $el_types = array_keys( Plugin::$instance->elements_manager->get_element_types() );
	328	+ if ( 'container' === $element_data['elType'] ) {
	329	+ return Plugin::$instance->elements_manager->get_element_types( 'container' );
	330	+ }
338	331
339		- if ( in_array( $element_data['elType'], $el_types, true ) ) {
340		- return Plugin::$instance->elements_manager->get_element_types( $element_data['elType'] );
	332	+ return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	333	+ }
	334	+
	335	+ protected function get_flex_control_options( $is_container_grid_active ) {
	336	+ $flex_control_options = [
	337	+ 'name' => 'flex',
	338	+ 'selector' => '{{WRAPPER}}',
	339	+ 'fields_options' => [
	340	+ 'gap' => [
	341	+ 'label' => esc_html__( 'Gaps', 'elementor' ),
	342	+ 'device_args' => [
	343	+ Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
	344	+ // Use the default gap from the kit as a placeholder.
	345	+ 'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
	346	+ ],
	347	+ ],
	348	+ ],
	349	+ ],
	350	+ ];
	351	+
	352	+ if ( $is_container_grid_active ) {
	353	+ $flex_control_options['condition'] = [
	354	+ 'container_type' => 'flex',
	355	+ ];
341	356	}
342	357
343		- if ( ! isset( $element_data['widgetType'] ) ) {
344		- return null;
	358	+ return $flex_control_options;
	359	+ }
	360	+
	361	+ protected function get_container_type_control_options( $is_container_grid_active ) {
	362	+ if ( $is_container_grid_active ) {
	363	+ return [
	364	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	365	+ 'type' => Controls_Manager::SELECT,
	366	+ 'default' => 'flex',
	367	+ 'prefix_class' => 'e-',
	368	+ 'options' => [
	369	+ 'flex' => esc_html__( 'Flexbox', 'elementor' ),
	370	+ 'grid' => esc_html__( 'Grid', 'elementor' ),
	371	+ ],
	372	+ 'selectors' => [
	373	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	374	+ ],
	375	+ 'separator' => 'after',
	376	+ 'editor_available' => true,
	377	+ ];
345	378	}
346	379
347		- return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
	380	+ // TODO: This can be removed when the 'Container Grid Experiment' is merged.
	381	+ return [
	382	+ 'label' => esc_html__( 'Container Layout', 'elementor' ),
	383	+ 'type' => Controls_Manager::HIDDEN,
	384	+ 'render_type' => 'none',
	385	+ 'default' => 'flex',
	386	+ 'prefix_class' => 'e-',
	387	+ 'selectors' => [
	388	+ '{{WRAPPER}}' => '--display: {{VALUE}}',
	389	+ ],
	390	+ 'separator' => 'after',
	391	+ ];
348	392	}
349	393
350	394	/**
351	395	* Register the Container's layout controls.
		@@ -368,25 +412,13 @@
368	412	} else {
369	413	$min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
370	414	}
371	415
	416	+ $is_container_grid_active = Plugin::$instance->experiments->is_feature_active( 'container_grid' );
	417	+
372	418	$this->add_control(
373	419	'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		- ]
	420	+ $this->get_container_type_control_options( $is_container_grid_active )
389	421	);
390	422
391	423	$this->add_control(
392	424	'content_width',
		@@ -492,9 +524,8 @@
492	524	'max' => 1440,
493	525	],
494	526	],
495	527	'description' => sprintf(
496		- /* translators: %s: 100vh. */
497	528	esc_html__( 'To achieve full height Container use %s.', 'elementor' ),
498	529	'100vh'
499	530	),
500	531	'selectors' => [
		@@ -504,38 +535,23 @@
504	535	);
505	536
506	537	$this->add_group_control(
507	538	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		- ]
	539	+ $this->get_flex_control_options( $is_container_grid_active )
526	540	);
527	541
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		- );
	542	+ if ( $is_container_grid_active ) {
	543	+ $this->add_group_control(
	544	+ Group_Control_Grid_Container::get_type(),
	545	+ [
	546	+ 'name' => 'grid',
	547	+ 'selector' => '{{WRAPPER}}',
	548	+ 'condition' => [
	549	+ 'container_type' => [ 'grid' ],
	550	+ ],
	551	+ ]
	552	+ );
	553	+ }
538	554
539	555	$this->end_controls_section();
540	556	}
541	557
		@@ -673,45 +689,8 @@
673	689	],
674	690	]
675	691	);
676	692
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	693	$this->end_controls_tab();
715	694
716	695	/**
717	696	* Hover.
		@@ -747,11 +726,8 @@
747	726	],
748	727	],
749	728	'render_type' => 'ui',
750	729	'separator' => 'before',
751		- 'condition' => [
752		- 'background_hover_background' => [ 'classic', 'gradient' ],
753		- ],
754	730	'selectors' => [
755	731	'{{WRAPPER}}' => '--background-transition: {{SIZE}}s;',
756	732	],
757	733	]
		@@ -944,8 +920,16 @@
944	920	],
945	921	]
946	922	);
947	923
	924	+ $this->add_group_control(
	925	+ Group_Control_Css_Filter::get_type(),
	926	+ [
	927	+ 'name' => 'css_filters_hover',
	928	+ 'selector' => '{{WRAPPER}}:hover::before',
	929	+ ]
	930	+ );
	931	+
948	932	$this->add_control(
949	933	'background_overlay_hover_transition',
950	934	[
951	935	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
		@@ -958,11 +942,8 @@
958	942	],
959	943	],
960	944	'render_type' => 'ui',
961	945	'separator' => 'before',
962		- 'condition' => [
963		- 'background_overlay_hover_background' => [ 'classic', 'gradient' ],
964		- ],
965	946	'selectors' => [
966	947	'{{WRAPPER}}, {{WRAPPER}}::before' => '--overlay-transition: {{SIZE}}s;',
967	948	],
968	949	]
		@@ -967,16 +948,8 @@
967	948	],
968	949	]
969	950	);
970	951
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	952	$this->end_controls_tab();
980	953
981	954	$this->end_controls_tabs();
982	955
		@@ -1124,32 +1097,17 @@
1124	1097	'conditions' => [
1125	1098	'relation' => 'or',
1126	1099	'terms' => [
1127	1100	[
1128		- 'name' => 'border_hover_border',
	1101	+ 'name' => 'background_background',
1129	1102	'operator' => '!==',
1130	1103	'value' => '',
1131	1104	],
1132	1105	[
1133		- 'name' => 'border_radius_hover[top]',
	1106	+ 'name' => 'border_border',
1134	1107	'operator' => '!==',
1135	1108	'value' => '',
1136	1109	],
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	1110	],
1153	1111	],
1154	1112	'selectors' => [
1155	1113	'{{WRAPPER}}, {{WRAPPER}}::before' => '--border-transition: {{SIZE}}s;',
		@@ -1180,8 +1138,16 @@
1180	1138	);
1181	1139
1182	1140	$this->start_controls_tabs( 'tabs_shape_dividers' );
1183	1141
	1142	+ $shapes_options = [
	1143	+ '' => esc_html__( 'None', 'elementor' ),
	1144	+ ];
	1145	+
	1146	+ foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
	1147	+ $shapes_options[ $shape_name ] = $shape_props['title'];
	1148	+ }
	1149	+
1184	1150	foreach ( [
1185	1151	'top' => esc_html__( 'Top', 'elementor' ),
1186	1152	'bottom' => esc_html__( 'Bottom', 'elementor' ),
1187	1153	] as $side => $side_label ) {
		@@ -1197,30 +1163,12 @@
1197	1163	$this->add_control(
1198	1164	$base_control_key,
1199	1165	[
1200	1166	'label' => esc_html__( 'Type', 'elementor' ),
1201		- 'type' => Controls_Manager::VISUAL_CHOICE,
1202		- 'label_block' => true,
1203		- 'columns' => 2,
1204		- 'options' => Shapes::get_shapes(),
	1167	+ 'type' => Controls_Manager::SELECT,
	1168	+ 'options' => $shapes_options,
1205	1169	'render_type' => 'none',
1206	1170	'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	1171	]
1224	1172	);
1225	1173
1226	1174	$this->add_control(
		@@ -1397,106 +1345,8 @@
1397	1345	],
1398	1346	]
1399	1347	);
1400	1348
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	1349	$this->add_group_control(
1500	1350	Group_Control_Flex_Item::get_type(),
1501	1351	[
1502	1352	'name' => '_flex',
		@@ -1961,11 +1811,11 @@
1961	1811	return self::slider_to_gaps_converter( $element );
1962	1812	}
1963	1813
1964	1814	/**
1965		- * Convert slider to gaps control for the 3.16 upgrade script
	1815	+ * convert slider to gaps control for the 3.16 upgrade script
1966	1816	*
1967		- * @param array $element
	1817	+ * @param $element
1968	1818	* @return array
1969	1819	*/
1970	1820	public static function slider_to_gaps_converter( $element ) {
1971	1821	$breakpoints = array_keys( (array) Plugin::$instance->breakpoints->get_breakpoints() );
		@@ -1976,15 +1826,9 @@
1976	1826	$control = 'desktop' !== $breakpoint
1977	1827	? $control_name . '_' . $breakpoint
1978	1828	: $control_name;
1979	1829
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 ) {
	1830	+ if ( isset( $element['settings'][ $control ] ) ) {
1987	1831	$old_size = strval( $element['settings'][ $control ]['size'] );
1988	1832
1989	1833	$element['settings'][ $control ]['column'] = $old_size;
1990	1834	$element['settings'][ $control ]['row'] = $old_size;