Navigation Editor: Indicate unsaved changes (#31119)

WordPress · May 5, 2021 · 42c5fcd · 42c5fcd
1 parent d3fabc0
commit 42c5fcd
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/packages/edit-navigation/src/components/header/save-button.js b/packages/edit-navigation/src/components/header/save-button.js
@@ -1,26 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editNavigationStore } from '../../store';
 
 export default function SaveButton( { navigationPost } ) {
+	const { isDirty } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+
+		return {
+			isDirty: dirtyEntityRecords.length > 0,
+		};
+	}, [] );
+
 	const { saveNavigationPost } = useDispatch( editNavigationStore );
 
+	const disabled = ! isDirty || ! navigationPost;
+
 	return (
 		<Button
 			className="edit-navigation-toolbar__save-button"
 			isPrimary
 			onClick={ () => {
 				saveNavigationPost( navigationPost );
 			} }
-			disabled={ ! navigationPost }
+			disabled={ disabled }
 		>
 			{ __( 'Save' ) }
 		</Button>