@wordpress/edit-site 3.0.26 → 3.0.27

package/src/components/global-styles/screen-background-color.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -55,7 +55,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,11 +78,10 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
@@ -94,10 +92,8 @@ function ScreenBackgroundColor( { name } ) {
 					'Set a background color or gradient for the whole website.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-background-color__control"
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
@@ -106,6 +102,7 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				{ ...controlProps }
 			/>
 		</>
 	);

package/src/components/global-styles/screen-link-color.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -44,15 +44,6 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -62,16 +53,17 @@ function ScreenLinkColor( { name } ) {
 					'Set the default color used for links across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-link-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ linkColor }
+				onColorChange={ setLinkColor }
+				clearable={ linkColor === userLinkColor }
 			/>
 		</>
 	);

package/src/components/global-styles/screen-text-color.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -36,15 +36,6 @@ function ScreenTextColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -54,16 +45,17 @@ function ScreenTextColor( { name } ) {
 					'Set the default color used for text across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ color }
+				onColorChange={ setColor }
+				clearable={ color === userColor }
 			/>
 		</>
 	);

package/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 }
+			/>
+		</>
+	);
+}

package/src/{plugins → components/header/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 );

package/src/components/header/tools-more-menu-group/index.js

@@ -6,8 +6,7 @@ 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'
@@ -15,11 +14,7 @@ const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
 
 ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
 	<Slot fillProps={ fillProps }>
-		{ ( fills ) =>
-			! isEmpty( fills ) && (
-				<MenuGroup label={ __( 'Tools' ) }>{ fills }</MenuGroup>
-			)
-		}
+		{ ( fills ) => ! isEmpty( fills ) && fills }
 	</Slot>
 );
 

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

package/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 }
+		/>
+	);
+}

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isString } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { 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="edit-site-keyboard-shortcut-help-modal__shortcut-list"
+		role="list"
+	>
+		{ shortcuts.map( ( shortcut, index ) => (
+			<li
+				className="edit-site-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(
+			'edit-site-keyboard-shortcut-help-modal__section',
+			className
+		) }
+	>
+		{ !! title && (
+			<h2 className="edit-site-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,
+} ) {
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="edit-site-keyboard-shortcut-help-modal"
+			title={ __( 'Keyboard shortcuts' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<ShortcutSection
+				className="edit-site-keyboard-shortcut-help-modal__main-shortcuts"
+				shortcuts={ [ 'core/edit-site/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>
+	);
+}

package/src/components/keyboard-shortcut-help-modal/shortcut.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
+
+function KeyCombination( { keyCombination, forceAriaLabel } ) {
+	const shortcut = keyCombination.modifier
+		? displayShortcutList[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+	const ariaLabel = keyCombination.modifier
+		? shortcutAriaLabel[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+
+	return (
+		<kbd
+			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
+			aria-label={ forceAriaLabel || ariaLabel }
+		>
+			{ castArray( shortcut ).map( ( character, index ) => {
+				if ( character === '+' ) {
+					return <Fragment key={ index }>{ character }</Fragment>;
+				}
+
+				return (
+					<kbd
+						key={ index }
+						className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
+					>
+						{ character }
+					</kbd>
+				);
+			} ) }
+		</kbd>
+	);
+}
+
+export default function Shortcut( {
+	description,
+	keyCombination,
+	aliases = [],
+	ariaLabel,
+} ) {
+	return (
+		<>
+			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-description">
+				{ description }
+			</div>
+			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-term">
+				<KeyCombination
+					keyCombination={ keyCombination }
+					forceAriaLabel={ ariaLabel }
+				/>
+				{ aliases.map( ( alias, index ) => (
+					<KeyCombination
+						keyCombination={ alias }
+						forceAriaLabel={ ariaLabel }
+						key={ index }
+					/>
+				) ) }
+			</div>
+		</>
+	);
+}

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -0,0 +1,66 @@
+.edit-site-keyboard-shortcut-help-modal {
+	&__section {
+		margin: 0 0 2rem 0;
+	}
+
+	&__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
+		// Push the shortcut to be flush with top modal header.
+		margin-top: -$grid-unit-30 -$border-width;
+	}
+
+	&__section-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+
+	&__shortcut {
+		display: flex;
+		align-items: baseline;
+		padding: 0.6rem 0;
+		border-top: 1px solid $gray-300;
+		margin-bottom: 0;
+
+		&:last-child {
+			border-bottom: 1px solid $gray-300;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	&__shortcut-term {
+		font-weight: 600;
+		margin: 0 0 0 1rem;
+		text-align: right;
+	}
+
+	&__shortcut-description {
+		flex: 1;
+		margin: 0;
+
+		// IE 11 flex item fix - ensure the item does not collapse.
+		flex-basis: auto;
+	}
+
+	&__shortcut-key-combination {
+		display: block;
+		background: none;
+		margin: 0;
+		padding: 0;
+
+		& + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+			margin-top: 10px;
+		}
+	}
+
+	&__shortcut-key {
+		padding: 0.25rem 0.5rem;
+		border-radius: 8%;
+		margin: 0 0.2rem 0 0.2rem;
+
+		&:last-child {
+			margin: 0 0 0 0.2rem;
+		}
+	}
+}