fix the issue where block spacing control not shown when only one sid…

…e is set (#65371)

packages/block-editor/src/components/spacing-sizes-control/test/utils.js

@@ -378,41 +378,34 @@ describe( 'getInitialView', () => {
 				VIEWS.custom
 			);
 		} );
-	} );
-
-	describe( 'Single side view', () => {
-		it( 'should return single side when only single side supported', () => {
+		it( 'should return custom view even if only single side supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
+				VIEWS.custom
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.custom
 			);
 		} );
+	} );
 
+	describe( 'Single side view', () => {
 		it( 'should return single side when only single side supported and no value defined', () => {
 			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
 		} );
 
-		it( 'should return single side when only single side supported and all values defined', () => {
+		it( 'should return single side when only single side supported and has only axial sides', () => {
 			expect(
-				getInitialView(
-					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
-					[ 'top' ]
-				)
+				getInitialView( { top: '1em' }, [ 'horizontal', 'vertical' ] )
 			).toBe( VIEWS.top );
-		} );
-
-		it( 'should return single side view when only one side is supported', () => {
-			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
-				VIEWS.left
-			);
+			expect(
+				getInitialView( { left: '4em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.left );
 		} );
 	} );
 } );

packages/block-editor/src/components/spacing-sizes-control/utils.js

@@ -363,11 +363,10 @@ export function getInitialView( values = {}, sides ) {
 		top === bottom && left === right && ( !! top || !! left );
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
-
-	// Only single side supported and no value defined.
-	if ( sides?.length === 1 ) {
-		return sides[ 0 ];
-	}
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
 	if (
 		hasAxisSupport( sides ) &&
@@ -376,6 +375,24 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
+	// Only axial sides are supported and single value defined.
+	// - Ensure the side returned is the first side that has a value.
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
 	// Default to the Custom (separated sides) view.
 	return VIEWS.custom;
 }