From 3f9d75bcd1cd37eaf076534d271572c95e4b30d9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Feb 2024 18:53:58 +0100 Subject: [PATCH] Editor: Unify Mode Switcher component between post and site editor --- .../src/components/header/more-menu/index.js | 5 +- .../components/keyboard-shortcuts/index.js | 53 +----------------- .../src/components/code-editor/index.js | 2 +- .../header-edit-mode/mode-switcher/index.js | 56 ------------------- .../header-edit-mode/more-menu/index.js | 9 ++- .../keyboard-shortcuts/edit-mode.js | 12 ---- .../components/keyboard-shortcuts/register.js | 19 ------- .../global-keyboard-shortcuts/index.js | 39 +++++++++++-- .../register-shortcuts.js | 20 +++++++ .../src/components}/mode-switcher/index.js | 8 ++- packages/editor/src/private-apis.js | 2 + 11 files changed, 78 insertions(+), 147 deletions(-) delete mode 100644 packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js rename packages/{edit-post/src/components/header => editor/src/components}/mode-switcher/index.js (92%) diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index 3ac1178b8815a..9ed41def2d80f 100644 --- 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 index 27d6ea57e4d67..0ca5c5a3a8934 100644 --- 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 index a02ab71810628..8c27a48b01cec 100644 --- 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 deleted file mode 100644 index 261bcb852b15f..0000000000000 --- a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * WordPress dependencies - */ -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'; - -/** - * Set of available mode options. - * - * @type {Array} - */ -const MODES = [ - { - value: 'visual', - label: __( 'Visual editor' ), - }, - { - value: 'text', - label: __( 'Code editor' ), - }, -]; - -function ModeSwitcher() { - const { shortcut, mode } = useSelect( - ( select ) => ( { - shortcut: select( - keyboardShortcutsStore - ).getShortcutRepresentation( 'core/edit-site/toggle-mode' ), - mode: select( editorStore ).getEditorMode(), - } ), - [] - ); - const { switchEditorMode } = useDispatch( editorStore ); - - const choices = MODES.map( ( choice ) => { - if ( choice.value !== mode ) { - return { ...choice, shortcut }; - } - return choice; - } ); - - return ( - - - - ); -} - -export default ModeSwitcher; 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 index 8cafbb519bb1f..ef8e7ee0c40f8 100644 --- 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 index 436a7218f5543..b3675c757ea01 100644 --- 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,7 +15,6 @@ 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( @@ -24,8 +22,6 @@ function KeyboardShortcutsEditMode() { ) === 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 index ef32cd920b671..41a66c0b58f1c 100644 --- 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 index a62f542ff9974..fe48d220705ce 100644 --- 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 index b1ed83bd33e4e..a4ff966212795 100644 --- 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 ; diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/editor/src/components/mode-switcher/index.js similarity index 92% rename from packages/edit-post/src/components/header/mode-switcher/index.js rename to packages/editor/src/components/mode-switcher/index.js index 5336245ae2f3a..439fbd7acc21f 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/editor/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 index 16c27b1b57c19..061393acab1eb 100644 --- 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,