From 706691e43928ae55e47db14cc63e2d9f71014436 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 8 Nov 2024 09:19:55 +0000 Subject: [PATCH] Block Editor: Fix stale dependencies of selectors depending on editorTool preference (#66833) * Block Editor: Fix dependencies of selectors depending on editorTool pref The `state.editorMode` reducer was removed in 65945 in favour of persisted user preferences. Selector `__unstableGetEditorMode` should be used instead. This commit fixes a bug wherein changes to `editorTool` don't trigger a re-render of the block list view. * Update selectors that use __unstableGetEditorMode as a dependency to be registry selectors * Update other selector * Fix tests --------- Co-authored-by: Daniel Richards --- .../src/store/private-selectors.js | 11 +-- packages/block-editor/src/store/selectors.js | 95 ++++++++++--------- .../src/store/test/private-selectors.js | 5 + packages/block-editor/src/store/utils.js | 23 ++--- 4 files changed, 74 insertions(+), 60 deletions(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 525aca4c236cb..f1b5abd7789a1 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -109,17 +109,16 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) { * * @return {Object[]} Tree of block objects with only clientID and innerBlocks set. */ -export const getEnabledClientIdsTree = createSelector( - getEnabledClientIdsTreeUnmemoized, - ( state ) => [ +export const getEnabledClientIdsTree = createRegistrySelector( ( select ) => + createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [ state.blocks.order, state.blockEditingModes, state.settings.templateLock, state.blockListSettings, - state.editorMode, + select( STORE_NAME ).__unstableGetEditorMode( state ), state.zoomLevel, getSectionRootClientId( state ), - ] + ] ) ); /** @@ -317,7 +316,7 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) => }, ( state, rootClientId ) => [ ...getAllPatternsDependants( select )( state ), - ...getInsertBlockTypeDependants( state, rootClientId ), + ...getInsertBlockTypeDependants( select )( state, rootClientId ), ] ) ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index b09c3d3d01b16..598b6b4ea480d 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1794,10 +1794,12 @@ const canInsertBlockTypeUnmemoized = ( * * @return {boolean} Whether the given block type is allowed to be inserted. */ -export const canInsertBlockType = createSelector( - canInsertBlockTypeUnmemoized, - ( state, blockName, rootClientId ) => - getInsertBlockTypeDependants( state, rootClientId ) +export const canInsertBlockType = createRegistrySelector( ( select ) => + createSelector( + canInsertBlockTypeUnmemoized, + ( state, blockName, rootClientId ) => + getInsertBlockTypeDependants( select )( state, rootClientId ) + ) ); /** @@ -2224,7 +2226,7 @@ export const getInserterItems = createRegistrySelector( ( select ) => unlock( select( STORE_NAME ) ).getReusableBlocks(), state.blocks.order, state.preferences.insertUsage, - ...getInsertBlockTypeDependants( state, rootClientId ), + ...getInsertBlockTypeDependants( select )( state, rootClientId ), ] ) ); @@ -2255,44 +2257,51 @@ export const getInserterItems = createRegistrySelector( ( select ) => * this item. * @property {number} frecency Heuristic that combines frequency and recency. */ -export const getBlockTransformItems = createSelector( - ( state, blocks, rootClientId = null ) => { - const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ]; - const buildBlockTypeTransformItem = buildBlockTypeItem( state, { - buildScope: 'transform', - } ); - const blockTypeTransformItems = getBlockTypes() - .filter( ( blockType ) => - canIncludeBlockTypeInInserter( state, blockType, rootClientId ) - ) - .map( buildBlockTypeTransformItem ); +export const getBlockTransformItems = createRegistrySelector( ( select ) => + createSelector( + ( state, blocks, rootClientId = null ) => { + const normalizedBlocks = Array.isArray( blocks ) + ? blocks + : [ blocks ]; + const buildBlockTypeTransformItem = buildBlockTypeItem( state, { + buildScope: 'transform', + } ); + const blockTypeTransformItems = getBlockTypes() + .filter( ( blockType ) => + canIncludeBlockTypeInInserter( + state, + blockType, + rootClientId + ) + ) + .map( buildBlockTypeTransformItem ); - const itemsByName = Object.fromEntries( - Object.entries( blockTypeTransformItems ).map( ( [ , value ] ) => [ - value.name, - value, - ] ) - ); + const itemsByName = Object.fromEntries( + Object.entries( blockTypeTransformItems ).map( + ( [ , value ] ) => [ value.name, value ] + ) + ); - const possibleTransforms = getPossibleBlockTransformations( - normalizedBlocks - ).reduce( ( accumulator, block ) => { - if ( itemsByName[ block?.name ] ) { - accumulator.push( itemsByName[ block.name ] ); - } - return accumulator; - }, [] ); - return orderBy( - possibleTransforms, - ( block ) => itemsByName[ block.name ].frecency, - 'desc' - ); - }, - ( state, blocks, rootClientId ) => [ - getBlockTypes(), - state.preferences.insertUsage, - ...getInsertBlockTypeDependants( state, rootClientId ), - ] + const possibleTransforms = getPossibleBlockTransformations( + normalizedBlocks + ).reduce( ( accumulator, block ) => { + if ( itemsByName[ block?.name ] ) { + accumulator.push( itemsByName[ block.name ] ); + } + return accumulator; + }, [] ); + return orderBy( + possibleTransforms, + ( block ) => itemsByName[ block.name ].frecency, + 'desc' + ); + }, + ( state, blocks, rootClientId ) => [ + getBlockTypes(), + state.preferences.insertUsage, + ...getInsertBlockTypeDependants( select )( state, rootClientId ), + ] + ) ); /** @@ -2360,7 +2369,7 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) => ( state, rootClientId ) => [ getBlockTypes(), unlock( select( STORE_NAME ) ).getReusableBlocks(), - ...getInsertBlockTypeDependants( state, rootClientId ), + ...getInsertBlockTypeDependants( select )( state, rootClientId ), ] ) ); @@ -2435,7 +2444,7 @@ export const __experimentalGetParsedPattern = createRegistrySelector( const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [ ...getAllPatternsDependants( select )( state ), - ...getInsertBlockTypeDependants( state, rootClientId ), + ...getInsertBlockTypeDependants( select )( state, rootClientId ), ]; const patternsWithParsedBlocks = new WeakMap(); diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index 73c14faa6fd06..fb1d736e175af 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -292,6 +292,11 @@ describe( 'private selectors', () => { '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {}, }, }; + getEnabledClientIdsTree.registry = { + select: jest.fn( () => ( { + __unstableGetEditorMode: () => 'edit', + } ) ), + }; it( 'should return tree containing only clientId and innerBlocks', () => { const state = { diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js index 9b83a8f74cf9a..bdf8e3675edff 100644 --- a/packages/block-editor/src/store/utils.js +++ b/packages/block-editor/src/store/utils.js @@ -110,14 +110,15 @@ export const getAllPatternsDependants = ( select ) => ( state ) => { ]; }; -export function getInsertBlockTypeDependants( state, rootClientId ) { - return [ - state.blockListSettings[ rootClientId ], - state.blocks.byClientId.get( rootClientId ), - state.settings.allowedBlockTypes, - state.settings.templateLock, - state.blockEditingModes, - state.editorMode, - getSectionRootClientId( state ), - ]; -} +export const getInsertBlockTypeDependants = + ( select ) => ( state, rootClientId ) => { + return [ + state.blockListSettings[ rootClientId ], + state.blocks.byClientId.get( rootClientId ), + state.settings.allowedBlockTypes, + state.settings.templateLock, + state.blockEditingModes, + select( STORE_NAME ).__unstableGetEditorMode( state ), + getSectionRootClientId( state ), + ]; + };