From 3c722bf9ab1266a7e29d0aa4e28c21283e7220b9 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 10 Jun 2021 10:03:30 +0300
Subject: [PATCH] [Block Library - Columns] Fix deprecation caused when adding
 a column (#32378)

---
 packages/block-library/src/columns/edit.js        | 2 +-
 packages/block-library/src/columns/edit.native.js | 2 +-
 packages/block-library/src/columns/test/utils.js  | 4 ++--
 packages/block-library/src/columns/utils.js       | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 542bd32f3ae9f..0f77c3f843dbe 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -170,7 +170,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 					...getMappedColumnWidths( innerBlocks, widths ),
 					...times( newColumns - previousColumns, () => {
 						return createBlock( 'core/column', {
-							width: newColumnWidth,
+							width: `${ newColumnWidth }%`,
 						} );
 					} ),
 				];
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index e72fdabd88b57..0df352b94e1a5 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -381,7 +381,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 					...getMappedColumnWidths( innerBlocks, widths ),
 					...times( newColumns - previousColumns, () => {
 						return createBlock( 'core/column', {
-							width: newColumnWidth,
+							width: `${ newColumnWidth }%`,
 							verticalAlignment,
 						} );
 					} ),
diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js
index 5d266a3b001f4..d99a7b3d4a620 100644
--- a/packages/block-library/src/columns/test/utils.js
+++ b/packages/block-library/src/columns/test/utils.js
@@ -276,8 +276,8 @@ describe( 'getMappedColumnWidths', () => {
 		const result = getMappedColumnWidths( blocks, widths );
 
 		expect( result ).toEqual( [
-			{ clientId: 'a', attributes: { width: 25 } },
-			{ clientId: 'b', attributes: { width: 35 } },
+			{ clientId: 'a', attributes: { width: '25%' } },
+			{ clientId: 'b', attributes: { width: '35%' } },
 		] );
 	} );
 } );
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index e79e20f6a1910..1d3c0bc5238b9 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -122,7 +122,7 @@ export function getMappedColumnWidths( blocks, widths ) {
 	return blocks.map( ( block ) =>
 		merge( {}, block, {
 			attributes: {
-				width: widths[ block.clientId ],
+				width: `${ widths[ block.clientId ] }%`,
 			},
 		} )
 	);