Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browsing sidebar: Add content menu items preview #29225

Merged
merged 3 commits into from
Feb 24, 2021
Merged

Browsing sidebar: Add content menu items preview #29225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d51882e
Add preview
david-szabo97 Feb 22, 2021
d2abc7c
Use BlockContextProvider
david-szabo97 Feb 23, 2021
e83ec37
Refactor prop
david-szabo97 Feb 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 47 additions & 9 deletions ...s/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
) }
</>
);
}
14 changes: 12 additions & 2 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
] );
Expand All @@ -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 } />
Expand Down