@wordpress/editor 13.31.0 → 13.32.0

package/src/components/deprecated.js

@@ -94,6 +94,9 @@ function deprecateFunction( name, func ) {
 	};
 }
 
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichText` instead.
+ */
 const RichText = deprecateComponent( 'RichText', RootRichText, [ 'Content' ] );
 RichText.isEmpty = deprecateFunction(
 	'RichText.isEmpty',
@@ -101,167 +104,321 @@ RichText.isEmpty = deprecateFunction(
 );
 
 export { RichText };
+
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Autocomplete` instead.
+ */
 export const Autocomplete = deprecateComponent(
 	'Autocomplete',
 	RootAutocomplete
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.AlignmentToolbar` instead.
+ */
 export const AlignmentToolbar = deprecateComponent(
 	'AlignmentToolbar',
 	RootAlignmentToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockAlignmentToolbar` instead.
+ */
 export const BlockAlignmentToolbar = deprecateComponent(
 	'BlockAlignmentToolbar',
 	RootBlockAlignmentToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockControls` instead.
+ */
 export const BlockControls = deprecateComponent(
 	'BlockControls',
 	RootBlockControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockEdit` instead.
+ */
 export const BlockEdit = deprecateComponent( 'BlockEdit', RootBlockEdit );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockEditorKeyboardShortcuts` instead.
+ */
 export const BlockEditorKeyboardShortcuts = deprecateComponent(
 	'BlockEditorKeyboardShortcuts',
 	RootBlockEditorKeyboardShortcuts
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockFormatControls` instead.
+ */
 export const BlockFormatControls = deprecateComponent(
 	'BlockFormatControls',
 	RootBlockFormatControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockIcon` instead.
+ */
 export const BlockIcon = deprecateComponent( 'BlockIcon', RootBlockIcon );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockInspector` instead.
+ */
 export const BlockInspector = deprecateComponent(
 	'BlockInspector',
 	RootBlockInspector
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockList` instead.
+ */
 export const BlockList = deprecateComponent( 'BlockList', RootBlockList );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockMover` instead.
+ */
 export const BlockMover = deprecateComponent( 'BlockMover', RootBlockMover );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockNavigationDropdown` instead.
+ */
 export const BlockNavigationDropdown = deprecateComponent(
 	'BlockNavigationDropdown',
 	RootBlockNavigationDropdown
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockSelectionClearer` instead.
+ */
 export const BlockSelectionClearer = deprecateComponent(
 	'BlockSelectionClearer',
 	RootBlockSelectionClearer
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockSettingsMenu` instead.
+ */
 export const BlockSettingsMenu = deprecateComponent(
 	'BlockSettingsMenu',
 	RootBlockSettingsMenu
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockTitle` instead.
+ */
 export const BlockTitle = deprecateComponent( 'BlockTitle', RootBlockTitle );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockToolbar` instead.
+ */
 export const BlockToolbar = deprecateComponent(
 	'BlockToolbar',
 	RootBlockToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ColorPalette` instead.
+ */
 export const ColorPalette = deprecateComponent(
 	'ColorPalette',
 	RootColorPalette
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ContrastChecker` instead.
+ */
 export const ContrastChecker = deprecateComponent(
 	'ContrastChecker',
 	RootContrastChecker
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.CopyHandler` instead.
+ */
 export const CopyHandler = deprecateComponent( 'CopyHandler', RootCopyHandler );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.DefaultBlockAppender` instead.
+ */
 export const DefaultBlockAppender = deprecateComponent(
 	'DefaultBlockAppender',
 	RootDefaultBlockAppender
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.FontSizePicker` instead.
+ */
 export const FontSizePicker = deprecateComponent(
 	'FontSizePicker',
 	RootFontSizePicker
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Inserter` instead.
+ */
 export const Inserter = deprecateComponent( 'Inserter', RootInserter );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InnerBlocks` instead.
+ */
 export const InnerBlocks = deprecateComponent( 'InnerBlocks', RootInnerBlocks, [
 	'ButtonBlockAppender',
 	'DefaultBlockAppender',
 	'Content',
 ] );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InspectorAdvancedControls` instead.
+ */
 export const InspectorAdvancedControls = deprecateComponent(
 	'InspectorAdvancedControls',
 	RootInspectorAdvancedControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InspectorControls` instead.
+ */
 export const InspectorControls = deprecateComponent(
 	'InspectorControls',
 	RootInspectorControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.PanelColorSettings` instead.
+ */
 export const PanelColorSettings = deprecateComponent(
 	'PanelColorSettings',
 	RootPanelColorSettings
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.PlainText` instead.
+ */
 export const PlainText = deprecateComponent( 'PlainText', RootPlainText );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichTextShortcut` instead.
+ */
 export const RichTextShortcut = deprecateComponent(
 	'RichTextShortcut',
 	RootRichTextShortcut
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichTextToolbarButton` instead.
+ */
 export const RichTextToolbarButton = deprecateComponent(
 	'RichTextToolbarButton',
 	RootRichTextToolbarButton
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.__unstableRichTextInputEvent` instead.
+ */
 export const __unstableRichTextInputEvent = deprecateComponent(
 	'__unstableRichTextInputEvent',
 	__unstableRootRichTextInputEvent
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaPlaceholder` instead.
+ */
 export const MediaPlaceholder = deprecateComponent(
 	'MediaPlaceholder',
 	RootMediaPlaceholder
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaUpload` instead.
+ */
 export const MediaUpload = deprecateComponent( 'MediaUpload', RootMediaUpload );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaUploadCheck` instead.
+ */
 export const MediaUploadCheck = deprecateComponent(
 	'MediaUploadCheck',
 	RootMediaUploadCheck
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MultiSelectScrollIntoView` instead.
+ */
 export const MultiSelectScrollIntoView = deprecateComponent(
 	'MultiSelectScrollIntoView',
 	RootMultiSelectScrollIntoView
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.NavigableToolbar` instead.
+ */
 export const NavigableToolbar = deprecateComponent(
 	'NavigableToolbar',
 	RootNavigableToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ObserveTyping` instead.
+ */
 export const ObserveTyping = deprecateComponent(
 	'ObserveTyping',
 	RootObserveTyping
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.SkipToSelectedBlock` instead.
+ */
 export const SkipToSelectedBlock = deprecateComponent(
 	'SkipToSelectedBlock',
 	RootSkipToSelectedBlock
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLInput` instead.
+ */
 export const URLInput = deprecateComponent( 'URLInput', RootURLInput );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLInputButton` instead.
+ */
 export const URLInputButton = deprecateComponent(
 	'URLInputButton',
 	RootURLInputButton
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLPopover` instead.
+ */
 export const URLPopover = deprecateComponent( 'URLPopover', RootURLPopover );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Warning` instead.
+ */
 export const Warning = deprecateComponent( 'Warning', RootWarning );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.WritingFlow` instead.
+ */
 export const WritingFlow = deprecateComponent( 'WritingFlow', RootWritingFlow );
 
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+ */
 export const createCustomColorsHOC = deprecateFunction(
 	'createCustomColorsHOC',
 	rootCreateCustomColorsHOC
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorClassName` instead.
+ */
 export const getColorClassName = deprecateFunction(
 	'getColorClassName',
 	rootGetColorClassName
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorObjectByAttributeValues` instead.
+ */
 export const getColorObjectByAttributeValues = deprecateFunction(
 	'getColorObjectByAttributeValues',
 	rootGetColorObjectByAttributeValues
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorObjectByColorValue` instead.
+ */
 export const getColorObjectByColorValue = deprecateFunction(
 	'getColorObjectByColorValue',
 	rootGetColorObjectByColorValue
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getFontSize` instead.
+ */
 export const getFontSize = deprecateFunction( 'getFontSize', rootGetFontSize );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getFontSizeClass` instead.
+ */
 export const getFontSizeClass = deprecateFunction(
 	'getFontSizeClass',
 	rootGetFontSizeClass
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+ */
 export const withColorContext = deprecateFunction(
 	'withColorContext',
 	rootWithColorContext
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.withColors` instead.
+ */
 export const withColors = deprecateFunction( 'withColors', rootWithColors );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.withFontSizes` instead.
+ */
 export const withFontSizes = deprecateFunction(
 	'withFontSizes',
 	rootWithFontSizes

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/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,8 @@
 /**
  * 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 { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 
@@ -38,73 +37,22 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 	}, [] );
 
-	const { getNotices } = useSelect( noticesStore );
-
-	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-
 	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 ) {
-				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 ] );
 
 	return (
 		<ConfirmDialog
@@ -119,7 +67,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.'
+			) }
 		</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,
@@ -313,6 +314,9 @@ function EditorCanvas( {
 		useFlashEditableBlocks( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (