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
WordPress · Jun 23, 2023 · 3b249d7 · 3b249d7
1 parent a844d20
commit 3b249d7
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 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
@@ -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
@@ -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/.../src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/.../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
@@ -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
@@ -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 {