Clear border color selection on 0 border width

This clear border color selection when the border width is explicitly set to zero. When it is set back to a non-zero value (including undefined) it will attempt to restore the previous color selection if available.

packages/block-editor/src/hooks/border-width.js

@@ -26,26 +26,37 @@ const MIN_BORDER_WIDTH = 0;
  */
 export const BorderWidthEdit = ( props ) => {
 	const {
-		attributes: { style },
+		attributes: { borderColor, style },
 		setAttributes,
 	} = props;
 
-	const { width, style: borderStyle } = style?.border || {};
+	const { width, color: customBorderColor, style: borderStyle } =
+		style?.border || {};
 
 	// Step value is maintained in state so step is appropriate for current unit
 	// even when current radius value is undefined.
 	const initialStep = parseUnit( width )[ 1 ] === 'px' ? 1 : 0.25;
 	const [ step, setStep ] = useState( initialStep );
 	const [ styleSelection, setStyleSelection ] = useState();
+	const [ colorSelection, setColorSelection ] = useState();
 
-	// Temporarily track previous border style selection to be able to restore
-	// it when border width changes from zero value.
+	// Temporarily track previous border color & style selections to be able to
+	// restore them when border width changes from zero value.
 	useEffect( () => {
 		if ( borderStyle !== 'none' ) {
 			setStyleSelection( borderStyle );
 		}
 	}, [ borderStyle ] );
 
+	useEffect( () => {
+		if ( borderColor || customBorderColor ) {
+			setColorSelection( {
+				name: !! borderColor ? borderColor : undefined,
+				color: !! customBorderColor ? customBorderColor : undefined,
+			} );
+		}
+	}, [ borderColor, customBorderColor ] );
+
 	const onUnitChange = ( newUnit ) => {
 		setStep( newUnit === 'px' ? 1 : 0.25 );
 	};
@@ -59,12 +70,16 @@ export const BorderWidthEdit = ( props ) => {
 			},
 		};
 
+		// Used to clear named border color attribute.
+		let borderPaletteColor = borderColor;
+
 		const hasZeroWidth = parseFloat( newWidth ) === 0;
 
 		// Setting the border width explicitly to zero will also set the
-		// border style prop to `none`. This style will only be applied if
-		// border style support has also been opted into.
+		// border style to `none` and clear border color attributes.
 		if ( hasZeroWidth ) {
+			borderPaletteColor = undefined;
+			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
@@ -76,12 +91,22 @@ export const BorderWidthEdit = ( props ) => {
 			newStyle.border.style = styleSelection;
 		}
 
+		// Restore previous border color selection if width is no longer zero
+		// and current border color is undefined.
+		if ( ! hasZeroWidth && borderColor === undefined ) {
+			borderPaletteColor = colorSelection?.name;
+			newStyle.border.color = colorSelection?.color;
+		}
+
 		// If width was reset, clean out undefined styles.
 		if ( newWidth === undefined || newWidth === '' ) {
 			newStyle = cleanEmptyObject( newStyle );
 		}
 
-		setAttributes( { style: newStyle } );
+		setAttributes( {
+			borderColor: borderPaletteColor,
+			style: newStyle,
+		} );
 	};
 
 	const units = useCustomUnits( {