@wordpress/editor 13.31.0 → 13.33.0

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

@@ -15,13 +15,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import {
-	chevronLeftSmall,
-	chevronRightSmall,
-	page as pageIcon,
-	navigation as navigationIcon,
-	symbol,
-} from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
@@ -32,6 +26,7 @@ import { useReducedMotion } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const TYPE_LABELS = {
 	// translators: 1: Pattern title.
@@ -44,11 +39,6 @@ const TYPE_LABELS = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const ICONS = {
-	wp_block: symbol,
-	wp_navigation: navigationIcon,
-};
-
 const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
 
 const GLOBAL_POST_TYPES = [
@@ -93,7 +83,12 @@ export default function DocumentBar() {
 				_postType,
 				_postId
 			),
-			templateIcon: _templateInfo.icon,
+			templateIcon: unlock( select( editorStore ) ).getPostIcon(
+				_postType,
+				{
+					area: _document?.area,
+				}
+			),
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -104,7 +99,6 @@ export default function DocumentBar() {
 	const isReducedMotion = useReducedMotion();
 
 	const isNotFound = ! document && ! isResolving;
-	const icon = ICONS[ postType ] ?? pageIcon;
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
@@ -177,7 +171,7 @@ export default function DocumentBar() {
 							isReducedMotion ? { duration: 0 } : undefined
 						}
 					>
-						<BlockIcon icon={ isTemplate ? templateIcon : icon } />
+						<BlockIcon icon={ templateIcon } />
 						<Text
 							size="body"
 							as="h1"

package/src/components/document-bar/style.scss

@@ -10,7 +10,7 @@
 	min-width: 0;
 	background: $gray-100;
 	border-radius: $grid-unit-05;
-	width: min(100%, 450px);
+	width: min(100%, 416px);
 
 	&:hover {
 		background-color: $gray-200;
@@ -18,9 +18,10 @@
 
 	.components-button {
 		border-radius: $grid-unit-05;
+		transition: all 0.1s ease-out;
+		@include reduce-motion("transition");
 
 		&:hover {
-			color: var(--wp-block-synced-color);
 			background: $gray-200;
 		}
 	}
@@ -39,19 +40,15 @@
 .editor-document-bar__title {
 	flex-grow: 1;
 	overflow: hidden;
-	color: $gray-800;
+	color: $gray-900;
 	gap: $grid-unit-05;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	@include break-small() {
-		padding-left: $grid-unit-40;
-	}
-
-	&:hover {
-		color: var(--wp-block-synced-color);
+	@include break-medium() {
+		padding-left: $grid-unit-30;
 	}
 
 	.editor-document-bar.is-global & {
@@ -67,14 +64,14 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 50%;
+		max-width: 70%;
 		color: currentColor;
 	}
 }
 
 .editor-document-bar__shortcut {
 	color: $gray-800;
-	min-width: $grid-unit-40;
+	min-width: $grid-unit-30;
 	display: none;
 
 	@include break-medium() {
@@ -91,7 +88,7 @@
 	position: absolute;
 
 	&:hover {
-		color: var(--wp-block-synced-color);
+		color: $gray-900;
 		background-color: transparent;
 	}
 }

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/document-tools/style.scss

@@ -3,10 +3,11 @@
 	align-items: center;
 
 	// Hide all action buttons except the inserter on mobile.
-	.editor-document-tools__left > .components-button {
+	.editor-document-tools__left > .editor-history__redo,
+	.editor-document-tools__left > .editor-history__undo {
 		display: none;
 
-		@include break-small() {
+		@include break-medium() {
 			display: inline-flex;
 		}
 	}
@@ -39,7 +40,7 @@
 	// here to the original button styles
 	.editor-document-tools__left > .components-button.has-icon,
 	.editor-document-tools__left > .components-dropdown > .components-button.has-icon {
-		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 		// This is best fixed by making the mover control area a proper single toolbar group.
 		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
 		height: $button-size-compact;
@@ -70,14 +71,6 @@
 	// Some plugins add buttons here despite best practices.
 	// Push them a bit rightwards to fit the top toolbar.
 	margin-right: $grid-unit-10;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
 }
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {

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

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
+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';
 
@@ -38,73 +38,35 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 	}, [] );
 
-	const { getNotices } = useSelect( noticesStore );
-
-	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
+	const canEditTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
-	const lastNoticeId = useRef( 0 );
-
 	useEffect( () => {
-		const handleClick = async ( event ) => {
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
-				return;
-			}
-
-			const isNoticeAlreadyShowing = getNotices().some(
-				( notice ) => notice.id === lastNoticeId.current
-			);
-			if ( isNoticeAlreadyShowing ) {
+		const handleDblClick = ( event ) => {
+			if ( ! canEditTemplate ) {
 				return;
 			}
 
-			const { notice } = await createInfoNotice(
-				__( 'Edit your template to edit this block.' ),
-				{
-					isDismissible: true,
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Edit template' ),
-							onClick: () =>
-								onNavigateToEntityRecord( {
-									postId: templateId,
-									postType: 'wp_template',
-								} ),
-						},
-					],
-				}
-			);
-			lastNoticeId.current = notice.id;
-		};
-
-		const handleDblClick = ( event ) => {
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
-			if ( lastNoticeId.current ) {
-				removeNotice( lastNoticeId.current );
-			}
 			setIsDialogOpen( true );
 		};
 
 		const canvas = contentRef.current;
-		canvas?.addEventListener( 'click', handleClick );
 		canvas?.addEventListener( 'dblclick', handleDblClick );
 		return () => {
-			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [
-		lastNoticeId,
-		contentRef,
-		getNotices,
-		createInfoNotice,
-		onNavigateToEntityRecord,
-		templateId,
-		removeNotice,
-	] );
+	}, [ contentRef, canEditTemplate ] );
+
+	if ( ! canEditTemplate ) {
+		return null;
+	}
 
 	return (
 		<ConfirmDialog
@@ -119,7 +81,9 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>
-			{ __( 'Edit your template to edit this block.' ) }
+			{ __(
+				'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

@@ -29,6 +29,7 @@ import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
 
 const {
 	LayoutStyle,
@@ -38,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.
@@ -94,6 +93,7 @@ function EditorCanvas( {
 	styles,
 	disableIframe = false,
 	iframeProps,
+	contentRef,
 	children,
 } ) {
 	const {
@@ -307,12 +307,16 @@ 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',
 		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (

package/src/components/entities-saved-states/index.js

@@ -3,32 +3,24 @@
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useCallback,
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
 	__experimentalUseDialog as useDialog,
 	useInstanceId,
 } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import EntityTypeList from './entity-type-list';
 import { useIsDirty } from './hooks/use-is-dirty';
-
-const PUBLISH_ON_SAVE_ENTITIES = [
-	{
-		kind: 'postType',
-		name: 'wp_navigation',
-	},
-];
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function identity( values ) {
 	return values;
@@ -55,25 +47,13 @@ export function EntitiesSavedStatesExtensible( {
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
 	renderDialog = undefined,
-
 	dirtyEntityRecords,
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
 } ) {
 	const saveButtonRef = useRef();
-	const {
-		editEntityRecord,
-		saveEditedEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { createSuccessNotice, createErrorNotice, removeNotice } =
-		useDispatch( noticesStore );
-
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
 	// To group entities by type.
 	const partitionedSavables = dirtyEntityRecords.reduce( ( acc, record ) => {
 		const { name } = record;
@@ -99,94 +79,6 @@ export function EntitiesSavedStatesExtensible( {
 	].filter( Array.isArray );
 
 	const saveEnabled = saveEnabledProp ?? isDirty;
-
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-		return {
-			homeUrl: getUnstableBase()?.home,
-		};
-	}, [] );
-
-	const saveCheckedEntities = () => {
-		const saveNoticeId = 'site-editor-save-success';
-		removeNotice( saveNoticeId );
-		const entitiesToSave = dirtyEntityRecords.filter(
-			( { kind, name, key, property } ) => {
-				return ! unselectedEntities.some(
-					( elt ) =>
-						elt.kind === kind &&
-						elt.name === name &&
-						elt.key === key &&
-						elt.property === property
-				);
-			}
-		);
-
-		close( entitiesToSave );
-
-		const siteItemsToSave = [];
-		const pendingSavedRecords = [];
-		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
-			if ( 'root' === kind && 'site' === name ) {
-				siteItemsToSave.push( property );
-			} else {
-				if (
-					PUBLISH_ON_SAVE_ENTITIES.some(
-						( typeToPublish ) =>
-							typeToPublish.kind === kind &&
-							typeToPublish.name === name
-					)
-				) {
-					editEntityRecord( kind, name, key, { status: 'publish' } );
-				}
-
-				pendingSavedRecords.push(
-					saveEditedEntityRecord( kind, name, key )
-				);
-			}
-		} );
-		if ( siteItemsToSave.length ) {
-			pendingSavedRecords.push(
-				saveSpecifiedEntityEdits(
-					'root',
-					'site',
-					undefined,
-					siteItemsToSave
-				)
-			);
-		}
-
-		__unstableMarkLastChangeAsPersistent();
-
-		Promise.all( pendingSavedRecords )
-			.then( ( values ) => {
-				return onSave( values );
-			} )
-			.then( ( values ) => {
-				if (
-					values.some( ( value ) => typeof value === 'undefined' )
-				) {
-					createErrorNotice( __( 'Saving failed.' ) );
-				} else {
-					createSuccessNotice( __( 'Site updated.' ), {
-						type: 'snackbar',
-						id: saveNoticeId,
-						actions: [
-							{
-								label: __( 'View site' ),
-								url: homeUrl,
-							},
-						],
-					} );
-				}
-			} )
-			.catch( ( error ) =>
-				createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` )
-			);
-	};
-
 	// Explicitly define this with no argument passed.  Using `close` on
 	// its own will use the event object in place of the expected saved entities.
 	const dismissPanel = useCallback( () => close(), [ close ] );
@@ -217,7 +109,14 @@ export function EntitiesSavedStatesExtensible( {
 					variant="primary"
 					disabled={ ! saveEnabled }
 					__experimentalIsFocusable
-					onClick={ saveCheckedEntities }
+					onClick={ () =>
+						saveDirtyEntities( {
+							onSave,
+							dirtyEntityRecords,
+							entitiesToSkip: unselectedEntities,
+							close,
+						} )
+					}
 					className="editor-entities-saved-states__save-button"
 				>
 					{ saveLabel }

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

@@ -27,6 +27,13 @@ export { default as PageAttributesPanel } from './page-attributes/panel';
 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

@@ -19,7 +19,10 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar() {
+export default function InserterSidebar( {
+	closeGeneralSidebar,
+	isRightSidebarOpen,
+} ) {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { getInsertionPoint } = unlock( select( editorStore ) );
 		const { get } = select( preferencesStore );
@@ -65,6 +68,9 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					__experimentalOnPatternCategorySelection={
+						isRightSidebarOpen ? closeGeneralSidebar : undefined
+					}
 					ref={ libraryRef }
 				/>
 			</div>