Navigation: Add the draft status to the navigation title (WordPress#5…

…1967)

* Navigation: Add the draft status to the navigation title

* Move the buildNavigationLabel function to the default export

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js

@@ -17,6 +17,7 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
 
 export const postType = `wp_navigation`;
 
@@ -90,7 +91,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
-				title={ decodeEntities( menuTitle ) }
+				title={ buildNavigationLabel(
+					navigationMenu?.title,
+					navigationMenu?.id,
+					navigationMenu?.status
+				) }
 				description={ __( 'This Navigation Menu is empty.' ) }
 			/>
 		);

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -28,7 +29,11 @@ export default function SingleNavigationMenu( {
 					onDuplicate={ handleDuplicate }
 				/>
 			}
-			title={ decodeEntities( menuTitle ) }
+			title={ buildNavigationLabel(
+				navigationMenu?.title,
+				navigationMenu?.id,
+				navigationMenu?.status
+			) }
 			description={ __(
 				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
 			) }

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+export default function buildNavigationLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
+		/* translators: %s is the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
+}