Fix: Container is not functioning as expected [ED-6747] (elementor#18199

)

* Fix: Slides widget breaks when placed inside a container with Row direction [ED-6716]

* Fix: Container handles are being overridden due to z-index value assigned to the container [ED-6714]

* Fix: Media carousel set to slideshow breaks on mobile when placed in a Container [ED-6796]

* Fix: Left and Right Margin values do not apply on 1st level containers [ED-6784]

* Fix: UI glitch in the panel [ED-6741]

* Fix: Container can't be added to favorites [ED-6748]

assets/dev/scss/frontend/_container.scss

@@ -14,13 +14,16 @@
 	--min-height: initial;
 	--height: auto;
 	--text-align: initial;
-	--margin: 0;
+	--margin-top: 0;
+	--margin-right: 0;
+	--margin-bottom: 0;
+	--margin-left: 0;
 	--padding-top: var( --container-default-padding, 0px );
 	--padding-right: var( --container-default-padding, 0px );
 	--padding-bottom: var( --container-default-padding, 0px );
 	--padding-left: var( --container-default-padding, 0px );
 	--position: relative;
-	--z-index: 0;
+	--z-index: revert;
 	--overflow: visible;
 	--transition: 0;
 	--gap: var( --widgets-spacing, 20px ); // Use the gap from `Site Settings` or default to 20px.
@@ -45,7 +48,7 @@
 	min-height: var( --min-height );
 	height: var( --height );
 	border-radius: var( --border-radius );
-	margin: var( --margin );
+	margin: var( --margin-top ) var( --margin-right ) var( --margin-bottom ) var( --margin-left );
 	// Custom content-width hack.
 	padding-left: calc( ( 100% - var( --content-width ) ) / 2 + var( --padding-left ) );
 	padding-right: calc( ( 100% - var( --content-width ) ) / 2 + var( --padding-right ) );
@@ -55,10 +58,10 @@
 	overflow: var( --overflow );
 	transition: var( --transition );
 
-	// Force center only top-level containers.
-	:is( .elementor-section-wrap,/* To support legacy markup */ [data-elementor-id] ) > & {
-		margin-right: auto;
-		margin-left: auto;
+	// Default top-level containers to be centered.
+	:is( .elementor-section-wrap, [data-elementor-id] ) > & {
+		--margin-right: auto;
+		--margin-left: auto;
 	}
 
 	.elementor-empty-view {
@@ -160,13 +163,23 @@
 		border-radius: var( --border-radius );
 	}
 
-	// Fix iframe-based widgets (ED-5338).
-	// TODO: Find a better solution.
 	.elementor-widget {
+		// Fix swiper-based widgets (ED-6716).
+		// Since the default is `min-width: auto` for flex items.
+		min-width: 0;
+
+		// Fix iframe-based widgets (ED-5338).
+		// TODO: Find a better solution.
 		&-video,
 		&-google_maps {
 			flex-basis: 100%;
 		}
+
+		// Fix media carousel widget broken (ED-6796).
+		// TODO: Find a better solution.
+		&-media-carousel {
+			max-width: 100%;
+		}
 	}
 
 	// Inner Container handle.

core/base/document.php

@@ -555,17 +555,17 @@ protected function get_initial_config() {
 		do_action( 'elementor/document/before_get_config', $this );
 
 		if ( static::get_property( 'has_elements' ) ) {
-			$container = [];
+			$container_config = [];
 			$experiments_manager = Plugin::$instance->experiments;
 
 			if ( $experiments_manager->is_feature_active( 'container' ) ) {
-				$container = [
-					'container' => ( new Container() )->get_config(),
+				$container_config = [
+					'container' => Plugin::$instance->elements_manager->get_element_types( 'container' )->get_config(),
 				];
 			}
 
 			$config['elements'] = $this->get_elements_raw_data( null, true );
-			$config['widgets'] = $container + Plugin::$instance->widgets_manager->get_widget_types_config();
+			$config['widgets'] = $container_config + Plugin::$instance->widgets_manager->get_widget_types_config();
 		}
 
 		$additional_config = [];

includes/elements/container.php

@@ -1156,7 +1156,7 @@ protected function register_advanced_controls() {
 				'type' => Controls_Manager::DIMENSIONS,
 				'size_units' => [ 'px', 'em', '%', 'rem' ],
 				'selectors' => [
-					'{{WRAPPER}}' => '--margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
+					'{{WRAPPER}}' => '--margin-top: {{TOP}}{{UNIT}}; --margin-right: {{RIGHT}}{{UNIT}}; --margin-bottom: {{BOTTOM}}{{UNIT}}; --margin-left:{{LEFT}}{{UNIT}};',
 				],
 			]
 		);

includes/widgets/common.php

@@ -255,7 +255,6 @@ private function register_layout_section() {
 				'selectors' => [
 					'{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
 				],
-				'separator' => 'after',
 				'condition' => [ '_element_width' => 'initial' ],
 				'device_args' => $this->get_responsive_device_args( [
 					'condition' => [
@@ -282,6 +281,11 @@ private function register_layout_section() {
 						'grow',
 						'shrink',
 					],
+					'fields_options' => [
+						'align_self' => [
+							'separator' => 'before',
+						],
+					],
 				]
 			);
 		}

modules/favorites/assets/js/editor/types/widgets/widgets.js

@@ -120,7 +120,7 @@ export default class Widgets extends FavoriteType {
 	 * @returns {[]}
 	 */
 	addContextMenuGroups( groups, context ) {
-		const widget = context.options.model.get( 'widgetType' );
+		const widget = context.options.model.get( 'widgetType' ) || context.options.model.get( 'elType' );
 
 		return groups.concat( [
 			{

modules/favorites/types/widgets.php

@@ -34,8 +34,13 @@ public function prepare( $favorites ) {
 	 * @return string[]
 	 */
 	public function get_available() {
-		return (array) array_keys(
-			Plugin::instance()->widgets_manager->get_widget_types()
+		return array_merge(
+			array_keys(
+				Plugin::instance()->widgets_manager->get_widget_types()
+			),
+			array_keys(
+				Plugin::instance()->elements_manager->get_element_types()
+			)
 		);
 	}
 
@@ -48,6 +53,11 @@ public function update_widget_categories( $document ) {
 		foreach ( $this->values() as $favorite ) {
 			$widget = Plugin::$instance->widgets_manager->get_widget_types( $favorite );
 
+			// If it's not a widget, maybe it's an element.
+			if ( ! $widget ) {
+				$widget = Plugin::$instance->elements_manager->get_element_types( $favorite );
+			}
+
 			if ( $widget ) {
 				$widget->set_config( 'categories', [ static::CATEGORY_SLUG ] );
 			}