Move preview to TemplateNavigationItems

packages/edit-site/src/components/left-sidebar/navigation-panel/menus/template-parts.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import {
 	__experimentalNavigationItem as NavigationItem,
 	__experimentalNavigationMenu as NavigationMenu,
@@ -12,14 +11,9 @@ import {
 /**
  * Internal dependencies
  */
-import TemplatePreview from '../template-preview';
+import TemplateNavigationItems from '../template-navigation-items';
 
 export default function TemplatePartsMenu( { onActiveTemplatePartIdChange } ) {
-	const [ hoveredTemplatePartId, setHoveredTemplatePartId ] = useState();
-
-	const onMouseEnterTemplatePart = ( id ) => setHoveredTemplatePartId( id );
-	const onMouseLeaveTemplatePart = () => setHoveredTemplatePartId( null );
-
 	const templateParts = useSelect(
 		( select ) =>
 			select( 'core' ).getEntityRecords( 'postType', 'wp_template_part' ),
@@ -32,31 +26,13 @@ export default function TemplatePartsMenu( { onActiveTemplatePartIdChange } ) {
 			title="Template Parts"
 			parentMenu="root"
 		>
-			{ templateParts?.map( ( templatePart ) => {
-				const key = `template-part-${ templatePart.id }`;
-
-				return (
-					<NavigationItem
-						key={ key }
-						item={ key }
-						title={ templatePart.slug }
-						template={ templatePart }
-						onClick={ () =>
-							onActiveTemplatePartIdChange( templatePart.id )
-						}
-						onMouseEnter={ () =>
-							onMouseEnterTemplatePart( templatePart.id )
-						}
-						onMouseLeave={ onMouseLeaveTemplatePart }
-					/>
-				);
-			} ) }
+			<TemplateNavigationItems
+				entityType="wp_template_part"
+				templates={ templateParts }
+				onActivate={ onActiveTemplatePartIdChange }
+			/>
 
 			{ ! templateParts && <NavigationItem title={ __( 'Loading…' ) } /> }
-
-			{ hoveredTemplatePartId && (
-				<TemplatePreview entityId={ hoveredTemplatePartId } />
-			) }
 		</NavigationMenu>
 	);
 }

packages/edit-site/src/components/left-sidebar/navigation-panel/template-navigation-items.js

@@ -2,6 +2,12 @@
  * WordPress dependencies
  */
 import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TemplatePreview from './template-preview';
 
 const TITLES = {
 	'front-page': {
@@ -34,7 +40,16 @@ const TITLES = {
 	},
 };
 
-export default function TemplateNavigationItems( { templates, onActivate } ) {
+export default function TemplateNavigationItems( {
+	entityType = 'wp_template',
+	templates,
+	onActivate,
+} ) {
+	const [ hoveredTemplateId, setHoveredTemplateId ] = useState();
+
+	const onMouseEnterTemplate = ( id ) => setHoveredTemplateId( id );
+	const onMouseLeaveTemplate = () => setHoveredTemplateId( null );
+
 	if ( ! templates ) {
 		return null;
 	}
@@ -43,12 +58,28 @@ export default function TemplateNavigationItems( { templates, onActivate } ) {
 		templates = [ templates ];
 	}
 
-	return templates.map( ( template ) => (
-		<NavigationItem
-			key={ `template-${ template.id }` }
-			item={ `template-${ template.slug }` }
-			title={ TITLES[ template.slug ]?.title ?? template.slug }
-			onClick={ () => onActivate( template.id ) }
-		/>
-	) );
+	const itemPrefix =
+		entityType === 'wp_template_part' ? 'template-part' : 'template';
+
+	return (
+		<>
+			{ templates.map( ( template ) => (
+				<NavigationItem
+					key={ `${ itemPrefix }-${ template.id }` }
+					item={ `${ itemPrefix }-${ template.slug }` }
+					title={ TITLES[ template.slug ]?.title ?? template.slug }
+					onClick={ () => onActivate( template.id ) }
+					onMouseEnter={ () => onMouseEnterTemplate( template.id ) }
+					onMouseLeave={ onMouseLeaveTemplate }
+				/>
+			) ) }
+
+			{ hoveredTemplateId && (
+				<TemplatePreview
+					entityType={ entityType }
+					entityId={ hoveredTemplateId }
+				/>
+			) }
+		</>
+	);
 }

packages/edit-site/src/components/left-sidebar/navigation-panel/template-preview.js

@@ -6,12 +6,12 @@ import { useSelect } from '@wordpress/data';
 import { BlockPreview } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 
-export default function TemplatePreview( { entityId } ) {
+export default function TemplatePreview( { entityType, entityId } ) {
 	const template = useSelect(
 		( select ) =>
 			select( 'core' ).getEntityRecord(
 				'postType',
-				'wp_template_part',
+				entityType,
 				entityId
 			),
 		[ entityId ]