Site Editor: Add keyboard shortcut help modal (#37650)

* Site Editor: Add keyboard shortcut help modal * Text formatting shortcuts * Don't use plugin to render more menu tools group * Remove fragment
WordPress · Feb 16, 2022 · df653a3 · df653a3
1 parent b1073cf
commit df653a3
Show file tree

Hide file tree

Showing 13 changed files with 459 additions and 97 deletions.
diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js
@@ -2,15 +2,26 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { moreVertical } from '@wordpress/icons';
-import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { useReducer } from '@wordpress/element';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { displayShortcut } from '@wordpress/keycodes';
+import { external, moreVertical } from '@wordpress/icons';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { ActionItem } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
+import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
 import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
+import SiteExport from './site-export';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-more-menu__content',
@@ -20,46 +31,94 @@ const TOGGLE_PROPS = {
 	tooltipPosition: 'bottom',
 };
 
-const MoreMenu = () => (
-	<DropdownMenu
-		className="edit-site-more-menu"
-		icon={ moreVertical }
-		label={ __( 'More tools & options' ) }
-		popoverProps={ POPOVER_PROPS }
-		toggleProps={ TOGGLE_PROPS }
-	>
-		{ ( { onClose } ) => (
-			<>
-				<MenuGroup label={ _x( 'View', 'noun' ) }>
-					<FeatureToggle
-						feature="fixedToolbar"
-						label={ __( 'Top toolbar' ) }
-						info={ __(
-							'Access all block and document tools in a single place'
-						) }
-						messageActivated={ __( 'Top toolbar activated' ) }
-						messageDeactivated={ __( 'Top toolbar deactivated' ) }
-					/>
-					<FeatureToggle
-						feature="focusMode"
-						label={ __( 'Spotlight mode' ) }
-						info={ __( 'Focus on one block at a time' ) }
-						messageActivated={ __( 'Spotlight mode activated' ) }
-						messageDeactivated={ __(
-							'Spotlight mode deactivated'
-						) }
-					/>
-					<ActionItem.Slot
-						name="core/edit-site/plugin-more-menu"
-						label={ __( 'Plugins' ) }
-						as={ MenuGroup }
-						fillProps={ { onClick: onClose } }
-					/>
-				</MenuGroup>
-				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-			</>
-		) }
-	</DropdownMenu>
-);
+export default function MoreMenu() {
+	const [ isModalActive, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
 
-export default MoreMenu;
+	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
+
+	return (
+		<>
+			<DropdownMenu
+				className="edit-site-more-menu"
+				icon={ moreVertical }
+				label={ __( 'More tools & options' ) }
+				popoverProps={ POPOVER_PROPS }
+				toggleProps={ TOGGLE_PROPS }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup label={ _x( 'View', 'noun' ) }>
+							<FeatureToggle
+								feature="fixedToolbar"
+								label={ __( 'Top toolbar' ) }
+								info={ __(
+									'Access all block and document tools in a single place'
+								) }
+								messageActivated={ __(
+									'Top toolbar activated'
+								) }
+								messageDeactivated={ __(
+									'Top toolbar deactivated'
+								) }
+							/>
+							<FeatureToggle
+								feature="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated'
+								) }
+							/>
+							<ActionItem.Slot
+								name="core/edit-site/plugin-more-menu"
+								label={ __( 'Plugins' ) }
+								as={ MenuGroup }
+								fillProps={ { onClick: onClose } }
+							/>
+						</MenuGroup>
+						<MenuGroup label={ __( 'Tools' ) }>
+							<SiteExport />
+							<MenuItem
+								onClick={ toggleModal }
+								shortcut={ displayShortcut.access( 'h' ) }
+							>
+								{ __( 'Keyboard shortcuts' ) }
+							</MenuItem>
+							<WelcomeGuideMenuItem />
+							<MenuItem
+								icon={ external }
+								role="menuitem"
+								href={ __(
+									'https://wordpress.org/support/article/site-editor/'
+								) }
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								{ __( 'Help' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+							<ToolsMoreMenuGroup.Slot
+								fillProps={ { onClose } }
+							/>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+			<KeyboardShortcutHelpModal
+				isModalActive={ isModalActive }
+				toggleModal={ toggleModal }
+			/>
+		</>
+	);
+}
diff --git a/...ages/edit-site/src/plugins/site-export.js → ...omponents/header/more-menu/site-export.js b/...ages/edit-site/src/plugins/site-export.js → ...omponents/header/more-menu/site-export.js
diff --git a/...te/src/plugins/welcome-guide-menu-item.js → ...ader/more-menu/welcome-guide-menu-item.js b/...te/src/plugins/welcome-guide-menu-item.js → ...ader/more-menu/welcome-guide-menu-item.js
@@ -8,7 +8,7 @@ import { MenuItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../store';
+import { store as editSiteStore } from '../../../store';
 
 export default function WelcomeGuideMenuItem() {
 	const { toggleFeature } = useDispatch( editSiteStore );

diff --git a/packages/edit-site/src/components/header/tools-more-menu-group/index.js b/packages/edit-site/src/components/header/tools-more-menu-group/index.js
@@ -6,20 +6,15 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createSlotFill, MenuGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { createSlotFill } from '@wordpress/components';
 
 const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
 	'EditSiteToolsMoreMenuGroup'
 );
 
 ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
 	<Slot fillProps={ fillProps }>
-		{ ( fills ) =>
-			! isEmpty( fills ) && (
-				<MenuGroup label={ __( 'Tools' ) }>{ fills }</MenuGroup>
-			)
-		}
+		{ ( fills ) => ! isEmpty( fills ) && fills }
 	</Slot>
 );
 

diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const textFormattingShortcuts = [
+	{
+		keyCombination: { modifier: 'primary', character: 'b' },
+		description: __( 'Make the selected text bold.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'i' },
+		description: __( 'Make the selected text italic.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'k' },
+		description: __( 'Convert the selected text into a link.' ),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'k' },
+		description: __( 'Remove a link.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'u' },
+		description: __( 'Underline the selected text.' ),
+	},
+];
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from './shortcut';
+
+export default function DynamicShortcut( { name } ) {
+	const { keyCombination, description, aliases } = useSelect(
+		( select ) => {
+			const {
+				getShortcutKeyCombination,
+				getShortcutDescription,
+				getShortcutAliases,
+			} = select( keyboardShortcutsStore );
+
+			return {
+				keyCombination: getShortcutKeyCombination( name ),
+				aliases: getShortcutAliases( name ),
+				description: getShortcutDescription( name ),
+			};
+		},
+		[ name ]
+	);
+
+	if ( ! keyCombination ) {
+		return null;
+	}
+
+	return (
+		<Shortcut
+			keyCombination={ keyCombination }
+			description={ description }
+			aliases={ aliases }
+		/>
+	);
+}