Experiment: Allow creating template parts from block library

packages/base-styles/_z-index.scss

@@ -18,7 +18,8 @@ $z-layers: (
 	".block-editor-inserter__tabs .components-tab-panel__tab-content": 0, // lower scrolling content
 	".block-editor-inserter__tabs .components-tab-panel__tabs": 1, // higher sticky element
 	".block-editor-inserter__search": 1, // higher sticky element
-	".block-library-template-part__selection-search": 1, // higher sticky element
+	".block-library-template-part-selection__search": 1, // higher sticky element
+	".block-library-template-part-selection__overlay": 10, // higher than modal header.
 
 	// These next two share a stacking context
 	".interface-complementary-area .components-panel" : 0, // lower scrolling content
@@ -140,7 +141,7 @@ $z-layers: (
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".edit-site-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
-	".block-editor-template-part__selection-modal": 1000001,
+	".block-library-template-part-selection-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.

packages/block-editor/src/components/block-types-list/index.js

@@ -19,6 +19,7 @@ function chunk( array, size ) {
 
 function BlockTypesList( {
 	items = [],
+	rootClientId,
 	onSelect,
 	onHover = () => {},
 	children,
@@ -35,6 +36,7 @@ function BlockTypesList( {
 					{ row.map( ( item, j ) => (
 						<InserterListItem
 							key={ item.id }
+							rootClientId={ rootClientId }
 							item={ item }
 							className={ getBlockMenuDefaultClassName(
 								item.id

packages/block-editor/src/components/index.js

@@ -131,6 +131,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
+export { default as __experimentalInserterListItemWithModal } from './inserter-list-item/with-modal';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';

packages/block-editor/src/components/inserter-draggable-blocks/index.js

@@ -18,7 +18,12 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ blocks.length } icon={ icon } />
+				!! isEnabled && (
+					<BlockDraggableChip
+						count={ blocks?.length }
+						icon={ icon }
+					/>
+				)
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {

packages/block-editor/src/components/inserter-list-item/base.js

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
+import { useMemo, useRef, memo } from '@wordpress/element';
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
+import { ENTER, isAppleOS } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { InserterListboxItem } from '../inserter-listbox';
+import InserterDraggableBlocks from '../inserter-draggable-blocks';
+
+function InserterListItem( {
+	className,
+	isFirst,
+	item,
+	onSelect,
+	onHover,
+	isDraggable,
+	...props
+} ) {
+	const isDragging = useRef( false );
+	const itemIconStyle = item.icon
+		? {
+				backgroundColor: item.icon.background,
+				color: item.icon.foreground,
+		  }
+		: {};
+	const blocks = useMemo( () => {
+		return [
+			createBlock(
+				item.name,
+				item.initialAttributes,
+				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
+			),
+		];
+	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
+
+	return (
+		<InserterDraggableBlocks
+			isEnabled={ isDraggable && ! item.disabled }
+			blocks={ blocks }
+			icon={ item.icon }
+		>
+			{ ( { draggable, onDragStart, onDragEnd } ) => (
+				<div
+					className="block-editor-block-types-list__list-item"
+					draggable={ draggable }
+					onDragStart={ ( event ) => {
+						isDragging.current = true;
+						if ( onDragStart ) {
+							onHover( null );
+							onDragStart( event );
+						}
+					} }
+					onDragEnd={ ( event ) => {
+						isDragging.current = false;
+						if ( onDragEnd ) {
+							onDragEnd( event );
+						}
+					} }
+				>
+					<InserterListboxItem
+						isFirst={ isFirst }
+						className={ classnames(
+							'block-editor-block-types-list__item',
+							className
+						) }
+						disabled={ item.isDisabled }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onSelect(
+								item,
+								isAppleOS() ? event.metaKey : event.ctrlKey
+							);
+							onHover( null );
+						} }
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER ) {
+								event.preventDefault();
+								onSelect(
+									item,
+									isAppleOS() ? event.metaKey : event.ctrlKey
+								);
+								onHover( null );
+							}
+						} }
+						onFocus={ () => {
+							if ( isDragging.current ) {
+								return;
+							}
+							onHover( item );
+						} }
+						onMouseEnter={ () => {
+							if ( isDragging.current ) {
+								return;
+							}
+							onHover( item );
+						} }
+						onMouseLeave={ () => onHover( null ) }
+						onBlur={ () => onHover( null ) }
+						{ ...props }
+					>
+						<span
+							className="block-editor-block-types-list__item-icon"
+							style={ itemIconStyle }
+						>
+							<BlockIcon icon={ item.icon } showColors />
+						</span>
+						<span className="block-editor-block-types-list__item-title">
+							<Truncate numberOfLines={ 3 }>
+								{ item.title }
+							</Truncate>
+						</span>
+					</InserterListboxItem>
+				</div>
+			) }
+		</InserterDraggableBlocks>
+	);
+}
+
+export default memo( InserterListItem );

packages/block-editor/src/components/inserter-list-item/index.js

@@ -1,134 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useRef, memo } from '@wordpress/element';
-import {
-	createBlock,
-	createBlocksFromInnerBlocksTemplate,
-} from '@wordpress/blocks';
-import { __experimentalTruncate as Truncate } from '@wordpress/components';
-import { ENTER, isAppleOS } from '@wordpress/keycodes';
-
 /**
  * Internal dependencies
  */
-import BlockIcon from '../block-icon';
-import { InserterListboxItem } from '../inserter-listbox';
-import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import InserterListItemBase from './base';
 
-function InserterListItem( {
-	className,
-	isFirst,
-	item,
-	onSelect,
-	onHover,
-	isDraggable,
-	...props
-} ) {
-	const isDragging = useRef( false );
-	const itemIconStyle = item.icon
-		? {
-				backgroundColor: item.icon.background,
-				color: item.icon.foreground,
-		  }
-		: {};
-	const blocks = useMemo( () => {
-		return [
-			createBlock(
-				item.name,
-				item.initialAttributes,
-				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
-			),
-		];
-	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
+export default function InserterListItem( props ) {
+	const { inserterItem: InserterItem } = props.item;
 
-	return (
-		<InserterDraggableBlocks
-			isEnabled={ isDraggable && ! item.disabled }
-			blocks={ blocks }
-			icon={ item.icon }
-		>
-			{ ( { draggable, onDragStart, onDragEnd } ) => (
-				<div
-					className="block-editor-block-types-list__list-item"
-					draggable={ draggable }
-					onDragStart={ ( event ) => {
-						isDragging.current = true;
-						if ( onDragStart ) {
-							onHover( null );
-							onDragStart( event );
-						}
-					} }
-					onDragEnd={ ( event ) => {
-						isDragging.current = false;
-						if ( onDragEnd ) {
-							onDragEnd( event );
-						}
-					} }
-				>
-					<InserterListboxItem
-						isFirst={ isFirst }
-						className={ classnames(
-							'block-editor-block-types-list__item',
-							className
-						) }
-						disabled={ item.isDisabled }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							onSelect(
-								item,
-								isAppleOS() ? event.metaKey : event.ctrlKey
-							);
-							onHover( null );
-						} }
-						onKeyDown={ ( event ) => {
-							const { keyCode } = event;
-							if ( keyCode === ENTER ) {
-								event.preventDefault();
-								onSelect(
-									item,
-									isAppleOS() ? event.metaKey : event.ctrlKey
-								);
-								onHover( null );
-							}
-						} }
-						onFocus={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
-						onMouseEnter={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
-						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
-						{ ...props }
-					>
-						<span
-							className="block-editor-block-types-list__item-icon"
-							style={ itemIconStyle }
-						>
-							<BlockIcon icon={ item.icon } showColors />
-						</span>
-						<span className="block-editor-block-types-list__item-title">
-							<Truncate numberOfLines={ 3 }>
-								{ item.title }
-							</Truncate>
-						</span>
-					</InserterListboxItem>
-				</div>
-			) }
-		</InserterDraggableBlocks>
-	);
-}
+	if ( InserterItem ) {
+		return <InserterItem { ...props } />;
+	}
 
-export default memo( InserterListItem );
+	return <InserterListItemBase { ...props } />;
+}

packages/block-editor/src/components/inserter-list-item/with-modal.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterListItem from './base';
+
+export default function InserterListItemWithModal( {
+	modalProps,
+	children,
+	...props
+} ) {
+	const [ isModalVisible, setIsModalVisible ] = useState( false );
+
+	return (
+		<>
+			<InserterListItem
+				{ ...props }
+				onSelect={ () => setIsModalVisible( true ) }
+				aria-haspopup="dialog"
+				aria-expanded={ isModalVisible }
+			/>
+			{ isModalVisible && (
+				<Modal
+					{ ...modalProps }
+					onRequestClose={ () => {
+						setIsModalVisible( false );
+					} }
+				>
+					{ children }
+				</Modal>
+			) }
+		</>
+	);
+}