@wordpress/edit-site 3.0.26 → 3.0.29

package/build-style/style.css

@@ -1772,6 +1772,57 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   vertical-align: text-top;
 }
 
+.edit-site-keyboard-shortcut-help-modal__section {
+  margin: 0 0 2rem 0;
+}
+.edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
+  margin-top: -25px;
+}
+.edit-site-keyboard-shortcut-help-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut {
+  display: flex;
+  align-items: baseline;
+  padding: 0.6rem 0;
+  border-top: 1px solid #ddd;
+  margin-bottom: 0;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut:last-child {
+  border-bottom: 1px solid #ddd;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut:empty {
+  display: none;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-term {
+  font-weight: 600;
+  margin: 0 0 0 1rem;
+  text-align: right;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-description {
+  flex: 1;
+  margin: 0;
+  flex-basis: auto;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+  display: block;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+  margin-top: 10px;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key {
+  padding: 0.25rem 0.5rem;
+  border-radius: 8%;
+  margin: 0 0.2rem 0 0.2rem;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key:last-child {
+  margin: 0 0 0 0.2rem;
+}
+
 html.wp-toolbar {
   background: #fff;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.26",
+	"version": "3.0.29",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,30 +28,30 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.16",
-		"@wordpress/block-library": "^6.0.25",
+		"@wordpress/api-fetch": "^5.2.7",
+		"@wordpress/block-editor": "^8.0.18",
+		"@wordpress/block-library": "^6.0.28",
 		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.2",
+		"@wordpress/components": "^19.2.3",
 		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.9",
+		"@wordpress/core-data": "^4.0.11",
 		"@wordpress/data": "^6.1.5",
-		"@wordpress/data-controls": "^2.2.8",
-		"@wordpress/editor": "^12.0.20",
+		"@wordpress/data-controls": "^2.2.9",
+		"@wordpress/editor": "^12.0.22",
 		"@wordpress/element": "^4.0.4",
 		"@wordpress/hooks": "^3.2.2",
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.17",
+		"@wordpress/interface": "^4.1.18",
 		"@wordpress/keyboard-shortcuts": "^3.0.7",
 		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/media-utils": "^3.0.5",
+		"@wordpress/media-utils": "^3.0.6",
 		"@wordpress/notices": "^3.2.8",
 		"@wordpress/plugins": "^4.0.7",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.22",
-		"@wordpress/url": "^3.3.1",
+		"@wordpress/reusable-blocks": "^3.0.24",
+		"@wordpress/url": "^3.3.2",
 		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cac1a1f3c854fc282d67b91a74936c3fe42d7d0a"
+	"gitHead": "342ca4cdad4dd5a974db45232a48fe53f7eb28e0"
 }

package/src/components/add-new-template/new-template-part.js

@@ -35,11 +35,17 @@ export default function NewTemplatePart( { postType } ) {
 		}
 
 		try {
+			// Currently template parts only allow latin chars.
+			// Fallback slug will receive suffix by default.
+			const cleanSlug =
+				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
+				'wp-custom-part';
+
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
-					slug: kebabCase( title ),
+					slug: cleanSlug,
 					title,
 					content: '',
 					area,

package/src/components/editor/global-styles-renderer.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -25,7 +30,8 @@ function useGlobalStylesRenderer() {
 		}
 
 		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = currentStoreSettings?.styles?.filter(
+		const nonGlobalStyles = filter(
+			currentStoreSettings.styles,
 			( style ) => ! style.isGlobalStyles
 		);
 		updateSettings( {

package/src/components/error-boundary/index.js

@@ -3,18 +3,11 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
 
-function CopyButton( { text, children } ) {
-	const ref = useCopyToClipboard( text );
-	return (
-		<Button variant="secondary" ref={ ref }>
-			{ children }
-		</Button>
-	);
-}
+/**
+ * Internal dependencies
+ */
+import ErrorBoundaryWarning from './warning';
 
 export default class ErrorBoundary extends Component {
 	constructor() {
@@ -42,23 +35,13 @@ export default class ErrorBoundary extends Component {
 		}
 
 		return (
-			<Warning
-				className="editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
-			>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				error={ error }
+				reboot={ this.reboot }
+			/>
 		);
 	}
 }

package/src/components/error-boundary/warning.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default function ErrorBoundaryWarning( {
+	message,
+	error,
+	reboot,
+	dashboardLink,
+} ) {
+	const actions = [];
+
+	if ( reboot ) {
+		actions.push(
+			<Button key="recovery" onClick={ reboot } variant="secondary">
+				{ __( 'Attempt Recovery' ) }
+			</Button>
+		);
+	}
+
+	if ( error ) {
+		actions.push(
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>
+		);
+	}
+
+	if ( dashboardLink ) {
+		actions.push(
+			<Button
+				key="back-to-dashboard"
+				variant="secondary"
+				href={ dashboardLink }
+			>
+				{ __( 'Back to dashboard' ) }
+			</Button>
+		);
+	}
+
+	return (
+		<Warning className="editor-error-boundary" actions={ actions }>
+			{ message }
+		</Warning>
+	);
+}

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