Block Directory: Fix installations for 'template-locked' mode

packages/block-directory/src/store/selectors.js

@@ -4,10 +4,7 @@
 import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import hasBlockType from './utils/has-block-type';
+const EMPTY_ARRAY = [];
 
 /**
  * Returns true if application is requesting for downloadable blocks.
@@ -30,7 +27,7 @@ export function isRequestingDownloadableBlocks( state, filterValue ) {
  * @return {Array} Downloadable blocks.
  */
 export function getDownloadableBlocks( state, filterValue ) {
-	return state.downloadableBlocks[ filterValue ]?.results ?? [];
+	return state.downloadableBlocks[ filterValue ]?.results ?? EMPTY_ARRAY;
 }
 
 /**
@@ -56,16 +53,33 @@ export function getInstalledBlockTypes( state ) {
 export const getNewBlockTypes = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state ) => {
-			const usedBlockTree = select( blockEditorStore ).getBlocks();
 			const installedBlockTypes = getInstalledBlockTypes( state );
+			if ( ! installedBlockTypes.length ) {
+				return EMPTY_ARRAY;
+			}
 
-			return installedBlockTypes.filter( ( blockType ) =>
-				hasBlockType( blockType, usedBlockTree )
+			const { getBlockName, getClientIdsWithDescendants } =
+				select( blockEditorStore );
+			const installedBlockNames = installedBlockTypes.map(
+				( blockType ) => blockType.name
+			);
+			const foundBlockNames = getClientIdsWithDescendants().flatMap(
+				( clientId ) => {
+					const blockName = getBlockName( clientId );
+					return installedBlockNames.includes( blockName )
+						? blockName
+						: [];
+				}
+			);
+			const newBlockTypes = installedBlockTypes.filter( ( blockType ) =>
+				foundBlockNames.includes( blockType.name )
 			);
+
+			return newBlockTypes.length > 0 ? newBlockTypes : EMPTY_ARRAY;
 		},
 		( state ) => [
 			getInstalledBlockTypes( state ),
-			select( blockEditorStore ).getBlocks(),
+			select( blockEditorStore ).getClientIdsWithDescendants(),
 		]
 	)
 );
@@ -81,16 +95,33 @@ export const getNewBlockTypes = createRegistrySelector( ( select ) =>
 export const getUnusedBlockTypes = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state ) => {
-			const usedBlockTree = select( blockEditorStore ).getBlocks();
 			const installedBlockTypes = getInstalledBlockTypes( state );
+			if ( ! installedBlockTypes.length ) {
+				return EMPTY_ARRAY;
+			}
 
-			return installedBlockTypes.filter(
-				( blockType ) => ! hasBlockType( blockType, usedBlockTree )
+			const { getBlockName, getClientIdsWithDescendants } =
+				select( blockEditorStore );
+			const installedBlockNames = installedBlockTypes.map(
+				( blockType ) => blockType.name
+			);
+			const foundBlockNames = getClientIdsWithDescendants().flatMap(
+				( clientId ) => {
+					const blockName = getBlockName( clientId );
+					return installedBlockNames.includes( blockName )
+						? blockName
+						: [];
+				}
 			);
+			const unusedBlockTypes = installedBlockTypes.filter(
+				( blockType ) => ! foundBlockNames.includes( blockType.name )
+			);
+
+			return unusedBlockTypes.length > 0 ? unusedBlockTypes : EMPTY_ARRAY;
 		},
 		( state ) => [
 			getInstalledBlockTypes( state ),
-			select( blockEditorStore ).getBlocks(),
+			select( blockEditorStore ).getClientIdsWithDescendants(),
 		]
 	)
 );

packages/block-directory/src/store/test/fixtures/index.js

@@ -48,3 +48,9 @@ export const blockList = [
 		innerBlocks: [],
 	},
 ];
+
+export const blockListIds = blockList.map( ( block ) => block.clientId );
+export const blockListNameMap = blockList.reduce( ( acc, block ) => {
+	acc[ block.clientId ] = block.name;
+	return acc;
+}, {} );

packages/block-directory/src/store/test/selectors.js

@@ -2,7 +2,8 @@
  * Internal dependencies
  */
 import {
-	blockList,
+	blockListIds,
+	blockListNameMap,
 	blockTypeInstalled,
 	blockTypeUnused,
 	downloadableBlock,
@@ -90,7 +91,10 @@ describe( 'selectors', () => {
 	describe( 'getNewBlockTypes', () => {
 		it( 'should retrieve the block types that are installed and in the post content', () => {
 			getNewBlockTypes.registry = {
-				select: jest.fn( () => ( { getBlocks: () => blockList } ) ),
+				select: jest.fn( () => ( {
+					getBlockName: ( clientId ) => blockListNameMap[ clientId ],
+					getClientIdsWithDescendants: () => blockListIds,
+				} ) ),
 			};
 			const state = {
 				blockManagement: {
@@ -107,7 +111,10 @@ describe( 'selectors', () => {
 
 		it( 'should return an empty array if no blocks are used', () => {
 			getNewBlockTypes.registry = {
-				select: jest.fn( () => ( { getBlocks: () => [] } ) ),
+				select: jest.fn( () => ( {
+					getBlockName: ( clientId ) => blockListNameMap[ clientId ],
+					getClientIdsWithDescendants: () => [],
+				} ) ),
 			};
 			const state = {
 				blockManagement: {
@@ -125,7 +132,10 @@ describe( 'selectors', () => {
 	describe( 'getUnusedBlockTypes', () => {
 		it( 'should retrieve the block types that are installed but not used', () => {
 			getUnusedBlockTypes.registry = {
-				select: jest.fn( () => ( { getBlocks: () => blockList } ) ),
+				select: jest.fn( () => ( {
+					getBlockName: ( clientId ) => blockListNameMap[ clientId ],
+					getClientIdsWithDescendants: () => blockListIds,
+				} ) ),
 			};
 			const state = {
 				blockManagement: {
@@ -142,7 +152,10 @@ describe( 'selectors', () => {
 
 		it( 'should return all block types if no blocks are used', () => {
 			getUnusedBlockTypes.registry = {
-				select: jest.fn( () => ( { getBlocks: () => [] } ) ),
+				select: jest.fn( () => ( {
+					getBlockName: ( clientId ) => blockListNameMap[ clientId ],
+					getClientIdsWithDescendants: () => [],
+				} ) ),
 			};
 			const state = {
 				blockManagement: {