From a4a5ea6bb49c06a7e550bcfb5cfef6580924fa42 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 4 Jun 2024 09:47:21 +0400 Subject: [PATCH 1/2] Inserter: Return the same items when the state and parameters don't change --- .../inserter/hooks/use-block-types-state.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 6b9e694c1cdf8f..8db23267eee8f4 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -8,7 +8,7 @@ import { parse, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -25,13 +25,18 @@ import { withRootClientIdOptionKey } from '../../../store/utils'; * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler) */ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { + const options = useMemo( + () => ( { [ withRootClientIdOptionKey ]: ! isQuick } ), + [ isQuick ] + ); const [ items ] = useSelect( ( select ) => [ - select( blockEditorStore ).getInserterItems( rootClientId, { - [ withRootClientIdOptionKey ]: ! isQuick, - } ), + select( blockEditorStore ).getInserterItems( + rootClientId, + options + ), ], - [ rootClientId, isQuick ] + [ rootClientId, options ] ); const [ categories, collections ] = useSelect( ( select ) => { From 68a84074e87ad66e2b01522d6f52db4039aa0e3e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 4 Jun 2024 15:01:49 +0400 Subject: [PATCH 2/2] Use stable default --- packages/block-editor/src/store/selectors.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index bf7b5125a770e6..bf98521dfe9b65 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -76,6 +76,8 @@ const EMPTY_ARRAY = []; */ const EMPTY_SET = new Set(); +const EMPTY_OBJECT = {}; + /** * Returns a block's name given its client ID, or null if no block exists with * the client ID. @@ -1996,7 +1998,7 @@ const buildBlockTypeItem = */ export const getInserterItems = createRegistrySelector( ( select ) => createSelector( - ( state, rootClientId = null, options = {} ) => { + ( state, rootClientId = null, options = EMPTY_OBJECT ) => { const buildReusableBlockInserterItem = ( reusableBlock ) => { const icon = ! reusableBlock.wp_pattern_sync_status ? {