Simplify by removing RangeControl.

WordPress · Aug 27, 2024 · 31ba0ff · 31ba0ff
1 parent cf4f2b2
commit 31ba0ff
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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 );
@@ -449,8 +446,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					label={ __( 'Inset' ) }
 				/>
 			</ToggleGroupControl>
-			<VStack gap={ 4 }>
-				>
+			<Grid columns={ 2 } gap={ 4 }>
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
@@ -474,21 +470,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';
@@ -497,54 +484,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
@@ -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 {