@wordpress/editor 13.32.0 → 13.33.0

package/src/bindings/post-meta.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 import { _x } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -12,33 +12,17 @@ import { store as editorStore } from '../store';
 export default {
 	name: 'core/post-meta',
 	label: _x( 'Post Meta', 'block bindings source' ),
-	useSource( props, sourceAttributes ) {
-		const { getCurrentPostType } = useSelect( editorStore );
-		const { context } = props;
-		const { key: metaKey } = sourceAttributes;
+	getPlaceholder( { args } ) {
+		return args.key;
+	},
+	getValue( { registry, context, args } ) {
 		const postType = context.postType
 			? context.postType
-			: getCurrentPostType();
-
-		const [ meta, setMeta ] = useEntityProp(
-			'postType',
-			context.postType,
-			'meta',
-			context.postId
-		);
-
-		if ( postType === 'wp_template' ) {
-			return { placeholder: metaKey };
-		}
-		const metaValue = meta[ metaKey ];
-		const updateMetaValue = ( newValue ) => {
-			setMeta( { ...meta, [ metaKey ]: newValue } );
-		};
+			: registry.select( editorStore ).getCurrentPostType();
 
-		return {
-			placeholder: metaKey,
-			value: metaValue,
-			updateValue: updateMetaValue,
-		};
+		return registry
+			.select( coreDataStore )
+			.getEditedEntityRecord( 'postType', postType, context.postId )
+			.meta?.[ args.key ];
 	},
 };

package/src/components/autosave-monitor/index.js

@@ -91,6 +91,15 @@ export class AutosaveMonitor extends Component {
 	}
 }
 
+/**
+ * AutosaveMonitor component.
+ * Monitors the changes made to the edited post and triggers autosave if necessary.
+ *
+ * @example
+ * ```jsx
+ * <AutosaveMonitor interval={30000} />
+ * ```
+ */
 export default compose( [
 	withSelect( ( select, ownProps ) => {
 		const { getReferenceByDistinctEdits } = select( coreStore );

package/src/components/commands/index.js

@@ -3,12 +3,13 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { code, listView, external } from '@wordpress/icons';
+import { code, listView, external, keyboard } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -55,6 +56,7 @@ function useEditorCommandLoader() {
 		switchEditorMode,
 		toggleDistractionFree,
 	} = useDispatch( editorStore );
+	const { openModal } = useDispatch( interfaceStore );
 	const { getCurrentPostId } = useSelect( editorStore );
 	const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
 
@@ -64,6 +66,15 @@ function useEditorCommandLoader() {
 
 	const commands = [];
 
+	commands.push( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Keyboard shortcuts' ),
+		icon: keyboard,
+		callback: () => {
+			openModal( 'editor/keyboard-shortcut-help' );
+		},
+	} );
+
 	commands.push( {
 		name: 'core/toggle-distraction-free',
 		label: isDistractionFree
@@ -75,6 +86,14 @@ function useEditorCommandLoader() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/open-preferences',
+		label: __( 'Editor preferences' ),
+		callback: () => {
+			openModal( 'editor/preferences' );
+		},
+	} );
+
 	commands.push( {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight' ),

package/src/components/document-tools/index.js

@@ -121,20 +121,22 @@ function DocumentTools( {
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">
-				<ToolbarItem
-					ref={ inserterButton }
-					as={ Button }
-					className="editor-document-tools__inserter-toggle"
-					variant="primary"
-					isPressed={ isInserterOpened }
-					onMouseDown={ preventDefault }
-					onClick={ toggleInserter }
-					disabled={ disableBlockTools }
-					icon={ plus }
-					label={ showIconLabels ? shortLabel : longLabel }
-					showTooltip={ ! showIconLabels }
-					aria-expanded={ isInserterOpened }
-				/>
+				{ ! isDistractionFree && (
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="editor-document-tools__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpened }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ disableBlockTools }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+						aria-expanded={ isInserterOpened }
+					/>
+				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						{ isLargeViewport && ! hasFixedToolbar && (

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
@@ -37,10 +38,19 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 	}, [] );
 
+	const canEditTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
 	useEffect( () => {
 		const handleDblClick = ( event ) => {
+			if ( ! canEditTemplate ) {
+				return;
+			}
+
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
@@ -52,7 +62,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		return () => {
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ contentRef ] );
+	}, [ contentRef, canEditTemplate ] );
+
+	if ( ! canEditTemplate ) {
+		return null;
+	}
 
 	return (
 		<ConfirmDialog
@@ -68,7 +82,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			onCancel={ () => setIsDialogOpen( false ) }
 		>
 			{ __(
-				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages.'
+				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?.'
 			) }
 		</ConfirmDialog>
 	);

package/src/components/editor-canvas/index.js

@@ -39,8 +39,6 @@ const {
 	useFlashEditableBlocks,
 } = unlock( blockEditorPrivateApis );
 
-const noop = () => {};
-
 /**
  * These post types have a special editor where they don't allow you to fill the title
  * and they don't apply the layout styles.
@@ -95,6 +93,7 @@ function EditorCanvas( {
 	styles,
 	disableIframe = false,
 	iframeProps,
+	contentRef,
 	children,
 } ) {
 	const {
@@ -308,9 +307,10 @@ function EditorCanvas( {
 
 	const localRef = useRef();
 	const typewriterRef = useTypewriter();
-	const contentRef = useMergeRefs( [
+	contentRef = useMergeRefs( [
 		localRef,
-		renderingMode === 'post-only' ? typewriterRef : noop,
+		contentRef,
+		renderingMode === 'post-only' ? typewriterRef : null,
 		useFlashEditableBlocks( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),

package/src/components/error-boundary/style.native.scss

@@ -28,7 +28,7 @@
 	justify-content: center;
 	margin-bottom: 8px;
 	background-color: rgba(60, 60, 67, 0.3);
-	border-radius: $size/2;
+	border-radius: 20px;
 }
 
 .error-boundary__icon-container--dark {

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

@@ -3,6 +3,8 @@
  */
 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
@@ -15,6 +17,10 @@ export default function EditorKeyboardShortcuts() {
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 	const {
 		redo,
 		undo,
@@ -86,5 +92,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

@@ -83,6 +83,26 @@ 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 ] );
 
 	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/keyboard-shortcut-help-modal/config.js

@@ -0,0 +1,53 @@
+/**
+ * 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' },
+		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;