From 82dafce74edc290229a47f7653a8a7611185d605 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 6 Dec 2024 12:27:56 +0100
Subject: [PATCH] Fix the arbitrary sides use-case and swap sides

---
 packages/components/src/box-control/index.tsx |  7 ++---
 .../src/box-control/input-control.tsx         | 20 +-------------
 packages/components/src/box-control/utils.ts  | 27 +++++++++++++++++++
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 7b219a33332d90..1c453913da3583 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -23,7 +23,7 @@ import {
 	getInitialSide,
 	isValuesMixed,
 	isValuesDefined,
-	ALL_SIDES,
+	getAllowedSides,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type {
@@ -160,6 +160,7 @@ function BoxControl( {
 		__next40pxDefaultSize,
 		size: undefined,
 	} );
+	const sidesToRender = getAllowedSides( sides );
 
 	return (
 		<Grid
@@ -188,7 +189,7 @@ function BoxControl( {
 
 			{ ! isLinked &&
 				splitOnAxis &&
-				[ 'horizontal', 'vertical' ].map( ( axis ) => (
+				[ 'vertical', 'horizontal' ].map( ( axis ) => (
 					<InputControl
 						key={ axis }
 						side={ axis as 'horizontal' | 'vertical' }
@@ -197,7 +198,7 @@ function BoxControl( {
 				) ) }
 			{ ! isLinked &&
 				! splitOnAxis &&
-				ALL_SIDES.map( ( axis ) => (
+				Array.from( sidesToRender ).map( ( axis ) => (
 					<InputControl
 						key={ axis }
 						side={ axis }
diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx
index b39040470dcf74..b2fcd2cb105978 100644
--- a/packages/components/src/box-control/input-control.tsx
+++ b/packages/components/src/box-control/input-control.tsx
@@ -10,8 +10,8 @@ import { __ } from '@wordpress/i18n';
 import Tooltip from '../tooltip';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
-	ALL_SIDES,
 	CUSTOM_VALUE_SETTINGS,
+	getAllowedSides,
 	getAllValue,
 	isValuesDefined,
 	isValuesMixed,
@@ -27,24 +27,6 @@ import type { BoxControlInputControlProps, BoxControlValue } from './types';
 
 const noop = () => {};
 
-function getAllowedSides( sides: BoxControlInputControlProps[ 'sides' ] ) {
-	const allowedSides: Set< keyof BoxControlValue > = new Set(
-		! sides ? ALL_SIDES : []
-	);
-	sides?.forEach( ( allowedSide ) => {
-		if ( allowedSide === 'vertical' ) {
-			allowedSides.add( 'top' );
-			allowedSides.add( 'bottom' );
-		} else if ( allowedSide === 'horizontal' ) {
-			allowedSides.add( 'right' );
-			allowedSides.add( 'left' );
-		} else {
-			allowedSides.add( allowedSide );
-		}
-	} );
-	return allowedSides;
-}
-
 function getSidesToModify(
 	side: BoxControlInputControlProps[ 'side' ],
 	sides: BoxControlInputControlProps[ 'sides' ],
diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts
index 6fcbaf932de3de..2d064d38f53b41 100644
--- a/packages/components/src/box-control/utils.ts
+++ b/packages/components/src/box-control/utils.ts
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import type {
+	BoxControlInputControlProps,
 	BoxControlProps,
 	BoxControlValue,
 	CustomValueUnits,
@@ -275,3 +276,29 @@ export function applyValueToSides(
 
 	return newValues;
 }
+
+/**
+ * Return the allowed sides based on the sides configuration.
+ *
+ * @param sides Sides configuration.
+ * @return Allowed sides.
+ */
+export function getAllowedSides(
+	sides: BoxControlInputControlProps[ 'sides' ]
+) {
+	const allowedSides: Set< keyof BoxControlValue > = new Set(
+		! sides ? ALL_SIDES : []
+	);
+	sides?.forEach( ( allowedSide ) => {
+		if ( allowedSide === 'vertical' ) {
+			allowedSides.add( 'top' );
+			allowedSides.add( 'bottom' );
+		} else if ( allowedSide === 'horizontal' ) {
+			allowedSides.add( 'right' );
+			allowedSides.add( 'left' );
+		} else {
+			allowedSides.add( allowedSide );
+		}
+	} );
+	return allowedSides;
+}