Skip to content

Commit

Permalink
Improve common commands with more context and feedback (#58148)
Browse files Browse the repository at this point in the history 
* Tweak List View

* Tweak post commands

* Tweak site commands

* Add undo action to distraction free notices
  • Loading branch information
@richtabor
richtabor committed Jan 24, 2024
1 parent 61629a7 commit 7f3b8c5
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 10 deletions.
84 changes: 77 additions & 7 deletions packages/edit-post/src/hooks/commands/use-common-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
drawerRight,
blockDefault,
keyboard,
desktop,
fullscreen,
listView,
external,
formatListBullets,
Expand Down Expand Up @@ -39,13 +39,17 @@ export default function useCommonCommands() {
editorMode,
activeSidebar,
isListViewOpen,
isFullscreen,
isPublishSidebarEnabled,
showBlockBreadcrumbs,
isDistractionFree,
isTopToolbar,
isFocusMode,
} = useSelect( ( select ) => {
const { get } = select( preferencesStore );
const { getEditorMode } = select( editPostStore );
const { isListViewOpened } = select( editorStore );

return {
activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
editPostStore.name
Expand All @@ -56,6 +60,9 @@ export default function useCommonCommands() {
select( editorStore ).isPublishSidebarEnabled(),
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
isDistractionFree: get( 'core', 'distractionFree' ),
isFocusMode: get( 'core', 'focusMode' ),
isTopToolbar: get( 'core', 'fixedToolbar' ),
isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
};
}, [] );
const { toggle } = useDispatch( preferencesStore );
Expand Down Expand Up @@ -94,7 +101,9 @@ export default function useCommonCommands() {

useCommand( {
name: 'core/toggle-distraction-free',
label: __( 'Toggle distraction free' ),
label: isDistractionFree
? __( 'Exit Distraction Free' )
: __( 'Enter Distraction Free ' ),
callback: ( { close } ) => {
toggleDistractionFree();
close();
Expand All @@ -103,30 +112,71 @@ export default function useCommonCommands() {

useCommand( {
name: 'core/toggle-spotlight-mode',
label: __( 'Toggle spotlight mode' ),
label: __( 'Toggle spotlight' ),
callback: ( { close } ) => {
toggle( 'core', 'focusMode' );
close();
createInfoNotice(
isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
{
id: 'core/edit-post/toggle-spotlight-mode/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
toggle( 'core', 'focusMode' );
},
},
],
}
);
},
} );

useCommand( {
name: 'core/toggle-fullscreen-mode',
label: __( 'Toggle fullscreen mode' ),
icon: desktop,
label: isFullscreen
? __( 'Exit fullscreen' )
: __( 'Enter fullscreen' ),
icon: fullscreen,
callback: ( { close } ) => {
toggle( 'core/edit-post', 'fullscreenMode' );
close();
createInfoNotice(
isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
{
id: 'core/edit-post/toggle-fullscreen-mode/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
toggle( 'core/edit-post', 'fullscreenMode' );
},
},
],
}
);
},
} );

useCommand( {
name: 'core/toggle-list-view',
label: __( 'Toggle list view' ),
label: isListViewOpen
? __( 'Close List View' )
: __( 'Open List View' ),
icon: listView,
callback: ( { close } ) => {
setIsListViewOpened( ! isListViewOpen );
close();
createInfoNotice(
isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
{
id: 'core/edit-post/toggle-list-view/notice',
type: 'snackbar',
}
);
},
} );

Expand All @@ -139,12 +189,32 @@ export default function useCommonCommands() {
toggleDistractionFree();
}
close();
createInfoNotice(
isTopToolbar
? __( 'Top toolbar off.' )
: __( 'Top toolbar on.' ),
{
id: 'core/edit-post/toggle-top-toolbar/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
toggle( 'core', 'fixedToolbar' );
},
},
],
}
);
},
} );

useCommand( {
name: 'core/toggle-code-editor',
label: __( 'Toggle code editor' ),
label:
editorMode === 'visual'
? __( 'Open code editor' )
: __( 'Exit code editor' ),
icon: code,
callback: ( { close } ) => {
switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-post/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,16 @@ export const toggleDistractionFree =
{
id: 'core/edit-post/distraction-free-mode/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
registry
.dispatch( preferencesStore )
.toggle( 'core', 'distractionFree' );
},
},
],
}
);
} );
Expand Down
53 changes: 50 additions & 3 deletions packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,8 @@ function useEditUICommands() {
showBlockBreadcrumbs,
isListViewOpen,
isDistractionFree,
isTopToolbar,
isFocusMode,
} = useSelect( ( select ) => {
const { get } = select( preferencesStore );
const { getEditorMode } = select( editSiteStore );
Expand All @@ -229,6 +231,8 @@ function useEditUICommands() {
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
isListViewOpen: isListViewOpened(),
isDistractionFree: get( 'core', 'distractionFree' ),
isFocusMode: get( 'core', 'focusMode' ),
isTopToolbar: get( 'core', 'fixedToolbar' ),
};
}, [] );
const { openModal } = useDispatch( interfaceStore );
Expand Down Expand Up @@ -271,16 +275,33 @@ function useEditUICommands() {

commands.push( {
name: 'core/toggle-spotlight-mode',
label: __( 'Toggle spotlight mode' ),
label: __( 'Toggle spotlight' ),
callback: ( { close } ) => {
toggle( 'core', 'focusMode' );
close();
createInfoNotice(
isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
{
id: 'core/edit-site/toggle-spotlight-mode/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
toggle( 'core', 'focusMode' );
},
},
],
}
);
},
} );

commands.push( {
name: 'core/toggle-distraction-free',
label: __( 'Toggle distraction free' ),
label: isDistractionFree
? __( 'Exit Distraction Free' )
: __( 'Enter Distraction Free ' ),
callback: ( { close } ) => {
toggleDistractionFree();
close();
Expand All @@ -296,6 +317,23 @@ function useEditUICommands() {
toggleDistractionFree();
}
close();
createInfoNotice(
isTopToolbar
? __( 'Top toolbar off.' )
: __( 'Top toolbar on.' ),
{
id: 'core/edit-site/toggle-top-toolbar/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
toggle( 'core', 'fixedToolbar' );
},
},
],
}
);
},
} );

Expand Down Expand Up @@ -350,11 +388,20 @@ function useEditUICommands() {

commands.push( {
name: 'core/toggle-list-view',
label: __( 'Toggle list view' ),
label: isListViewOpen
? __( 'Close List View' )
: __( 'Open List View' ),
icon: listView,
callback: ( { close } ) => {
setIsListViewOpened( ! isListViewOpen );
close();
createInfoNotice(
isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
{
id: 'core/edit-site/toggle-list-view/notice',
type: 'snackbar',
}
);
},
} );

Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,6 +582,16 @@ export const toggleDistractionFree =
{
id: 'core/edit-site/distraction-free-mode/notice',
type: 'snackbar',
actions: [
{
label: __( 'Undo' ),
onClick: () => {
registry
.dispatch( preferencesStore )
.toggle( 'core', 'distractionFree' );
},
},
],
}
);
} );
Expand Down

0 comments on commit 7f3b8c5

Please sign in to comment.