Update global styles sidebar border controls UI

WordPress · May 10, 2021 · 975097b · 975097b
1 parent 071a69c
commit 975097b
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 54 deletions.
diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js
@@ -26,7 +26,7 @@ export const BorderWidthEdit = ( props ) => {
 	} = props;
 
 	// Step value is maintained in state so step is appropriate for current unit
-	// even when current radius value is undefined.
+	// even when current width value is undefined.
 	const initialStep = parseUnit( style?.border?.width ) === 'px' ? 1 : 0.25;
 	const [ step, setStep ] = useState( initialStep );
 

diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -2,25 +2,32 @@
  * WordPress dependencies
  */
 import {
+	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useEditorFeature } from '../editor/utils';
 
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUE = 50;
 const MIN_BORDER_WIDTH = 0;
-const MAX_BORDER_WIDTH = 50;
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
 // color control.
 const EMPTY_ARRAY = [];
+const CSS_UNITS = [
+	{ value: 'px', label: 'px', default: '' },
+	{ value: 'em', label: 'em', default: '' },
+	{ value: 'rem', label: 'rem', default: '' },
+];
 
 export function useHasBorderPanel( { supports, name } ) {
 	const controls = [
@@ -61,28 +68,32 @@ function useHasBorderWidthControl( { supports, name } ) {
 	);
 }
 
+function parseUnit( cssValue ) {
+	const value = String( cssValue ).trim();
+	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
+	const unit = unitMatch !== undefined ? unitMatch.toLowerCase() : '';
+	const currentUnit = CSS_UNITS.find( ( item ) => item.value === unit );
+
+	return currentUnit?.value || 'px';
+}
+
 export default function BorderPanel( {
 	context: { supports, name },
 	getStyle,
 	setStyle,
 } ) {
-	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
-	const borderStyle = getStyle( name, 'borderStyle' );
-
 	// Border width.
 	const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
-	const borderWidthValue = parseInt(
-		getStyle( name, 'borderWidth' ) || 0,
-		10
-	);
+	const borderWidthValue = getStyle( name, 'borderWidth' );
 
-	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
-	const borderRadiusValue = parseInt(
-		getStyle( name, 'borderRadius' ) || 0,
-		10
-	);
+	// Step value is maintained in state so step is appropriate for current unit
+	// even when current width value is undefined.
+	const initialStep = parseUnit( borderWidthValue ) === 'px' ? 1 : 0.25;
+	const [ step, setStep ] = useState( initialStep );
+
+	// Border style.
+	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
+	const borderStyle = getStyle( name, 'borderStyle' );
 
 	// Border color.
 	const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
@@ -91,43 +102,42 @@ export default function BorderPanel( {
 	const hasBorderColor = useHasBorderColorControl( { supports, name } );
 	const borderColor = getStyle( name, 'borderColor' );
 
+	// Border radius.
+	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
+	const borderRadiusValues = getStyle( name, 'borderRadius' );
+
 	return (
 		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ hasBorderStyle && (
-				<BorderStyleControl
-					value={ borderStyle }
-					onChange={ ( value ) =>
-						setStyle( name, 'borderStyle', value )
-					}
-				/>
-			) }
-			{ hasBorderWidth && (
-				<RangeControl
-					value={ borderWidthValue }
-					label={ __( 'Width' ) }
-					min={ MIN_BORDER_WIDTH }
-					max={ MAX_BORDER_WIDTH }
-					initialPosition={ borderWidthValue }
-					allowReset
-					onChange={ ( value ) => {
-						const widthStyle = value ? `${ value }px` : undefined;
-						setStyle( name, 'borderWidth', widthStyle );
-					} }
-				/>
-			) }
-			{ hasBorderRadius && (
-				<RangeControl
-					value={ borderRadiusValue }
-					label={ __( 'Radius' ) }
-					min={ MIN_BORDER_RADIUS_VALUE }
-					max={ MAX_BORDER_RADIUS_VALUE }
-					initialPosition={ borderRadiusValue }
-					allowReset
-					onChange={ ( value ) => {
-						const radiusStyle = value ? `${ value }px` : undefined;
-						setStyle( name, 'borderRadius', radiusStyle );
-					} }
-				/>
+			{ ( hasBorderWidth || hasBorderStyle ) && (
+				<div className="edit-site-global-styles-sidebar__border-controls-row">
+					{ hasBorderWidth && (
+						<UnitControl
+							value={ borderWidthValue }
+							label={ __( 'Width' ) }
+							min={ MIN_BORDER_WIDTH }
+							onChange={ ( value ) => {
+								setStyle(
+									name,
+									'borderWidth',
+									value || undefined
+								);
+							} }
+							onUnitChange={ ( newUnit ) => {
+								setStep( newUnit === 'px' ? 1 : 0.25 );
+							} }
+							step={ step }
+							units={ CSS_UNITS }
+						/>
+					) }
+					{ hasBorderStyle && (
+						<BorderStyleControl
+							value={ borderStyle }
+							onChange={ ( value ) =>
+								setStyle( name, 'borderStyle', value )
+							}
+						/>
+					) }
+				</div>
 			) }
 			{ hasBorderColor && (
 				<ColorGradientControl
@@ -142,6 +152,14 @@ export default function BorderPanel( {
 					}
 				/>
 			) }
+			{ hasBorderRadius && (
+				<BorderRadiusControl
+					values={ borderRadiusValues }
+					onChange={ ( value ) =>
+						setStyle( name, 'borderRadius', value )
+					}
+				/>
+			) }
 		</PanelBody>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -24,3 +24,17 @@
 .edit-site-global-styles-sidebar__reset-button.components-button {
 	margin-left: auto;
 }
+
+.edit-site-global-styles-sidebar__border-controls-row {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: $grid-unit-15;
+
+	> * {
+		width: calc(50% - #{ $grid-unit-10 });
+	}
+
+	.components-border-style-control__buttons {
+		margin-bottom: 0;
+	}
+}