@wordpress/editor 13.32.0 → 13.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.32.0",
+	"version": "13.34.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,43 +31,43 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/api-fetch": "^6.52.0",
-		"@wordpress/blob": "^3.55.0",
-		"@wordpress/block-editor": "^12.23.0",
-		"@wordpress/blocks": "^12.32.0",
-		"@wordpress/commands": "^0.26.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/core-data": "^6.32.0",
-		"@wordpress/data": "^9.25.0",
-		"@wordpress/date": "^4.55.0",
-		"@wordpress/deprecated": "^3.55.0",
-		"@wordpress/dom": "^3.55.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/hooks": "^3.55.0",
-		"@wordpress/html-entities": "^3.55.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/keyboard-shortcuts": "^4.32.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/media-utils": "^4.46.0",
-		"@wordpress/notices": "^4.23.0",
-		"@wordpress/patterns": "^1.16.0",
-		"@wordpress/plugins": "^6.23.0",
-		"@wordpress/preferences": "^3.32.0",
-		"@wordpress/private-apis": "^0.37.0",
-		"@wordpress/reusable-blocks": "^4.32.0",
-		"@wordpress/rich-text": "^6.32.0",
-		"@wordpress/server-side-render": "^4.32.0",
-		"@wordpress/url": "^3.56.0",
-		"@wordpress/warning": "^2.55.0",
-		"@wordpress/wordcount": "^3.55.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/blob": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/interface": "^5.34.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/patterns": "^1.18.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/reusable-blocks": "^4.34.0",
+		"@wordpress/rich-text": "^6.34.0",
+		"@wordpress/server-side-render": "^4.34.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/warning": "^2.57.0",
+		"@wordpress/wordcount": "^3.57.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^3.6.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.2",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

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

@@ -11,17 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-/**
- * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.
- *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
- *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- */
 export class AutosaveMonitor extends Component {
 	constructor( props ) {
 		super( props );
@@ -91,6 +80,29 @@ export class AutosaveMonitor extends Component {
 	}
 }
 
+/**
+ * Monitors the changes made to the edited post and triggers autosave if necessary.
+ *
+ * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
+ * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
+ * the specific way of detecting changes.
+ *
+ * There are two caveats:
+ * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+ * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
+ *
+ * @param {Object}   props                       - The properties passed to the component.
+ * @param {Function} props.autosave              - The function to call when changes need to be saved.
+ * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
+ * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
+ * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+ * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ *
+ * @example
+ * ```jsx
+ * <AutosaveMonitor interval={30000} />
+ * ```
+ */
 export default compose( [
 	withSelect( ( select, ownProps ) => {
 		const { getReferenceByDistinctEdits } = select( coreStore );

package/src/components/character-count/index.js

@@ -9,6 +9,11 @@ import { count as characterCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the character count of the post content.
+ *
+ * @return {number} The character count.
+ */
 export default function CharacterCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),

package/src/components/collapsible-block-toolbar/index.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockToolbar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { Button, Popover } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
+
+function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
+	const { blockSelectionStart } = useSelect( ( select ) => {
+		return {
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	const hasBlockSelection = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			onToggle( false );
+		}
+	}, [ blockSelectionStart, onToggle ] );
+
+	if ( ! hasBlockToolbar ) {
+		return null;
+	}
+
+	return (
+		<>
+			<div
+				className={ classnames( 'editor-collapsible-block-toolbar', {
+					'is-collapsed': isCollapsed || ! hasBlockSelection,
+				} ) }
+			>
+				<BlockToolbar hideDragHandle />
+			</div>
+			<Popover.Slot name="block-toolbar" />
+
+			<Button
+				className="editor-collapsible-block-toolbar__toggle"
+				icon={ isCollapsed ? next : previous }
+				onClick={ () => {
+					onToggle( ! isCollapsed );
+				} }
+				label={
+					isCollapsed
+						? __( 'Show block tools' )
+						: __( 'Hide block tools' )
+				}
+				size="compact"
+			/>
+		</>
+	);
+}
+
+export default CollapsableBlockToolbar;

package/src/components/collapsible-block-toolbar/style.scss

@@ -0,0 +1,80 @@
+.editor-collapsible-block-toolbar {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	height: $header-height;
+
+	.block-editor-block-contextual-toolbar {
+		border-bottom: 0;
+		height: 100%;
+	}
+
+	// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+	.block-editor-block-toolbar {
+		height: 100%;
+		// Push down so that buttons are centered vertically.
+		// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+		// but there is a -1px top-margin down the stack that affects this.
+		padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+		// Match the height of other buttons in the header toolbar.
+		.components-button:not(.block-editor-block-mover-button) {
+			height: $button-size-compact;
+		}
+	}
+
+	&::after {
+		content: "";
+		width: $border-width;
+		height: $grid-unit-30;
+		background-color: $gray-300;
+		margin-right: $grid-unit - $border-width;
+	}
+
+	// Modified group borders.
+	.components-toolbar-group,
+	.components-toolbar {
+		border-right: none;
+		position: relative;
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			top: $grid-unit-05;
+			position: absolute;
+			right: -$border-width;
+		}
+
+		& .components-toolbar-group.components-toolbar-group {
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	.block-editor-block-mover {
+		// Match the height of other buttons in the header toolbar.
+		&.is-horizontal .block-editor-block-mover-button {
+			height: $button-size-compact;
+			overflow: visible;
+		}
+
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+				position: relative;
+				top: -10px;
+			}
+		}
+	}
+
+	&.is-collapsed {
+		display: none;
+	}
+}
+
+.editor-collapsible-block-toolbar__toggle {
+	margin-left: 2px; // Allow focus ring to be fully visible
+}

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-outline/check.js

@@ -4,6 +4,14 @@
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Component check if there are any headings (core/heading blocks) present in the document.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} The component to be rendered or null if there are headings.
+ */
 export default function DocumentOutlineCheck( { children } ) {
 	const hasHeadings = useSelect( ( select ) => {
 		const { getGlobalBlockCount } = select( blockEditorStore );

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

@@ -98,6 +98,16 @@ const isEmptyHeading = ( heading ) =>
 	! heading.attributes.content ||
 	heading.attributes.content.trim().length === 0;
 
+/**
+ * Renders a document outline component.
+ *
+ * @param {Object}   props                         Props.
+ * @param {Function} props.onSelect                Function to be called when an outline item is selected.
+ * @param {boolean}  props.isTitleSupported        Indicates whether the title is supported.
+ * @param {boolean}  props.hasOutlineItemsDisabled Indicates whether the outline items are disabled.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function DocumentOutline( {
 	onSelect,
 	isTitleSupported,

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

@@ -13,7 +13,6 @@ import {
 	NavigableToolbar,
 	ToolSelector,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
@@ -29,8 +28,6 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -76,7 +73,6 @@ function DocumentTools( {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const { showFixedToolbar } = useShowBlockTools();
 
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
@@ -117,24 +113,25 @@ function DocumentTools( {
 				className
 			) }
 			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			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/editor-history/redo.js

@@ -41,4 +41,14 @@ function EditorHistoryRedo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the redo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default forwardRef( EditorHistoryRedo );

package/src/components/editor-history/undo.js

@@ -37,4 +37,14 @@ function EditorHistoryUndo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the undo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default forwardRef( EditorHistoryUndo );

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

@@ -8,6 +8,11 @@ import { store as noticesStore } from '@wordpress/notices';
 // Last three notices. Slices from the tail end of the list.
 const MAX_VISIBLE_NOTICES = -3;
 
+/**
+ * Renders the editor snackbars component.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),

package/src/components/entities-saved-states/style.scss

@@ -30,3 +30,10 @@
 		margin-bottom: $grid-unit-05;
 	}
 }
+
+.edit-post-layout,
+.edit-site-editor__interface-skeleton {
+	.entities-saved-states__panel-header {
+		height: $header-height + $border-width;
+	}
+}

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 {