Fixing an unwanted page refresh when using Woo Navigation (woocommerc…

…e/woocommerce-admin#7615)

* Adding changelog

* Fixing page refresh on woo navigation

* Narrowing scope of navigation slot fills

plugins/woocommerce-admin/changelogs/fix-woonav-page-refresh

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fixing an unwanted page refresh when using Woo Navigation

plugins/woocommerce-admin/client/layout/index.js

@@ -174,6 +174,9 @@ class _Layout extends Component {
 					) }
 				</div>
 				<PluginArea scope="woocommerce-admin" />
+				{ window.wcAdminFeatures.navigation && (
+					<PluginArea scope="woocommerce-navigation" />
+				) }
 			</SlotFillProvider>
 		);
 	}

plugins/woocommerce-admin/client/layout/navigation.js

@@ -93,4 +93,5 @@ const NavigationPlugin = () => {
 
 registerPlugin( 'wc-admin-navigation', {
 	render: NavigationPlugin,
+	scope: 'woocommerce-navigation',
 } );

plugins/woocommerce-admin/docs/examples/extensions/add-navigation-items/js/index.js

@@ -3,21 +3,24 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { registerPlugin } from "@wordpress/plugins";
-import { WooNavigationItem } from "@woocommerce/navigation";
+import { registerPlugin } from '@wordpress/plugins';
+import { WooNavigationItem } from '@woocommerce/navigation';
 
 const MyPlugin = () => {
-    const handleClick = () => {
-        alert( 'Menu item clicked!' );
-    }
+	const handleClick = () => {
+		alert( 'Menu item clicked!' );
+	};
 
-    return (
-        <WooNavigationItem item="example-category-child-2">
-            <Button onClick={ handleClick }>
-                { __( 'JavaScript Example', 'plugin-domain' ) }
-            </Button>
-        </WooNavigationItem>
-    );
+	return (
+		<WooNavigationItem item="example-category-child-2">
+			<Button onClick={ handleClick }>
+				{ __( 'JavaScript Example', 'plugin-domain' ) }
+			</Button>
+		</WooNavigationItem>
+	);
 };
 
-registerPlugin('my-plugin', { render: MyPlugin });
+registerPlugin( 'my-plugin', {
+	render: MyPlugin,
+	scope: 'woocommerce-navigation',
+} );

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

@@ -121,5 +121,5 @@ const MyPlugin = () => {
     );
 };
 
-registerPlugin('my-plugin', { render: MyPlugin });
+registerPlugin( 'my-plugin', { render: MyPlugin, scope: 'woocommerce-navigation' } );
 ```