@wordpress/editor 13.33.0 → 13.34.0

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/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,7 +113,6 @@ function DocumentTools( {
 				className
 			) }
 			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">

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

@@ -82,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. Would you like to edit the template?.'
+				'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-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/global-keyboard-shortcuts/index.js

@@ -11,6 +11,13 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 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 } =

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 );
@@ -103,6 +108,42 @@ function EditorKeyboardShortcutsRegister() {
 				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/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

@@ -37,7 +37,16 @@ export const textFormattingShortcuts = [
 		description: __( 'Make the selected text inline code.' ),
 	},
 	{
-		keyCombination: { modifier: 'access', character: '0' },
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
 		description: __( 'Convert the current heading to a paragraph.' ),
 	},
 	{

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

package/src/components/more-menu/index.js

@@ -0,0 +1,158 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
+import { external, moreVertical } from '@wordpress/icons';
+import {
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
+import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import CopyContentMenuItem from './copy-content-menu-item';
+import ModeSwitcher from '../mode-switcher';
+import ToolsMoreMenuGroup from './tools-more-menu-group';
+import ViewMoreMenuGroup from './view-more-menu-group';
+import { store as editorStore } from '../../store';
+
+export default function MoreMenu() {
+	const { openModal } = useDispatch( interfaceStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
+	return (
+		<>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					showTooltip: ! showIconLabels,
+					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup label={ _x( 'View', 'noun' ) }>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="fixedToolbar"
+								onToggle={ turnOffDistractionFree }
+								label={ __( 'Top toolbar' ) }
+								info={ __(
+									'Access all block and document tools in a single place'
+								) }
+								messageActivated={ __(
+									'Top toolbar activated'
+								) }
+								messageDeactivated={ __(
+									'Top toolbar deactivated'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="distractionFree"
+								label={ __( 'Distraction free' ) }
+								info={ __( 'Write with calmness' ) }
+								handleToggling={ false }
+								onToggle={ toggleDistractionFree }
+								messageActivated={ __(
+									'Distraction free mode activated'
+								) }
+								messageDeactivated={ __(
+									'Distraction free mode deactivated'
+								) }
+								shortcut={ displayShortcut.primaryShift(
+									'\\'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated'
+								) }
+							/>
+							<ViewMoreMenuGroup.Slot fillProps={ { onClose } } />
+						</MenuGroup>
+						<ModeSwitcher />
+						<ActionItem.Slot
+							name="core/plugin-more-menu"
+							label={ __( 'Plugins' ) }
+							as={ MenuGroup }
+							fillProps={ { onClick: onClose } }
+						/>
+						<MenuGroup label={ __( 'Tools' ) }>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/keyboard-shortcut-help' )
+								}
+								shortcut={ displayShortcut.access( 'h' ) }
+							>
+								{ __( 'Keyboard shortcuts' ) }
+							</MenuItem>
+							<CopyContentMenuItem />
+							<MenuItem
+								icon={ external }
+								href={ __(
+									'https://wordpress.org/documentation/article/wordpress-block-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>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/preferences' )
+								}
+							>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}

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

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: ToolsMoreMenuGroup, Slot } =
+	createSlotFill( 'ToolsMoreMenuGroup' );
+
+ToolsMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ToolsMoreMenuGroup;

package/src/components/more-menu/view-more-menu-group.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill(
+	Platform.OS === 'web' ? Symbol( 'ViewMoreMenuGroup' ) : 'ViewMoreMenuGroup'
+);
+
+ViewMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ViewMoreMenuGroup;

package/src/components/page-attributes/check.js

@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if the post type supports page attributes.
+ *
+ * @param {Object}  props          - The component props.
+ * @param {Element} props.children - The child components to render.
+ *
+ * @return {Component|null} The rendered child components or null if page attributes are not supported.
+ */
 export function PageAttributesCheck( { children } ) {
 	const supportsPageAttributes = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );

package/src/components/page-attributes/order.js

@@ -53,6 +53,12 @@ function PageAttributesOrder() {
 	);
 }
 
+/**
+ * Renders the Page Attributes Order component. A number input in an editor interface
+ * for setting the order of a given page.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PageAttributesOrderWithChecks() {
 	return (
 		<PostTypeSupportCheck supportKeys="page-attributes">

package/src/components/page-attributes/panel.js

@@ -17,7 +17,7 @@ import PageAttributesParent from './parent';
 
 const PANEL_NAME = 'page-attributes';
 
-export function PageAttributesPanel() {
+function AttributesPanel() {
 	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
@@ -38,25 +38,29 @@ export function PageAttributesPanel() {
 		return null;
 	}
 
-	const onTogglePanel = ( ...args ) =>
-		toggleEditorPanelOpened( PANEL_NAME, ...args );
+	return (
+		<PanelBody
+			title={ postType?.labels?.attributes ?? __( 'Page attributes' ) }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		>
+			<PageAttributesParent />
+			<PanelRow>
+				<PageAttributesOrder />
+			</PanelRow>
+		</PanelBody>
+	);
+}
 
+/**
+ * Renders the Page Attributes Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function PageAttributesPanel() {
 	return (
 		<PageAttributesCheck>
-			<PanelBody
-				title={
-					postType?.labels?.attributes ?? __( 'Page attributes' )
-				}
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PageAttributesParent />
-				<PanelRow>
-					<PageAttributesOrder />
-				</PanelRow>
-			</PanelBody>
+			<AttributesPanel />
 		</PageAttributesCheck>
 	);
 }
-
-export default PageAttributesPanel;