BlockEditor: refactoring getBlockParentsByBlockName() selector (#20057)

* block-editor: refact getBlockParentsByBlockName It re implements the getBlockParentsByBlockName() selector using the createSelector() function to memoize what the selector returns in order to avoid performance issues. block-editor: update dependant references in getBlockParentsByBlockName() block-editor: fix * block-editor: add unit test for getBlockParents * block-editor: add getBlockParentsByBlockName test
WordPress · Feb 7, 2020 · c6b019b · c6b019b
1 parent 4c472c3
commit c6b019b
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 18 deletions.
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -470,24 +470,22 @@ export const getBlockParents = createSelector(
  *
  * @return {Array} ClientIDs of the parent blocks.
  */
-export const getBlockParentsByBlockName = (
-	state,
-	clientId,
-	blockName,
-	ascending = false
-) => {
-	const parents = getBlockParents( state, clientId, ascending );
-	return map(
-		filter(
-			map( parents, ( id ) => ( {
-				id,
-				name: getBlockName( state, id ),
-			} ) ),
-			{ name: blockName }
-		),
-		( { id } ) => id
-	);
-};
+export const getBlockParentsByBlockName = createSelector(
+	( state, clientId, blockName, ascending = false ) => {
+		const parents = getBlockParents( state, clientId, ascending );
+		return map(
+			filter(
+				map( parents, ( id ) => ( {
+					id,
+					name: getBlockName( state, id ),
+				} ) ),
+				{ name: blockName }
+			),
+			( { id } ) => id
+		);
+	},
+	( state ) => [ state.blocks.parents ]
+);
 
 /**
  * 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.

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -22,6 +22,8 @@ const {
 	getBlockName,
 	getBlock,
 	getBlocks,
+	getBlockParents,
+	getBlockParentsByBlockName,
 	getBlockCount,
 	getClientIdsWithDescendants,
 	getClientIdsOfDescendants,
@@ -329,6 +331,122 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getBlockParents', () => {
+		it( 'should return parent blocks', () => {
+			const state = {
+				blocks: {
+					parents: {
+						'client-id-01': '',
+						'client-id-02': 'client-id-01',
+						'client-id-03': 'client-id-02',
+						'client-id-04': 'client-id-03',
+					},
+					byClientId: {
+						'client-id-01': {
+							clientId: 'client-id-01',
+							name: 'core/columns',
+						},
+						'client-id-02': {
+							clientId: 'client-id-02',
+							name: 'core/navigation',
+						},
+						'client-id-03': {
+							clientId: 'client-id-03',
+							name: 'core/navigation-link',
+						},
+						'client-id-04': {
+							clientId: 'client-id-04',
+							name: 'core/paragraph',
+						},
+					},
+					cache: {
+						'client-id-01': {},
+						'client-id-02': {},
+						'client-id-03': {},
+						'client-id-04': {},
+					},
+				},
+			};
+
+			expect( getBlockParents( state, 'client-id-04' ) ).toEqual( [
+				'client-id-01',
+				'client-id-02',
+				'client-id-03',
+			] );
+
+			expect( getBlockParents( state, 'client-id-0' ) ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'getBlockParentsByBlockName', () => {
+		it( 'should return parent blocks', () => {
+			const state = {
+				blocks: {
+					parents: {
+						'client-id-01': '',
+						'client-id-02': 'client-id-01',
+						'client-id-03': 'client-id-02',
+						'client-id-04': 'client-id-03',
+						'client-id-05': 'client-id-04',
+					},
+					byClientId: {
+						'client-id-01': {
+							clientId: 'client-id-01',
+							name: 'core/navigation',
+						},
+						'client-id-02': {
+							clientId: 'client-id-02',
+							name: 'core/columns',
+						},
+						'client-id-03': {
+							clientId: 'client-id-03',
+							name: 'core/navigation',
+						},
+						'client-id-04': {
+							clientId: 'client-id-04',
+							name: 'core/navigation-link',
+						},
+						'client-id-05': {
+							clientId: 'client-id-05',
+							name: 'core/navigation-link',
+						},
+					},
+					cache: {
+						'client-id-01': {},
+						'client-id-02': {},
+						'client-id-03': {},
+						'client-id-04': {},
+						'client-id-05': {},
+					},
+				},
+			};
+
+			expect(
+				getBlockParentsByBlockName(
+					state,
+					'client-id-05',
+					'core/navigation'
+				)
+			).toEqual( [ 'client-id-01', 'client-id-03' ] );
+
+			expect(
+				getBlockParentsByBlockName(
+					state,
+					'client-id-05',
+					'core/columns'
+				)
+			).toEqual( [ 'client-id-02' ] );
+
+			expect(
+				getBlockParentsByBlockName(
+					state,
+					'client-id-5',
+					'core/unknown-block'
+				)
+			).toEqual( [] );
+		} );
+	} );
+
 	describe( 'getClientIdsOfDescendants', () => {
 		it( 'should return the ids of any descendants, given an array of clientIds', () => {
 			const state = {