[RNMobile][tech-debt] block-list optimisation (#22144)

* optimisation of renders

* fix for wrapper props

* rename file and add one small fix

* back to identity from loadsh

* refactor memo

* fix withSelect in blockListItem

* more tweaks - fix deleting and inner blocks

* fix scroll to the caret position iOS

* fix header component

* refactor and fix issue with header

* Fix visual editor

* revert insertBlockAfter

packages/block-editor/src/components/block-list/block-list-item.native.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { ReadableContentView } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockListBlock from './block';
+import BlockInsertionPoint from './insertion-point';
+
+const stretchStyle = {
+ flex: 1,
+};
+
+export class BlockListItem extends Component {
+ render() {
+ const {
+ clientId,
+ isReadOnly,
+ shouldShowInsertionPointBefore,
+ shouldShowInsertionPointAfter,
+ contentResizeMode,
+ shouldShowInnerBlockAppender,
+ ...restProps
+ } = this.props;
+ const readableContentViewStyle =
+ contentResizeMode === 'stretch' && stretchStyle;
+ return (
+ <ReadableContentView style={ readableContentViewStyle }>
+ <View
+ style={ readableContentViewStyle }
+ pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
+ >
+ { shouldShowInsertionPointBefore && (
+ <BlockInsertionPoint />
+ ) }
+ <BlockListBlock
+ key={ clientId }
+ showTitle={ false }
+ clientId={ clientId }
+ { ...restProps }
+ />
+ { ! shouldShowInnerBlockAppender() &&
+ shouldShowInsertionPointAfter && (
+ <BlockInsertionPoint />
+ ) }
+ </View>
+ </ReadableContentView>
+ );
+ }
+}
+
+export default compose( [
+ withSelect(
+ ( select, { rootClientId, isStackedHorizontally, clientId } ) => {
+ const {
+ getBlockOrder,
+ getBlockInsertionPoint,
+ isBlockInsertionPointVisible,
+ getSettings,
+ } = select( 'core/block-editor' );
+
+ const blockClientIds = getBlockOrder( rootClientId );
+ const insertionPoint = getBlockInsertionPoint();
+ const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
+ const shouldShowInsertionPointBefore =
+ ! isStackedHorizontally &&
+ blockInsertionPointIsVisible &&
+ insertionPoint.rootClientId === rootClientId &&
+ // if list is empty, show the insertion point (via the default appender)
+ ( blockClientIds.length === 0 ||
+ // or if the insertion point is right before the denoted block
+ blockClientIds[ insertionPoint.index ] === clientId );
+
+ const shouldShowInsertionPointAfter =
+ ! isStackedHorizontally &&
+ blockInsertionPointIsVisible &&
+ insertionPoint.rootClientId === rootClientId &&
+ // if the insertion point is at the end of the list
+ blockClientIds.length === insertionPoint.index &&
+ // and the denoted block is the last one on the list, show the indicator at the end of the block
+ blockClientIds[ insertionPoint.index - 1 ] === clientId;
+
+ const isReadOnly = getSettings().readOnly;
+
+ return {
+ shouldShowInsertionPointBefore,
+ shouldShowInsertionPointAfter,
+ isReadOnly,
+ };
+ }
+ ),
+] )( BlockListItem );

packages/block-editor/src/components/block-list/block.native.js

@@ -216,15 +216,29 @@ class BlockListBlock extends Component {
  }
 }
 
+// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference
+const wrapperPropsCache = new WeakMap();
+const emptyObj = {};
+function getWrapperProps( value, getWrapperPropsFunction ) {
+ if ( ! getWrapperPropsFunction ) {
+ return emptyObj;
+ }
+ const cachedValue = wrapperPropsCache.get( value );
+ if ( ! cachedValue ) {
+ const wrapperProps = getWrapperPropsFunction( value );
+ wrapperPropsCache.set( value, wrapperProps );
+ return wrapperProps;
+ }
+ return cachedValue;
+}
+
 export default compose( [
  withSelect( ( select, { clientId, rootClientId } ) => {
  const {
  getBlockIndex,
  isBlockSelected,
  __unstableGetBlockWithoutInnerBlocks,
- getBlockHierarchyRootClientId,
  getSelectedBlockClientId,
- getBlockRootClientId,
  getLowestCommonAncestorWithSelectedBlock,
  getBlockParents,
  hasSelectedInnerBlock,
@@ -243,8 +257,6 @@ export default compose( [
  const parents = getBlockParents( clientId, true );
  const parentId = parents[ 0 ] || '';
 
- const rootBlockId = getBlockHierarchyRootClientId( clientId );
-
  const selectedBlockClientId = getSelectedBlockClientId();
 
  const commonAncestor = getLowestCommonAncestorWithSelectedBlock(
@@ -256,17 +268,13 @@ export default compose( [
  : parents[ parents.length - 1 ];
 
  const isParentSelected =
- selectedBlockClientId && selectedBlockClientId === parentId;
- const isAncestorSelected =
- selectedBlockClientId && parents.includes( selectedBlockClientId );
- const isSelectedBlockNested = !! getBlockRootClientId(
- selectedBlockClientId
- );
+ // set false as a default value to prevent re-render when it's changed from null to false
+ ( selectedBlockClientId || false ) &&
+ selectedBlockClientId === parentId;
 
  const selectedParents = selectedBlockClientId
  ? getBlockParents( selectedBlockClientId )
  : [];
- const isDescendantSelected = selectedParents.includes( clientId );
  const isDescendantOfParentSelected = selectedParents.includes(
  parentId
  );
@@ -275,13 +283,6 @@ export default compose( [
  isDescendantOfParentSelected ||
  isParentSelected ||
  parentId === '';
- const isDimmed =
- ! isSelected &&
- isSelectedBlockNested &&
- ! isAncestorSelected &&
- ! isDescendantSelected &&
- ( isDescendantOfParentSelected || rootBlockId === clientId );
-
  return {
  icon,
  name: name || 'core/missing',
@@ -294,12 +295,11 @@ export default compose( [
  isValid,
  isParentSelected,
  firstToSelectId,
- isAncestorSelected,
  isTouchable,
- isDimmed,
- wrapperProps: blockType.getEditWrapperProps
- ? blockType.getEditWrapperProps( attributes ) || {}
-  : {},
+ wrapperProps: getWrapperProps(
+  attributes,
+ blockType.getEditWrapperProps
+ ),
  };
  } ),
  withDispatch( ( dispatch, ownProps, { select } ) => {