Add template parts to template parts (whoops)

packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js

@@ -11,6 +11,7 @@ import { parse } from '@wordpress/blocks';
  */
 import { store as editSiteStore } from '../../../store';
 import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants';
+import { useExistingTemplateParts } from '../../../utils/template-part-create';
 import { unlock } from '../../../lock-unlock';
 
 function injectThemeAttributeInBlockTemplateContent(
@@ -95,3 +96,29 @@ export function useAvailablePatterns( template ) {
 		);
 	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
 }
+
+function prepareTemplateParts( templateParts, template ) {
+	// Filter only the patterns that are compatible with the current template.
+	const filterCompatiblePatterns = ( templatePart ) =>
+		templatePart.area?.includes( template.area );
+
+	return templateParts
+		.filter( filterCompatiblePatterns )
+		.map( ( templatePart ) => ( {
+			id: templatePart.id,
+			area: templatePart.area,
+			keywords: templateParts.keywords || [],
+			type: PATTERN_TYPES.theme, //TODO?
+			blocks: parse( templatePart.content.raw, {
+				__unstableSkipMigrationLogs: true,
+			} ),
+		} ) );
+}
+
+export function useAvailableTemplateParts( template ) {
+	const existingTemplateParts = useExistingTemplateParts();
+
+	return useMemo( () => {
+		return prepareTemplateParts( existingTemplateParts || [], template );
+	}, [ existingTemplateParts, template ] );
+}

packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js

@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+import { useAsyncList } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import { navigation, symbol } from '@wordpress/icons';
 
 /**
@@ -18,12 +21,29 @@ import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
 import PatternCategories from './pattern-categories';
 import { PATTERN_TYPES } from '../../../utils/constants';
+import { useAvailableTemplateParts } from './hooks';
 
 const CARD_ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigation,
 };
 
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+	if ( ! availableTemplates || availableTemplates?.length < 2 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}
+
 export default function TemplatePanel() {
 	const { title, description, icon, record, postType } = useSelect(
 		( select ) => {
@@ -49,6 +69,8 @@ export default function TemplatePanel() {
 		[]
 	);
 
+	const availableTemplateParts = useAvailableTemplateParts( record );
+
 	if ( ! title && ! description ) {
 		return null;
 	}
@@ -64,6 +86,15 @@ export default function TemplatePanel() {
 			>
 				<TemplateAreas />
 			</SidebarCard>
+			<p>
+				{ __(
+					'Choose a predefined pattern to switch up the look of your footer.'
+				) }
+			</p>
+			<TemplatesList
+				availableTemplates={ availableTemplateParts }
+				onSelect={ () => {} }
+			/>
 			<LastRevision />
 			{ postType === PATTERN_TYPES.user && (
 				<PatternCategories post={ record } />