@wordpress/editor 13.30.0 → 13.32.0

package/src/components/block-settings-menu/plugin-block-settings-menu-item.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+
+const isEverySelectedBlockAllowed = ( selected, allowed ) =>
+	selected.filter( ( id ) => ! allowed.includes( id ) ).length === 0;
+
+/**
+ * Plugins may want to add an item to the menu either for every block
+ * or only for the specific ones provided in the `allowedBlocks` component property.
+ *
+ * If there are multiple blocks selected the item will be rendered if every block
+ * is of one allowed type (not necessarily the same).
+ *
+ * @param {string[]} selectedBlocks Array containing the names of the blocks selected
+ * @param {string[]} allowedBlocks  Array containing the names of the blocks allowed
+ * @return {boolean} Whether the item will be rendered or not.
+ */
+const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
+	! Array.isArray( allowedBlocks ) ||
+	isEverySelectedBlockAllowed( selectedBlocks, allowedBlocks );
+
+/**
+ * Renders a new item in the block settings menu.
+ *
+ * @param {Object}                props                 Component props.
+ * @param {Array}                 [props.allowedBlocks] An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.
+ * @param {WPBlockTypeIconRender} [props.icon]          The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.
+ * @param {string}                props.label           The menu item text.
+ * @param {Function}              props.onClick         Callback function to be executed when the user click the menu item.
+ * @param {boolean}               [props.small]         Whether to render the label or not.
+ * @param {string}                [props.role]          The ARIA role for the menu item.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
+ *
+ * function doOnClick(){
+ * 	// To be called when the user clicks the menu item.
+ * }
+ *
+ * function MyPluginBlockSettingsMenuItem() {
+ * 	return React.createElement(
+ * 		PluginBlockSettingsMenuItem,
+ * 		{
+ * 			allowedBlocks: [ 'core/paragraph' ],
+ * 			icon: 'dashicon-name',
+ * 			label: __( 'Menu item text' ),
+ * 			onClick: doOnClick,
+ * 		}
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
+ *
+ * const doOnClick = ( ) => {
+ *     // To be called when the user clicks the menu item.
+ * };
+ *
+ * const MyPluginBlockSettingsMenuItem = () => (
+ *     <PluginBlockSettingsMenuItem
+ * 		allowedBlocks={ [ 'core/paragraph' ] }
+ * 		icon='dashicon-name'
+ * 		label={ __( 'Menu item text' ) }
+ * 		onClick={ doOnClick } />
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginBlockSettingsMenuItem = ( {
+	allowedBlocks,
+	icon,
+	label,
+	onClick,
+	small,
+	role,
+} ) => (
+	<BlockSettingsMenuControls>
+		{ ( { selectedBlocks, onClose } ) => {
+			if ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {
+				return null;
+			}
+			return (
+				<MenuItem
+					onClick={ compose( onClick, onClose ) }
+					icon={ icon }
+					label={ small ? label : undefined }
+					role={ role }
+				>
+					{ ! small && label }
+				</MenuItem>
+			);
+		} }
+	</BlockSettingsMenuControls>
+);
+
+export default PluginBlockSettingsMenuItem;

package/src/components/commands/index.js

@@ -68,7 +68,7 @@ function useEditorCommandLoader() {
 		name: 'core/toggle-distraction-free',
 		label: isDistractionFree
 			? __( 'Exit Distraction Free' )
-			: __( 'Enter Distraction Free ' ),
+			: __( 'Enter Distraction Free' ),
 		callback: ( { close } ) => {
 			toggleDistractionFree();
 			close();

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 = [
@@ -74,7 +64,8 @@ export default function DocumentBar() {
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
 		} = select( editorStore );
-		const { getEditedEntityRecord, getIsResolving } = select( coreStore );
+		const { getEditedEntityRecord, isResolving: isResolvingSelector } =
+			select( coreStore );
 		const _postType = getCurrentPostType();
 		const _postId = getCurrentPostId();
 		const _document = getEditedEntityRecord(
@@ -86,13 +77,18 @@ export default function DocumentBar() {
 		return {
 			postType: _postType,
 			document: _document,
-			isResolving: getIsResolving(
+			isResolving: isResolvingSelector(
 				'getEditedEntityRecord',
 				'postType',
 				_postType,
 				_postId
 			),
-			templateIcon: _templateInfo.icon,
+			templateIcon: unlock( select( editorStore ) ).getPostIcon(
+				_postType,
+				{
+					area: _document?.area,
+				}
+			),
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -103,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;
@@ -176,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-outline/index.js

@@ -95,7 +95,8 @@ const computeOutlineHeadings = ( blocks = [] ) => {
 };
 
 const isEmptyHeading = ( heading ) =>
-	! heading.attributes.content || heading.attributes.content.length === 0;
+	! heading.attributes.content ||
+	heading.attributes.content.trim().length === 0;
 
 export default function DocumentOutline( {
 	onSelect,

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 {