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',
  ] );
  } );
  } );