From d9f916e184e0a5a2be7770e6dcfc6410e75778ec Mon Sep 17 00:00:00 2001
From: Alquen Antonio Sarmiento <sarmientoalquen@gmail.com>
Date: Fri, 12 Jul 2024 16:15:57 +0800
Subject: [PATCH] fix: also track height for tablet and mobile for height
 reset.

---
 src/block-components/image/edit.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js
index 16af0fd6a..4597bc4ab 100644
--- a/src/block-components/image/edit.js
+++ b/src/block-components/image/edit.js
@@ -25,8 +25,9 @@ import {
 import {
 	useBlockAttributesContext,
 	useBlockSetAttributesContext,
+	useDeviceType,
 } from '~stackable/hooks'
-import { useControlHandlers } from '~stackable/components/base-control2/hooks'
+import { getAttributeName } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -59,6 +60,8 @@ const Controls = props => {
 			imageHeightUnit: attributes.imageHeightUnit,
 			imageWidth: attributes.imageWidth,
 			imageHeight: attributes.imageHeight,
+			imageHeightTablet: attributes[ getAttributeName( 'imageHeight', 'tablet' ) ],
+			imageHeightMobile: attributes[ getAttributeName( 'imageHeight', 'mobile' ) ],
 			imageHasLightbox: attributes.imageHasLightbox,
 			imageSize: attributes.imageSize,
 			imageAlt: attributes.imageAlt,
@@ -73,6 +76,7 @@ const Controls = props => {
 		}
 	} )
 	const setAttributes = useBlockSetAttributesContext()
+	const deviceType = useDeviceType()
 
 	// Get the image size urls.
 	const { imageData } = useSelect( select => {
@@ -99,10 +103,6 @@ const Controls = props => {
 		return 100
 	}, [ attributes.imageWidth, attributes.imageWidthUnit, attributes.imageHeight, attributes.imageHeightUnit ] )
 
-	// Custom handler for aspect ratio change to allow extra operations
-	// while being responsive
-	const [ _, aspectRatioChangeHandler ] = useControlHandlers( 'imageAspectRatio', 'all', false )
-
 	return (
 		<>
 			{ applyFilters( 'stackable.block-component.image.before', null, props ) }
@@ -178,10 +178,14 @@ const Controls = props => {
 					// For blocks with fixed width like card block,
 					// set the height to auto to allow the aspect ratio to take effect.
 					onChange={ value => {
-						if ( value && props.hasHeight && !! attributes.imageHeight ) {
-							setAttributes( { imageHeight: '' } )
+						const attrImageAspectRatio = getAttributeName( 'imageAspectRatio', deviceType )
+						const attrImageHeight = getAttributeName( 'imageHeight', deviceType )
+						const values = { [ attrImageAspectRatio ]: value }
+
+						if ( value && props.hasHeight && !! attributes[ attrImageHeight ] ) {
+							values[ attrImageHeight ] = ''
 						}
-						aspectRatioChangeHandler( value )
+						setAttributes( values )
 					} }
 				/>
 			}