diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 0a756b34c6ef6f..d70b14ddcd2d73 100644 --- a/packages/block-library/src/columns/edit.js +++ b/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 }%`, diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js index bcb23c9a240991..635d45dd99ce2b 100644 --- a/test/e2e/specs/editor/blocks/columns.spec.js +++ b/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',