Add filter to allow the wp toolbar in navigation (https://github.com/woocommerce/woocommerce-admin/pull/6371)

* Add class to determine styling for disabled wp toolbar

* Use disabled toolbar class in onboarding setup wizard

* Add changelog and readme notes for filter

plugins/woocommerce-admin/client/header/style.scss

@@ -47,8 +47,11 @@
 	}
 }
 
-.has-woocommerce-navigation .woocommerce-layout__header {
+.is-wp-toolbar-disabled .woocommerce-layout__header {
 	top: 0;
+}
+
+.has-woocommerce-navigation .woocommerce-layout__header {
 	left: 0;
 	width: 100%;
 }

plugins/woocommerce-admin/client/layout/style.scss

@@ -85,7 +85,13 @@
 	}
 }
 
-.wp-toolbar .woocommerce-admin-full-screen {
+.is-wp-toolbar-disabled {
+	#wpadminbar {
+		display: none !important;
+	}
+}
+
+.wp-toolbar .is-wp-toolbar-disabled {
 	margin-top: -$adminbar-height;
 	@include breakpoint( '<600px' ) {
 		margin-top: -$adminbar-height-mobile;

plugins/woocommerce-admin/client/navigation/style.scss

@@ -24,10 +24,14 @@
 	position: absolute;
 	top: $header-height;
 	width: 100%;
-	height: calc(100vh - #{$header-height});
+	height: calc(100vh - #{$header-height + $adminbar-height});
 	overflow-y: auto;
 }
 
+.is-wp-toolbar-disabled .woocommerce-navigation__wrapper {
+	height: calc(100vh - #{$header-height});
+}
+
 body.is-wc-nav-expanded {
 	.woocommerce-navigation {
 		width: $navigation-width;
@@ -66,7 +70,6 @@ body.is-wc-nav-folded {
 }
 
 .has-woocommerce-navigation {
-	#wpadminbar,
 	#adminmenuwrap,
 	#adminmenuback {
 		display: none !important;
@@ -119,4 +122,10 @@ body.is-wc-nav-folded {
 	#woocommerce-embedded-root.is-embed-loading {
 		margin-bottom: -$adminbar-height;
 	}
+
+	&:not(.is-wp-toolbar-disabled) {
+		#wpbody-content {
+			margin-top: $adminbar-height;
+		}
+	}
 }

plugins/woocommerce-admin/client/profile-wizard/index.js

@@ -80,6 +80,7 @@ class ProfileWizard extends Component {
 		document.body.classList.add( 'woocommerce-onboarding' );
 		document.body.classList.add( 'woocommerce-profile-wizard__body' );
 		document.body.classList.add( 'woocommerce-admin-full-screen' );
+		document.body.classList.add( 'is-wp-toolbar-disabled' );
 
 		recordEvent( 'storeprofiler_step_view', {
 			step: this.getCurrentStep().key,
@@ -104,6 +105,7 @@ class ProfileWizard extends Component {
 		document.body.classList.remove( 'woocommerce-onboarding' );
 		document.body.classList.remove( 'woocommerce-profile-wizard__body' );
 		document.body.classList.remove( 'woocommerce-admin-full-screen' );
+		document.body.classList.remove( 'is-wp-toolbar-disabled' );
 	}
 
 	getSteps() {

plugins/woocommerce-admin/docs/features/navigation.md

@@ -14,6 +14,10 @@ The fastest way to get started is by creating an example plugin from WooCommerce
 
 This will create a new plugin that covers various features of the navigation and helps to register some intial items and categories within the new navigation menu.  After running the command above, you can make edits directly to the files at `docs/examples/extensions/add-navigation-items` and they will be built and copied to your `wp-content/add-navigation-items` folder on save.
 
+If you need to enable the WP Toolbar for debugging purposes in the new navigation, you can add the following filter to do so:
+
+`add_filter( 'woocommerce_navigation_wp_toolbar_disabled', '__return_false' );`
+
 ### Adding a menu category
 
 Categories in the new navigation are menu items that house child menu items.

plugins/woocommerce-admin/readme.txt

@@ -78,6 +78,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Dev: Allow highlight tooltip to use body tag as parent. #6309
 - Dev: Remove Google fonts and material icons. #6343
 - Add: Remove CES actions for adding and editing a product and editing an order #6355
+- Dev: Add filter to allow enabling the WP toolbar within the new navigation. #6371
 - Dev: Add unit tests to Navigation's Container component. #6344
 - Fix: Enqueue scripts called incorrectly in php unit tests #6358
 

plugins/woocommerce-admin/src/Features/Navigation/Screen.php

@@ -151,6 +151,15 @@ class Screen {
 	public function add_body_class( $classes ) {
 		if ( self::is_woocommerce_page() ) {
 			$classes .= ' has-woocommerce-navigation';
+
+			/**
+			 * Adds the ability to skip disabling of the WP toolbar.
+			 *
+			 * @param boolean $bool WP Toolbar disabled.
+			 */
+			if ( apply_filters( 'woocommerce_navigation_wp_toolbar_disabled', true ) ) {
+				$classes .= ' is-wp-toolbar-disabled';
+			}
 		}
 
 		return $classes;