Browsing sidebar: Add content menu items preview (#29225)

WordPress · Feb 24, 2021 · 60314e8 · 60314e8
1 parent d331076
commit 60314e8
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 11 deletions.
diff --git a/...s/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/...s/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,27 @@ 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 }
+						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
@@ -2,10 +2,10 @@
  * 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';
 
-export default function TemplatePreview( { rawContent } ) {
+export default function TemplatePreview( { rawContent, blockContext } ) {
 	const blocks = useMemo( () => ( rawContent ? parse( rawContent ) : [] ), [
 		rawContent,
 	] );
@@ -14,6 +14,16 @@ export default function TemplatePreview( { rawContent } ) {
 		return null;
 	}
 
+	if ( blockContext ) {
+		return (
+			<div className="edit-site-navigation-panel__preview">
+				<BlockContextProvider value={ blockContext }>
+					<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
+				</BlockContextProvider>
+			</div>
+		);
+	}
+
 	return (
 		<div className="edit-site-navigation-panel__preview">
 			<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />