Fix: Inner Section can’t be dragged into a column [ED-5910] (elementor#17258)

Author: Itzhak Avraham

assets/dev/js/editor/views/base-container.js

@@ -108,10 +108,7 @@ module.exports = Marionette.CompositeView.extend( {
 		model = Object.assign( model, model.custom );
 
 		// Check whether the container cannot contain a section, in which case we should use an inner-section.
-		if (
-			$e.components.get( 'document/elements' ).utils.isValidChild( new ElementModel( model ), container.model ) &&
-			'section' === model.elType
-		) {
+		if ( 'section' === model.elType ) {
 			model.isInner = true;
 		}
 
@@ -120,7 +117,7 @@ module.exports = Marionette.CompositeView.extend( {
 			title: elementor.helpers.getModelLabel( model ),
 		} );
 
-		if ( options.shouldWrap || model.isInner ) {
+		if ( options.shouldWrap ) {
 			const containerExperiment = elementorCommon.config.experimentalFeatures.container;
 
 			container = $e.run( 'document/elements/create', {

assets/dev/js/editor/views/preview.js

@@ -71,16 +71,10 @@ const Preview = BaseSectionsContainerView.extend( {
 	},
 
 	createElementFromModel: function( model, options = {} ) {
-		const shouldWrap = ! [ 'container', 'section' ].includes( model.elType || model?.get( 'elType' ) );
-
-		if ( ! shouldWrap ) {
-			delete options.at;
-		}
-
 		return BaseSectionsContainerView.prototype.createElementFromModel.call(
 			this,
 			model,
-			{ ...options, shouldWrap },
+			{ ...options, shouldWrap: 'container' !== model.elType },
 		);
 	},
 

tests/qunit/tests/assets/dev/js/editor/document/elements/commands/create.spec.js

@@ -298,6 +298,45 @@ export const Create = () => {
 				} );
 			} );
 		} );
+
+		QUnit.module( 'Drag and Drop', () => {
+			// This module is about simulating the creation of elements by the dnd mechanism, which uses the `create`
+			// command indirectly. This is done by the `createElementFromModel` method.
+			QUnit.test( 'Widget: Inner Section into Column', ( assert ) => {
+				const eSection = ElementsHelper.createSection( 1 ),
+					eColumn = eSection.children[ 0 ],
+					eInnerSection = ( () => {
+						try {
+							return eColumn.view.createElementFromModel( {
+								elType: 'section',
+								isInner: true,
+							} );
+						} catch ( e ) {
+							return false;
+						}
+					} )();
+
+				const isInnerSectionCreated = !! eColumn.children.find( ( widget ) => eInnerSection.id === widget.id );
+
+				assert.equal( isInnerSectionCreated, true, 'inner section were created.' );
+				assert.equal( eInnerSection.children?.length, DEFAULT_INNER_SECTION_COLUMNS,
+					`'${ DEFAULT_INNER_SECTION_COLUMNS }' columns were created in the inner section.` );
+			} );
+
+			QUnit.test( 'Widget: Inner Section into Preview', ( assert ) => {
+				const eInnerSection = elementor.getPreviewContainer().view.createElementFromModel( {
+						elType: 'section',
+						isInner: true,
+					} ),
+					ePreviewChildren = elementor.getPreviewContainer().children,
+					isInnerSectionCreated = !! ePreviewChildren[ ePreviewChildren.length - 1 ].children[ 0 ].children
+						.find( ( widget ) => eInnerSection.id === widget.id );
+
+				assert.equal( isInnerSectionCreated, true, 'inner section were created.' );
+				assert.equal( eInnerSection.children.length, DEFAULT_INNER_SECTION_COLUMNS,
+					`'${ DEFAULT_INNER_SECTION_COLUMNS }' columns were created in the inner section.` );
+			} );
+		} );
 	} );
 };