Disable units independently of mixed colors & styles

WordPress · Oct 4, 2022 · aeb352b · aeb352b
1 parent a3e0a71
commit aeb352b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -46,6 +46,7 @@ const BorderBoxControl = (
 		className,
 		colors,
 		disableCustomColors,
+		disableUnits,
 		enableAlpha,
 		enableStyle,
 		hasMixedBorders,
@@ -100,7 +101,7 @@ const BorderBoxControl = (
 					<BorderControl
 						className={ linkedControlClassName }
 						colors={ colors }
-						disableUnits={ hasMixedBorders }
+						disableUnits={ disableUnits }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }

diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -41,6 +41,9 @@ export function useBorderBoxControl(
 		? ( value as Borders )
 		: getSplitBorders( value as Border | undefined );
 
+	// If no numeric width value is set, the unit select will be disabled.
+	const hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );
+
 	const [ isLinked, setIsLinked ] = useState( ! mixedBorders );
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
@@ -107,6 +110,7 @@ export function useBorderBoxControl(
 	return {
 		...otherProps,
 		className: classes,
+		disableUnits: mixedBorders && ! hasWidthValue,
 		hasMixedBorders: mixedBorders,
 		isLinked,
 		linkedControlClassName,