Navigation: Add a new ManageMenusButton component (#45782)

* Navigation: Add a new ManageMenusButton component * add missing file * refactor the disabled state to a variable * remove memo
WordPress · Nov 15, 2022 · 370c7c0 · 370c7c0
1 parent 2baf211
commit 370c7c0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -13,7 +13,6 @@ import {
 	Platform,
 	useMemo,
 } from '@wordpress/element';
-import { addQueryArgs } from '@wordpress/url';
 import {
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
@@ -69,6 +68,7 @@ import useConvertClassicToBlockMenu, {
 import useCreateNavigationMenu from './use-create-navigation-menu';
 import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
+import ManageMenusButton from './manage-menus-button';
 
 function Navigation( {
 	attributes,
@@ -655,19 +655,6 @@ function Navigation( {
 		</InspectorControls>
 	);
 
-	const ManageMenusButton = ( { buttonClassName = '' } ) => (
-		<Button
-			variant="link"
-			disabled={ ! hasManagePermissions || ! hasResolvedNavigationMenus }
-			className={ buttonClassName }
-			href={ addQueryArgs( 'edit.php', {
-				post_type: 'wp_navigation',
-			} ) }
-		>
-			{ __( 'Manage menus' ) }
-		</Button>
-	);
-
 	// If the block has inner blocks, but no menu id, then these blocks are either:
 	// - inserted via a pattern.
 	// - inserted directly via Code View (or otherwise).
@@ -703,6 +690,9 @@ function Navigation( {
 		/>
 	);
 
+	const isManageMenusButtonDisabled =
+		! hasManagePermissions || ! hasResolvedNavigationMenus;
+
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
 			<TagName { ...blockProps }>
@@ -738,7 +728,9 @@ function Navigation( {
 								<WrappedNavigationMenuSelector
 									currentMenuId={ ref }
 								/>
-								<ManageMenusButton />
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
 							</>
 						) }
 					</PanelBody>
@@ -800,7 +792,9 @@ function Navigation( {
 								<WrappedNavigationMenuSelector
 									currentMenuId={ null }
 								/>
-								<ManageMenusButton />
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
 							</>
 						) }
 					</PanelBody>
@@ -911,7 +905,9 @@ function Navigation( {
 								<WrappedNavigationMenuSelector
 									currentMenuId={ ref }
 								/>
-								<ManageMenusButton />
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
 							</>
 						) }
 					</PanelBody>
@@ -941,7 +937,10 @@ function Navigation( {
 								/>
 							) }
 						{ isOffCanvasNavigationEditorEnabled && (
-							<ManageMenusButton className="wp-block-navigation-manage-menus-button" />
+							<ManageMenusButton
+								disabled={ isManageMenusButtonDisabled }
+								className="wp-block-navigation-manage-menus-button"
+							/>
 						) }
 					</InspectorControls>
 				) }

diff --git a/packages/block-library/src/navigation/edit/manage-menus-button.js b/packages/block-library/src/navigation/edit/manage-menus-button.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const ManageMenusButton = ( { className = '', disabled } ) => (
+	<Button
+		variant="link"
+		disabled={ disabled }
+		className={ className }
+		href={ addQueryArgs( 'edit.php', {
+			post_type: 'wp_navigation',
+		} ) }
+	>
+		{ __( 'Manage menus' ) }
+	</Button>
+);
+
+export default ManageMenusButton;