Add more menu to customize widgets

packages/base-styles/_z-index.scss

@@ -141,6 +141,7 @@ $z-layers: (
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,
 	".components-popover.block-editor-block-navigation__popover": 99998,
+	".components-popover.customize-widgets-more-menu__content": 99998,
 	".components-popover.edit-post-more-menu__content": 99998,
 	".components-popover.edit-site-more-menu__content": 99998,
 	".components-popover.edit-widgets-more-menu__content": 99998,

packages/customize-widgets/package.json

@@ -39,6 +39,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
+		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/widgets": "file:../widgets",

packages/customize-widgets/src/components/header/index.js

@@ -1,27 +1,41 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { createPortal } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { NavigableToolbar } from '@wordpress/block-editor';
 import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Inserter from '../inserter';
+import MoreMenu from '../more-menu';
 
-function Header( { inserter, isInserterOpened, setIsInserterOpened } ) {
+function Header( {
+	inserter,
+	isInserterOpened,
+	setIsInserterOpened,
+	isFixedToolbarActive,
+} ) {
 	return (
 		<>
-			<div className="customize-widgets-header">
+			<div
+				className={ classnames( 'customize-widgets-header', {
+					'is-fixed-toolbar-active': isFixedToolbarActive,
+				} ) }
+			>
 				<NavigableToolbar
 					className="customize-widgets-header-toolbar"
 					aria-label={ __( 'Document tools' ) }
 				>
-					<ToolbarItem
-						as={ Button }
+					<ToolbarButton
 						className="customize-widgets-header-toolbar__inserter-toggle"
 						isPressed={ isInserterOpened }
 						isPrimary
@@ -34,6 +48,7 @@ function Header( { inserter, isInserterOpened, setIsInserterOpened } ) {
 							setIsInserterOpened( ( isOpen ) => ! isOpen );
 						} }
 					/>
+					<MoreMenu />
 				</NavigableToolbar>
 			</div>
 

packages/customize-widgets/src/components/header/style.scss

@@ -1,13 +1,20 @@
 .customize-widgets-header {
 	@include break-medium() {
-		// The mobile fixed block toolbar should be snug under the header.
+		// Make space for the floating toolbar.
 		margin-bottom: $grid-unit-60 + $default-block-margin;
 	}
 
+	&.is-fixed-toolbar-active {
+		// Top toolbar mode toolbar should be right under the header.
+		margin-bottom: 0;
+	}
+
+	display: flex;
+	justify-content: flex-end;
+
 	// Offset the customizer's sidebar padding.
-	// Provide enough bottom margin to ensure the floating block toolbar isn't overlapped.
+	// Zero bottom margin so that the fixed toolbar is right under the header.
 	margin: -15px ( -$grid-unit-15 ) ( 0 ) ( -$grid-unit-15 );
-	padding: $grid-unit-15;
 
 	// Match the customizer grey background.
 	background: #f0f0f1;
@@ -26,7 +33,7 @@
 		padding: 0;
 		min-width: $grid-unit-30;
 		height: $grid-unit-30;
-		margin-left: auto;
+		margin: $grid-unit-15 0 $grid-unit-15;
 
 		&::before {
 			content: none;

packages/customize-widgets/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.' ),
+	},
+];

packages/customize-widgets/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from './shortcut';
+
+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 ),
+		};
+	} );
+
+	if ( ! keyCombination ) {
+		return null;
+	}
+
+	return (
+		<Shortcut
+			keyCombination={ keyCombination }
+			description={ description }
+			aliases={ aliases }
+		/>
+	);
+}
+
+export default DynamicShortcut;

packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js

@@ -0,0 +1,153 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isString } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { textFormattingShortcuts } from './config';
+import Shortcut from './shortcut';
+import DynamicShortcut from './dynamic-shortcut';
+
+const ShortcutList = ( { shortcuts } ) => (
+	/*
+	 * Disable reason: The `list` ARIA role is redundant but
+	 * Safari+VoiceOver won't announce the list otherwise.
+	 */
+	/* eslint-disable jsx-a11y/no-redundant-roles */
+	<ul
+		className="customize-widgets-keyboard-shortcut-help-modal__shortcut-list"
+		role="list"
+	>
+		{ shortcuts.map( ( shortcut, index ) => (
+			<li
+				className="customize-widgets-keyboard-shortcut-help-modal__shortcut"
+				key={ index }
+			>
+				{ isString( shortcut ) ? (
+					<DynamicShortcut name={ shortcut } />
+				) : (
+					<Shortcut { ...shortcut } />
+				) }
+			</li>
+		) ) }
+	</ul>
+	/* eslint-enable jsx-a11y/no-redundant-roles */
+);
+
+const ShortcutSection = ( { title, shortcuts, className } ) => (
+	<section
+		className={ classnames(
+			'customize-widgets-keyboard-shortcut-help-modal__section',
+			className
+		) }
+	>
+		{ !! title && (
+			<h2 className="customize-widgets-keyboard-shortcut-help-modal__section-title">
+				{ title }
+			</h2>
+		) }
+		<ShortcutList shortcuts={ shortcuts } />
+	</section>
+);
+
+const ShortcutCategorySection = ( {
+	title,
+	categoryName,
+	additionalShortcuts = [],
+} ) => {
+	const categoryShortcuts = useSelect(
+		( select ) => {
+			return select( keyboardShortcutsStore ).getCategoryShortcuts(
+				categoryName
+			);
+		},
+		[ categoryName ]
+	);
+
+	return (
+		<ShortcutSection
+			title={ title }
+			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
+		/>
+	);
+};
+
+export default function KeyboardShortcutHelpModal( {
+	isModalActive,
+	toggleModal,
+} ) {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	registerShortcut( {
+		name: 'core/customize-widgets/keyboard-shortcuts',
+		category: 'main',
+		description: __( 'Display these keyboard shortcuts.' ),
+		keyCombination: {
+			modifier: 'access',
+			character: 'h',
+		},
+	} );
+
+	useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal, {
+		bindGlobal: true,
+	} );
+
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="customize-widgets-keyboard-shortcut-help-modal"
+			title={ __( 'Keyboard shortcuts' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<ShortcutSection
+				className="customize-widgets-keyboard-shortcut-help-modal__main-shortcuts"
+				shortcuts={ [ 'core/customize-widgets/keyboard-shortcuts' ] }
+			/>
+			<ShortcutCategorySection
+				title={ __( 'Global shortcuts' ) }
+				categoryName="global"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Selection shortcuts' ) }
+				categoryName="selection"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Block shortcuts' ) }
+				categoryName="block"
+				additionalShortcuts={ [
+					{
+						keyCombination: { character: '/' },
+						description: __(
+							'Change the block type after adding a new paragraph.'
+						),
+						/* translators: The forward-slash character. e.g. '/'. */
+						ariaLabel: __( 'Forward-slash' ),
+					},
+				] }
+			/>
+			<ShortcutSection
+				title={ __( 'Text formatting' ) }
+				shortcuts={ textFormattingShortcuts }
+			/>
+		</Modal>
+	);
+}