From dcc3a05e9e73b38111e537b146368f100a5e5d37 Mon Sep 17 00:00:00 2001
From: Itzhak <ItzhakA@elementor.com>
Date: Wed, 11 Aug 2021 19:34:26 +0300
Subject: [PATCH 1/2] Fix: Responsive values cascade wrongly with different
 dimensions on different breakpoints (#15797) [ED-4665]

---
 assets/dev/js/editor/controls/base-data.js | 23 +++++++++++-----------
 assets/dev/js/editor/editor-base.js        | 23 +++++++++++++++-------
 includes/base/controls-stack.php           |  2 +-
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/assets/dev/js/editor/controls/base-data.js b/assets/dev/js/editor/controls/base-data.js
index fd64338412d..57f82be36ec 100644
--- a/assets/dev/js/editor/controls/base-data.js
+++ b/assets/dev/js/editor/controls/base-data.js
@@ -196,16 +196,21 @@ ControlBaseDataView = ControlBaseView.extend( {
 	},
 
 	/**
-	 * Get the responsive child view if exists.
+	 * Get the responsive children views if exists.
 	 *
 	 * @returns {ControlBaseDataView|null}
 	 */
-	getResponsiveChildView: function() {
-		const child = this.model.get( 'child' );
+	getResponsiveChildrenViews: function() {
+		const children = this.model.get( 'inheritors' ),
+			views = [];
 
 		try {
-			return child && this.container.panel.getControlView( child );
+			for ( const child of children ) {
+				views.push( this.container.panel.getControlView( child ) );
+			}
 		} catch ( e ) {}
+
+		return views;
 	},
 
 	/**
@@ -254,9 +259,9 @@ ControlBaseDataView = ControlBaseView.extend( {
 	 * to be applied only from the responsive child of this control and on.
 	 */
 	propagatePlaceholder: function() {
-		const child = this.getResponsiveChildView();
+		const children = this.getResponsiveChildrenViews();
 
-		if ( child ) {
+		for ( const child of children ) {
 			child.renderWithChildren();
 		}
 	},
@@ -267,13 +272,9 @@ ControlBaseDataView = ControlBaseView.extend( {
 	 * children.
 	 */
 	renderWithChildren: function() {
-		const child = this.getResponsiveChildView();
-
 		this.render();
 
-		if ( child ) {
-			child.renderWithChildren();
-		}
+		this.propagatePlaceholder();
 	},
 
 	/**
diff --git a/assets/dev/js/editor/editor-base.js b/assets/dev/js/editor/editor-base.js
index 7383d910784..48157df0a78 100644
--- a/assets/dev/js/editor/editor-base.js
+++ b/assets/dev/js/editor/editor-base.js
@@ -1252,11 +1252,14 @@ export default class EditorBase extends Marionette.Application {
 
 	generateResponsiveControls( controls ) {
 		const { activeBreakpoints } = this.config.responsive,
-			devices = this.breakpoints.getActiveBreakpointsList( { largeToSmall: true } ),
-			newControlsStack = {};
+			devices = this.breakpoints.getActiveBreakpointsList( { largeToSmall: true, withDesktop: true } ),
+			newControlsStack = {},
+			secondDesktopChild = devices[ devices.indexOf( 'desktop' ) + 1 ];
 
 		// Set the desktop to be the fist device, so desktop will the the parent of all devices.
-		devices.unshift( 'desktop' );
+		devices.unshift(
+			devices.splice( devices.indexOf( 'desktop' ), 1 )[ 0 ]
+		);
 
 		jQuery.each( controls, ( controlName, controlConfig ) => {
 			let responsiveControlName;
@@ -1323,10 +1326,10 @@ export default class EditorBase extends Marionette.Application {
 
 				if ( 'desktop' !== device ) {
 					direction = activeBreakpoints[ device ].direction;
-				}
 
-				// Set the parent to be the previous device
-				controlArgs.parent = responsiveControlName;
+					// Set the parent to be the previous device
+					controlArgs.parent = device === secondDesktopChild ? controlName : responsiveControlName;
+				}
 
 				controlArgs.responsive[ direction ] = device;
 
@@ -1364,7 +1367,13 @@ export default class EditorBase extends Marionette.Application {
 				responsiveControlName = 'desktop' === device ? controlName : controlName + '_' + device;
 
 				if ( controlArgs.parent ) {
-					newControlsStack[ controlArgs.parent ].child = responsiveControlName;
+					const parentControlArgs = newControlsStack[ controlArgs.parent ];
+
+					if ( ! parentControlArgs.inheritors ) {
+						parentControlArgs.inheritors = [];
+					}
+
+					parentControlArgs.inheritors.push( responsiveControlName );
 				}
 
 				controlArgs.name = responsiveControlName;
diff --git a/includes/base/controls-stack.php b/includes/base/controls-stack.php
index be95926bb0b..1ab6707b242 100755
--- a/includes/base/controls-stack.php
+++ b/includes/base/controls-stack.php
@@ -894,7 +894,7 @@ final public function add_responsive_control( $id, array $args, $options = [] )
 			$control_name = $id . $id_suffix;
 
 			// Set this control as child of previous iteration control.
-			$this->update_control( $control_args['parent'], [ 'child' => $control_name ] );
+			$this->update_control( $control_args['parent'], [ 'inheritors' => [ $control_name ] ] );
 
 			if ( ! empty( $options['overwrite'] ) ) {
 				$this->update_control( $control_name, $control_args, [

From 87856a4dcbe3e7413536a9f6eaab8a8a3424ea78 Mon Sep 17 00:00:00 2001
From: Itzhak <ItzhakA@elementor.com>
Date: Wed, 11 Aug 2021 19:43:21 +0300
Subject: [PATCH 2/2] Progress

---
 assets/dev/js/editor/editor-base.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/dev/js/editor/editor-base.js b/assets/dev/js/editor/editor-base.js
index 48157df0a78..1cbb462e0b9 100644
--- a/assets/dev/js/editor/editor-base.js
+++ b/assets/dev/js/editor/editor-base.js
@@ -1324,6 +1324,8 @@ export default class EditorBase extends Marionette.Application {
 
 				let direction = 'max';
 
+				controlArgs.parent = null;
+
 				if ( 'desktop' !== device ) {
 					direction = activeBreakpoints[ device ].direction;