Columns: Correctly recalculate column widths when the column count is…

… increased by more than 2 at once (#59301)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

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

@@ -139,18 +139,19 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			// If adding a new column, assign width to the new column equal to
 			// as if it were `1 / columns` of the total available space.
 			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			const newlyAddedColumns = newColumns - previousColumns;
 
 			// Redistribute in consideration of pending block insertion as
 			// constraining the available working width.
 			const widths = getRedistributedColumnWidths(
 				innerBlocks,
-				100 - newColumnWidth
+				100 - newColumnWidth * newlyAddedColumns
 			);
 
 			innerBlocks = [
 				...getMappedColumnWidths( innerBlocks, widths ),
 				...Array.from( {
-					length: newColumns - previousColumns,
+					length: newlyAddedColumns,
 				} ).map( () => {
 					return createBlock( 'core/column', {
 						width: `${ newColumnWidth }%`,

test/e2e/specs/editor/blocks/columns.spec.js

@@ -175,6 +175,75 @@ test.describe( 'Columns', () => {
 		] );
 	} );
 
+	test.describe( 'should update the column widths correctly', () => {
+		const initialColumnWidths = [ '10%', '20%', '30%', '40%' ];
+
+		const expected = [
+			{
+				newColumnCount: 2,
+				newColumnWidths: [ '33.33%', '66.67%' ],
+			},
+			{
+				newColumnCount: 3,
+				newColumnWidths: [ '16.67%', '33.33%', '50%' ],
+			},
+			{
+				newColumnCount: 5,
+				newColumnWidths: [ '8%', '16%', '24%', '32%', '20%' ],
+			},
+			{
+				newColumnCount: 6,
+				newColumnWidths: [
+					'6.67%',
+					'13.33%',
+					'20%',
+					'26.66%',
+					'16.67%',
+					'16.67%',
+				],
+			},
+		];
+
+		expected.forEach( ( { newColumnCount, newColumnWidths } ) => {
+			test( `when the column count is changed to ${ newColumnCount }`, async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/columns',
+					attributes: {
+						columns: initialColumnWidths.length,
+					},
+					innerBlocks: initialColumnWidths.map( ( width ) => ( {
+						name: 'core/column',
+						attributes: { width },
+					} ) ),
+				} );
+
+				await editor.selectBlocks(
+					editor.canvas.getByRole( 'document', {
+						name: 'Block: Columns',
+					} )
+				);
+				await editor.openDocumentSettingsSidebar();
+
+				await page
+					.getByRole( 'spinbutton', { name: 'Columns' } )
+					.fill( newColumnCount.toString() );
+
+				await expect( editor.getBlocks() ).resolves.toMatchObject( [
+					{
+						name: 'core/columns',
+						innerBlocks: newColumnWidths.map( ( width ) => ( {
+							name: 'core/column',
+							attributes: { width },
+						} ) ),
+					},
+				] );
+			} );
+		} );
+	} );
+
 	test( 'should not split in middle', async ( { editor, page } ) => {
 		await editor.insertBlock( {
 			name: 'core/columns',