[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
WordPress · Jun 19, 2020 · 64b3ed3 · 64b3ed3
1 parent ca30617
commit 64b3ed3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 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
@@ -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
@@ -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,33 +61,34 @@ 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;
  if ( columnsInRow > 1 ) {
  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>
  </>
  );