diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js index 8b989591802fa7..a09efe972602f4 100644 --- a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js +++ b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js @@ -10,37 +10,26 @@ import { useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +const NON_DISABLED_EDITING_MODES = [ 'default', 'contentOnly' ]; + export default function useListViewClientIds( { blocks, rootClientId } ) { return useSelect( ( select ) => { const { getDraggedBlockClientIds, getSelectedBlockClientIds, - __unstableGetClientIdsTree, - getBlockEditingMode, + getClientIdsTreeWithBlockEditingMode, } = unlock( select( blockEditorStore ) ); - const removeDisabledBlocks = ( tree ) => { - return tree.flatMap( ( { clientId, innerBlocks, ...rest } ) => { - if ( getBlockEditingMode( clientId ) === 'disabled' ) { - return removeDisabledBlocks( innerBlocks ); - } - return [ - { - clientId, - innerBlocks: removeDisabledBlocks( innerBlocks ), - ...rest, - }, - ]; - } ); - }; - return { selectedClientIds: getSelectedBlockClientIds(), draggedClientIds: getDraggedBlockClientIds(), - clientIdsTree: removeDisabledBlocks( - blocks ?? __unstableGetClientIdsTree( rootClientId ) - ), + clientIdsTree: + blocks ?? + getClientIdsTreeWithBlockEditingMode( + NON_DISABLED_EDITING_MODES, + rootClientId + ), }; }, [ blocks, rootClientId ] diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index ff85b4fb3f20b4..f3c5e48361fbde 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -135,3 +135,47 @@ export const isBlockSubtreeDisabled = createSelector( }, ( state ) => [ state.blockEditingModes, state.blocks.parents ] ); + +/** + * Returns a tree of block objects with only clientID and innerBlocks set. Only + * blocks with the given editing mode are included in the tree. + * + * @param {Object} state Global application state. + * @param {BlockEditingMode|BlockEditingMode[]} mode The editing mode(s) + * to filter by. + * @param {?string} rootClientId Optional root + * client ID of block + * list. + * + * @return {Object[]} Tree of block objects with only clientID and innerBlocks set. + */ +export const getClientIdsTreeWithBlockEditingMode = createSelector( + ( state, mode, rootClientId = '' ) => { + const modes = Array.isArray( mode ) ? mode : [ mode ]; + return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => { + if ( modes.includes( getBlockEditingMode( state, clientId ) ) ) { + return [ + { + clientId, + innerBlocks: getClientIdsTreeWithBlockEditingMode( + state, + mode, + clientId + ), + }, + ]; + } + return getClientIdsTreeWithBlockEditingMode( + state, + mode, + clientId + ); + } ); + }, + ( state ) => [ + state.blocks.order, + state.blockEditingModes, + state.settings.templateLock, + state.blockListSettings, + ] +); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a3de21f5c01b61..7d252f3730e58c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -187,16 +187,27 @@ export function getBlocks( state, rootClientId ) { * Returns a stripped down block object containing only its client ID, * and its inner blocks' client IDs. * + * @deprecated + * * @param {Object} state Editor state. * @param {string} clientId Client ID of the block to get. * * @return {Object} Client IDs of the post blocks. */ export const __unstableGetClientIdWithClientIdsTree = createSelector( - ( state, clientId ) => ( { - clientId, - innerBlocks: __unstableGetClientIdsTree( state, clientId ), - } ), + ( state, clientId ) => { + deprecated( + "wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree", + { + since: '6.3', + version: '6.5', + } + ); + return { + clientId, + innerBlocks: __unstableGetClientIdsTree( state, clientId ), + }; + }, ( state ) => [ state.blocks.order ] ); @@ -205,16 +216,26 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector( * given root, consisting of stripped down block objects containing only * their client IDs, and their inner blocks' client IDs. * + * @deprecated + * * @param {Object} state Editor state. * @param {?string} rootClientId Optional root client ID of block list. * * @return {Object[]} Client IDs of the post blocks. */ export const __unstableGetClientIdsTree = createSelector( - ( state, rootClientId = '' ) => - getBlockOrder( state, rootClientId ).map( ( clientId ) => + ( state, rootClientId = '' ) => { + deprecated( + "wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree", + { + since: '6.3', + version: '6.5', + } + ); + return getBlockOrder( state, rootClientId ).map( ( clientId ) => __unstableGetClientIdWithClientIdsTree( state, clientId ) - ), + ); + }, ( state ) => [ state.blocks.order ] ); diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index ecae342317ce18..4c38507635bd7a 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -11,6 +11,7 @@ import { getLastInsertedBlocksClientIds, getBlockEditingMode, isBlockSubtreeDisabled, + getClientIdsTreeWithBlockEditingMode, } from '../private-selectors'; jest.mock( '@wordpress/data/src/select', () => ( { @@ -74,7 +75,13 @@ describe( 'private selectors', () => { [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | | Paragraph ] ), order: new Map( [ - [ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ], + [ + '', + [ + '6cf70164-9097-4460-bcbf-200560546988', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + ], + ], [ '6cf70164-9097-4460-bcbf-200560546988', [] ], [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', @@ -381,5 +388,153 @@ describe( 'private selectors', () => { ).toBe( false ); } ); } ); + + describe( 'getClientIdsTreeWithBlockEditingMode', () => { + it( 'should return tree containing only clientId and innerBlocks', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [] ), + }; + expect( + getClientIdsTreeWithBlockEditingMode( state, 'default' ) + ).toEqual( [ + { + clientId: '6cf70164-9097-4460-bcbf-200560546988', + innerBlocks: [], + }, + { + clientId: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', + innerBlocks: [ + { + clientId: + 'b26fc763-417d-4f01-b81c-2ec61e14a972', + innerBlocks: [], + }, + { + clientId: + '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + innerBlocks: [ + { + clientId: + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + innerBlocks: [], + }, + { + clientId: + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + innerBlocks: [], + }, + ], + }, + ], + }, + ] ); + } ); + + it( 'should return a subtree when rootBlockClientId is given', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [] ), + }; + expect( + getClientIdsTreeWithBlockEditingMode( + state, + 'default', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' + ) + ).toEqual( [ + { + clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972', + innerBlocks: [], + }, + { + clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + innerBlocks: [ + { + clientId: + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + innerBlocks: [], + }, + { + clientId: + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + innerBlocks: [], + }, + ], + }, + ] ); + } ); + + it( 'should filter by a single mode', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ + 'b26fc763-417d-4f01-b81c-2ec61e14a972', + 'contentOnly', + ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + ] ), + }; + expect( + getClientIdsTreeWithBlockEditingMode( state, 'disabled' ) + ).toEqual( [ + { + clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + innerBlocks: [ + { + clientId: + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + innerBlocks: [], + }, + { + clientId: + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + innerBlocks: [], + }, + ], + }, + ] ); + } ); + + it( 'should filter by multiple modes', () => { + const state = { + ...baseState, + blockEditingModes: new Map( [ + [ + 'b26fc763-417d-4f01-b81c-2ec61e14a972', + 'contentOnly', + ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + ] ), + }; + expect( + getClientIdsTreeWithBlockEditingMode( state, [ + 'contentOnly', + 'disabled', + ] ) + ).toEqual( [ + { + clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972', + innerBlocks: [], + }, + { + clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + innerBlocks: [ + { + clientId: + 'b3247f75-fd94-4fef-97f9-5bfd162cc416', + innerBlocks: [], + }, + { + clientId: + 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', + innerBlocks: [], + }, + ], + }, + ] ); + } ); + } ); } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 5cc17fc08b3142..dca9b847bc5a2f 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -4734,6 +4734,7 @@ describe( '__unstableGetClientIdWithClientIdsTree', () => { { clientId: 'baz', innerBlocks: [] }, ], } ); + expect( console ).toHaveWarned(); } ); } ); describe( '__unstableGetClientIdsTree', () => {