Borders: Fix border style on color/width clearing and global styles f…

…allback logic (#49738)
WordPress · Apr 18, 2023 · 14e5f64 · 14e5f64
1 parent ed2c93c
commit 14e5f64
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -45,35 +45,6 @@ function useHasBorderWidthControl( settings ) {
 	return settings?.border?.width;
 }
 
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
 function BorderToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -186,7 +157,7 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const updatedBorder = applyAllFallbackStyles( newBorder );
+		const updatedBorder = { ...newBorder };
 
 		if ( hasSplitBorders( updatedBorder ) ) {
 			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {

diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -16,6 +16,41 @@ const {
 	BorderPanel: StylesBorderPanel,
 } = unlock( blockEditorPrivateApis );
 
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
 export default function BorderPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -42,7 +77,7 @@ export default function BorderPanel( { name, variation = '' } ) {
 		// the `border` style property. This means if the theme.json defined
 		// split borders and the user condenses them into a flat border or
 		// vice-versa we'd get both sets of styles which would conflict.
-		const { border } = newStyle;
+		const border = applyAllFallbackStyles( newStyle?.border );
 		const updatedBorder = ! hasSplitBorders( border )
 			? {
 					top: border,