Order ids in getClientIdsOfDescendants and getClientIdsWithDescendant…

…s selectors. (#39985)
WordPress · Apr 4, 2022 · a1ae01c · a1ae01c
1 parent a1d12f2
commit a1ae01c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
@@ -436,8 +436,9 @@ _Properties_
 
 ### getClientIdsOfDescendants
 
-Returns an array containing the clientIds of all descendants
-of the blocks given.
+Returns an array containing the clientIds of all descendants of the
+blocks given. Ids are returned in the same order that they appear in
+the editor.
 
 _Parameters_
 
@@ -450,8 +451,9 @@ _Returns_
 
 ### getClientIdsWithDescendants
 
-Returns an array containing the clientIds of the top-level blocks
-and their descendants of any depth (for nested blocks).
+Returns an array containing the clientIds of the top-level blocks and
+their descendants of any depth (for nested blocks). Ids are returned
+in the same order that they appear in the editor.
 
 _Parameters_
 

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -3,7 +3,6 @@
  */
 import {
 	castArray,
-	flatMap,
 	first,
 	isArray,
 	isBoolean,
@@ -217,39 +216,38 @@ export const __unstableGetClientIdsTree = createSelector(
 );
 
 /**
- * Returns an array containing the clientIds of all descendants
- * of the blocks given.
+ * Returns an array containing the clientIds of all descendants of the
+ * blocks given. Ids are returned in the same order that they appear in
+ * the editor.
  *
  * @param {Object} state     Global application state.
  * @param {Array}  clientIds Array of blocks to inspect.
  *
  * @return {Array} ids of descendants.
  */
 export const getClientIdsOfDescendants = ( state, clientIds ) =>
-	flatMap( clientIds, ( clientId ) => {
-		const descendants = getBlockOrder( state, clientId );
-		return [
-			...descendants,
-			...getClientIdsOfDescendants( state, descendants ),
-		];
-	} );
+	clientIds.flatMap( ( clientId ) =>
+		getBlockOrder( state, clientId ).flatMap( ( descendantId ) => [
+			descendantId,
+			...getClientIdsOfDescendants( state, [ descendantId ] ),
+		] )
+	);
 
 /**
- * Returns an array containing the clientIds of the top-level blocks
- * and their descendants of any depth (for nested blocks).
+ * Returns an array containing the clientIds of the top-level blocks and
+ * their descendants of any depth (for nested blocks). Ids are returned
+ * in the same order that they appear in the editor.
  *
  * @param {Object} state Global application state.
  *
  * @return {Array} ids of top-level and descendant blocks.
  */
 export const getClientIdsWithDescendants = createSelector(
-	( state ) => {
-		const topLevelIds = getBlockOrder( state );
-		return [
-			...topLevelIds,
-			...getClientIdsOfDescendants( state, topLevelIds ),
-		];
-	},
+	( state ) =>
+		getBlockOrder( state ).flatMap( ( topLevelId ) => [
+			topLevelId,
+			...getClientIdsOfDescendants( state, [ topLevelId ] ),
+		] ),
 	( state ) => [ state.blocks.order ]
 );
 

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -487,7 +487,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getClientIdsOfDescendants', () => {
-		it( 'should return the ids of any descendants, given an array of clientIds', () => {
+		it( 'should return the ids of any descendants in sequential order, given an array of clientIds', () => {
 			const state = {
 				blocks: {
 					byClientId: {
@@ -580,8 +580,8 @@ describe( 'selectors', () => {
 				getClientIdsOfDescendants( state, [ 'uuid-10' ] )
 			).toEqual( [
 				'uuid-12',
-				'uuid-14',
 				'uuid-16',
+				'uuid-14',
 				'uuid-18',
 				'uuid-24',
 				'uuid-26',
@@ -592,7 +592,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getClientIdsWithDescendants', () => {
-		it( 'should return the ids for top-level blocks and their descendants of any depth (for nested blocks).', () => {
+		it( 'should return the ids for top-level blocks and their descendants of any depth (for nested blocks) in sequential order.', () => {
 			const state = {
 				blocks: {
 					byClientId: {
@@ -684,15 +684,15 @@ describe( 'selectors', () => {
 				'uuid-6',
 				'uuid-8',
 				'uuid-10',
-				'uuid-22',
 				'uuid-12',
-				'uuid-14',
 				'uuid-16',
+				'uuid-14',
 				'uuid-18',
 				'uuid-24',
 				'uuid-26',
 				'uuid-28',
 				'uuid-30',
+				'uuid-22',
 			] );
 		} );
 	} );