Site Editor: Reduce the Amount of Data Passed Through the Components Tree

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -11,10 +16,10 @@ import {
 /**
  * Internal dependencies
  */
-import TemplateNavigationItems from '../template-navigation-items';
+import TemplateNavigationItem from '../template-navigation-item';
 import { MENU_ROOT, MENU_TEMPLATE_PARTS } from '../constants';
 
-export default function TemplatePartsMenu( { onActivateItem } ) {
+export default function TemplatePartsMenu() {
 	const templateParts = useSelect( ( select ) => {
 		return select( 'core' ).getEntityRecords(
 			'postType',
@@ -32,11 +37,12 @@ export default function TemplatePartsMenu( { onActivateItem } ) {
 			title={ __( 'Template Parts' ) }
 			parentMenu={ MENU_ROOT }
 		>
-			<TemplateNavigationItems
-				entityType="wp_template_part"
-				templates={ templateParts }
-				onActivateItem={ onActivateItem }
-			/>
+			{ map( templateParts, ( templatePart ) => (
+				<TemplateNavigationItem
+					item={ templatePart }
+					key={ `wp_template_part-${ templatePart.id }` }
+				/>
+			) ) }
 
 			{ ! templateParts && <NavigationItem title={ __( 'Loading…' ) } /> }
 		</NavigationMenu>

packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-all.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -7,20 +12,22 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TemplateNavigationItems from '../template-navigation-items';
+import TemplateNavigationItem from '../template-navigation-item';
 import { MENU_TEMPLATES, MENU_TEMPLATES_ALL } from '../constants';
 
-export default function TemplatesAllMenu( { templates, onActivateItem } ) {
+export default function TemplatesAllMenu( { templates } ) {
 	return (
 		<NavigationMenu
 			menu={ MENU_TEMPLATES_ALL }
 			title={ __( 'All Templates' ) }
 			parentMenu={ MENU_TEMPLATES }
 		>
-			<TemplateNavigationItems
-				templates={ templates }
-				onActivateItem={ onActivateItem }
-			/>
+			{ map( templates, ( template ) => (
+				<TemplateNavigationItem
+					item={ template }
+					key={ `wp_template-${ template.id }` }
+				/>
+			) ) }
 		</NavigationMenu>
 	);
 }

packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-pages.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -10,12 +15,12 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TemplateNavigationItems from '../template-navigation-items';
+import TemplateNavigationItem from '../template-navigation-item';
 import { MENU_TEMPLATES, MENU_TEMPLATES_PAGES } from '../constants';
 
-export default function TemplatesPagesMenu( { templates, onActivateItem } ) {
+export default function TemplatesPagesMenu( { templates } ) {
 	const defaultTemplate = templates?.find( ( { slug } ) => slug === 'page' );
-	const specificPageTemplates = templates?.filter( ( { slug } ) =>
+	const specificTemplates = templates?.filter( ( { slug } ) =>
 		slug.startsWith( 'page-' )
 	);
 
@@ -26,18 +31,17 @@ export default function TemplatesPagesMenu( { templates, onActivateItem } ) {
 			parentMenu={ MENU_TEMPLATES }
 		>
 			<NavigationGroup title={ _x( 'Specific', 'specific templates' ) }>
-				<TemplateNavigationItems
-					templates={ specificPageTemplates }
-					onActivateItem={ onActivateItem }
-				/>
+				{ map( specificTemplates, ( template ) => (
+					<TemplateNavigationItem
+						item={ template }
+						key={ `wp_template-${ template.id }` }
+					/>
+				) ) }
 			</NavigationGroup>
 
 			{ defaultTemplate && (
 				<NavigationGroup title={ _x( 'General', 'general templates' ) }>
-					<TemplateNavigationItems
-						templates={ defaultTemplate }
-						onActivateItem={ onActivateItem }
-					/>
+					<TemplateNavigationItem item={ defaultTemplate } />
 				</NavigationGroup>
 			) }
 		</NavigationMenu>

packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-posts.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -10,14 +15,14 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TemplateNavigationItems from '../template-navigation-items';
+import TemplateNavigationItem from '../template-navigation-item';
 import {
 	MENU_TEMPLATES,
 	MENU_TEMPLATES_POSTS,
 	TEMPLATES_POSTS,
 } from '../constants';
 
-export default function TemplatePostsMenu( { templates, onActivateItem } ) {
+export default function TemplatesPostsMenu( { templates } ) {
 	const generalTemplates = templates?.find( ( { slug } ) =>
 		TEMPLATES_POSTS.includes( slug )
 	);
@@ -32,17 +37,21 @@ export default function TemplatePostsMenu( { templates, onActivateItem } ) {
 			parentMenu={ MENU_TEMPLATES }
 		>
 			<NavigationGroup title={ _x( 'Specific', 'specific templates' ) }>
-				<TemplateNavigationItems
-					templates={ specificTemplates }
-					onActivateItem={ onActivateItem }
-				/>
+				{ map( specificTemplates, ( template ) => (
+					<TemplateNavigationItem
+						item={ template }
+						key={ `wp_template-${ template.id }` }
+					/>
+				) ) }
 			</NavigationGroup>
 
 			<NavigationGroup title={ _x( 'General', 'general templates' ) }>
-				<TemplateNavigationItems
-					templates={ generalTemplates }
-					onActivateItem={ onActivateItem }
-				/>
+				{ map( generalTemplates, ( template ) => (
+					<TemplateNavigationItem
+						item={ template }
+						key={ `wp_template-${ template.id }` }
+					/>
+				) ) }
 			</NavigationGroup>
 		</NavigationMenu>
 	);

packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates.js

@@ -1,18 +1,23 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalNavigationItem as NavigationItem,
 	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import TemplatesPagesMenu from './templates-pages';
-import TemplateNavigationItems from '../template-navigation-items';
-import TemplatePostsMenu from './templates-posts';
+import TemplatesPostsMenu from './templates-posts';
 import {
 	MENU_ROOT,
 	MENU_TEMPLATES,
@@ -21,11 +26,11 @@ import {
 	MENU_TEMPLATES_POSTS,
 	TEMPLATES_GENERAL,
 } from '../constants';
-import { useSelect } from '@wordpress/data';
 import TemplatesAllMenu from './templates-all';
 import NewTemplateDropdown from '../new-template-dropdown';
+import TemplateNavigationItem from '../template-navigation-item';
 
-export default function TemplatesMenu( { onActivateItem } ) {
+export default function TemplatesMenu() {
 	const templates = useSelect(
 		( select ) =>
 			select( 'core' ).getEntityRecords( 'postType', 'wp_template', {
@@ -59,25 +64,18 @@ export default function TemplatesMenu( { onActivateItem } ) {
 				title={ __( 'Posts' ) }
 			/>
 
-			<TemplateNavigationItems
-				templates={ generalTemplates }
-				onActivateItem={ onActivateItem }
-			/>
+			{ map( generalTemplates, ( template ) => (
+				<TemplateNavigationItem
+					item={ template }
+					key={ `wp_template-${ template.id }` }
+				/>
+			) ) }
 
-			<TemplatePostsMenu
-				templates={ templates }
-				onActivateItem={ onActivateItem }
-			/>
+			<TemplatesPostsMenu templates={ templates } />
 
-			<TemplatesPagesMenu
-				templates={ templates }
-				onActivateItem={ onActivateItem }
-			/>
+			<TemplatesPagesMenu templates={ templates } />
 
-			<TemplatesAllMenu
-				templates={ templates }
-				onActivateItem={ onActivateItem }
-			/>
+			<TemplatesAllMenu templates={ templates } />
 		</NavigationMenu>
 	);
 }

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalNavigationItem as NavigationItem,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TemplatePreview from './template-preview';
+import { NavigationPanelPreviewFill } from '../index';
+import { getTemplateInfo } from '../../../utils';
+
+export default function TemplateNavigationItem( { item } ) {
+	const { setTemplate, setTemplatePart } = useDispatch( 'core/edit-site' );
+	const [ isPreviewVisible, setIsPreviewVisible ] = useState( false );
+
+	const { title, description } = getTemplateInfo( item );
+
+	const onActivateItem = () =>
+		'wp_template' === item.type
+			? setTemplate( item.id )
+			: setTemplatePart( item.id );
+
+	return (
+		<NavigationItem
+			className="edit-site-navigation-panel__template-item"
+			item={ `${ item.type }-${ item.id }` }
+			title={ title }
+		>
+			<Button
+				onClick={ onActivateItem }
+				onMouseEnter={ () => setIsPreviewVisible( true ) }
+				onMouseLeave={ () => setIsPreviewVisible( false ) }
+			>
+				{ title }
+				{ description && (
+					<div className="edit-site-navigation-panel__template-item-description">
+						{ description }
+					</div>
+				) }
+			</Button>
+
+			{ isPreviewVisible && (
+				<NavigationPanelPreviewFill>
+					<TemplatePreview rawContent={ item.content.raw } />
+				</NavigationPanelPreviewFill>
+			) }
+		</NavigationItem>
+	);
+}