From d51882e599a1e7102e84ef2983c7ab315f1a9cac Mon Sep 17 00:00:00 2001
From: David Szabo <david.szabo97@gmail.com>
Date: Mon, 22 Feb 2021 16:34:47 +0100
Subject: [PATCH 1/3] Add preview

---
 .../content-navigation-item.js                | 53 +++++++++++++++----
 .../navigation-panel/template-preview.js      | 17 +++++-
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
index 2ab7aec2d0c921..673513738b6b40 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
@@ -2,16 +2,38 @@
  * WordPress dependencies
  */
 import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getPathAndQueryString } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationPanelPreviewFill } from '..';
+import TemplatePreview from './template-preview';
+import { store as editSiteStore } from '../../../store';
 
 const getTitle = ( entity ) =>
 	entity.taxonomy ? entity.name : entity?.title?.rendered;
 
 export default function ContentNavigationItem( { item } ) {
-	const { setPage } = useDispatch( 'core/edit-site' );
+	const [ isPreviewVisible, setIsPreviewVisible ] = useState( false );
+	const previewContent = useSelect(
+		( select ) => {
+			if ( ! isPreviewVisible ) {
+				return null;
+			}
+
+			const template = select(
+				coreStore
+			).__experimentalGetTemplateForLink( item.link );
+			return template?.content?.raw;
+		},
+		[ isPreviewVisible ]
+	);
+	const { setPage } = useDispatch( editSiteStore );
 
 	const onActivateItem = useCallback( () => {
 		const { type, slug, link, id } = item;
@@ -31,11 +53,24 @@ export default function ContentNavigationItem( { item } ) {
 	}
 
 	return (
-		<NavigationItem
-			className="edit-site-navigation-panel__content-item"
-			item={ `${ item.taxonomy || item.type }-${ item.id }` }
-			title={ getTitle( item ) || __( '(no title)' ) }
-			onClick={ onActivateItem }
-		/>
+		<>
+			<NavigationItem
+				className="edit-site-navigation-panel__content-item"
+				item={ `${ item.taxonomy || item.type }-${ item.id }` }
+				title={ getTitle( item ) || __( '(no title)' ) }
+				onClick={ onActivateItem }
+				onMouseEnter={ () => setIsPreviewVisible( true ) }
+				onMouseLeave={ () => setIsPreviewVisible( false ) }
+			/>
+
+			{ isPreviewVisible && previewContent && (
+				<NavigationPanelPreviewFill>
+					<TemplatePreview
+						rawContent={ previewContent }
+						provideEntity={ item }
+					/>
+				</NavigationPanelPreviewFill>
+			) }
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
index e27eeb7a514128..f4fd65d9ace060 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
@@ -4,8 +4,9 @@
 import { parse } from '@wordpress/blocks';
 import { BlockPreview } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
+import { EntityProvider } from '@wordpress/core-data';
 
-export default function TemplatePreview( { rawContent } ) {
+export default function TemplatePreview( { rawContent, provideEntity } ) {
 	const blocks = useMemo( () => ( rawContent ? parse( rawContent ) : [] ), [
 		rawContent,
 	] );
@@ -14,6 +15,20 @@ export default function TemplatePreview( { rawContent } ) {
 		return null;
 	}
 
+	if ( provideEntity ) {
+		return (
+			<div className="edit-site-navigation-panel__preview">
+				<EntityProvider
+					kind="postType"
+					type={ provideEntity.type }
+					id={ provideEntity.id }
+				>
+					<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
+				</EntityProvider>
+			</div>
+		);
+	}
+
 	return (
 		<div className="edit-site-navigation-panel__preview">
 			<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />

From d2abc7c4f79f5091e089ef6ddf40a373913b461a Mon Sep 17 00:00:00 2001
From: David Szabo <david.szabo97@gmail.com>
Date: Tue, 23 Feb 2021 16:36:33 +0100
Subject: [PATCH 2/3] Use BlockContextProvider

---
 .../navigation-panel/template-preview.js           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
index f4fd65d9ace060..3e5cf0350fed6c 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { parse } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
+import { BlockPreview, BlockContextProvider } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { EntityProvider } from '@wordpress/core-data';
 
 export default function TemplatePreview( { rawContent, provideEntity } ) {
 	const blocks = useMemo( () => ( rawContent ? parse( rawContent ) : [] ), [
@@ -18,13 +17,14 @@ export default function TemplatePreview( { rawContent, provideEntity } ) {
 	if ( provideEntity ) {
 		return (
 			<div className="edit-site-navigation-panel__preview">
-				<EntityProvider
-					kind="postType"
-					type={ provideEntity.type }
-					id={ provideEntity.id }
+				<BlockContextProvider
+					value={ {
+						postId: provideEntity.id,
+						postType: provideEntity.type,
+					} }
 				>
 					<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
-				</EntityProvider>
+				</BlockContextProvider>
 			</div>
 		);
 	}

From e83ec371b13d6e772be25c4a666862020a3b08f3 Mon Sep 17 00:00:00 2001
From: David Szabo <david.szabo97@gmail.com>
Date: Tue, 23 Feb 2021 16:50:27 +0100
Subject: [PATCH 3/3] Refactor prop

---
 .../navigation-panel/content-navigation-item.js       |  5 ++++-
 .../navigation-panel/template-preview.js              | 11 +++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
index 673513738b6b40..0e6759932053fb 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
@@ -67,7 +67,10 @@ export default function ContentNavigationItem( { item } ) {
 				<NavigationPanelPreviewFill>
 					<TemplatePreview
 						rawContent={ previewContent }
-						provideEntity={ item }
+						blockContext={ {
+							postType: item.type,
+							postId: item.id,
+						} }
 					/>
 				</NavigationPanelPreviewFill>
 			) }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
index 3e5cf0350fed6c..adf069ddbb2d0e 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
@@ -5,7 +5,7 @@ import { parse } from '@wordpress/blocks';
 import { BlockPreview, BlockContextProvider } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 
-export default function TemplatePreview( { rawContent, provideEntity } ) {
+export default function TemplatePreview( { rawContent, blockContext } ) {
 	const blocks = useMemo( () => ( rawContent ? parse( rawContent ) : [] ), [
 		rawContent,
 	] );
@@ -14,15 +14,10 @@ export default function TemplatePreview( { rawContent, provideEntity } ) {
 		return null;
 	}
 
-	if ( provideEntity ) {
+	if ( blockContext ) {
 		return (
 			<div className="edit-site-navigation-panel__preview">
-				<BlockContextProvider
-					value={ {
-						postId: provideEntity.id,
-						postType: provideEntity.type,
-					} }
-				>
+				<BlockContextProvider value={ blockContext }>
 					<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
 				</BlockContextProvider>
 			</div>