Site Editor: Add feature flag to toggle the new site editor sidebar (#…

…36516)

packages/edit-site/src/components/editor/index.js

@@ -35,6 +35,7 @@ import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
 import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import NavigationSidebar from '../navigation-sidebar';
 import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
@@ -46,6 +47,7 @@ import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
+	drawer: __( 'Navigation Sidebar' ),
 };
 
 function Editor( { initialSettings, onError } ) {
@@ -111,7 +113,11 @@ function Editor( { initialSettings, onError } ) {
 	// so that they can be selected with core/editor selectors in any editor.
 	// This is needed because edit-site doesn't initialize with EditorProvider,
 	// which internally uses updateEditorSettings as well.
-	const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
+	const {
+		defaultTemplateTypes,
+		defaultTemplatePartAreas,
+		__experimentalNewMenuSidebar: newMenuSidebar,
+	} = settings;
 	useEffect( () => {
 		updateEditorSettings( {
 			defaultTemplateTypes,
@@ -213,6 +219,11 @@ function Editor( { initialSettings, onError } ) {
 											<SidebarComplementaryAreaFills />
 											<InterfaceSkeleton
 												labels={ interfaceLabels }
+												drawer={
+													newMenuSidebar ? undefined : (
+														<NavigationSidebar />
+													)
+												}
 												secondarySidebar={ secondarySidebar() }
 												sidebar={
 													sidebarIsOpened && (

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

@@ -47,13 +47,15 @@ export default function Header( {
 		isListViewOpen,
 		listViewShortcut,
 		isLoaded,
+		newMenuSidebar,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
 			getEditedPostType,
 			getEditedPostId,
 			isInserterOpened,
 			isListViewOpened,
+			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
@@ -77,6 +79,7 @@ export default function Header( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-site/toggle-list-view'
 			),
+			newMenuSidebar: getSettings().__experimentalNewMenuSidebar,
 		};
 	}, [] );
 
@@ -107,9 +110,11 @@ export default function Header( {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				<MainDashboardButton.Slot>
-					<NavigationLink />
-				</MainDashboardButton.Slot>
+				{ newMenuSidebar && (
+					<MainDashboardButton.Slot>
+						<NavigationLink />
+					</MainDashboardButton.Slot>
+				) }
 
 				<div className="edit-site-header__toolbar">
 					<Button

packages/edit-site/src/components/template-details/index.js

@@ -31,7 +31,13 @@ export default function TemplateDetails( { template, onClose } ) {
 			select( editorStore ).__experimentalGetTemplateInfo( template ),
 		[]
 	);
-	const { revertTemplate } = useDispatch( editSiteStore );
+	const newMenuSidebar = useSelect(
+		( select ) =>
+			select( editSiteStore ).getSettings().__experimentalNewMenuSidebar
+	);
+	const { openNavigationPanelToMenu, revertTemplate } = useDispatch(
+		editSiteStore
+	);
 
 	const templateSubMenu = useMemo( () => {
 		if ( template?.type === 'wp_template' ) {
@@ -47,6 +53,11 @@ export default function TemplateDetails( { template, onClose } ) {
 		return null;
 	}
 
+	const showTemplateInSidebar = () => {
+		onClose();
+		openNavigationPanelToMenu( templateSubMenu.menu );
+	};
+
 	const revert = () => {
 		revertTemplate( template );
 		onClose();
@@ -90,10 +101,23 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( 'edit.php', {
-					// TODO: We should update this to filter by template part's areas as well.
-					post_type: template.type,
-				} ) }
+				{ ...( newMenuSidebar
+					? {
+							href: addQueryArgs( 'edit.php', {
+								// TODO: We should update this to filter by template part's areas as well.
+								post_type: template.type,
+							} ),
+					  }
+					: {
+							onClick: showTemplateInSidebar,
+							'aria-label': sprintf(
+								/* translators: %1$s: the template part's area name ("Headers", "Sidebars") or "templates". */
+								__(
+									'Browse all %1$s. This will open the %1$s menu in the navigation side panel.'
+								),
+								templateSubMenu.title
+							),
+					  } ) }
 			>
 				{ sprintf(
 					/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */

packages/edit-site/src/index.js

@@ -49,6 +49,8 @@ export function initialize( id, settings ) {
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
 	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
+	// Feature flag for the new menu sidebar which isn't stable yet.
+	settings.__experimentalNewMenuSidebar = false;
 
 	const target = document.getElementById( id );
 	const reboot = reinitializeEditor.bind( null, target, settings );

packages/edit-site/src/style.scss

@@ -6,6 +6,8 @@
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/more-menu/style.scss";
 @import "./components/header/navigation-link/style.scss";
+@import "./components/navigation-sidebar/navigation-toggle/style.scss";
+@import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-card/style.scss";