Block Library: Column: Limit width redistribution to adjacent column

packages/block-library/src/column/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { forEach, find, difference } from 'lodash';
+import { forEach } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,7 +23,6 @@ import { __ } from '@wordpress/i18n';
  */
 import {
 	toWidthPrecision,
-	getTotalColumnsWidth,
 	getColumnWidths,
 	getAdjacentBlocks,
 	getRedistributedColumnWidths,
@@ -118,17 +117,6 @@ export default compose(
 				const columns = getBlocks( getBlockRootClientId( clientId ) );
 				const adjacentColumns = getAdjacentBlocks( columns, clientId );
 
-				// The occupied width is calculated as the sum of the new width
-				// and the total width of blocks _not_ in the adjacent set.
-				const occupiedWidth =
-					width +
-					getTotalColumnsWidth(
-						difference( columns, [
-							find( columns, { clientId } ),
-							...adjacentColumns,
-						] )
-					);
-
 				// Compute _all_ next column widths, in case the updated column
 				// is in the middle of a set of columns which don't yet have
 				// any explicit widths assigned (include updates to those not
@@ -138,7 +126,7 @@ export default compose(
 					[ clientId ]: toWidthPrecision( width ),
 					...getRedistributedColumnWidths(
 						adjacentColumns,
-						100 - occupiedWidth,
+						100 - width,
 						columns.length
 					),
 				};

packages/block-library/src/columns/edit.js

@@ -154,7 +154,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 				// Redistribute in consideration of pending block insertion as
 				// constraining the available working width.
 				const widths = getRedistributedColumnWidths(
-					innerBlocks,
+					[ ...innerBlocks ].reverse(),
 					100 - newColumnWidth
 				);
 
@@ -183,7 +183,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 				if ( hasExplicitWidths ) {
 					// Redistribute as if block is already removed.
 					const widths = getRedistributedColumnWidths(
-						innerBlocks,
+						innerBlocks.reverse(),
 						100
 					);
 

packages/block-library/src/columns/test/utils.js

@@ -3,7 +3,7 @@
  */
 import {
 	toWidthPrecision,
-	getAdjacentBlocks,
+	getAdjacentBlock,
 	getEffectiveColumnWidth,
 	getTotalColumnsWidth,
 	getColumnWidths,
@@ -25,22 +25,22 @@ describe( 'toWidthPrecision', () => {
 	} );
 } );
 
-describe( 'getAdjacentBlocks', () => {
+describe( 'getAdjacentBlock', () => {
 	const blockA = { clientId: 'a' };
 	const blockB = { clientId: 'b' };
 	const blockC = { clientId: 'c' };
 	const blocks = [ blockA, blockB, blockC ];
 
-	it( 'should return blocks after clientId', () => {
-		const result = getAdjacentBlocks( blocks, 'b' );
+	it( 'should return block after clientId', () => {
+		const result = getAdjacentBlock( blocks, 'b' );
 
-		expect( result ).toEqual( [ blockC ] );
+		expect( result ).toBe( blockC );
 	} );
 
-	it( 'should return blocks before clientId if clientId is last', () => {
-		const result = getAdjacentBlocks( blocks, 'c' );
+	it( 'should return block before clientId if clientId is last', () => {
+		const result = getAdjacentBlock( blocks, 'c' );
 
-		expect( result ).toEqual( [ blockA, blockB ] );
+		expect( result ).toBe( blockB );
 	} );
 } );
 

packages/block-library/src/columns/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { findIndex, sumBy, merge, mapValues } from 'lodash';
+import { findIndex, sumBy, merge } from 'lodash';
 
 /**
  * Returns a column width attribute value rounded to standard precision.
@@ -28,8 +28,10 @@ export const toWidthPrecision = ( value ) =>
 export function getAdjacentBlocks( blocks, clientId ) {
 	const index = findIndex( blocks, { clientId } );
 	const isLastBlock = index === blocks.length - 1;
+	const before = blocks.slice( 0, index );
+	const after = blocks.slice( index + 1 );
 
-	return isLastBlock ? blocks.slice( 0, index ) : blocks.slice( index + 1 );
+	return isLastBlock ? before.reverse() : after.concat( before );
 }
 
 /**
@@ -98,12 +100,24 @@ export function getRedistributedColumnWidths(
 	totalBlockCount = blocks.length
 ) {
 	const totalWidth = getTotalColumnsWidth( blocks, totalBlockCount );
-	const difference = availableWidth - totalWidth;
-	const adjustment = difference / blocks.length;
+	let difference = availableWidth - totalWidth;
 
-	return mapValues( getColumnWidths( blocks, totalBlockCount ), ( width ) =>
-		toWidthPrecision( width + adjustment )
-	);
+	const widths = {};
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const block = blocks[ i ];
+		const width = getEffectiveColumnWidth( block, totalBlockCount );
+		let nextWidth;
+		if ( difference !== 0 ) {
+			nextWidth = Math.min( Math.max( width + difference, 0 ), 100 );
+			difference += width - nextWidth;
+		} else {
+			nextWidth = width;
+		}
+
+		widths[ block.clientId ] = nextWidth;
+	}
+
+	return widths;
 }
 
 /**