Skip to content

Commit

Permalink
Block Editor: Fix stale dependencies of selectors depending on editor…
Browse files Browse the repository at this point in the history
…Tool preference (WordPress#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 <[email protected]>
  • Loading branch information
2 people authored and karthick-murugan committed Nov 13, 2024
1 parent d707df7 commit 5dea0f9
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 60 deletions.
11 changes: 5 additions & 6 deletions packages/block-editor/src/store/private-selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ),
]
] )
);

/**
Expand Down Expand Up @@ -317,7 +316,7 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
},
( state, rootClientId ) => [
...getAllPatternsDependants( select )( state ),
...getInsertBlockTypeDependants( state, rootClientId ),
...getInsertBlockTypeDependants( select )( state, rootClientId ),
]
)
);
Expand Down
95 changes: 52 additions & 43 deletions packages/block-editor/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
)
);

/**
Expand Down Expand Up @@ -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 ),
]
)
);
Expand Down Expand Up @@ -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 ),
]
)
);

/**
Expand Down Expand Up @@ -2360,7 +2369,7 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) =>
( state, rootClientId ) => [
getBlockTypes(),
unlock( select( STORE_NAME ) ).getReusableBlocks(),
...getInsertBlockTypeDependants( state, rootClientId ),
...getInsertBlockTypeDependants( select )( state, rootClientId ),
]
)
);
Expand Down Expand Up @@ -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();
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/store/test/private-selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
23 changes: 12 additions & 11 deletions packages/block-editor/src/store/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ),
];
};

0 comments on commit 5dea0f9

Please sign in to comment.