Site Editor: Extend the NavigationItem Components to Support Page and Template Previews

[Copons]

The current page/template selector supports template (and theme) previews:

gutenberg/packages/edit-site/src/components/header/index.js

Lines 108 to 127 in 668a710

	<div className="edit-site-header__toolbar-switchers">
	<PageSwitcher
	showOnFront={ showOnFront }
	activePage={ page }
	onActivePageChange={ setPage }
	/>
	<div className="edit-site-header__toolbar-switchers-separator">
	/
	</div>
	<TemplateSwitcher
	page={ page }
	activeId={ templateId }
	activeTemplatePartId={ templatePartId }
	isTemplatePart={ templateType === 'wp_template_part' }
	onActiveIdChange={ setTemplate }
	onActiveTemplatePartIdChange={ setTemplatePart }
	onAddTemplate={ addTemplate }
	onRemoveTemplate={ removeTemplate }
	/>
	</div>

We should replicate the same functionality in the new site editor navigation, by extending NavigationItem to support previews that show up on mouse over.

Depends on #25244.

(Source)

[david-szabo97]

Isn't this something that's the consumer's concern?

We just need to make the component extensible so the consumer can show the preview. Which is kinda possible right now. We can add mouseenter and mouseleave event handlers on the NavigationItem.

I don't think we should add this to Navigation package. That would make it coupled with the block editor.

[david-szabo97]

Once we have the core implementations in place, then we can create a Navigation component in edit-site which implements this feature

[Copons]

Isn't this something that's the consumer's concern?

@david-szabo97 agree!
That's why I named this PR as Site Editor 😛

Although, there could be a need of a standard item component with a preview panel.

We just need to make the component extensible so the consumer can show the preview. Which is kinda possible right now. We can add mouseenter and mouseleave event handlers on the NavigationItem.

We probably not need to add the hover handlers to NavigationItem, but can simply add them to the Site Editor component.

[Copons]

@david-szabo97 I think there has been a regression on this, and previews are not visible anymore.
We might have caused it when we moved the sidebar around in the interface, or when we played around with overflows. 🤔

[david-szabo97]

Closing this, works fine on master.