Lodash: Remove _.merge() from getMappedColumnWidths() (#48032)

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * Internal dependencies
  */
@@ -280,4 +285,53 @@ describe( 'getMappedColumnWidths', () => {
 			{ 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%' } },
+		] );
+	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, mapValues } from 'lodash';
+import { mapValues } from 'lodash';
 
 /**
  * Returns a column width attribute value rounded to standard precision.
@@ -121,13 +121,13 @@ export function hasExplicitPercentColumnWidths( blocks ) {
  * @return {WPBlock[]} blocks Mapped block objects.
  */
 export function getMappedColumnWidths( blocks, widths ) {
-	return blocks.map( ( block ) =>
-		merge( {}, block, {
-			attributes: {
-				width: `${ widths[ block.clientId ] }%`,
-			},
-		} )
-	);
+	return blocks.map( ( block ) => ( {
+		...block,
+		attributes: {
+			...block.attributes,
+			width: `${ widths[ block.clientId ] }%`,
+		},
+	} ) );
 }
 
 /**