diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js index 22191b4e1a8de..a8440bb5be8ca 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js +++ b/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 ); } ); } ); } ); diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js index df2da0d93d060..046bee98761bf 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/utils.js +++ b/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; }