From c1a2b66aa1adbe25de4e877768e38466bfd387ed Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 24 Jul 2024 16:45:00 +0200
Subject: [PATCH 1/4] Use real labels instaed of headings or aria-labels.

---
 .../global-styles/shadows-edit-panel.js       | 41 +++++++++++--------
 .../src/components/global-styles/style.scss   |  9 ++++
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index 77bbdb88221167..66fd9ad5cd251d 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -14,7 +14,6 @@ import {
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -464,7 +463,8 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					label={ __( 'Inset' ) }
 				/>
 			</ToggleGroupControl>
-			<Grid columns={ 2 } gap={ 4 }>
+			<VStack gap={ 4 }>
+				>
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
@@ -488,7 +488,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
-			</Grid>
+			</VStack>
 		</VStack>
 	);
 }
@@ -510,29 +510,18 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
+		<HStack align="flex-end">
 			{ isCustomInput ? (
 				<UnitControl
 					label={ label }
-					hideLabelFromVision
 					__next40pxDefaultSize
 					value={ value }
 					onChange={ onValueChange }
+					className="edit-site-global-styles__shadow-editor-control"
 				/>
 			) : (
 				<RangeControl
+					label={ label }
 					value={ parsedQuantity ?? 0 }
 					onChange={ sliderOnChange }
 					withInputField={ false }
@@ -552,8 +541,24 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 					step={
 						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
 					}
+					className="edit-site-global-styles__shadow-editor-control"
 				/>
 			) }
-		</VStack>
+			<Flex
+				expanded={ false }
+				align="center"
+				className="edit-site-global-styles__shadow-editor-control-toggle-wrapper"
+			>
+				<Button
+					label={ __( 'Use custom size' ) }
+					icon={ settings }
+					onClick={ () => {
+						setIsCustomInput( ! isCustomInput );
+					} }
+					isPressed={ isCustomInput }
+					size="small"
+				/>
+			</Flex>
+		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 9bab48e308947a..d7961d12fd5d92 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -142,6 +142,15 @@
 .edit-site-global-styles__shadow-editor-panel {
 	// because tooltip of the range control is too close to the edge and creates overflow
 	margin-bottom: $grid-unit-05;
+
+	.edit-site-global-styles__shadow-editor-control {
+		flex-grow: 1;
+	}
+
+	.edit-site-global-styles__shadow-editor-control-toggle-wrapper {
+		// Make the button wrapper height the same as the adjacent input height.
+		height: $button-size-next-default-40px;
+	}
 }
 
 .edit-site-global-styles__shadow-editor__dropdown {

From adfde0c7b3609b45eb72e973c24c100cf4169e37 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 27 Aug 2024 15:55:21 +0200
Subject: [PATCH 2/4] Simplify by removing RangeControl.

---
 .../global-styles/shadows-edit-panel.js       | 76 +++----------------
 .../src/components/global-styles/style.scss   |  9 ---
 2 files changed, 11 insertions(+), 74 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index 66fd9ad5cd251d..a2af7cd146d719 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -13,14 +13,13 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -34,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -50,7 +48,6 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -463,8 +460,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					label={ __( 'Inset' ) }
 				/>
 			</ToggleGroupControl>
-			<VStack gap={ 4 }>
-				>
+			<Grid columns={ 2 } gap={ 4 }>
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
@@ -488,21 +484,12 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
-			</VStack>
+			</Grid>
 		</VStack>
 	);
 }
 
-function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -511,54 +498,13 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 
 	return (
 		<HStack align="flex-end">
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-					className="edit-site-global-styles__shadow-editor-control"
-				/>
-			) : (
-				<RangeControl
-					label={ label }
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-					className="edit-site-global-styles__shadow-editor-control"
-				/>
-			) }
-			<Flex
-				expanded={ false }
-				align="center"
-				className="edit-site-global-styles__shadow-editor-control-toggle-wrapper"
-			>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</Flex>
+			<UnitControl
+				label={ label }
+				__next40pxDefaultSize
+				value={ value }
+				onChange={ onValueChange }
+				className="edit-site-global-styles__shadow-editor-control"
+			/>
 		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index d7961d12fd5d92..9bab48e308947a 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -142,15 +142,6 @@
 .edit-site-global-styles__shadow-editor-panel {
 	// because tooltip of the range control is too close to the edge and creates overflow
 	margin-bottom: $grid-unit-05;
-
-	.edit-site-global-styles__shadow-editor-control {
-		flex-grow: 1;
-	}
-
-	.edit-site-global-styles__shadow-editor-control-toggle-wrapper {
-		// Make the button wrapper height the same as the adjacent input height.
-		height: $button-size-next-default-40px;
-	}
 }
 
 .edit-site-global-styles__shadow-editor__dropdown {

From cff1bad07dae8ba0003b0c8bcc239d9b515011d0 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 11 Sep 2024 11:40:39 +0200
Subject: [PATCH 3/4] Remove unnecessary HStack and className.

---
 .../global-styles/shadows-edit-panel.js           | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index a2af7cd146d719..608b2d8d75f730 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -497,14 +497,11 @@ function ShadowInputControl( { label, value, onChange } ) {
 	};
 
 	return (
-		<HStack align="flex-end">
-			<UnitControl
-				label={ label }
-				__next40pxDefaultSize
-				value={ value }
-				onChange={ onValueChange }
-				className="edit-site-global-styles__shadow-editor-control"
-			/>
-		</HStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }

From ad5580261eca367645bbf3ecb7fd1840b391707b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 17 Sep 2024 14:12:33 +0200
Subject: [PATCH 4/4] Remove no longer used hasNegativeRange prop.

---
 .../src/components/global-styles/shadows-edit-panel.js         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index 608b2d8d75f730..e9752de855f3fc 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -464,13 +464,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'x', value ) }
 				/>
 				<ShadowInputControl
 					label={ __( 'Y Position' ) }
 					value={ shadowObj.y }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'y', value ) }
 				/>
 				<ShadowInputControl
@@ -481,7 +479,6 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'Spread' ) }
 					value={ shadowObj.spread }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
 			</Grid>