Block Library: Column: Redistribute width by adjusting adjacent conse…

…cutively
WordPress · Feb 6, 2020 · 5001270 · 5001270
1 parent 3980da4
commit 5001270
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { forEach, find } from 'lodash';
+import { forEach } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,8 +24,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	toWidthPrecision,
 	getColumnWidths,
-	getAdjacentBlock,
-	getEffectiveColumnWidth,
+	getAdjacentBlocks,
+	getRedistributedColumnWidths,
 } from '../columns/utils';
 
 function ColumnEdit( {
@@ -115,17 +115,7 @@ export default compose(
 				// Constrain or expand siblings to account for gain or loss of
 				// total columns area.
 				const columns = getBlocks( getBlockRootClientId( clientId ) );
-				const column = find( columns, { clientId } );
-				const adjacentColumn = getAdjacentBlock( columns, clientId );
-				const adjacentColumnWidth = getEffectiveColumnWidth(
-					adjacentColumn,
-					columns.length
-				);
-				const previousWidth = getEffectiveColumnWidth(
-					column,
-					columns.length
-				);
-				const difference = width - previousWidth;
+				const adjacentColumns = getAdjacentBlocks( columns, clientId );
 
 				// Compute _all_ next column widths, in case the updated column
 				// is in the middle of a set of columns which don't yet have
@@ -134,8 +124,10 @@ export default compose(
 				const nextColumnWidths = {
 					...getColumnWidths( columns, columns.length ),
 					[ clientId ]: toWidthPrecision( width ),
-					[ adjacentColumn.clientId ]: toWidthPrecision(
-						adjacentColumnWidth - difference
+					...getRedistributedColumnWidths(
+						adjacentColumns,
+						100 - width,
+						columns.length
 					),
 				};
 

diff --git a/packages/block-library/src/columns/edit.js b/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
 					);
 

diff --git a/packages/block-library/src/columns/utils.js b/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.
@@ -23,13 +23,15 @@ export const toWidthPrecision = ( value ) =>
  * @param {WPBlock[]} blocks   Block objects.
  * @param {string}    clientId Client ID to consider for adjacent blocks.
  *
- * @return {WPBlock} Adjacent block object.
+ * @return {WPBlock[]} Adjacent block objects.
  */
-export function getAdjacentBlock( blocks, clientId ) {
+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[ index - 1 ] : blocks[ 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;
 }
 
 /**