diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js index 340efee1c5d55d..b540f6103aff04 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js @@ -20,13 +20,19 @@ const { ctrlShift, } = displayShortcutList; -const globalShortcuts = { - title: __( 'Global shortcuts' ), +const mainShortcut = { + className: 'edit-post-keyboard-shortcut-help__main-shortcuts', shortcuts: [ { keyCombination: access( 'h' ), - description: __( 'Display this help.' ), + description: __( 'Display these keyboard shortcuts.' ), }, + ], +}; + +const globalShortcuts = { + title: __( 'Global shortcuts' ), + shortcuts: [ { keyCombination: primary( 's' ), description: __( 'Save your changes.' ), @@ -148,6 +154,7 @@ const textFormattingShortcuts = { }; export default [ + mainShortcut, globalShortcuts, selectionShortcuts, blockShortcuts, diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js index a077cc6fe6fe95..33321ea53aed83 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { castArray } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies @@ -64,11 +65,13 @@ const ShortcutList = ( { shortcuts } ) => ( ); -const ShortcutSection = ( { title, shortcuts } ) => ( -
-

- { title } -

+const ShortcutSection = ( { title, shortcuts, className } ) => ( +
+ { !! title && ( +

+ { title } +

+ ) }
); diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss index e6bcc5f43137e9..cef4621547840d 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,9 +1,12 @@ .edit-post-keyboard-shortcut-help { - &__section { margin: 0 0 2rem 0; } + &__main-shortcuts .edit-post-keyboard-shortcut-help__shortcut-list { + // Push the shortcut to be flush with top modal header. + margin-top: -$panel-padding -$border-width; + } &__section-title { font-size: 0.9rem; @@ -31,7 +34,7 @@ flex: 1; margin: 0; - // IE 11 flex item fix - ensure the item does not collapse + // IE 11 flex item fix - ensure the item does not collapse. flex-basis: auto; } diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap index e08b7e6501cdcb..63bb5751a130a3 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap @@ -17,11 +17,12 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ title="Keyboard Shortcuts" > +