diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index ee5ba8f767102..e86fe6101d946 100644 --- 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 index 217eb2d656acb..dc857d7122a7f 100644 --- 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,8 +216,9 @@ 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. @@ -226,30 +226,28 @@ export const __unstableGetClientIdsTree = createSelector( * @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 index 16e39a801428c..d81a639495197 100644 --- 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', ] ); } ); } );