Performance: optimize the usage of getBlockIndex (#13067)

packages/editor/src/components/block-actions/index.js

@@ -33,7 +33,6 @@ export default compose( [
 	withSelect( ( select, props ) => {
 		const {
 			getBlocksByClientId,
-			getBlockIndex,
 			getTemplateLock,
 			getBlockRootClientId,
 		} = select( 'core/editor' );
@@ -45,22 +44,18 @@ export default compose( [
 		const rootClientId = getBlockRootClientId( props.clientIds[ 0 ] );
 
 		return {
-			firstSelectedIndex: getBlockIndex( first( castArray( props.clientIds ) ), rootClientId ),
-			lastSelectedIndex: getBlockIndex( last( castArray( props.clientIds ) ), rootClientId ),
 			isLocked: !! getTemplateLock( rootClientId ),
 			blocks,
 			canDuplicate,
 			rootClientId,
 			extraProps: props,
 		};
 	} ),
-	withDispatch( ( dispatch, props ) => {
+	withDispatch( ( dispatch, props, { select } ) => {
 		const {
 			clientIds,
 			rootClientId,
 			blocks,
-			firstSelectedIndex,
-			lastSelectedIndex,
 			isLocked,
 			canDuplicate,
 		} = props;
@@ -78,6 +73,8 @@ export default compose( [
 					return;
 				}
 
+				const { getBlockIndex } = select( 'core/editor' );
+				const lastSelectedIndex = getBlockIndex( last( castArray( clientIds ) ), rootClientId );
 				const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
 				insertBlocks(
 					clonedBlocks,
@@ -98,11 +95,15 @@ export default compose( [
 			},
 			onInsertBefore() {
 				if ( ! isLocked ) {
+					const { getBlockIndex } = select( 'core/editor' );
+					const firstSelectedIndex = getBlockIndex( first( castArray( clientIds ) ), rootClientId );
 					insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
 				}
 			},
 			onInsertAfter() {
 				if ( ! isLocked ) {
+					const { getBlockIndex } = select( 'core/editor' );
+					const lastSelectedIndex = getBlockIndex( last( castArray( clientIds ) ), rootClientId );
 					insertDefaultBlock( {}, rootClientId, lastSelectedIndex + 1 );
 				}
 			},

packages/editor/src/components/block-draggable/index.js

@@ -33,8 +33,9 @@ const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, ind
 
 export default withSelect( ( select, { clientId } ) => {
 	const { getBlockIndex, getBlockRootClientId } = select( 'core/editor' );
+	const rootClientId = getBlockRootClientId( clientId );
 	return {
-		index: getBlockIndex( clientId ),
-		rootClientId: getBlockRootClientId( clientId ),
+		index: getBlockIndex( clientId, rootClientId ),
+		rootClientId,
 	};
 } )( BlockDraggable );

packages/editor/src/components/block-drop-zone/index.js

@@ -55,8 +55,9 @@ class BlockDropZone extends Component {
 	}
 
 	getInsertIndex( position ) {
-		const { index } = this.props;
-		if ( index !== undefined ) {
+		const { clientId, rootClientId, getBlockIndex } = this.props;
+		if ( clientId !== undefined ) {
+			const index = getBlockIndex( clientId, rootClientId );
 			return position.y === 'top' ? index : index + 1;
 		}
 	}
@@ -83,7 +84,7 @@ class BlockDropZone extends Component {
 	}
 
 	onDrop( event, position ) {
-		const { rootClientId: dstRootClientId, clientId: dstClientId, index: dstIndex, getClientIdsOfDescendants } = this.props;
+		const { rootClientId: dstRootClientId, clientId: dstClientId, getClientIdsOfDescendants, getBlockIndex } = this.props;
 		const { srcRootClientId, srcClientId, srcIndex, type } = parseDropEvent( event );
 
 		const isBlockDropType = ( dropType ) => dropType === 'block';
@@ -101,6 +102,7 @@ class BlockDropZone extends Component {
 			return;
 		}
 
+		const dstIndex = dstClientId ? getBlockIndex( dstClientId, dstRootClientId ) : undefined;
 		const positionIndex = this.getInsertIndex( position );
 		// If the block is kept at the same level and moved downwards,
 		// subtract to account for blocks shifting upward to occupy its old position.
@@ -154,10 +156,11 @@ export default compose(
 		};
 	} ),
 	withSelect( ( select, { rootClientId } ) => {
-		const { getClientIdsOfDescendants, getTemplateLock } = select( 'core/editor' );
+		const { getClientIdsOfDescendants, getTemplateLock, getBlockIndex } = select( 'core/editor' );
 		return {
 			isLocked: !! getTemplateLock( rootClientId ),
 			getClientIdsOfDescendants,
+			getBlockIndex,
 		};
 	} ),
 	withFilters( 'editor.BlockDropZone' )

packages/editor/src/components/block-list-appender/index.js

@@ -54,6 +54,7 @@ function BlockListAppender( {
 						disabled={ disabled }
 					/>
 				) }
+				isAppender
 			/>
 		</div>
 	);

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

@@ -26,7 +26,7 @@ import { KeyboardShortcuts, withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
-import { compose } from '@wordpress/compose';
+import { compose, pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -59,7 +59,6 @@ export class BlockListBlock extends Component {
 		this.maybeHover = this.maybeHover.bind( this );
 		this.forceFocusedContextualToolbar = this.forceFocusedContextualToolbar.bind( this );
 		this.hideHoverEffects = this.hideHoverEffects.bind( this );
-		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.preventDrag = this.preventDrag.bind( this );
 		this.onPointerDown = this.onPointerDown.bind( this );
@@ -233,10 +232,6 @@ export class BlockListBlock extends Component {
 		}
 	}
 
-	insertBlocksAfter( blocks ) {
-		this.props.onInsertBlocks( blocks, this.props.order + 1 );
-	}
-
 	/**
 	 * Marks the block as selected when focused and not already selected. This
 	 * specifically handles the case where block does not set focus on its own
@@ -361,7 +356,6 @@ export class BlockListBlock extends Component {
 			<HoverArea container={ this.wrapperNode }>
 				{ ( { hoverArea } ) => {
 					const {
-						order,
 						mode,
 						isFocusMode,
 						hasFixedToolbar,
@@ -397,11 +391,9 @@ export class BlockListBlock extends Component {
 					// Empty paragraph blocks should always show up as unselected.
 					const showEmptyBlockSideInserter =
 						( isSelected || isHovered ) && isEmptyDefaultBlock && isValid;
-					const showSideInserter =
-						( isSelected || isHovered ) && isEmptyDefaultBlock;
 					const shouldAppearSelected =
 						! isFocusMode &&
-						! showSideInserter &&
+						! showEmptyBlockSideInserter &&
 						isSelected &&
 						! isTypingWithinBlock;
 					const shouldAppearHovered =
@@ -420,7 +412,7 @@ export class BlockListBlock extends Component {
 						! isFocusMode && isHovered && ! isEmptyDefaultBlock;
 					const shouldShowContextualToolbar =
 						! hasFixedToolbar &&
-						! showSideInserter &&
+						! showEmptyBlockSideInserter &&
 						( ( isSelected &&
 							( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
 							isFirstMultiSelected );
@@ -474,7 +466,7 @@ export class BlockListBlock extends Component {
 							isSelected={ isSelected }
 							attributes={ attributes }
 							setAttributes={ this.setAttributes }
-							insertBlocksAfter={ isLocked ? undefined : this.insertBlocksAfter }
+							insertBlocksAfter={ isLocked ? undefined : this.props.onInsertBlocksAfter }
 							onReplace={ isLocked ? undefined : onReplace }
 							mergeBlocks={ isLocked ? undefined : this.props.onMerge }
 							clientId={ clientId }
@@ -521,7 +513,6 @@ export class BlockListBlock extends Component {
 								/>
 							) }
 							<BlockDropZone
-								index={ order }
 								clientId={ clientId }
 								rootClientId={ rootClientId }
 							/>
@@ -612,6 +603,8 @@ export class BlockListBlock extends Component {
 										<Inserter
 											position="top right"
 											onToggle={ this.selectOnOpen }
+											rootClientId={ rootClientId }
+											clientId={ clientId }
 										/>
 									</div>
 								</Fragment>
@@ -634,7 +627,6 @@ const applyWithSelect = withSelect(
 			isFirstMultiSelectedBlock,
 			isTyping,
 			isCaretWithinFormattedText,
-			getBlockIndex,
 			getBlockMode,
 			isSelectionEnabled,
 			getSelectedBlocksInitialCaretPosition,
@@ -663,10 +655,9 @@ const applyWithSelect = withSelect(
 			isTypingWithinBlock:
 				( isSelected || isParentOfSelectedBlock ) && isTyping(),
 			isCaretWithinFormattedText: isCaretWithinFormattedText(),
-			order: getBlockIndex( clientId, rootClientId ),
 			mode: getBlockMode( clientId ),
 			isSelectionEnabled: isSelectionEnabled(),
-			initialPosition: getSelectedBlocksInitialCaretPosition(),
+			initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
 			isEmptyDefaultBlock:
 				name && isUnmodifiedDefaultBlock( { name, attributes } ),
 			isMovable: 'all' !== templateLock,
@@ -715,8 +706,20 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 			insertBlocks( blocks, index, rootClientId );
 		},
 		onInsertDefaultBlockAfter() {
-			const { order, rootClientId } = ownProps;
-			insertDefaultBlock( {}, rootClientId, order + 1 );
+			const { clientId, rootClientId } = ownProps;
+			const {
+				getBlockIndex,
+			} = select( 'core/editor' );
+			const index = getBlockIndex( clientId, rootClientId );
+			insertDefaultBlock( {}, rootClientId, index + 1 );
+		},
+		onInsertBlocksAfter( blocks ) {
+			const { clientId, rootClientId } = ownProps;
+			const {
+				getBlockIndex,
+			} = select( 'core/editor' );
+			const index = getBlockIndex( clientId, rootClientId );
+			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onRemove( clientId ) {
 			removeBlock( clientId );
@@ -764,6 +767,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 } );
 
 export default compose(
+	pure,
 	withViewportMatch( { isLargeViewport: 'medium' } ),
 	applyWithSelect,
 	applyWithDispatch,

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

@@ -212,7 +212,6 @@ class BlockList extends Component {
 						>
 							<BlockListBlock
 								clientId={ clientId }
-								index={ blockIndex }
 								blockRef={ this.setBlockRef }
 								onSelectionStart={ this.onSelectionStart }
 								rootClientId={ rootClientId }

packages/editor/src/components/block-list/insertion-point.js

@@ -47,7 +47,7 @@ class BlockInsertionPoint extends Component {
 		const {
 			showInsertionPoint,
 			rootClientId,
-			insertIndex,
+			clientId,
 		} = this.props;
 
 		return (
@@ -73,7 +73,7 @@ class BlockInsertionPoint extends Component {
 				>
 					<Inserter
 						rootClientId={ rootClientId }
-						index={ insertIndex }
+						clientId={ clientId }
 					/>
 				</div>
 			</div>
@@ -87,13 +87,12 @@ export default withSelect( ( select, { clientId, rootClientId } ) => {
 		isBlockInsertionPointVisible,
 	} = select( 'core/editor' );
 	const blockIndex = getBlockIndex( clientId, rootClientId );
-	const insertIndex = blockIndex;
 	const insertionPoint = getBlockInsertionPoint();
 	const showInsertionPoint = (
 		isBlockInsertionPointVisible() &&
-		insertionPoint.index === insertIndex &&
+		insertionPoint.index === blockIndex &&
 		insertionPoint.rootClientId === rootClientId
 	);
 
-	return { showInsertionPoint, insertIndex };
+	return { showInsertionPoint };
 } )( BlockInsertionPoint );

packages/editor/src/components/default-block-appender/index.js

@@ -67,7 +67,7 @@ export function DefaultBlockAppender( {
 				value={ showPrompt ? value : '' }
 			/>
 			{ hovered && <InserterWithShortcuts rootClientId={ rootClientId } /> }
-			<Inserter position="top right" />
+			<Inserter rootClientId={ rootClientId } position="top right" isAppender />
 		</div>
 	);
 }

packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -25,6 +25,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     value="Start writing or type / to choose a block"
   />
   <WithSelect(IfCondition(Inserter))
+    isAppender={true}
     position="top right"
   />
 </div>
@@ -48,6 +49,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     value="Start writing or type / to choose a block"
   />
   <WithSelect(IfCondition(Inserter))
+    isAppender={true}
     position="top right"
   />
 </div>
@@ -71,6 +73,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     value=""
   />
   <WithSelect(IfCondition(Inserter))
+    isAppender={true}
     position="top right"
   />
 </div>

packages/editor/src/components/inserter/index.js

@@ -70,13 +70,14 @@ class Inserter extends Component {
 	 * @return {WPElement} Dropdown content element.
 	 */
 	renderContent( { onClose } ) {
-		const { rootClientId, index } = this.props;
+		const { rootClientId, clientId, isAppender } = this.props;
 
 		return (
 			<InserterMenu
 				onSelect={ onClose }
 				rootClientId={ rootClientId }
-				index={ index }
+				clientId={ clientId }
+				isAppender={ isAppender }
 			/>
 		);
 	}
@@ -100,27 +101,15 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { rootClientId, index } ) => {
+	withSelect( ( select, { rootClientId } ) => {
 		const {
 			getEditedPostAttribute,
-			getBlockInsertionPoint,
 			hasInserterItems,
 		} = select( 'core/editor' );
 
-		if ( rootClientId === undefined && index === undefined ) {
-			// Unless explicitly provided, the default insertion point provided
-			// by the store occurs immediately following the selected block.
-			// Otherwise, the default behavior for an undefined index is to
-			// append block to the end of the rootClientId context.
-			const insertionPoint = getBlockInsertionPoint();
-			( { rootClientId, index } = insertionPoint );
-		}
-
 		return {
 			title: getEditedPostAttribute( 'title' ),
 			hasItems: hasInserterItems( rootClientId ),
-			rootClientId,
-			index,
 		};
 	} ),
 	ifCondition( ( { hasItems } ) => hasItems ),