Skip to content

Commit

Permalink
Clean up unused utils of spacing sizes control (WordPress#68794)
Browse files Browse the repository at this point in the history 
* Remove `getAllRawValue` and unit tests
* Remove `isValuesMixed` and unit tests
* Remove `isValuesDefined` and unit tests
* Remove `getSupportedMenuItems` and unit tests

Co-authored-by: stokesman <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
  • Loading branch information
@stokesman @tyxla @Mamaduka
4 people authored Jan 22, 2025
1 parent eba2d71 commit 35e99d4
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 257 deletions.
151 changes: 0 additions & 151 deletions packages/block-editor/src/components/spacing-sizes-control/test/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@
*/
import {
ALL_SIDES,
getAllRawValue,
getCustomValueFromPreset,
getInitialView,
getPresetValueFromCustomValue,
getSliderValueFromPreset,
getSpacingPresetCssVar,
getSpacingPresetSlug,
getSupportedMenuItems,
hasAxisSupport,
hasBalancedSidesSupport,
isValuesDefined,
isValuesMixed,
isValueSpacingPreset,
LABELS,
VIEWS,
} from '../utils';

Expand Down Expand Up @@ -114,88 +109,6 @@ describe( 'getSliderValueFromPreset', () => {
} );
} );

describe( 'getAllRawValue', () => {
const customValues = {
top: '5px',
bottom: '5px',
left: '6px',
right: '2px',
};
it( 'should return the most common custom value from the values object', () => {
expect( getAllRawValue( customValues ) ).toBe( '5px' );
} );
const presetValues = {
top: 'var:preset|spacing|30',
bottom: 'var:preset|spacing|20',
left: 'var:preset|spacing|10',
right: 'var:preset|spacing|30',
};
it( 'should return the most common preset value from the values object', () => {
expect( getAllRawValue( presetValues ) ).toBe(
'var:preset|spacing|30'
);
} );
} );

describe( 'isValuesMixed', () => {
const unmixedValues = {
top: '5px',
bottom: '5px',
left: '5px',
right: '5px',
};
it( 'should return false if all values are the same', () => {
expect( isValuesMixed( unmixedValues ) ).toBe( false );
} );
const mixedValues = {
top: 'var:preset|spacing|30',
bottom: 'var:preset|spacing|20',
left: 'var:preset|spacing|10',
right: 'var:preset|spacing|30',
};
it( 'should return true if all the values are not the same', () => {
expect( isValuesMixed( mixedValues ) ).toBe( true );
} );
const singleValue = {
top: 'var:preset|spacing|30',
};
it( 'should return true if only one side set', () => {
expect( isValuesMixed( singleValue ) ).toBe( true );
} );
const incompleteValues = {
top: 'var:preset|spacing|30',
bottom: 'var:preset|spacing|30',
left: 'var:preset|spacing|30',
};
it( 'should return true if all sides not set', () => {
expect( isValuesMixed( incompleteValues ) ).toBe( true );
} );
} );

describe( 'isValuesDefined', () => {
const undefinedValues = {
top: undefined,
bottom: undefined,
left: undefined,
right: undefined,
};
it( 'should return false if values are not defined', () => {
expect( isValuesDefined( undefinedValues ) ).toBe( false );
} );
it( 'should return false if values is passed in as null', () => {
expect( isValuesDefined( null ) ).toBe( false );
} );
const definedValues = {
top: 'var:preset|spacing|30',
bottom: 'var:preset|spacing|20',
left: 'var:preset|spacing|10',
right: 'var:preset|spacing|30',
};
it( 'should return true if all the values are not the same', () => {
expect( isValuesDefined( definedValues ) ).toBe( true );
} );
} );

describe( 'hasAxisSupport', () => {
it( 'should return true for horizontal support if it is in sides', () => {
expect( hasAxisSupport( [ 'horizontal' ], 'horizontal' ) ).toBe( true );
Expand Down Expand Up @@ -228,70 +141,6 @@ describe( 'hasAxisSupport', () => {
} );
} );

describe( 'getSupportedMenuItems', () => {
it( 'returns no items when sides are not configured', () => {
expect( getSupportedMenuItems( [] ) ).toEqual( {} );
expect( getSupportedMenuItems() ).toEqual( {} );
} );

const sideConfigs = [
[ LABELS.axial, [ 'horizontal', 'vertical' ] ],
[ LABELS.axial, [ 'top', 'right', 'bottom', 'left' ] ],
[ LABELS.horizontal, [ 'horizontal' ] ],
[ LABELS.horizontal, [ 'left', 'right' ] ],
[ LABELS.vertical, [ 'vertical' ] ],
[ LABELS.vertical, [ 'top', 'bottom' ] ],
[ LABELS.horizontal, [ 'horizontal' ] ],
];

test.each( sideConfigs )(
'should include %s axial menu with %s sides',
( label, sides ) => {
expect( getSupportedMenuItems( sides ) ).toHaveProperty(
'axial.label',
label
);
}
);

it( 'returns no axial item when not not supported', () => {
expect( getSupportedMenuItems( [ 'left', 'top' ] ) ).not.toHaveProperty(
'axial'
);
} );

it( 'should include the correct individual side options', () => {
expect( getSupportedMenuItems( [ 'top' ] ) ).toHaveProperty(
'top.label',
LABELS.top
);
expect( getSupportedMenuItems( [ 'right' ] ) ).toHaveProperty(
'right.label',
LABELS.right
);
expect( getSupportedMenuItems( [ 'bottom' ] ) ).toHaveProperty(
'bottom.label',
LABELS.bottom
);
expect( getSupportedMenuItems( [ 'left' ] ) ).toHaveProperty(
'left.label',
LABELS.left
);
} );
it( 'should include the custom option only when applicable', () => {
expect( getSupportedMenuItems( [ 'top', 'left' ] ) ).toHaveProperty(
'custom.label',
LABELS.custom
);
expect( getSupportedMenuItems( [ 'top' ] ) ).not.toHaveProperty(
'custom'
);
expect(
getSupportedMenuItems( [ 'horizontal', 'vertical' ] )
).not.toHaveProperty( 'custom.label' );
} );
} );

describe( 'hasBalancedSidesSupport', () => {
it( 'should determine balanced sides', () => {
expect( hasBalancedSidesSupport( ALL_SIDES ) ).toBe( true );
Expand Down
106 changes: 0 additions & 106 deletions packages/block-editor/src/components/spacing-sizes-control/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,64 +184,6 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
return sliderValue !== -1 ? sliderValue : NaN;
}

/**
* Gets an items with the most occurrence within an array
* https://stackoverflow.com/a/20762713
*
* @param {Array<any>} arr Array of items to check.
* @return {any} The item with the most occurrences.
*/
function mode( arr ) {
return arr
.sort(
( a, b ) =>
arr.filter( ( v ) => v === a ).length -
arr.filter( ( v ) => v === b ).length
)
.pop();
}

/**
* Gets the 'all' input value from values data.
*
* @param {Object} values Box spacing values
*
* @return {string} The most common value from all sides of box.
*/
export function getAllRawValue( values = {} ) {
return mode( Object.values( values ) );
}

/**
* Checks to determine if values are mixed.
*
* @param {Object} values Box values.
* @param {Array} sides Sides that values relate to.
*
* @return {boolean} Whether values are mixed.
*/
export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
return (
( Object.values( values ).length >= 1 &&
Object.values( values ).length < sides.length ) ||
new Set( Object.values( values ) ).size > 1
);
}

/**
* Checks to determine if values are defined.
*
* @param {Object} values Box values.
*
* @return {boolean} Whether values are defined.
*/
export function isValuesDefined( values ) {
if ( values === undefined || values === null ) {
return false;
}
return Object.values( values ).filter( ( value ) => !! value ).length > 0;
}

/**
* Determines whether a particular axis has support. If no axis is
* specified, this function checks if either axis is supported.
Expand Down Expand Up @@ -275,54 +217,6 @@ export function hasAxisSupport( sides, axis ) {
return hasHorizontalSupport || hasVerticalSupport;
}

/**
* Determines which menu options should be included in the SidePicker.
*
* @param {Array} sides Supported sides.
*
* @return {Object} Menu options with each option containing label & icon.
*/
export function getSupportedMenuItems( sides ) {
if ( ! sides || ! sides.length ) {
return {};
}

const menuItems = {};

// Determine the primary "side" menu options.
const hasHorizontalSupport = hasAxisSupport( sides, 'horizontal' );
const hasVerticalSupport = hasAxisSupport( sides, 'vertical' );

if ( hasHorizontalSupport && hasVerticalSupport ) {
menuItems.axial = { label: LABELS.axial, icon: ICONS.axial };
} else if ( hasHorizontalSupport ) {
menuItems.axial = { label: LABELS.horizontal, icon: ICONS.horizontal };
} else if ( hasVerticalSupport ) {
menuItems.axial = { label: LABELS.vertical, icon: ICONS.vertical };
}

// Track whether we have any individual sides so we can omit the custom
// option if required.
let numberOfIndividualSides = 0;

ALL_SIDES.forEach( ( side ) => {
if ( sides.includes( side ) ) {
numberOfIndividualSides += 1;
menuItems[ side ] = {
label: LABELS[ side ],
icon: ICONS[ side ],
};
}
} );

// Add custom item if there are enough sides to warrant a separated view.
if ( numberOfIndividualSides > 1 ) {
menuItems.custom = { label: LABELS.custom, icon: ICONS.custom };
}

return menuItems;
}

/**
* Checks if the supported sides are balanced for each axis.
* - Horizontal - both left and right sides are supported.
Expand Down

0 comments on commit 35e99d4

Please sign in to comment.