Add toggle to toggle between new and old navigation

packages/js/product-editor/src/products-app/index.tsx

@@ -15,14 +15,17 @@ import {
 import { unlock } from '../lock-unlock';
 import useLayoutAreas from './router';
 import { Layout } from './layout';
-import { getShowNewNavigation } from './utilites/new-navigation';
+import {
+	NewNavigationProvider,
+	useNewNavigation,
+} from './utilites/new-navigation';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function ProductsLayout() {
 	// This ensures the edited entity id and type are initialized properly.
-	const showNewNavigation = getShowNewNavigation();
+	const [ showNewNavigation ] = useNewNavigation();
 	if ( showNewNavigation ) {
 		document.body.classList.add( 'is-fullscreen-mode' );
 	} else {
@@ -34,11 +37,13 @@ function ProductsLayout() {
 
 export function ProductsApp() {
 	return (
-		<GlobalStylesProvider>
-			<UnsavedChangesWarning />
-			<RouterProvider>
-				<ProductsLayout />
-			</RouterProvider>
-		</GlobalStylesProvider>
+		<NewNavigationProvider>
+			<GlobalStylesProvider>
+				<UnsavedChangesWarning />
+				<RouterProvider>
+					<ProductsLayout />
+				</RouterProvider>
+			</GlobalStylesProvider>
+		</NewNavigationProvider>
 	);
 }

packages/js/product-editor/src/products-app/product-list/index.tsx

@@ -11,7 +11,7 @@ import {
 	Fragment,
 } from '@wordpress/element';
 import { Product, ProductQuery } from '@woocommerce/data';
-import { drawerRight } from '@wordpress/icons';
+import { drawerRight, seen, unseen } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
@@ -44,6 +44,7 @@ import {
 import { LAYOUT_LIST } from '../constants';
 import { productFields } from './fields';
 import { useEditProductAction } from '../dataviews-actions';
+import { useNewNavigation } from '../utilites/new-navigation';
 
 const { NavigableRegion, usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -149,6 +150,7 @@ export default function ProductList( {
 	className,
 	hideTitleFromUI = false,
 }: ProductListProps ) {
+	const [ showNewNavigation, setNewNavigation ] = useNewNavigation();
 	const history = useHistory();
 	const location = useLocation();
 	const {
@@ -307,22 +309,36 @@ export default function ProductList( {
 					selection={ selection }
 					defaultLayouts={ defaultLayouts }
 					header={
-						<Button
-							// @ts-expect-error outdated type.
-							size="compact"
-							isPressed={ quickEdit }
-							icon={ drawerRight }
-							label={ __(
-								'Toggle details panel',
-								'woocommerce'
-							) }
-							onClick={ () => {
-								history.push( {
-									...location.params,
-									quickEdit: quickEdit ? undefined : true,
-								} );
-							} }
-						/>
+						<>
+							<Button
+								// @ts-expect-error outdated type.
+								size="compact"
+								icon={ showNewNavigation ? seen : unseen }
+								label={ __(
+									'Toggle navigation',
+									'woocommerce'
+								) }
+								onClick={ () => {
+									setNewNavigation( ! showNewNavigation );
+								} }
+							/>
+							<Button
+								// @ts-expect-error outdated type.
+								size="compact"
+								isPressed={ quickEdit }
+								icon={ drawerRight }
+								label={ __(
+									'Toggle details panel',
+									'woocommerce'
+								) }
+								onClick={ () => {
+									history.push( {
+										...location.params,
+										quickEdit: quickEdit ? undefined : true,
+									} );
+								} }
+							/>
+						</>
 					}
 				/>
 			</div>

packages/js/product-editor/src/products-app/utilites/new-navigation.ts

@@ -1,7 +0,0 @@
-export function setShowNewNavigation( newNavigation: boolean ) {
-	window.__productNewNavigation = newNavigation;
-}
-
-export function getShowNewNavigation(): boolean {
-	return window.__productNewNavigation ?? false;
-}

packages/js/product-editor/src/products-app/utilites/new-navigation.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	createElement,
+	createContext,
+	useState,
+	useContext,
+} from '@wordpress/element';
+
+type NewNavigationContextType = {
+	showNewNavigation: boolean;
+	setShowNewNavigation: ( nav: boolean ) => void;
+};
+const NewNavigationContext = createContext< NewNavigationContextType | null >(
+	null
+);
+
+export function NewNavigationProvider( {
+	children,
+}: {
+	children?: React.ReactNode;
+} ) {
+	const [ showNewNavigation, setShowNewNavigation ] = useState( false );
+	return (
+		<NewNavigationContext.Provider
+			value={ { showNewNavigation, setShowNewNavigation } }
+		>
+			{ children }
+		</NewNavigationContext.Provider>
+	);
+}
+export function useNewNavigation(): [ boolean, ( nav: boolean ) => void ] {
+	const context = useContext( NewNavigationContext );
+	if ( context ) {
+		const { showNewNavigation, setShowNewNavigation } = context;
+		return [ showNewNavigation, setShowNewNavigation ];
+	}
+	return [ false, () => {} ];
+}

packages/js/product-editor/src/products.scss

@@ -8,6 +8,12 @@ body.product_page_woocommerce-products-dashboard #woocommerce-products-dashboard
 	@include reset;
 	display: flex !important;
 	min-height: 100vh;
+
+	.edit-site-layout {
+		flex: 1 1 0;
+		min-height: 100%;
+		height: auto;
+	}
 }
 
 body.js:not(.is-fullscreen-mode) {
@@ -30,11 +36,7 @@ body.js:not(.is-fullscreen-mode) {
 		min-height: calc(100vh - #{$admin-bar-height});
 
 		.edit-site-layout {
-			flex: 1 1 0;
-			min-height: 100%;
-			height: auto;
 			background: #1d2327;
-			;
 		}
 	}