Save panel only visible when there are unsaved changes

packages/edit-site/src/components/sidebar/index.js

@@ -2,7 +2,9 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -27,6 +29,16 @@ function SidebarScreens() {
 }
 
 function Sidebar() {
+	const { isDirty } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isDirty: dirtyEntityRecords.length > 0,
+		};
+	}, [] );
+
 	return (
 		<>
 			<NavigatorProvider
@@ -35,9 +47,11 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			<div className="edit-site-sidebar__footer">
-				<SaveButton />
-			</div>
+			{ isDirty && (
+				<div className="edit-site-sidebar__footer">
+					<SaveButton />
+				</div>
+			) }
 		</>
 	);
 }