Fix: Disable 'Open save panel' when there are no changes to save, whi…

…le navigating with keyboard (WordPress#59543)

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: alexstine <[email protected]>
Co-authored-by: priethor <[email protected]>

packages/edit-site/src/components/save-panel/index.js

@@ -85,18 +85,37 @@ const _EntitiesSavedStates = ( { onClose } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
-		const { isSaveViewOpened, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
+	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const { isSaveViewOpened, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isSaveViewOpen: isSaveViewOpened(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+			// The currently selected entity to display.
+			// Typically template or template part in the site editor.
+			return {
+				isSaveViewOpen: isSaveViewOpened(),
+				canvasMode: getCanvasMode(),
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+			};
+		},
+		[]
+	);
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
 
@@ -114,7 +133,8 @@ export default function SavePanel() {
 			</Modal>
 		) : null;
 	}
-
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
 			className={ classnames( 'edit-site-layout__actions', {
@@ -131,6 +151,8 @@ export default function SavePanel() {
 						className="edit-site-editor__toggle-save-panel-button"
 						onClick={ () => setIsSaveViewOpened( true ) }
 						aria-expanded={ false }
+						disabled={ disabled }
+						__experimentalIsFocusable
 					>
 						{ __( 'Open save panel' ) }
 					</Button>