@wordpress/editor 12.0.21 → 12.2.1-next.f435e9e01b.0

package/build-style/style.css

@@ -266,16 +266,6 @@
   padding-right: 8px;
   height: 61px;
   border-bottom: 1px solid #ddd;
-  display: flex;
-  align-items: center;
-  align-content: space-between;
-}
-.entities-saved-states__panel .entities-saved-states__panel-header .editor-entities-saved-states__save-button {
-  margin: auto;
-}
-.entities-saved-states__panel .entities-saved-states__panel-header .components-button.has-icon {
-  position: absolute;
-  right: 8px;
 }
 .entities-saved-states__panel .entities-saved-states__text-prompt {
   padding: 16px;
@@ -405,31 +395,23 @@
   border-radius: 0;
 }
 
-.editor-post-locked-modal {
-  height: auto;
-  padding-right: 10px;
-  padding-left: 10px;
-  padding-top: 10px;
-  max-width: 480px;
-}
-.editor-post-locked-modal .components-modal__header {
-  height: 36px;
+@media (min-width: 600px) {
+  .editor-post-locked-modal {
+    max-width: 480px;
+  }
 }
 .editor-post-locked-modal .components-modal__content {
-  height: auto;
+  display: flex;
 }
 
 .editor-post-locked-modal__buttons {
-  margin-top: 10px;
-}
-.editor-post-locked-modal__buttons .components-button {
-  margin-right: 5px;
+  margin-top: 24px;
 }
 
 .editor-post-locked-modal__avatar {
-  float: left;
-  margin: 5px;
-  margin-right: 15px;
+  border-radius: 2px;
+  margin-top: 16px;
+  margin-right: 24px;
 }
 
 .editor-post-publish-button__button.has-changes-dot::before {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.0.21",
+	"version": "12.2.1-next.f435e9e01b.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.17",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.3",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.10",
-		"@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.23",
-		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/server-side-render": "^3.0.20",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/wordcount": "^3.2.3",
+		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/api-fetch": "^6.0.1-next.f435e9e01b.0",
+		"@wordpress/block-editor": "^8.1.2-next.f435e9e01b.0",
+		"@wordpress/blocks": "^11.2.1-next.f435e9e01b.0",
+		"@wordpress/components": "^19.4.1-next.f435e9e01b.0",
+		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
+		"@wordpress/core-data": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/data": "^6.2.2-next.f435e9e01b.0",
+		"@wordpress/data-controls": "^2.3.1-next.f435e9e01b.0",
+		"@wordpress/date": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/deprecated": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/html-entities": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/media-utils": "^3.1.1-next.f435e9e01b.0",
+		"@wordpress/notices": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/reusable-blocks": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/rich-text": "^5.1.2-next.f435e9e01b.0",
+		"@wordpress/server-side-render": "^3.1.1-next.f435e9e01b.0",
+		"@wordpress/url": "^3.4.1-next.f435e9e01b.0",
+		"@wordpress/wordcount": "^3.3.1-next.f435e9e01b.0",
 		"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": "1246a52b9fdfecf592a9fa1d33a2804a6cc2d257"
+	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
 }

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,14 +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,13 +76,15 @@ export default function EntitiesSavedStates( { close } ) {
 		saveEditedEntityRecord,
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+
 	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
 		blockEditorStore
 	);
 
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		noticesStore
+	);
+
 	// To group entities by type.
 	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );
 
@@ -174,6 +175,8 @@ export default function EntitiesSavedStates( { close } ) {
 			);
 		}
 
+		__unstableMarkLastChangeAsPersistent();
+
 		Promise.all( pendingSavedRecords )
 			.then( ( values ) => {
 				if (
@@ -189,8 +192,6 @@ export default function EntitiesSavedStates( { close } ) {
 			.catch( ( error ) =>
 				createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` )
 			);
-
-		__unstableMarkLastChangeAsPersistent();
 	};
 
 	// Explicitly define this with no argument passed.  Using `close` on
@@ -207,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={
@@ -220,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;
 }