Site Editor: Add a slot to replace the navigation sidebar content

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

@@ -6,65 +6,33 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationBackButton as NavigationBackButton,
-} from '@wordpress/components';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import SiteMenu from './menus';
-import MainDashboardButton from '../../main-dashboard-button';
+import Navigation from './navigation';
+import NavigationMenu from './navigation-menu';
 import { store as editSiteStore } from '../../../store';
-import { MENU_ROOT } from './constants';
 
 const NavigationPanel = ( { isOpen } ) => {
-	const {
-		page: { context: { postType, postId } = {} } = {},
-		editedPostId,
-		editedPostType,
-		activeMenu,
-		siteTitle,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getNavigationPanelActiveMenu,
-			getPage,
-		} = select( editSiteStore );
+	const { activeMenu, siteTitle } = useSelect( ( select ) => {
+		const { getNavigationPanelActiveMenu } = select( editSiteStore );
 		const { getEntityRecord } = select( coreDataStore );
 
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
 		return {
-			page: getPage(),
-			editedPostId: getEditedPostId(),
-			editedPostType: getEditedPostType(),
 			activeMenu: getNavigationPanelActiveMenu(),
 			siteTitle: siteData.name,
 		};
 	}, [] );
 
-	const {
-		setNavigationPanelActiveMenu: setActive,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
-	let activeItem;
-	if ( activeMenu !== MENU_ROOT ) {
-		if ( activeMenu.startsWith( 'content' ) ) {
-			activeItem = `${ postType }-${ postId }`;
-		} else {
-			activeItem = `${ editedPostType }-${ editedPostId }`;
-		}
-	}
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	// Ensures focus is moved to the panel area when it is activated
 	// from a separate component (such as document actions in the header).
@@ -99,22 +67,9 @@ const NavigationPanel = ( { isOpen } ) => {
 					</div>
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation
-						activeItem={ activeItem }
-						activeMenu={ activeMenu }
-						onActivateMenu={ setActive }
-					>
-						{ activeMenu === MENU_ROOT && (
-							<MainDashboardButton.Slot>
-								<NavigationBackButton
-									backButtonLabel={ __( 'Dashboard' ) }
-									className="edit-site-navigation-panel__back-to-dashboard"
-									href="index.php"
-								/>
-							</MainDashboardButton.Slot>
-						) }
-						<SiteMenu />
-					</Navigation>
+					<Navigation.Slot>
+						<NavigationMenu />
+					</Navigation.Slot>
 				</div>
 			</div>
 		</div>

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalNavigation as Navigation,
+	__experimentalNavigationBackButton as NavigationBackButton,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SiteMenu from './menus';
+import MainDashboardButton from '../../main-dashboard-button';
+import { store as editSiteStore } from '../../../store';
+import { MENU_ROOT } from './constants';
+
+export default function NavigationMenu() {
+	const {
+		activeMenu,
+		editedPostId,
+		editedPostType,
+		page: { context: { postType, postId } = {} } = {},
+	} = useSelect( ( select ) => {
+		const {
+			getEditedPostId,
+			getEditedPostType,
+			getNavigationPanelActiveMenu,
+			getPage,
+		} = select( editSiteStore );
+
+		return {
+			activeMenu: getNavigationPanelActiveMenu(),
+			editedPostId: getEditedPostId(),
+			editedPostType: getEditedPostType(),
+			page: getPage(),
+		};
+	}, [] );
+
+	const { setNavigationPanelActiveMenu } = useDispatch( editSiteStore );
+
+	let activeItem;
+	if ( activeMenu !== MENU_ROOT ) {
+		if ( activeMenu.startsWith( 'content' ) ) {
+			activeItem = `${ postType }-${ postId }`;
+		} else {
+			activeItem = `${ editedPostType }-${ editedPostId }`;
+		}
+	}
+
+	return (
+		<Navigation
+			activeItem={ activeItem }
+			activeMenu={ activeMenu }
+			onActivateMenu={ setNavigationPanelActiveMenu }
+		>
+			{ activeMenu === MENU_ROOT && (
+				<MainDashboardButton.Slot>
+					<NavigationBackButton
+						backButtonLabel={ __( 'Dashboard' ) }
+						className="edit-site-navigation-panel__back-to-dashboard"
+						href="index.php"
+					/>
+				</MainDashboardButton.Slot>
+			) }
+			<SiteMenu />
+		</Navigation>
+	);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseSlot as useSlot,
+	createSlotFill,
+} from '@wordpress/components';
+
+const slotName = '__experimentalEditSiteNavigation';
+
+const { Fill, Slot: NavigationSlot } = createSlotFill( slotName );
+
+const Navigation = Fill;
+
+const Slot = ( { children } ) => {
+	const slot = useSlot( slotName );
+	const hasFills = Boolean( slot.fills && slot.fills.length );
+
+	if ( ! hasFills ) {
+		return children;
+	}
+
+	return <NavigationSlot bubblesVirtually />;
+};
+
+Navigation.Slot = Slot;
+
+export default Navigation;

packages/edit-site/src/index.js

@@ -41,4 +41,5 @@ export function initialize( id, settings ) {
 }
 
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
+export { default as __experimentalNavigation } from './components/navigation-sidebar/navigation-panel/navigation';
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';