From 76bedc8f846dca8becc36abb31d1e25ae20f441d Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Wed, 8 Sep 2021 15:05:25 +0200 Subject: [PATCH 1/3] Create two-way data binding for image ImageSizeControl `ImageSizeControl` uses `useDimensionHandler` hook to store image dimensions. This hook accepts default values and custom values. It derives its state from them (custom values then fails over to default values). As common with derived state, a bug surfaces when custom values change, because the state remains outdated. This commit observes custom values and updates the state when they're updated. --- .../use-dimension-handler.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js index b8c623b87c8a1a..6dfcc0d47083e4 100644 --- a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js +++ b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js @@ -3,7 +3,7 @@ */ import { useEffect, useState } from '@wordpress/element'; -export default function useDimensionHander( +export default function useDimensionHandler( customHeight, customWidth, defaultHeight, @@ -29,6 +29,23 @@ export default function useDimensionHander( } }, [ defaultWidth, defaultHeight ] ); + // if custom values change, it means an outsider has resized the image using some other method (eg resize box) + // we should keep track of these values too. We need to parse them before comparing them as well as they can be strings. + useEffect( () => { + if ( + customWidth !== undefined && + Number.parseInt( customWidth ) !== Number.parseInt( defaultWidth ) + ) { + setCurrentWidth( customWidth ); + } + if ( + customHeight !== undefined && + Number.parseInt( customHeight ) !== Number.parseInt( defaultHeight ) + ) { + setCurrentHeight( customHeight ); + } + }, [ customWidth, customHeight ] ); + const updateDimension = ( dimension, value ) => { if ( dimension === 'width' ) { setCurrentWidth( value ); From 84da9e180d1c047a590ad74b845f0f10e9681f4e Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Wed, 8 Sep 2021 22:01:25 +0200 Subject: [PATCH 2/3] Track current values instead of default values Tracking default values was a mistake. I think this should be the way to go. --- .../components/image-size-control/use-dimension-handler.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js index 6dfcc0d47083e4..67185060009b0d 100644 --- a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js +++ b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js @@ -30,17 +30,17 @@ export default function useDimensionHandler( }, [ defaultWidth, defaultHeight ] ); // if custom values change, it means an outsider has resized the image using some other method (eg resize box) - // we should keep track of these values too. We need to parse them before comparing them as well as they can be strings. + // we should keep track of these values too. We need to parse customWidth as it can be a string. useEffect( () => { if ( customWidth !== undefined && - Number.parseInt( customWidth ) !== Number.parseInt( defaultWidth ) + Number.parseInt( customWidth ) !== Number.parseInt( currentWidth ) ) { setCurrentWidth( customWidth ); } if ( customHeight !== undefined && - Number.parseInt( customHeight ) !== Number.parseInt( defaultHeight ) + Number.parseInt( customHeight ) !== Number.parseInt( currentHeight ) ) { setCurrentHeight( customHeight ); } From 2994b747960fb6d42a2b05eeaa1c5d2ac86ce499 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Wed, 8 Sep 2021 22:05:31 +0200 Subject: [PATCH 3/3] Improve code comments --- .../components/image-size-control/use-dimension-handler.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js index 67185060009b0d..4a8efbf187c23e 100644 --- a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js +++ b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js @@ -29,8 +29,8 @@ export default function useDimensionHandler( } }, [ defaultWidth, defaultHeight ] ); - // if custom values change, it means an outsider has resized the image using some other method (eg resize box) - // we should keep track of these values too. We need to parse customWidth as it can be a string. + // If custom values change, it means an outsider has resized the image using some other method (eg resize box) + // this keeps track of these values too. We need to parse before comparing; custom values can be strings. useEffect( () => { if ( customWidth !== undefined &&