Editor: Unify Mode Switcher component between post and site editor (#…

…59100) Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Feb 15, 2024 · 0e899f7 · 0e899f7
1 parent eff9877
commit 0e899f7
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 147 deletions.
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
@@ -9,14 +9,17 @@ import {
 	PinnedItems,
 } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import ModeSwitcher from '../mode-switcher';
 import PreferencesMenuItem from '../preferences-menu-item';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
+import { unlock } from '../../../lock-unlock';
+
+const { ModeSwitcher } = unlock( editorPrivateApis );
 
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );

diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -8,7 +8,6 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
@@ -18,18 +17,9 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
-	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } =
-			select( editorStore ).getEditorSettings();
-		return ! richEditingEnabled || ! codeEditingEnabled;
-	}, [] );
-	const {
-		switchEditorMode,
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		toggleFeature,
-	} = useDispatch( editPostStore );
+	const { isEditorSidebarOpened } = useSelect( editPostStore );
+	const { openGeneralSidebar, closeGeneralSidebar, toggleFeature } =
+		useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const {
@@ -38,7 +28,6 @@ function KeyboardShortcuts() {
 		getBlockAttributes,
 		getBlockSelectionStart,
 	} = useSelect( blockEditorStore );
-	const { toggleDistractionFree } = useDispatch( editorStore );
 
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();
@@ -69,26 +58,6 @@ function KeyboardShortcuts() {
 	};
 
 	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-post/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/toggle-fullscreen',
 			category: 'global',
@@ -178,26 +147,10 @@ function KeyboardShortcuts() {
 		} );
 	}, [] );
 
-	useShortcut(
-		'core/edit-post/toggle-mode',
-		() => {
-			switchEditorMode(
-				getEditorMode() === 'visual' ? 'text' : 'visual'
-			);
-		},
-		{
-			isDisabled: isModeToggleDisabled,
-		}
-	);
-
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
-	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		toggleDistractionFree();
-	} );
-
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.

diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
@@ -32,7 +32,7 @@ export default function CodeEditor() {
 		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
 
 		return {
-			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
 			content: editedRecord?.content,
 			blocks: editedRecord?.blocks,
 			type: _type,

diff --git a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js b/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -16,7 +16,10 @@ import {
 	store as preferencesStore,
 } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -33,7 +36,9 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
-import ModeSwitcher from '../mode-switcher';
+import { unlock } from '../../../lock-unlock';
+
+const { ModeSwitcher } = unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );

diff --git a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
@@ -6,7 +6,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -16,16 +15,13 @@ import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcutsEditMode() {
-	const { getEditorMode } = useSelect( editorStore );
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea(
 				editSiteStore.name
 			) === SIDEBAR_BLOCK,
 		[]
 	);
-	const { switchEditorMode, toggleDistractionFree } =
-		useDispatch( editorStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -72,10 +68,6 @@ function KeyboardShortcutsEditMode() {
 		}
 	} );
 
-	useShortcut( 'core/edit-site/toggle-mode', () => {
-		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
-	} );
-
 	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);
@@ -90,10 +82,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	} );
 
-	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
-		toggleDistractionFree();
-	} );
-
 	return null;
 }
 

diff --git a/packages/edit-site/src/components/keyboard-shortcuts/register.js b/packages/edit-site/src/components/keyboard-shortcuts/register.js
@@ -75,15 +75,6 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
 
 		registerShortcut( {
 			name: 'core/edit-site/transform-heading-to-paragraph',
@@ -106,16 +97,6 @@ function KeyboardShortcutsRegister() {
 				},
 			} );
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
 	}, [ registerShortcut ] );
 
 	return null;

diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js
@@ -10,10 +10,41 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '../../store';
 
 export default function EditorKeyboardShortcuts() {
-	const { redo, undo, savePost, setIsListViewOpened } =
-		useDispatch( editorStore );
-	const { isEditedPostDirty, isPostSavingLocked, isListViewOpened } =
-		useSelect( editorStore );
+	const isModeToggleDisabled = useSelect( ( select ) => {
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
+		return ! richEditingEnabled || ! codeEditingEnabled;
+	}, [] );
+	const {
+		redo,
+		undo,
+		savePost,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const {
+		isEditedPostDirty,
+		isPostSavingLocked,
+		isListViewOpened,
+		getEditorMode,
+	} = useSelect( editorStore );
+
+	useShortcut(
+		'core/editor/toggle-mode',
+		() => {
+			switchEditorMode(
+				getEditorMode() === 'visual' ? 'text' : 'visual'
+			);
+		},
+		{
+			isDisabled: isModeToggleDisabled,
+		}
+	);
+
+	useShortcut( 'core/editor/toggle-distraction-free', () => {
+		toggleDistractionFree();
+	} );
 
 	useShortcut( 'core/editor/undo', ( event ) => {
 		undo();

diff --git a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
@@ -12,6 +12,16 @@ function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/editor/save',
 			category: 'global',
@@ -63,6 +73,16 @@ function EditorKeyboardShortcutsRegister() {
 				character: 'o',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

diff --git a/.../components/header/mode-switcher/index.js → ...tor/src/components/mode-switcher/index.js b/.../components/header/mode-switcher/index.js → ...tor/src/components/mode-switcher/index.js
@@ -5,7 +5,11 @@ import { __ } from '@wordpress/i18n';
 import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
 
 /**
  * Set of available mode options.
@@ -29,7 +33,7 @@ function ModeSwitcher() {
 			( select ) => ( {
 				shortcut: select(
 					keyboardShortcutsStore
-				).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
+				).getShortcutRepresentation( 'core/editor/toggle-mode' ),
 				isRichEditingEnabled:
 					select( editorStore ).getEditorSettings()
 						.richEditingEnabled,

diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
@@ -10,6 +10,7 @@ import useBlockEditorSettings from './components/provider/use-block-editor-setti
 import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
+import ModeSwitcher from './components/mode-switcher';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
 import PostViewLink from './components/post-view-link';
@@ -25,6 +26,7 @@ lock( privateApis, {
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,
+	ModeSwitcher,
 	PluginPostExcerpt,
 	PostPanelRow,
 	PostViewLink,