@wordpress/editor 13.32.0 → 13.34.0

package/src/components/global-keyboard-shortcuts/index.js

@@ -3,18 +3,31 @@
  */
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Component handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
 export default function EditorKeyboardShortcuts() {
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 	const {
 		redo,
 		undo,
@@ -86,5 +99,24 @@ export default function EditorKeyboardShortcuts() {
 		}
 	} );
 
+	useShortcut( 'core/editor/toggle-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+		const isEditorSidebarOpened = [
+			'edit-post/document',
+			'edit-post/block',
+		].includes( getActiveComplementaryArea( 'core' ) );
+
+		if ( isEditorSidebarOpened ) {
+			disableComplementaryArea( 'core' );
+		} else {
+			const sidebarToOpen = getBlockSelectionStart()
+				? 'edit-post/block'
+				: 'edit-post/document';
+			enableComplementaryArea( 'core', sidebarToOpen );
+		}
+	} );
+
 	return null;
 }

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -8,6 +8,11 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
 
+/**
+ * Component for registering editor keyboard shortcuts.
+ *
+ * @return {Element} The component to be rendered.
+ */
 function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
@@ -83,6 +88,62 @@ function EditorKeyboardShortcutsRegister() {
 				character: '\\',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-sidebar',
+			category: 'global',
+			description: __( 'Show or hide the Settings sidebar.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: ',',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/keyboard-shortcuts',
+			category: 'main',
+			description: __( 'Display these keyboard shortcuts.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'h',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

package/src/components/index.js

@@ -28,8 +28,12 @@ export { default as PageAttributesParent } from './page-attributes/parent';
 export { default as PageTemplate } from './post-template/classic-theme';
 export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
 export { default as PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item';
+export { default as PluginMoreMenuItem } from './plugin-more-menu-item';
 export { default as PluginPostPublishPanel } from './plugin-post-publish-panel';
+export { default as PluginPostStatusInfo } from './plugin-post-status-info';
 export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel';
+export { default as PluginSidebar } from './plugin-sidebar';
+export { default as PluginSidebarMoreMenuItem } from './plugin-sidebar-more-menu-item';
 export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';

package/src/components/inserter-sidebar/index.js

@@ -10,7 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -37,13 +37,10 @@ export default function InserterSidebar( {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
+		focusOnMount: true,
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div

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

@@ -0,0 +1,62 @@
+/**
+ * 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: { character: '[[' },
+		description: __( 'Insert a link to a post or page.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'u' },
+		description: __( 'Underline the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
+	{
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
+];

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

@@ -0,0 +1,43 @@
+/**
+ * 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 ),
+			};
+		},
+		[ name ]
+	);
+
+	if ( ! keyCombination ) {
+		return null;
+	}
+
+	return (
+		<Shortcut
+			keyCombination={ keyCombination }
+			description={ description }
+			aliases={ aliases }
+		/>
+	);
+}
+
+export default DynamicShortcut;

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

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * 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';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { textFormattingShortcuts } from './config';
+import Shortcut from './shortcut';
+import DynamicShortcut from './dynamic-shortcut';
+
+const KEYBOARD_SHORTCUT_HELP_MODAL_NAME = 'editor/keyboard-shortcut-help';
+
+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="editor-keyboard-shortcut-help-modal__shortcut-list"
+		role="list"
+	>
+		{ shortcuts.map( ( shortcut, index ) => (
+			<li
+				className="editor-keyboard-shortcut-help-modal__shortcut"
+				key={ index }
+			>
+				{ typeof shortcut === 'string' ? (
+					<DynamicShortcut name={ shortcut } />
+				) : (
+					<Shortcut { ...shortcut } />
+				) }
+			</li>
+		) ) }
+	</ul>
+	/* eslint-enable jsx-a11y/no-redundant-roles */
+);
+
+const ShortcutSection = ( { title, shortcuts, className } ) => (
+	<section
+		className={ classnames(
+			'editor-keyboard-shortcut-help-modal__section',
+			className
+		) }
+	>
+		{ !! title && (
+			<h2 className="editor-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 ) }
+		/>
+	);
+};
+
+function KeyboardShortcutHelpModal() {
+	const isModalActive = useSelect(
+		( select ) =>
+			select( interfaceStore ).isModalActive(
+				KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+			),
+		[]
+	);
+	const { openModal, closeModal } = useDispatch( interfaceStore );
+	const toggleModal = () => {
+		if ( isModalActive ) {
+			closeModal();
+		} else {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		}
+	};
+	useShortcut( 'core/editor/keyboard-shortcuts', toggleModal );
+
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="editor-keyboard-shortcut-help-modal"
+			title={ __( 'Keyboard shortcuts' ) }
+			closeButtonLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<ShortcutSection
+				className="editor-keyboard-shortcut-help-modal__main-shortcuts"
+				shortcuts={ [ 'core/editor/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 }
+			/>
+			<ShortcutCategorySection
+				title={ __( 'List View shortcuts' ) }
+				categoryName="list-view"
+			/>
+		</Modal>
+	);
+}
+
+export default KeyboardShortcutHelpModal;

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

@@ -0,0 +1,67 @@
+/**
+ * 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="editor-keyboard-shortcut-help-modal__shortcut-key-combination"
+			aria-label={ forceAriaLabel || ariaLabel }
+		>
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
+
+					return (
+						<kbd
+							key={ index }
+							className="editor-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
+		</kbd>
+	);
+}
+
+function Shortcut( { description, keyCombination, aliases = [], ariaLabel } ) {
+	return (
+		<>
+			<div className="editor-keyboard-shortcut-help-modal__shortcut-description">
+				{ description }
+			</div>
+			<div className="editor-keyboard-shortcut-help-modal__shortcut-term">
+				<KeyCombination
+					keyCombination={ keyCombination }
+					forceAriaLabel={ ariaLabel }
+				/>
+				{ aliases.map( ( alias, index ) => (
+					<KeyCombination
+						keyCombination={ alias }
+						forceAriaLabel={ ariaLabel }
+						key={ index }
+					/>
+				) ) }
+			</div>
+		</>
+	);
+}
+
+export default Shortcut;

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

@@ -0,0 +1,61 @@
+.editor-keyboard-shortcut-help-modal {
+	&__section {
+		margin: 0 0 2rem 0;
+	}
+
+	&__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;
+
+		& + .editor-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;
+		}
+	}
+}

package/src/components/list-view-sidebar/index.js

@@ -129,7 +129,7 @@ export default function ListViewSidebar() {
 				// can be rendered internally.
 				defaultTabId="list-view"
 			>
-				<div className="edit-post-editor__document-overview-panel__header">
+				<div className="editor-list-view-sidebar__header">
 					<Button
 						className="editor-list-view-sidebar__close-button"
 						icon={ closeSmall }

package/src/components/list-view-sidebar/style.scss

@@ -8,7 +8,7 @@
 		// @see packages/block-editor/src/components/inserter/style.scss
 		width: 350px;
 	}
-	.edit-post-editor__document-overview-panel__header {
+	.editor-list-view-sidebar__header {
 		display: flex;
 		border-bottom: $border-width solid $gray-300;
 	}
@@ -49,7 +49,7 @@
 	scrollbar-gutter: auto;
 
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
-	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
+	padding: $grid-unit-05;
 }
 
 .editor-list-view-sidebar__list-view-container {

package/src/components/more-menu/copy-content-menu-item.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function CopyContentMenuItem() {
+	const { createNotice } = useDispatch( noticesStore );
+	const { getCurrentPostId, getCurrentPostType } = useSelect( editorStore );
+	const { getEditedEntityRecord } = useSelect( coreStore );
+
+	function getText() {
+		const record = getEditedEntityRecord(
+			'postType',
+			getCurrentPostType(),
+			getCurrentPostId()
+		);
+		if ( ! record ) {
+			return '';
+		}
+
+		if ( typeof record.content === 'function' ) {
+			return record.content( record );
+		} else if ( record.blocks ) {
+			return __unstableSerializeAndClean( record.blocks );
+		} else if ( record.content ) {
+			return record.content;
+		}
+	}
+
+	function onSuccess() {
+		createNotice( 'info', __( 'All content copied.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}
+
+	const ref = useCopyToClipboard( getText, onSuccess );
+
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
+}