diff --git a/plugins/woocommerce-admin/client/header/style.scss b/plugins/woocommerce-admin/client/header/style.scss index ecce63d29b9..c40832ed167 100644 --- a/plugins/woocommerce-admin/client/header/style.scss +++ b/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%; } diff --git a/plugins/woocommerce-admin/client/layout/style.scss b/plugins/woocommerce-admin/client/layout/style.scss index 382a3634ab1..4e4549fd01d 100644 --- a/plugins/woocommerce-admin/client/layout/style.scss +++ b/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; diff --git a/plugins/woocommerce-admin/client/navigation/style.scss b/plugins/woocommerce-admin/client/navigation/style.scss index 51c86705e97..3719f39a009 100644 --- a/plugins/woocommerce-admin/client/navigation/style.scss +++ b/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; + } + } } diff --git a/plugins/woocommerce-admin/client/profile-wizard/index.js b/plugins/woocommerce-admin/client/profile-wizard/index.js index 255e09c4fc7..d4fa19852c5 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/index.js +++ b/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() { diff --git a/plugins/woocommerce-admin/docs/features/navigation.md b/plugins/woocommerce-admin/docs/features/navigation.md index 8714f28cc70..a307ca23d85 100644 --- a/plugins/woocommerce-admin/docs/features/navigation.md +++ b/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. diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 2a148d0e72f..f3a66fd8aca 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/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 diff --git a/plugins/woocommerce-admin/src/Features/Navigation/Screen.php b/plugins/woocommerce-admin/src/Features/Navigation/Screen.php index 746b806fae8..7f54d110bd4 100644 --- a/plugins/woocommerce-admin/src/Features/Navigation/Screen.php +++ b/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;