From 2479dc4b2a6d6bbf335171571aa8d0263c95d9c0 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 3 Jul 2023 10:30:02 +0300 Subject: [PATCH] [Edit Post]: Add toggle fullscreen mode and list view commands (#52184) --- .../src/hooks/commands/use-common-commands.js | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js index 0366e781799856..71233bcb6d7bd4 100644 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -10,6 +10,8 @@ import { drawerRight, blockDefault, keyboardClose, + desktop, + listView, } from '@wordpress/icons'; import { useCommand } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -23,16 +25,24 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal'; import { store as editPostStore } from '../../store'; export default function useCommonCommands() { - const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = - useDispatch( editPostStore ); + const { + openGeneralSidebar, + closeGeneralSidebar, + switchEditorMode, + setIsListViewOpened, + } = useDispatch( editPostStore ); const { openModal } = useDispatch( interfaceStore ); - const { editorMode, activeSidebar } = useSelect( - ( select ) => ( { - activeSidebar: select( interfaceStore ).getActiveComplementaryArea( - editPostStore.name - ), - editorMode: select( editPostStore ).getEditorMode(), - } ), + const { editorMode, activeSidebar, isListViewOpen } = useSelect( + ( select ) => { + const { getEditorMode, isListViewOpened } = select( editPostStore ); + return { + activeSidebar: select( + interfaceStore + ).getActiveComplementaryArea( editPostStore.name ), + editorMode: getEditorMode(), + isListViewOpen: isListViewOpened(), + }; + }, [] ); const { toggle } = useDispatch( preferencesStore ); @@ -85,6 +95,26 @@ export default function useCommonCommands() { }, } ); + useCommand( { + name: 'core/toggle-fullscreen-mode', + label: __( 'Toggle fullscreen mode' ), + icon: desktop, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'fullscreenMode' ); + close(); + }, + } ); + + useCommand( { + name: 'core/toggle-list-view', + label: __( 'Toggle list view' ), + icon: listView, + callback: ( { close } ) => { + setIsListViewOpened( ! isListViewOpen ); + close(); + }, + } ); + useCommand( { name: 'core/toggle-top-toolbar', label: __( 'Toggle top toolbar' ),