From 3b249d7216bc707bd2815a8eabd5a6db6b3d3eb5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 23 Jun 2023 11:15:46 +0100
Subject: [PATCH] Fix Rename in Navigation on Browse Mode (#51791)

* Ensure edits are passed to save

* Ensure empty strings are invalid

* Force break of long strings in menu titles
---
 .../index.js                                        |  2 +-
 .../rename-modal.js                                 | 13 ++++++++++++-
 .../use-navigation-menu-handlers.js                 |  6 +++++-
 .../index.js                                        |  4 +++-
 .../components/sidebar-navigation-screen/style.scss |  2 ++
 5 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
index 6fae7b09261981..6bce0f356f7400 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -60,7 +60,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		useNavigationMenuHandlers();
 
 	const _handleDelete = () => handleDelete( navigationMenu );
-	const _handleSave = () => handleSave( navigationMenu );
+	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
 	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
 	if ( isLoading ) {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
index 99f674ba8bee3a..668179755ec35a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
@@ -11,9 +11,16 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
 export default function RenameModal( { menuTitle, onClose, onSave } ) {
 	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
 
+	const titleHasChanged = editedMenuTitle !== menuTitle;
+
+	const isEditedMenuTitleValid =
+		titleHasChanged && notEmptyString( editedMenuTitle );
+
 	return (
 		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
 			<form className="sidebar-navigation__rename-modal-form">
@@ -30,11 +37,15 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						</Button>
 
 						<Button
-							disabled={ editedMenuTitle === menuTitle }
+							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"
 							onClick={ ( e ) => {
 								e.preventDefault();
+
+								if ( ! isEditedMenuTitleValid ) {
+									return;
+								}
 								onSave( { title: editedMenuTitle } );
 
 								// Immediate close avoids ability to hit save multiple times.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
index 1ddf1c8d86c6ec..81d4cad95e309f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -71,7 +71,11 @@ function useSaveNavigationMenu() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const handleSave = async ( navigationMenu, edits = {} ) => {
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
 		const postId = navigationMenu?.id;
 		// Prepare for revert in case of error.
 		const originalRecord = getEditedEntityRecord(
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index 099612151f7747..57ebfd5a2e9533 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -99,7 +99,9 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				navigationMenu={ firstNavigationMenu }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
-				handleSave={ () => handleSave( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
 			/>
 		);
 	}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 417dc7d6b1f059..57473b58fac480 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -65,6 +65,8 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
+	overflow: hidden;
+	overflow-wrap: break-word;
 }
 
 .edit-site-sidebar-navigation-screen__actions {