Inserter: Make ChildBlocks have a similar API to InserterPanel

WordPress · Jun 18, 2020 · 436d7c0 · 436d7c0
1 parent ea1c443
commit 436d7c0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js
@@ -118,14 +118,15 @@ export function InserterBlockList( {
 	return (
 		<div>
 			{ hasChildItems && (
-				<ChildBlocks
-					rootClientId={ rootClientId }
-					// Pass along every block, as getInserterItems() will have
-					// already filtered out non-child blocks.
-					items={ filteredItems }
-					onSelect={ onSelectItem }
-					onHover={ onHover }
-				/>
+				<ChildBlocks rootClientId={ rootClientId }>
+					<BlockTypesList
+						// Pass along every block, as getInserterItems() will have
+						// already filtered out non-child blocks.
+						items={ filteredItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+					/>
+				</ChildBlocks>
 			) }
 
 			{ ! hasChildItems && !! suggestedItems.length && ! filterValue && (

diff --git a/packages/block-editor/src/components/inserter/child-blocks.js b/packages/block-editor/src/components/inserter/child-blocks.js
@@ -1,16 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
-import { ifCondition, compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockTypesList from '../block-types-list';
 import BlockIcon from '../block-icon';
 
-function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
+export default function ChildBlocks( { rootClientId, children } ) {
+	const { rootBlockTitle, rootBlockIcon } = useSelect( ( select ) => {
+		const { getBlockType } = select( 'core/blocks' );
+		const { getBlockName } = select( 'core/block-editor' );
+		const rootBlockName = getBlockName( rootClientId );
+		const rootBlockType = getBlockType( rootBlockName );
+		return {
+			rootBlockTitle: rootBlockType && rootBlockType.title,
+			rootBlockIcon: rootBlockType && rootBlockType.icon,
+		};
+	} );
+
 	return (
 		<div className="block-editor-inserter__child-blocks">
 			{ ( rootBlockIcon || rootBlockTitle ) && (
@@ -19,21 +28,7 @@ function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
 					{ rootBlockTitle && <h2>{ rootBlockTitle }</h2> }
 				</div>
 			) }
-			<BlockTypesList items={ items } { ...props } />
+			{ children }
 		</div>
 	);
 }
-
-export default compose(
-	ifCondition( ( { items } ) => items && items.length > 0 ),
-	withSelect( ( select, { rootClientId } ) => {
-		const { getBlockType } = select( 'core/blocks' );
-		const { getBlockName } = select( 'core/block-editor' );
-		const rootBlockName = getBlockName( rootClientId );
-		const rootBlockType = getBlockType( rootBlockName );
-		return {
-			rootBlockTitle: rootBlockType && rootBlockType.title,
-			rootBlockIcon: rootBlockType && rootBlockType.icon,
-		};
-	} )
-)( ChildBlocks );