[RNMobile][tech-debt] block-list optimisation

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 } ) => {