[RNMobile] Fix footer appender in buttons block (#22711)

* add renderFooterAppender to the extraData to re-render list * small refactor
WordPress · May 29, 2020 · f2eea8e · f2eea8e
1 parent 984f3b3
commit f2eea8e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 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
@@ -50,7 +50,10 @@ const getStyles = (
 export class BlockList extends Component {
  constructor() {
  super( ...arguments );
-
+ this.extraData = {
+ parentWidth: this.props.parentWidth,
+ renderFooterAppender: this.props.renderFooterAppender,
+ };
  this.renderItem = this.renderItem.bind( this );
  this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
  this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind(
@@ -65,6 +68,7 @@ export class BlockList extends Component {
  this
  );
  this.renderEmptyList = this.renderEmptyList.bind( this );
+ this.getExtraData = this.getExtraData.bind( this );
  }
 
  addBlockToEndOfPost( newBlock ) {
@@ -102,6 +106,20 @@ export class BlockList extends Component {
  );
  }
 
+ getExtraData() {
+ const { parentWidth, renderFooterAppender } = this.props;
+ if (
+ this.extraData.parentWidth !== parentWidth ||
+ this.extraData.renderFooterAppender !== renderFooterAppender
+ ) {
+ this.extraData = {
+ parentWidth,
+ renderFooterAppender,
+ };
+ }
+ return this.extraData;
+ }
+
  render() {
  const { isRootList } = this.props;
  // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks
@@ -134,7 +152,6 @@ export class BlockList extends Component {
  isFloatingToolbarVisible,
  isStackedHorizontally,
  horizontalAlignment,
- parentWidth,
  } = this.props;
  const { parentScrollRef } = extraProps;
 
@@ -180,7 +197,7 @@ export class BlockList extends Component {
  ! isRootList && styles.overflowVisible,
  ] }
  horizontal={ horizontal }
- extraData={ parentWidth }
+ extraData={ this.getExtraData() }
  scrollEnabled={ isRootList }
  contentContainerStyle={
  horizontal && styles.horizontalContentContainer

diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss
@@ -48,3 +48,8 @@
  font-size: 16px;
  display: none;
 }
+
+.linkSettingsPanel {
+ padding-left: 0;
+ padding-right: 0;
+}
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
@@ -12,7 +12,7 @@ import {
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, useResizeObserver } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,16 +45,14 @@ function ButtonsEdit( {
  }
  }, [ sizes ] );
 
- function renderFooterAppender() {
- return (
- <View style={ styles.appenderContainer }>
- <InnerBlocks.ButtonBlockAppender
- isFloating={ true }
- onAddBlock={ onAddNextButton }
- />
- </View>
- );
- }
+ const renderFooterAppender = useRef( () => (
+ <View style={ styles.appenderContainer }>
+ <InnerBlocks.ButtonBlockAppender
+ isFloating={ true }
+ onAddBlock={ onAddNextButton }
+ />
+ </View>
+ ) );
 
  // Inside buttons block alignment options are not supported.
  const alignmentHooksSetting = {
@@ -68,7 +66,7 @@ function ButtonsEdit( {
  allowedBlocks={ ALLOWED_BLOCKS }
  template={ BUTTONS_TEMPLATE }
  renderFooterAppender={
- shouldRenderFooterAppender && renderFooterAppender
+ shouldRenderFooterAppender && renderFooterAppender.current
  }
  __experimentalMoverDirection="horizontal"
  horizontalAlignment={ align }