@wordpress/editor 12.0.18 → 12.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.0.18",
+	"version": "12.2.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,42 +31,43 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/autop": "^3.2.3",
-		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.15",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.2",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.9",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/data-controls": "^2.2.8",
-		"@wordpress/date": "^4.2.3",
-		"@wordpress/deprecated": "^3.2.3",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keyboard-shortcuts": "^3.0.7",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/media-utils": "^3.0.5",
-		"@wordpress/notices": "^3.2.8",
-		"@wordpress/reusable-blocks": "^3.0.21",
-		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/server-side-render": "^3.0.19",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/wordcount": "^3.2.3",
+		"@wordpress/a11y": "^3.3.1",
+		"@wordpress/api-fetch": "^6.0.1",
+		"@wordpress/block-editor": "^8.1.1",
+		"@wordpress/blocks": "^11.2.1",
+		"@wordpress/components": "^19.4.0",
+		"@wordpress/compose": "^5.1.1",
+		"@wordpress/core-data": "^4.1.1",
+		"@wordpress/data": "^6.2.1",
+		"@wordpress/data-controls": "^2.3.1",
+		"@wordpress/date": "^4.3.1",
+		"@wordpress/deprecated": "^3.3.1",
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/hooks": "^3.3.1",
+		"@wordpress/html-entities": "^3.3.1",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/icons": "^6.3.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.1",
+		"@wordpress/keycodes": "^3.3.1",
+		"@wordpress/media-utils": "^3.1.1",
+		"@wordpress/notices": "^3.3.1",
+		"@wordpress/reusable-blocks": "^3.1.1",
+		"@wordpress/rich-text": "^5.1.1",
+		"@wordpress/server-side-render": "^3.1.1",
+		"@wordpress/url": "^3.4.1",
+		"@wordpress/wordcount": "^3.3.1",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^3.0.0"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8c2cd6a5fd8781266da858a2e7d1bdd9a3a279e4"
+	"gitHead": "2e4922861e49f5a090f9dc52056165092cfba163"
 }

package/src/components/autosave-monitor/test/index.js

@@ -12,7 +12,7 @@ describe( 'AutosaveMonitor', () => {
 	let wrapper;
 	let setAutosaveTimerSpy;
 	beforeEach( () => {
-		jest.useFakeTimers();
+		jest.useFakeTimers( 'legacy' );
 		setAutosaveTimerSpy = jest.spyOn(
 			AutosaveMonitor.prototype,
 			'setAutosaveTimer'

package/src/components/deprecated.js

@@ -48,7 +48,6 @@ import {
 	MultiSelectScrollIntoView as RootMultiSelectScrollIntoView,
 	NavigableToolbar as RootNavigableToolbar,
 	ObserveTyping as RootObserveTyping,
-	PreserveScrollInReorder as RootPreserveScrollInReorder,
 	SkipToSelectedBlock as RootSkipToSelectedBlock,
 	URLInput as RootURLInput,
 	URLInputButton as RootURLInputButton,
@@ -67,6 +66,7 @@ function deprecateComponent( name, Wrapped, staticsToHoist = [] ) {
 		deprecated( 'wp.editor.' + name, {
 			since: '5.3',
 			alternative: 'wp.blockEditor.' + name,
+			version: '6.2',
 		} );
 
 		return <Wrapped ref={ ref } { ...props } />;
@@ -87,6 +87,7 @@ function deprecateFunction( name, func ) {
 		deprecated( 'wp.editor.' + name, {
 			since: '5.3',
 			alternative: 'wp.blockEditor.' + name,
+			version: '6.2',
 		} );
 
 		return func( ...args );
@@ -222,10 +223,6 @@ export const ObserveTyping = deprecateComponent(
 	'ObserveTyping',
 	RootObserveTyping
 );
-export const PreserveScrollInReorder = deprecateComponent(
-	'PreserveScrollInReorder',
-	RootPreserveScrollInReorder
-);
 export const SkipToSelectedBlock = deprecateComponent(
 	'SkipToSelectedBlock',
 	RootSkipToSelectedBlock

package/src/components/editor-help/add-blocks.native.js

@@ -24,7 +24,7 @@ const AddBlocks = () => {
 			<View style={ styles.helpDetailContainer }>
 				<HelpDetailBodyText
 					text={ __(
-						'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '
+						'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left.'
 					) }
 				/>
 				<HelpDetailBodyText

package/src/components/editor-help/index.native.js

@@ -197,7 +197,7 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 								content={ view }
 								label={ label }
 								options={ {
-									gestureEnabled: true,
+									gestureEnabled: false,
 									...TransitionPresets.DefaultTransition,
 								} }
 							/>

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

@@ -6,13 +6,13 @@ import { some, groupBy } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, Flex, FlexItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
-import { close as closeIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -77,6 +77,10 @@ export default function EntitiesSavedStates( { close } ) {
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
+	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
+		blockEditorStore
+	);
+
 	const { createSuccessNotice, createErrorNotice } = useDispatch(
 		noticesStore
 	);
@@ -171,6 +175,8 @@ export default function EntitiesSavedStates( { close } ) {
 			);
 		}
 
+		__unstableMarkLastChangeAsPersistent();
+
 		Promise.all( pendingSavedRecords )
 			.then( ( values ) => {
 				if (
@@ -202,8 +208,10 @@ export default function EntitiesSavedStates( { close } ) {
 			{ ...saveDialogProps }
 			className="entities-saved-states__panel"
 		>
-			<div className="entities-saved-states__panel-header">
-				<Button
+			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
 					disabled={
@@ -215,13 +223,16 @@ export default function EntitiesSavedStates( { close } ) {
 					className="editor-entities-saved-states__save-button"
 				>
 					{ __( 'Save' ) }
-				</Button>
-				<Button
-					icon={ closeIcon }
+				</FlexItem>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
 					onClick={ dismissPanel }
-					label={ __( 'Close panel' ) }
-				/>
-			</div>
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
+			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
 				<strong>{ __( 'Are you ready to save?' ) }</strong>

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

@@ -41,18 +41,6 @@
 		padding-right: $grid-unit-10;
 		height: $header-height + $border-width;
 		border-bottom: $border-width solid $gray-300;
-		display: flex;
-		align-items: center;
-		align-content: space-between;
-
-		.editor-entities-saved-states__save-button {
-			margin: auto;
-		}
-
-		.components-button.has-icon {
-			position: absolute;
-			right: $grid-unit-10;
-		}
 	}
 
 	.entities-saved-states__text-prompt {

package/src/components/index.js

@@ -48,6 +48,8 @@ export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
 export { default as PostTaxonomies } from './post-taxonomies';
+export { default as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
+export { default as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';

package/src/components/post-format/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, includes, union } from 'lodash';
+import { find, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -57,20 +57,19 @@ export default function PostFormat() {
 			return {
 				postFormat: _postFormat ?? 'standard',
 				suggestedFormat: getSuggestedPostFormat(),
-				// Ensure current format is always in the set.
-				// The current format may not be a format supported by the theme.
-				supportedFormats: union(
-					[ _postFormat ],
-					get( themeSupports, [ 'formats' ], [] )
-				),
+				supportedFormats: themeSupports.formats,
 			};
 		},
 		[]
 	);
 
-	const formats = POST_FORMATS.filter( ( format ) =>
-		includes( supportedFormats, format.id )
-	);
+	const formats = POST_FORMATS.filter( ( format ) => {
+		// Ensure current format is always in the set.
+		// The current format may not be a format supported by the theme.
+		return (
+			includes( supportedFormats, format.id ) || postFormat === format.id
+		);
+	} );
 	const suggestion = find(
 		formats,
 		( format ) => format.id === suggestedFormat

package/src/components/post-locked-modal/index.js

@@ -7,10 +7,16 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Modal, Button } from '@wordpress/components';
+import {
+	Modal,
+	Button,
+	ExternalLink,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
-import { useEffect } from '@wordpress/element';
+import { useEffect, createInterpolateElement } from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -19,7 +25,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { getWPAdminURL } from '../../utils/url';
-import PostPreviewButton from '../post-preview-button';
 import { store as editorStore } from '../../store';
 
 export default function PostLockedModal() {
@@ -34,6 +39,7 @@ export default function PostLockedModal() {
 		postLockUtils,
 		activePostLock,
 		postType,
+		previewLink,
 	} = useSelect( ( select ) => {
 		const {
 			isPostLocked,
@@ -42,6 +48,7 @@ export default function PostLockedModal() {
 			getCurrentPostId,
 			getActivePostLock,
 			getEditedPostAttribute,
+			getEditedPostPreviewLink,
 			getEditorSettings,
 		} = select( editorStore );
 		const { getPostType } = select( coreStore );
@@ -53,6 +60,7 @@ export default function PostLockedModal() {
 			postLockUtils: getEditorSettings().postLockUtils,
 			activePostLock: getActivePostLock(),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			previewLink: getEditedPostPreviewLink(),
 		};
 	}, [] );
 
@@ -94,7 +102,8 @@ export default function PostLockedModal() {
 					isLocked: true,
 					isTakeover: true,
 					user: {
-						avatar: received.lock_error.avatar_src,
+						name: received.lock_error.name,
+						avatar: received.lock_error.avatar_src_2x,
 					},
 				} );
 			} else if ( received.new_lock ) {
@@ -158,13 +167,13 @@ export default function PostLockedModal() {
 	const allPostsUrl = getWPAdminURL( 'edit.php', {
 		post_type: get( postType, [ 'slug' ] ),
 	} );
-	const allPostsLabel = __( 'Exit the Editor' );
+	const allPostsLabel = __( 'Exit editor' );
 	return (
 		<Modal
 			title={
 				isTakeover
-					? __( 'Someone else has taken over this post.' )
-					: __( 'This post is already being edited.' )
+					? __( 'Someone else has taken over this post' )
+					: __( 'This post is already being edited' )
 			}
 			focusOnMount={ true }
 			shouldCloseOnClickOutside={ false }
@@ -177,58 +186,88 @@ export default function PostLockedModal() {
 					src={ userAvatar }
 					alt={ __( 'Avatar' ) }
 					className="editor-post-locked-modal__avatar"
+					width={ 64 }
+					height={ 64 }
 				/>
 			) }
-			{ !! isTakeover && (
-				<div>
-					<div>
-						{ userDisplayName
-							? sprintf(
-									/* translators: %s: user's display name */
-									__(
-										'%s now has editing control of this post. Don’t worry, your changes up to this moment have been saved.'
+			<div>
+				{ !! isTakeover && (
+					<p>
+						{ createInterpolateElement(
+							userDisplayName
+								? sprintf(
+										/* translators: %s: user's display name */
+										__(
+											'<strong>%s</strong> now has editing control of this posts (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+										),
+										userDisplayName
+								  )
+								: __(
+										'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+								  ),
+							{
+								strong: <strong />,
+								PreviewLink: (
+									<ExternalLink href={ previewLink }>
+										{ __( 'preview' ) }
+									</ExternalLink>
+								),
+							}
+						) }
+					</p>
+				) }
+				{ ! isTakeover && (
+					<>
+						<p>
+							{ createInterpolateElement(
+								userDisplayName
+									? sprintf(
+											/* translators: %s: user's display name */
+											__(
+												'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+											),
+											userDisplayName
+									  )
+									: __(
+											'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+									  ),
+								{
+									strong: <strong />,
+									PreviewLink: (
+										<ExternalLink href={ previewLink }>
+											{ __( 'preview' ) }
+										</ExternalLink>
 									),
-									userDisplayName
-							  )
-							: __(
-									'Another user now has editing control of this post. Don’t worry, your changes up to this moment have been saved.'
-							  ) }
-					</div>
-
-					<div className="editor-post-locked-modal__buttons">
+								}
+							) }
+						</p>
+						<p>
+							{ __(
+								'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
+							) }
+						</p>
+					</>
+				) }
+
+				<Flex
+					className="editor-post-locked-modal__buttons"
+					justify="flex-end"
+					expanded={ false }
+				>
+					{ ! isTakeover && (
+						<FlexItem>
+							<Button variant="tertiary" href={ unlockUrl }>
+								{ __( 'Take over' ) }
+							</Button>
+						</FlexItem>
+					) }
+					<FlexItem>
 						<Button variant="primary" href={ allPostsUrl }>
 							{ allPostsLabel }
 						</Button>
-					</div>
-				</div>
-			) }
-			{ ! isTakeover && (
-				<div>
-					<div>
-						{ userDisplayName
-							? sprintf(
-									/* translators: %s: user's display name */
-									__(
-										'%s is currently working on this post, which means you cannot make changes, unless you take over.'
-									),
-									userDisplayName
-							  )
-							: __(
-									'Another user is currently working on this post, which means you cannot make changes, unless you take over.'
-							  ) }
-					</div>
-
-					<div className="editor-post-locked-modal__buttons">
-						<Button variant="secondary" href={ allPostsUrl }>
-							{ allPostsLabel }
-						</Button>
-						<PostPreviewButton />
-						<Button variant="primary" href={ unlockUrl }>
-							{ __( 'Take Over' ) }
-						</Button>
-					</div>
-				</div>
-			) }
+					</FlexItem>
+				</Flex>
+			</div>
 		</Modal>
 	);
 }

package/src/components/post-locked-modal/style.scss

@@ -1,29 +1,19 @@
 .editor-post-locked-modal {
-	height: auto;
-	padding-right: 10px;
-	padding-left: 10px;
-	padding-top: 10px;
-	max-width: 480px;
-
-	.components-modal__header {
-		height: 36px;
+	@include break-small() {
+		max-width: $break-mobile;
 	}
 
 	.components-modal__content {
-		height: auto;
+		display: flex;
 	}
 }
 
 .editor-post-locked-modal__buttons {
-	margin-top: 10px;
-
-	.components-button {
-		margin-right: 5px;
-	}
+	margin-top: $grid-unit-30;
 }
 
 .editor-post-locked-modal__avatar {
-	float: left;
-	margin: 5px;
-	margin-right: 15px;
+	border-radius: $radius-block-ui;
+	margin-top: $grid-unit-20;
+	margin-right: $grid-unit-30;
 }

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { some } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { PanelBody } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HierarchicalTermSelector from '../post-taxonomies/hierarchical-term-selector';
+import { store as editorStore } from '../../store';
+
+function MaybeCategoryPanel() {
+	const hasNoCategory = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const categoriesTaxonomy = select( coreStore ).getTaxonomy(
+			'category'
+		);
+		const defaultCategorySlug = 'uncategorized';
+		const defaultCategory = select( coreStore ).getEntityRecords(
+			'taxonomy',
+			'category',
+			{
+				slug: defaultCategorySlug,
+			}
+		)?.[ 0 ];
+		const postTypeSupportsCategories =
+			categoriesTaxonomy &&
+			some( categoriesTaxonomy.types, ( type ) => type === postType );
+		const categories =
+			categoriesTaxonomy &&
+			select( editorStore ).getEditedPostAttribute(
+				categoriesTaxonomy.rest_base
+			);
+
+		// This boolean should return true if everything is loaded
+		// ( categoriesTaxonomy, defaultCategory )
+		// and the post has not been assigned a category different than "uncategorized".
+		return (
+			!! categoriesTaxonomy &&
+			!! defaultCategory &&
+			postTypeSupportsCategories &&
+			( categories?.length === 0 ||
+				( categories?.length === 1 &&
+					defaultCategory.id === categories[ 0 ] ) )
+		);
+	}, [] );
+	const [ shouldShowPanel, setShouldShowPanel ] = useState( false );
+	useEffect( () => {
+		// We use state to avoid hiding the panel if the user edits the categories
+		// and adds one within the panel itself (while visible).
+		if ( hasNoCategory ) {
+			setShouldShowPanel( true );
+		}
+	}, [ hasNoCategory ] );
+
+	if ( ! shouldShowPanel ) {
+		return null;
+	}
+
+	const panelBodyTitle = [
+		__( 'Suggestion:' ),
+		<span className="editor-post-publish-panel__link" key="label">
+			{ __( 'Assign a category' ) }
+		</span>,
+	];
+
+	return (
+		<PanelBody initialOpen={ false } title={ panelBodyTitle }>
+			<p>
+				{ __(
+					'Categories provide a helpful way to group related posts together and to quickly tell readers what a post is about.'
+				) }
+			</p>
+			<HierarchicalTermSelector slug="category" />
+		</PanelBody>
+	);
+}
+
+export default MaybeCategoryPanel;

package/src/components/post-publish-panel/prepublish.js

@@ -24,6 +24,7 @@ import PostScheduleLabel from '../post-schedule/label';
 import MaybeTagsPanel from './maybe-tags-panel';
 import MaybePostFormatPanel from './maybe-post-format-panel';
 import { store as editorStore } from '../../store';
+import MaybeCategoryPanel from './maybe-category-panel';
 
 function PostPublishPanelPrepublish( { children } ) {
 	const {
@@ -145,6 +146,7 @@ function PostPublishPanelPrepublish( { children } ) {
 			) }
 			<MaybePostFormatPanel />
 			<MaybeTagsPanel />
+			<MaybeCategoryPanel />
 			{ children }
 		</div>
 	);

package/src/components/post-taxonomies/README.md

@@ -33,7 +33,31 @@ function customizeProductTypeSelector( OriginalComponent ) {
 
 wp.hooks.addFilter(
 	'editor.PostTaxonomyType',
-	'my-custom-plugin',
+	'my-plugin/set-custom-term-selector',
 	customizeProductTypeSelector
 );
 ```
+
+Or, to use the hierarchical term selector with a non-hierarchical taxonomy `track`,
+you can set the `HierarchicalTermSelector` component as shown below.
+
+```js
+const el = wp.element.createElement;
+const HierarchicalTermSelector = wp.editor.PostTaxonomiesHierarchicalTermSelector;
+
+function customizeTrackSelector( OriginalComponent ) {
+	return function ( props ) {
+		if ( props.slug === 'track' ) {
+			return el( HierarchicalTermSelector, props );
+		} else {
+			return el( OriginalComponent, props );
+		}
+	};
+}
+
+wp.hooks.addFilter(
+	'editor.PostTaxonomyType',
+	'my-plugin/set-hierarchical-term-selector',
+	customizeTrackSelector
+);
+```