From 64b3ed3a022d0a3262841d4c30cb5b8ec0af8ec6 Mon Sep 17 00:00:00 2001
From: Drapich Piotr <drapich.piotr@gmail.com>
Date: Fri, 19 Jun 2020 14:51:21 +0200
Subject: [PATCH] [RNMobile][FIX] Columns block renders more than two columns
 in a row (#23305)

* fix columnsInRow on init and some performance improvements

* rename getColumnWidth to contentStyle
---
 .../src/components/block-list/index.native.js | 12 ++++-
 .../block-library/src/columns/edit.native.js  | 51 ++++++++++---------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 47808ae5cf29a..7799147217ab9 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -54,6 +54,7 @@ export class BlockList extends Component {
 			parentWidth: this.props.parentWidth,
 			renderFooterAppender: this.props.renderFooterAppender,
 			onDeleteBlock: this.props.onDeleteBlock,
+			contentStyle: this.props.contentstyle,
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
@@ -108,16 +109,23 @@ export class BlockList extends Component {
 	}
 
 	getExtraData() {
-		const { parentWidth, renderFooterAppender, onDeleteBlock } = this.props;
+		const {
+			parentWidth,
+			renderFooterAppender,
+			onDeleteBlock,
+			contentStyle,
+		} = this.props;
 		if (
 			this.extraData.parentWidth !== parentWidth ||
 			this.extraData.renderFooterAppender !== renderFooterAppender ||
-			this.extraData.onDeleteBlock !== onDeleteBlock
+			this.extraData.onDeleteBlock !== onDeleteBlock ||
+			this.extraData.contentStyle !== contentStyle
 		) {
 			this.extraData = {
 				parentWidth,
 				renderFooterAppender,
 				onDeleteBlock,
+				contentStyle,
 			};
 		}
 		return this.extraData;
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index f7308b035dd43..8baa0e18221f6 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -16,7 +16,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useMemo } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 /**
@@ -61,23 +61,25 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUMBER );
 
-	const containerMaxWidth = styles.columnsContainer.maxWidth;
-
 	const { verticalAlignment } = attributes;
 	const { width } = sizes || {};
 
 	useEffect( () => {
 		const newColumnCount = ! columnCount ? DEFAULT_COLUMNS : columnCount;
 		updateColumns( columnCount, newColumnCount );
-		setColumnsInRow( getColumnsInRow( width, newColumnCount ) );
+		if ( width ) {
+			setColumnsInRow( getColumnsInRow( width, newColumnCount ) );
+		}
 	}, [ columnCount ] );
 
 	useEffect( () => {
-		setColumnsInRow( getColumnsInRow( width, columnCount ) );
+		if ( width ) {
+			setColumnsInRow( getColumnsInRow( width, columnCount ) );
+		}
 	}, [ width ] );
 
-	const getColumnWidth = ( containerWidth = containerMaxWidth ) => {
-		const minWidth = Math.min( containerWidth, containerMaxWidth );
+	const contentStyle = useMemo( () => {
+		const minWidth = Math.min( width, styles.columnsContainer.maxWidth );
 		const columnBaseWidth = minWidth / columnsInRow;
 
 		let columnWidth = columnBaseWidth;
@@ -85,9 +87,8 @@ function ColumnsEditContainer( {
 			const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
 			columnWidth = ( minWidth - margins ) / columnsInRow;
 		}
-
-		return columnWidth;
-	};
+		return { width: columnWidth };
+	}, [ width, columnsInRow ] );
 
 	const getColumnsInRow = ( containerWidth, columnsNumber ) => {
 		if ( containerWidth < BREAKPOINTS.mobile ) {
@@ -137,20 +138,22 @@ function ColumnsEditContainer( {
 			</BlockControls>
 			<View style={ isSelected && styles.innerBlocksSelected }>
 				{ resizeListener }
-				<InnerBlocks
-					renderAppender={ renderAppender }
-					__experimentalMoverDirection={
-						columnsInRow > 1 ? 'horizontal' : undefined
-					}
-					horizontal={ true }
-					allowedBlocks={ ALLOWED_BLOCKS }
-					contentResizeMode="stretch"
-					onAddBlock={ onAddNextColumn }
-					onDeleteBlock={
-						columnCount === 1 ? onDeleteBlock : undefined
-					}
-					contentStyle={ { width: getColumnWidth( width ) } }
-				/>
+				{ width && (
+					<InnerBlocks
+						renderAppender={ renderAppender }
+						__experimentalMoverDirection={
+							columnsInRow > 1 ? 'horizontal' : undefined
+						}
+						horizontal={ true }
+						allowedBlocks={ ALLOWED_BLOCKS }
+						contentResizeMode="stretch"
+						onAddBlock={ onAddNextColumn }
+						onDeleteBlock={
+							columnCount === 1 ? onDeleteBlock : undefined
+						}
+						contentStyle={ contentStyle }
+					/>
+				) }
 			</View>
 		</>
 	);