Fix: Shared Blocks: State memory leak, each time inserter is opened new blocks are added

editor/store/actions.js

@@ -112,15 +112,20 @@ export function resetBlocks( blocks ) {
  * Returns an action object used in signalling that blocks have been received.
  * Unlike resetBlocks, these should be appended to the existing known set, not
  * replacing.
+ * If the new blocks that are being received are replacing existing blocks,
+ * during the action dispatch it is possible to specify existing blocks that
+ * are removed before adding the new ones.
  *
- * @param {Object[]} blocks Array of block objects.
+ * @param {Object[]}       blocks            Array of block objects.
+ * @param {?Array<string>} clientIdsToRemove Array of clientIds.
  *
  * @return {Object} Action object.
  */
-export function receiveBlocks( blocks ) {
+export function receiveBlocks( blocks, clientIdsToRemove = [] ) {
 	return {
 		type: 'RECEIVE_BLOCKS',
 		blocks,
+		clientIdsToRemove,
 	};
 }
 

editor/store/effects.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
-import { get, includes, last, map, castArray, uniqueId, pick } from 'lodash';
+import { filter, get, includes, last, map, castArray, uniqueId, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -493,8 +493,27 @@ export default {
 				error,
 			} ) );
 	},
-	RECEIVE_SHARED_BLOCKS( action ) {
-		return receiveBlocks( map( action.results, 'parsedBlock' ) );
+	RECEIVE_SHARED_BLOCKS( action, { getState } ) {
+		const state = getState();
+		const markSharedBlock = ( blocks = [] ) => {
+			return map( blocks, ( block ) => {
+				const newBlock = {
+					...block,
+					isPartOfSharedBlock: true,
+				};
+				if ( block.innerBlocks ) {
+					newBlock.innerBlocks = markSharedBlock( block.innerBlocks );
+				}
+				return newBlock;
+			} );
+		};
+
+		const blocksToAdd = markSharedBlock( map( action.results,  'parsedBlock' ) )
+		const blocksToRemove = map(
+			filter( state.editor.present.blocksByClientId, 'isPartOfSharedBlock' ),
+			'clientId'
+		);
+		return receiveBlocks( blocksToAdd, blocksToRemove );
 	},
 	SAVE_SHARED_BLOCK( action, store ) {
 		// TODO: these are potentially undefined, this fix is in place

editor/store/reducer.js

@@ -288,7 +288,7 @@ export const editor = flow( [
 
 			case 'RECEIVE_BLOCKS':
 				return {
-					...state,
+					...omit( state, action.clientIdsToRemove ),
 					...getFlattenedBlocks( action.blocks ),
 				};
 
@@ -405,14 +405,26 @@ export const editor = flow( [
 	},
 
 	blockOrder( state = {}, action ) {
+		const removeClientIdsFromState = ( initialState, clientIds ) => {
+			return flow( [
+				// Remove inner block ordering for removed blocks
+				( nextState ) => omit( nextState, clientIds ),
+
+				// Remove deleted blocks from other blocks' orderings
+				( nextState ) => mapValues( nextState, ( subState ) => (
+					without( subState, ...clientIds )
+				) ),
+			] )( initialState );
+		};
+
 		switch ( action.type ) {
 			case 'RESET_BLOCKS':
 			case 'SETUP_EDITOR_STATE':
 				return mapBlockOrder( action.blocks );
 
 			case 'RECEIVE_BLOCKS':
 				return {
-					...state,
+					...removeClientIdsFromState( state, action.clientIdsToRemove ),
 					...omit( mapBlockOrder( action.blocks ), '' ),
 				};
 
@@ -520,15 +532,7 @@ export const editor = flow( [
 			}
 
 			case 'REMOVE_BLOCKS':
-				return flow( [
-					// Remove inner block ordering for removed blocks
-					( nextState ) => omit( nextState, action.clientIds ),
-
-					// Remove deleted blocks from other blocks' orderings
-					( nextState ) => mapValues( nextState, ( subState ) => (
-						without( subState, ...action.clientIds )
-					) ),
-				] )( state );
+				removeClientIdsFromState( state, action.clientIds );
 		}
 
 		return state;