Site editor: Fix save shortcut (WordPress#66423)

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: mcsf <[email protected]>
Co-authored-by: youknowriad <[email protected]>

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

@@ -35,8 +35,7 @@ import ErrorBoundary from '../error-boundary';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
-import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
-import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
@@ -80,8 +79,7 @@ export default function Layout( { route } ) {
 	return (
 		<>
 			<CommandMenu />
-			<KeyboardShortcutsRegister />
-			<KeyboardShortcutsGlobal />
+			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }

packages/edit-site/src/components/save-keyboard-shortcut/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+const shortcutName = 'core/edit-site/save';
+
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @return {null} Returns null.
+ */
+export default function SaveKeyboardShortcut() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { hasNonPostEntityChanges, isPostSavingLocked } =
+		useSelect( editorStore );
+	const { savePost } = useDispatch( editorStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	useEffect( () => {
+		registerShortcut( {
+			name: shortcutName,
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+		return () => {
+			unregisterShortcut( shortcutName );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		if ( ! hasDirtyEntities || isSaving ) {
+			return;
+		}
+		if ( hasNonPostEntityChanges() ) {
+			setIsSaveViewOpened( true );
+		} else if ( ! isPostSavingLocked() ) {
+			savePost();
+		}
+	} );
+
+	return null;
+}