Track the parent block to optimize hierarchy selectors

packages/block-editor/src/store/reducer.js

@@ -54,6 +54,25 @@ function mapBlockOrder( blocks, rootClientId = '' ) {
 	return result;
 }
 
+/**
+ * Given an array of blocks, returns an object where each key contains
+ * the clientId of the block and the value is the parent of the block.
+ *
+ * @param {Array}   blocks       Blocks to map.
+ * @param {?string} rootClientId Assumed root client ID.
+ *
+ * @return {Object} Block order map object.
+ */
+function mapBlockParents( blocks, rootClientId = '' ) {
+	const result = {};
+	blocks.forEach( ( block ) => {
+		result[ block.clientId ] = rootClientId;
+		Object.assign( result, mapBlockParents( block.innerBlocks, block.clientId ) );
+	} );
+
+	return result;
+}
+
 /**
  * Helper method to iterate through all blocks, recursing into inner blocks,
  * applying a transformation function to each one.
@@ -306,6 +325,10 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 				...omit( state.order, visibleClientIds ),
 				...mapBlockOrder( action.blocks ),
 			},
+			parents: {
+				...omit( state.parents, visibleClientIds ),
+				...mapBlockParents( action.blocks ),
+			},
 		};
 	}
 
@@ -656,6 +679,54 @@ export const blocks = flow(
 
 		return state;
 	},
+
+	// This is the opposite of the order property.
+	//  It's duplicated data used for performance reasons.
+	parents( state = {}, action ) {
+		switch ( action.type ) {
+			case 'RESET_BLOCKS':
+				return mapBlockParents( action.blocks );
+
+			case 'RECEIVE_BLOCKS':
+				return {
+					...state,
+					...mapBlockParents( action.blocks ),
+				};
+
+			case 'INSERT_BLOCKS':
+				return {
+					...state,
+					...mapBlockParents( action.blocks, action.rootClientId || '' ),
+				};
+
+			case 'MOVE_BLOCK_TO_POSITION': {
+				return {
+					...state,
+					[ action.clientId ]: action.toRootClientId || '',
+				};
+			}
+
+			case 'REPLACE_BLOCKS':
+				return {
+					// This should include the parents as well to avoid memory leak
+					...omit( state, action.clientIds ),
+					...mapBlockParents( action.blocks, state[ action.clientIds[ 0 ] ] ),
+				};
+
+			case 'REMOVE_BLOCKS':
+				// This should include the parents as well to avoid memory leak
+				return omit( state, action.clientIds );
+
+			case 'REPLACE_INNER_BLOCKS':
+				return {
+					// Inner blocks removed should be omitted from the state
+					...state,
+					...mapBlockParents( action.blocks, action.rootClientId ),
+				};
+		}
+
+		return state;
+	},
 } );
 
 /**

packages/block-editor/src/store/selectors.js

@@ -458,22 +458,11 @@ export function getSelectedBlock( state ) {
  *
  * @return {?string} Root client ID, if exists
  */
-export const getBlockRootClientId = createSelector(
-	( state, clientId ) => {
-		const { order } = state.blocks;
-
-		for ( const rootClientId in order ) {
-			if ( includes( order[ rootClientId ], clientId ) ) {
-				return rootClientId;
-			}
-		}
-
-		return null;
-	},
-	( state ) => [
-		state.blocks.order,
-	]
-);
+export const getBlockRootClientId = ( state, clientId ) => {
+	return state.blocks.parents[ clientId ] !== undefined ?
+		state.blocks.parents[ clientId ] :
+		null;
+};
 
 /**
  * Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks.
@@ -483,21 +472,15 @@ export const getBlockRootClientId = createSelector(
  *
  * @return {string} Root client ID
  */
-export const getBlockHierarchyRootClientId = createSelector(
-	( state, clientId ) => {
-		let rootClientId = clientId;
-		let current = clientId;
-		while ( rootClientId ) {
-			current = rootClientId;
-			rootClientId = getBlockRootClientId( state, current );
-		}
-
-		return current;
-	},
-	( state ) => [
-		state.blocks.order,
-	]
-);
+export const getBlockHierarchyRootClientId = ( state, clientId ) => {
+	let current = clientId;
+	let parent;
+	do {
+		parent = current;
+		current = state.blocks.parents[ current ];
+	} while ( current );
+	return parent;
+};
 
 /**
  * Returns the client ID of the block adjacent one at the given reference