@wordpress/block-library 11.1.0 → 11.2.0

package/src/columns/test/utils.js

@@ -1,331 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import deepFreeze from 'deep-freeze';
-import {
-	toWidthPrecision,
-	getEffectiveColumnWidth,
-	getTotalColumnsWidth,
-	getColumnWidths,
-	getRedistributedColumnWidths,
-	hasExplicitPercentColumnWidths,
-	getMappedColumnWidths,
-} from '../utils';
-
-describe( 'toWidthPrecision', () => {
-	it( 'should round value to standard precision', () => {
-		const value = toWidthPrecision( 50.108 );
-
-		expect( value ).toBe( 50.11 );
-	} );
-
-	it( 'should convert a string value with unit to a number', () => {
-		expect( toWidthPrecision( '33.3%' ) ).toBe( 33.3 );
-	} );
-
-	it( 'should return undefined for an invalid string', () => {
-		expect( toWidthPrecision( 'blahblah' ) ).toBe( undefined );
-	} );
-
-	it( 'should return undefined for invalid number', () => {
-		expect( toWidthPrecision( null ) ).toBe( undefined );
-		expect( toWidthPrecision( undefined ) ).toBe( undefined );
-	} );
-} );
-
-describe( 'getEffectiveColumnWidth', () => {
-	it( 'should return attribute value if set, rounded to precision', () => {
-		const block = { attributes: { width: 50.108 } };
-
-		const width = getEffectiveColumnWidth( block, 3 );
-
-		expect( width ).toBe( 50.11 );
-	} );
-
-	it( 'should return assumed width if attribute value not set, rounded to precision', () => {
-		const block = { attributes: {} };
-
-		const width = getEffectiveColumnWidth( block, 3 );
-
-		expect( width ).toBe( 33.33 );
-	} );
-} );
-
-describe( 'getTotalColumnsWidth', () => {
-	describe( 'explicit width', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: { width: 30 } },
-			{ clientId: 'b', attributes: { width: 40 } },
-		];
-
-		it( 'returns the sum total of columns width', () => {
-			const width = getTotalColumnsWidth( blocks );
-
-			expect( width ).toBe( 70 );
-		} );
-	} );
-
-	describe( 'implicit width', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: {} },
-			{ clientId: 'b', attributes: {} },
-		];
-
-		it( 'returns the sum total of columns width', () => {
-			const widths = getTotalColumnsWidth( blocks );
-
-			expect( widths ).toBe( 100 );
-		} );
-	} );
-} );
-
-describe( 'getColumnWidths', () => {
-	describe( 'explicit width', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: { width: 30.459 } },
-			{ clientId: 'b', attributes: { width: 29.543 } },
-		];
-
-		it( 'returns the column widths', () => {
-			const widths = getColumnWidths( blocks );
-
-			expect( widths ).toEqual( {
-				a: 30.46,
-				b: 29.54,
-			} );
-		} );
-	} );
-
-	describe( 'implicit width', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: {} },
-			{ clientId: 'b', attributes: {} },
-		];
-
-		it( 'returns the column widths', () => {
-			const widths = getColumnWidths( blocks );
-
-			expect( widths ).toEqual( {
-				a: 50,
-				b: 50,
-			} );
-		} );
-	} );
-} );
-
-describe( 'getRedistributedColumnWidths', () => {
-	describe( 'explicit width', () => {
-		let blocks = [
-			{ clientId: 'a', attributes: { width: 30 } },
-			{ clientId: 'b', attributes: { width: 40 } },
-		];
-
-		it( 'should constrain to fit available width', () => {
-			const widths = getRedistributedColumnWidths( blocks, 60 );
-
-			expect( widths ).toEqual( {
-				a: 25.71,
-				b: 34.29,
-			} );
-		} );
-
-		it( 'should expand to fit available width', () => {
-			const widths = getRedistributedColumnWidths( blocks, 80 );
-
-			expect( widths ).toEqual( {
-				a: 34.29,
-				b: 45.71,
-			} );
-		} );
-
-		it( 'should decrease proportionally for third column', () => {
-			blocks = [
-				{ clientId: 'a', attributes: { width: 99 } },
-				{ clientId: 'b', attributes: { width: 1 } },
-			];
-			const widths = getRedistributedColumnWidths( blocks, 66.67 );
-
-			expect( widths ).toEqual( {
-				a: 66,
-				b: 0.67,
-			} );
-		} );
-
-		it( 'should decrease proportionally for fourth column', () => {
-			blocks = [
-				{ clientId: 'a', attributes: { width: 98 } },
-				{ clientId: 'b', attributes: { width: 1 } },
-				{ clientId: 'c', attributes: { width: 1 } },
-			];
-			const widths = getRedistributedColumnWidths( blocks, 75 );
-
-			expect( widths ).toEqual( {
-				a: 73.5,
-				b: 0.75,
-				c: 0.75,
-			} );
-		} );
-	} );
-
-	describe( 'implicit width', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: {} },
-			{ clientId: 'b', attributes: {} },
-		];
-
-		it( 'should equally distribute to available width', () => {
-			const widths = getRedistributedColumnWidths( blocks, 60 );
-
-			expect( widths ).toEqual( {
-				a: 30,
-				b: 30,
-			} );
-		} );
-
-		it( 'should constrain to fit available width', () => {
-			const widths = getRedistributedColumnWidths( blocks, 66.66, 3 );
-
-			expect( widths ).toEqual( {
-				a: 33.33,
-				b: 33.33,
-			} );
-		} );
-	} );
-} );
-
-describe( 'hasExplicitPercentColumnWidths', () => {
-	it( 'returns false if no blocks have explicit width', () => {
-		const blocks = [ { attributes: {} } ];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( false );
-	} );
-
-	it( 'returns true if a block has explicit width defined as a number', () => {
-		const blocks = [ { attributes: { width: 100 } } ];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( true );
-	} );
-
-	it( 'returns true if a block has explicit percent width defined as a string', () => {
-		const blocks = [ { attributes: { width: '100%' } } ];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( true );
-	} );
-
-	it( 'returns false if some, not all blocks have explicit width', () => {
-		const blocks = [
-			{ attributes: { width: 10 } },
-			{ attributes: { width: undefined } },
-		];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( false );
-	} );
-
-	it( 'returns true if all blocks have explicit width', () => {
-		const blocks = [
-			{ attributes: { width: 10 } },
-			{ attributes: { width: 90 } },
-		];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( true );
-	} );
-
-	it( 'returns true if blocks have width defined as percent strings and numbers', () => {
-		const blocks = [
-			{ attributes: { width: '10%' } },
-			{ attributes: { width: 90 } },
-		];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( true );
-	} );
-
-	it( 'returns false if blocks have width defined as mixed unit strings', () => {
-		const blocks = [
-			{ attributes: { width: '20%' } },
-			{ attributes: { width: '90px' } },
-		];
-
-		const result = hasExplicitPercentColumnWidths( blocks );
-
-		expect( result ).toBe( false );
-	} );
-} );
-
-describe( 'getMappedColumnWidths', () => {
-	it( 'merges to block attributes using provided widths', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: { width: 30 } },
-			{ clientId: 'b', attributes: { width: 40 } },
-		];
-		const widths = {
-			a: 25,
-			b: 35,
-		};
-
-		const result = getMappedColumnWidths( blocks, widths );
-
-		expect( result ).toEqual( [
-			{ clientId: 'a', attributes: { width: '25%' } },
-			{ clientId: 'b', attributes: { width: '35%' } },
-		] );
-	} );
-
-	it( 'always returns new objects and does not mutate input blocks', () => {
-		const blocks = [
-			deepFreeze( { clientId: 'a', attributes: { width: 30 } } ),
-			deepFreeze( { clientId: 'b', attributes: { width: 40 } } ),
-		];
-		const widths = {
-			a: 25,
-			b: 35,
-		};
-
-		const result = getMappedColumnWidths( blocks, widths );
-
-		expect( blocks[ 0 ] ).not.toBe( result[ 0 ] );
-		expect( blocks[ 1 ] ).not.toBe( result[ 1 ] );
-	} );
-
-	it( 'merges to block attributes if original blocks do not have any attributes', () => {
-		const blocks = [ { clientId: 'a' }, { clientId: 'b' } ];
-		const widths = {
-			a: 25,
-			b: 35,
-		};
-
-		const result = getMappedColumnWidths( blocks, widths );
-
-		expect( result ).toEqual( [
-			{ clientId: 'a', attributes: { width: '25%' } },
-			{ clientId: 'b', attributes: { width: '35%' } },
-		] );
-	} );
-
-	it( 'merges to block attributes if original blocks do not have a width attribute', () => {
-		const blocks = [
-			{ clientId: 'a', attributes: { align: 'left' } },
-			{ clientId: 'b', attributes: { align: 'right' } },
-		];
-		const widths = {
-			a: 25,
-			b: 35,
-		};
-
-		const result = getMappedColumnWidths( blocks, widths );
-
-		expect( result ).toEqual( [
-			{ clientId: 'a', attributes: { align: 'left', width: '25%' } },
-			{ clientId: 'b', attributes: { align: 'right', width: '35%' } },
-		] );
-	} );
-} );

package/src/columns/utils.js

@@ -1,176 +0,0 @@
-/**
- * Returns a column width attribute value rounded to standard precision.
- * Returns `undefined` if the value is not a valid finite number.
- *
- * @param {?number} value Raw value.
- *
- * @return {number} Value rounded to standard precision.
- */
-export const toWidthPrecision = ( value ) => {
-	const unitlessValue = parseFloat( value );
-	return Number.isFinite( unitlessValue )
-		? parseFloat( unitlessValue.toFixed( 2 ) )
-		: undefined;
-};
-/**
- * Returns an effective width for a given block. An effective width is equal to
- * its attribute value if set, or a computed value assuming equal distribution.
- *
- * @param {WPBlock} block           Block object.
- * @param {number}  totalBlockCount Total number of blocks in Columns.
- *
- * @return {number} Effective column width.
- */
-export function getEffectiveColumnWidth( block, totalBlockCount ) {
-	const { width = 100 / totalBlockCount } = block.attributes;
-	return toWidthPrecision( width );
-}
-
-/**
- * Returns the total width occupied by the given set of column blocks.
- *
- * @param {WPBlock[]} blocks          Block objects.
- * @param {?number}   totalBlockCount Total number of blocks in Columns.
- *                                    Defaults to number of blocks passed.
- *
- * @return {number} Total width occupied by blocks.
- */
-export function getTotalColumnsWidth(
-	blocks,
-	totalBlockCount = blocks.length
-) {
-	return blocks.reduce(
-		( sum, block ) =>
-			sum + getEffectiveColumnWidth( block, totalBlockCount ),
-		0
-	);
-}
-
-/**
- * Returns an object of `clientId` → `width` of effective column widths.
- *
- * @param {WPBlock[]} blocks          Block objects.
- * @param {?number}   totalBlockCount Total number of blocks in Columns.
- *                                    Defaults to number of blocks passed.
- *
- * @return {Object<string,number>} Column widths.
- */
-export function getColumnWidths( blocks, totalBlockCount = blocks.length ) {
-	return blocks.reduce( ( accumulator, block ) => {
-		const width = getEffectiveColumnWidth( block, totalBlockCount );
-		return Object.assign( accumulator, { [ block.clientId ]: width } );
-	}, {} );
-}
-
-/**
- * Returns an object of `clientId` → `width` of column widths as redistributed
- * proportional to their current widths, constrained or expanded to fit within
- * the given available width.
- *
- * @param {WPBlock[]} blocks          Block objects.
- * @param {number}    availableWidth  Maximum width to fit within.
- * @param {?number}   totalBlockCount Total number of blocks in Columns.
- *                                    Defaults to number of blocks passed.
- *
- * @return {Object<string,number>} Redistributed column widths.
- */
-export function getRedistributedColumnWidths(
-	blocks,
-	availableWidth,
-	totalBlockCount = blocks.length
-) {
-	const totalWidth = getTotalColumnsWidth( blocks, totalBlockCount );
-
-	return Object.fromEntries(
-		Object.entries( getColumnWidths( blocks, totalBlockCount ) ).map(
-			( [ clientId, width ] ) => {
-				const newWidth = ( availableWidth * width ) / totalWidth;
-				return [ clientId, toWidthPrecision( newWidth ) ];
-			}
-		)
-	);
-}
-
-/**
- * Returns true if column blocks within the provided set are assigned with
- * explicit widths, or false otherwise.
- *
- * @param {WPBlock[]} blocks Block objects.
- *
- * @return {boolean} Whether columns have explicit widths.
- */
-export function hasExplicitPercentColumnWidths( blocks ) {
-	return blocks.every( ( block ) => {
-		const blockWidth = block.attributes.width;
-		return Number.isFinite(
-			blockWidth?.endsWith?.( '%' )
-				? parseFloat( blockWidth )
-				: blockWidth
-		);
-	} );
-}
-
-/**
- * Returns a copy of the given set of blocks with new widths assigned from the
- * provided object of redistributed column widths.
- *
- * @param {WPBlock[]}             blocks Block objects.
- * @param {Object<string,number>} widths Redistributed column widths.
- *
- * @return {WPBlock[]} blocks Mapped block objects.
- */
-export function getMappedColumnWidths( blocks, widths ) {
-	return blocks.map( ( block ) => ( {
-		...block,
-		attributes: {
-			...block.attributes,
-			width: `${ widths[ block.clientId ] }%`,
-		},
-	} ) );
-}
-
-/**
- * Returns an array with columns widths values, parsed or no depends on `withParsing` flag.
- *
- * @param {WPBlock[]} blocks      Block objects.
- * @param {?boolean}  withParsing Whether value has to be parsed.
- *
- * @return {Array<number,string>} Column widths.
- */
-export function getWidths( blocks, withParsing = true ) {
-	return blocks.map( ( innerColumn ) => {
-		const innerColumnWidth =
-			innerColumn.attributes.width || 100 / blocks.length;
-
-		return withParsing ? parseFloat( innerColumnWidth ) : innerColumnWidth;
-	} );
-}
-
-/**
- * Returns a column width with unit.
- *
- * @param {string} width Column width.
- * @param {string} unit  Column width unit.
- *
- * @return {string} Column width with unit.
- */
-export function getWidthWithUnit( width, unit ) {
-	width = 0 > parseFloat( width ) ? '0' : width;
-
-	if ( isPercentageUnit( unit ) ) {
-		width = Math.min( width, 100 );
-	}
-
-	return `${ width }${ unit }`;
-}
-
-/**
- * Returns a boolean whether passed unit is percentage
- *
- * @param {string} unit Column width unit.
- *
- * @return {boolean} 	Whether unit is '%'.
- */
-export function isPercentageUnit( unit ) {
-	return unit === '%';
-}