diff --git a/packages/js/product-editor/src/products-app/index.tsx b/packages/js/product-editor/src/products-app/index.tsx
index b0f5b4b2a10..00fa32588fd 100644
--- a/packages/js/product-editor/src/products-app/index.tsx
+++ b/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 (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/js/product-editor/src/products-app/product-list/index.tsx b/packages/js/product-editor/src/products-app/product-list/index.tsx
index fd29d761c77..a0da52620c1 100644
--- a/packages/js/product-editor/src/products-app/product-list/index.tsx
+++ b/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={
-