@wordpress/editor 14.48.1 → 14.49.0

package/src/components/collab-sidebar/style.scss

@@ -75,10 +75,30 @@
 	color: $gray-700;
 }
 
+.editor-collab-sidebar-panel__show-more-button {
+	width: fit-content;
+	color: var(--wpds-color-foreground-interactive-brand);
+	cursor: var(--wpds-cursor-control);
+
+	&:hover,
+	&:focus,
+	&:active {
+		color: var(--wpds-color-foreground-interactive-brand-active);
+	}
+}
+
 .editor-collab-sidebar-panel__note-content {
 	p:last-child {
 		margin-bottom: 0;
 	}
+
+	&.is-collapsed {
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
 }
 
 .editor-collab-sidebar-panel__user-avatar {

package/src/components/collaborators-presence/avatar/component.tsx

@@ -12,7 +12,6 @@ extend( [ a11yPlugin ] );
  */
 import { Icon as WCIcon } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/collaborators-presence/avatar/test/index.tsx

@@ -7,7 +7,6 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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

@@ -141,6 +141,8 @@ export default function DocumentBar( props ) {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const isReducedMotion = useReducedMotion();
 
+	const hasShortcut = ! window.__experimentalAdminBarInEditor;
+
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const hasBackButton =
 		!! onNavigateToPreviousEntityRecord || !! unlockedPatternInfo;
@@ -175,6 +177,7 @@ export default function DocumentBar( props ) {
 		<div
 			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
+				'has-shortcut': hasShortcut,
 			} ) }
 		>
 			<AnimatePresence>
@@ -267,9 +270,11 @@ export default function DocumentBar( props ) {
 								) }
 						</WCText>
 					</motion.div>
-					<span className="editor-document-bar__shortcut">
-						{ displayShortcut.primary( 'k' ) }
-					</span>
+					{ hasShortcut && (
+						<span className="editor-document-bar__shortcut">
+							{ displayShortcut.primary( 'k' ) }
+						</span>
+					) }
 				</Button>
 			) }
 		</div>

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

@@ -55,8 +55,10 @@
 	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	@include break-medium() {
-		padding-left: $grid-unit-30;
+	.editor-document-bar.has-shortcut & {
+		@include break-medium() {
+			padding-left: $grid-unit-30;
+		}
 	}
 
 	h1 {

package/src/components/global-keyboard-shortcuts/index.js

@@ -41,6 +41,7 @@ export default function EditorKeyboardShortcuts() {
 		isPostSavingLocked,
 		isListViewOpened,
 		getEditorMode,
+		isSavingNonPostEntityChanges,
 	} = useSelect( editorStore );
 
 	useShortcut(
@@ -75,7 +76,7 @@ export default function EditorKeyboardShortcuts() {
 		/**
 		 * Do not save the post if post saving is locked.
 		 */
-		if ( isPostSavingLocked() ) {
+		if ( isPostSavingLocked() || isSavingNonPostEntityChanges() ) {
 			return;
 		}
 

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

@@ -3,7 +3,7 @@
  */
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { ifCondition, usePrevious } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
@@ -53,19 +53,14 @@ const hasSessionStorageSupport = () => {
  * restore a local autosave, if one exists.
  */
 function useAutosaveNotice() {
-	const { postId, isEditedPostNew, hasRemoteAutosave } = useSelect(
+	const registry = useRegistry();
+	const { postId, isEditedPostNew } = useSelect(
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave:
-				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
-	const { getEditedPostAttribute } = useSelect( editorStore );
-
-	const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
-	const { editPost, resetEditorBlocks } = useDispatch( editorStore );
 
 	useEffect( () => {
 		let localAutosave = localAutosaveGet( postId, isEditedPostNew );
@@ -83,24 +78,31 @@ function useAutosaveNotice() {
 		const { post_title: title, content, excerpt } = localAutosave;
 		const edits = { title, content, excerpt };
 
-		{
-			// Only display a notice if there is a difference between what has been
-			// saved and that which is stored in sessionStorage.
-			const hasDifference = Object.keys( edits ).some( ( key ) => {
-				return edits[ key ] !== getEditedPostAttribute( key );
-			} );
-
-			if ( ! hasDifference ) {
-				// If there is no difference, it can be safely ejected from storage.
-				localAutosaveClear( postId, isEditedPostNew );
-				return;
-			}
+		const { getEditedPostAttribute, getEditorSettings } =
+			registry.select( editorStore );
+
+		// Only display a notice if there is a difference between what has been
+		// saved and that which is stored in sessionStorage.
+		const hasDifference = Object.keys( edits ).some( ( key ) => {
+			return edits[ key ] !== getEditedPostAttribute( key );
+		} );
+
+		if ( ! hasDifference ) {
+			// If there is no difference, it can be safely ejected from storage.
+			localAutosaveClear( postId, isEditedPostNew );
+			return;
 		}
 
+		const hasRemoteAutosave = !! getEditorSettings().autosave;
 		if ( hasRemoteAutosave ) {
 			return;
 		}
 
+		const { createWarningNotice, removeNotice } =
+			registry.dispatch( noticesStore );
+		const { editPost, resetEditorBlocks } =
+			registry.dispatch( editorStore );
+
 		const id = 'wpEditorAutosaveRestore';
 
 		createWarningNotice(
@@ -125,7 +127,7 @@ function useAutosaveNotice() {
 				],
 			}
 		);
-	}, [ isEditedPostNew, postId ] );
+	}, [ registry, postId, isEditedPostNew ] );
 }
 
 /**

package/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -19,6 +19,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
           <svg
             aria-hidden="true"
             class="components-panel__arrow"
+            fill="currentColor"
             focusable="false"
             height="24"
             viewBox="0 0 24 24"

package/src/components/post-card-panel/index.js

@@ -168,7 +168,7 @@ export default function PostCardPanel( {
 					{ sprintf(
 						// translators: %s: Name of the plural post type e.g: "Posts".
 						__( 'Changes will be applied to all selected %s.' ),
-						labels?.name.toLowerCase()
+						labels?.name?.toLowerCase()
 					) }
 				</WCText>
 			) }

package/src/components/post-publish-button/index.js

@@ -48,7 +48,7 @@ export function PostPublishButton( {
 			isPublishable: store.isEditedPostPublishable(),
 			isPublished: store.isCurrentPostPublished(),
 			hasPublishAction:
-				store.getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+				!! store.getCurrentPost()?._links?.[ 'wp:action-publish' ],
 			postType: store.getCurrentPostType(),
 			postId: store.getCurrentPostId(),
 			postStatus: store.getEditedPostAttribute( 'status' ),
@@ -103,18 +103,21 @@ export function PostPublishButton( {
 
 	const isButtonDisabled =
 		isPostSavingLocked ||
+		// Disable while a non-post entity (e.g. a newly created term) is mid-save.
+		isSavingNonPostEntityChanges ||
 		( ( isSaving ||
 			! isSaveable ||
 			( ! isPublishable && ! forceIsDirty ) ) &&
-			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
+			! hasNonPostEntityChanges );
 
 	const isToggleDisabled =
 		isPostSavingLocked ||
+		isSavingNonPostEntityChanges ||
 		( ( isPublished ||
 			isSaving ||
 			! isSaveable ||
 			( ! isPublishable && ! forceIsDirty ) ) &&
-			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges ) );
+			! hasNonPostEntityChanges );
 
 	// If the new status has not changed explicitly, we derive it from
 	// other factors, like having a publish action, etc.. We need to preserve

package/src/components/post-publish-button/test/index.js

@@ -89,6 +89,19 @@ describe( 'PostPublishButton', () => {
 			);
 		} );
 
+		it( 'should be true if a non-post entity is being saved', () => {
+			mockSelector( 'isEditedPostPublishable', true );
+			mockSelector( 'isEditedPostSaveable', true );
+			mockSelector( 'isSavingNonPostEntityChanges', true );
+
+			render( <PostPublishButton /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-disabled',
+				'true'
+			);
+		} );
+
 		it( 'should be false if post is saveable but not publishable and forceIsDirty is true', () => {
 			mockSelector( 'isEditedPostSaveable', true );
 			mockSelector( 'isEditedPostPublishable', false );

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

@@ -136,7 +136,6 @@ export default function PostPublishPanelPostpublish( {
 				</p>
 				<div className="post-publish-panel__postpublish-post-address-container">
 					<TextControl
-						__next40pxDefaultSize
 						className="post-publish-panel__postpublish-post-address"
 						readOnly
 						label={ sprintf(

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -66,6 +66,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -134,7 +135,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input is-next-40px-default-size"
+                  class="components-text-control__input"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -168,6 +169,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               </span>
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -291,6 +293,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -362,7 +365,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input is-next-40px-default-size"
+                  class="components-text-control__input"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -521,6 +524,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           <svg
             aria-hidden="true"
             class="components-site-icon"
+            fill="currentColor"
             focusable="false"
             height="36px"
             viewBox="-2 -2 24 24"
@@ -675,6 +679,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           <svg
             aria-hidden="true"
             class="components-site-icon"
+            fill="currentColor"
             focusable="false"
             height="36px"
             viewBox="-2 -2 24 24"

package/src/components/post-revisions-preview/diff-markers.js

@@ -15,7 +15,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/post-revisions-timeline/index.js

@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { DataViewsPicker, filterSortAndPaginate } from '@wordpress/dataviews';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { authorField } from '@wordpress/fields';
+import { Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { PostContentInformationUI } from '../post-content-information';
+
+const PAGE_SIZE = 10;
+const EMPTY_ARRAY = [];
+const defaultLayouts = { pickerActivity: true };
+const baseView = {
+	type: 'pickerActivity',
+	titleField: 'date',
+	descriptionField: 'details',
+	fields: [ 'author' ],
+	layout: { density: 'compact' },
+	page: 1,
+	perPage: PAGE_SIZE,
+};
+
+const DAY_IN_MILLISECONDS = 86400000;
+
+function getDisplayDate( value ) {
+	const dateNowInMs = getDate( null ).getTime();
+	const date = getDate( value ?? null );
+	return dateNowInMs - date.getTime() > DAY_IN_MILLISECONDS
+		? dateI18n( getSettings().formats.datetimeAbbreviated, date )
+		: humanTimeDiff( date );
+}
+
+export default function PostRevisionsTimeline() {
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+	const [ view, setView ] = useState( baseView );
+
+	const { revisions, revisionKey, currentRevisionId, currentRevision } =
+		useSelect( ( select ) => {
+			const { getCurrentPostType } = select( editorStore );
+			const {
+				getCurrentRevisionId: _getCurrentRevisionId,
+				getCurrentRevision,
+				getRevisionPage,
+				getPageRevisions,
+			} = unlock( select( editorStore ) );
+			const { getEntityConfig } = select( coreStore );
+
+			const _postType = getCurrentPostType();
+			const entityConfig = getEntityConfig( 'postType', _postType );
+			const _revisionKey = entityConfig?.revisionKey || 'id';
+			const _currentRevisionId = _getCurrentRevisionId();
+
+			return {
+				// Same desc-ordered window the header slider renders (warm cache).
+				revisions: getPageRevisions( getRevisionPage() ),
+				revisionKey: _revisionKey,
+				currentRevisionId: _currentRevisionId,
+				currentRevision: _currentRevisionId
+					? getCurrentRevision()
+					: undefined,
+			};
+		}, [] );
+
+	const postContent = currentRevision?.content?.raw;
+
+	const isLoading = ! revisions;
+
+	const fields = useMemo(
+		() => [
+			{
+				id: 'date',
+				label: __( 'Date' ),
+				// Return the humanized label the row renders so the picker
+				// option's accessible name announces e.g. "5 minutes ago"
+				// instead of the raw ISO timestamp.
+				getValue: ( { item } ) => getDisplayDate( item.date ),
+				render: ( { item } ) => (
+					<Text
+						variant="heading-sm"
+						render={ <time dateTime={ item.date } /> }
+					>
+						{ getDisplayDate( item.date ) }
+					</Text>
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			authorField,
+			{
+				id: 'details',
+				label: __( 'Details' ),
+				render: ( { item } ) => {
+					if (
+						String( item[ revisionKey ] ) !==
+						String( currentRevisionId )
+					) {
+						return null;
+					}
+					return (
+						<PostContentInformationUI postContent={ postContent } />
+					);
+				},
+				enableSorting: false,
+				enableHiding: false,
+			},
+		],
+		[ revisionKey, currentRevisionId, postContent ]
+	);
+
+	const { data: shownRevisions, paginationInfo } = useMemo(
+		() => filterSortAndPaginate( revisions || EMPTY_ARRAY, view, fields ),
+		[ revisions, view, fields ]
+	);
+
+	// Keep the selected revision visible: when it changes (e.g. the slider
+	// scrubs), jump to the client-side page that contains it. Keyed on the
+	// selection/data, not view.page, so manual paging stays free browsing.
+	useEffect( () => {
+		if ( ! currentRevisionId || ! revisions ) {
+			return;
+		}
+		const index = revisions.findIndex(
+			( r ) => String( r[ revisionKey ] ) === String( currentRevisionId )
+		);
+		if ( index < 0 ) {
+			return;
+		}
+		const page = Math.floor( index / view.perPage ) + 1;
+		setView( ( v ) => ( v.page === page ? v : { ...v, page } ) );
+	}, [ currentRevisionId, revisions, revisionKey, view.perPage ] );
+
+	const selection = useMemo(
+		() =>
+			currentRevisionId ? [ String( currentRevisionId ) ] : EMPTY_ARRAY,
+		[ currentRevisionId ]
+	);
+
+	const onChangeSelection = useCallback(
+		( newSelection ) => {
+			// Revisions mode always keeps one revision selected. Clicking the
+			// active revision yields an empty selection, which we ignore so the
+			// timeline never ends up with nothing selected.
+			if ( newSelection.length === 0 ) {
+				return;
+			}
+			const selectedId = newSelection[ newSelection.length - 1 ];
+			setCurrentRevisionId( Number( selectedId ) );
+		},
+		[ setCurrentRevisionId ]
+	);
+
+	const getItemId = useCallback(
+		( item ) => String( item[ revisionKey ] ),
+		[ revisionKey ]
+	);
+
+	return (
+		<div className="editor-post-revisions-timeline">
+			<DataViewsPicker
+				view={ view }
+				onChangeView={ setView }
+				fields={ fields }
+				data={ shownRevisions }
+				isLoading={ isLoading }
+				paginationInfo={ paginationInfo }
+				defaultLayouts={ defaultLayouts }
+				getItemId={ getItemId }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+			>
+				<DataViewsPicker.Layout />
+				<DataViewsPicker.Footer />
+			</DataViewsPicker>
+		</div>
+	);
+}

package/src/components/post-revisions-timeline/style.scss

@@ -0,0 +1,43 @@
+// Give the revisions inspector a bounded height so the timeline scrolls
+// internally and the picker's pagination stays pinned to the bottom.
+//
+// The timeline only renders in revisions mode, so its ancestors are scoped
+// with `:has()` — keeping this layout out of the generic editor sidebar.
+.interface-complementary-area:has(.editor-post-revisions-timeline) {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	// The tabs header keeps its natural height.
+	.editor-sidebar__panel-tabs {
+		flex-shrink: 0;
+	}
+}
+
+.editor-sidebar__panel:has(.editor-post-revisions-timeline) {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+
+	// The document tab panel hands its bounded height down to the timeline.
+	[role="tabpanel"]:has(.editor-post-revisions-timeline) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+	}
+
+	// Cap only the post-meta diff content so a large
+	// diff (e.g. footnotes) can't dominate the column.
+	.editor-revision-meta-diff__content {
+		max-height: 80px;
+		overflow-y: auto;
+	}
+
+	// timeline grows to fill the leftover space and scrolls internally.
+	.editor-post-revisions-timeline {
+		flex: 1;
+		min-height: 0;
+	}
+}

package/src/components/post-saved-state/index.js

@@ -46,6 +46,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		isSaveable,
 		isSaving,
 		isSavingLocked,
+		isSavingNonPostEntityChanges,
 		isScheduled,
 		hasPublishAction,
 		showIconLabels,
@@ -54,35 +55,25 @@ export default function PostSavedState( { forceIsDirty } ) {
 		postType,
 	} = useSelect(
 		( select ) => {
-			const {
-				isEditedPostNew,
-				isCurrentPostPublished,
-				isCurrentPostScheduled,
-				isEditedPostDirty,
-				isSavingPost,
-				isEditedPostSaveable,
-				isPostSavingLocked,
-				getCurrentPost,
-				isAutosavingPost,
-				getEditedPostAttribute,
-				getPostEdits,
-			} = select( editorStore );
+			const store = select( editorStore );
 			const { get } = select( preferencesStore );
 			return {
-				isAutosaving: isAutosavingPost(),
-				isDirty: forceIsDirty || isEditedPostDirty(),
-				isNew: isEditedPostNew(),
-				isPublished: isCurrentPostPublished(),
-				isSaving: isSavingPost(),
-				isSaveable: isEditedPostSaveable(),
-				isSavingLocked: isPostSavingLocked(),
-				isScheduled: isCurrentPostScheduled(),
+				isAutosaving: store.isAutosavingPost(),
+				isDirty: forceIsDirty || store.isEditedPostDirty(),
+				isNew: store.isEditedPostNew(),
+				isPublished: store.isCurrentPostPublished(),
+				isSaving: store.isSavingPost(),
+				isSaveable: store.isEditedPostSaveable(),
+				isSavingLocked: store.isPostSavingLocked(),
+				isSavingNonPostEntityChanges:
+					store.isSavingNonPostEntityChanges(),
+				isScheduled: store.isCurrentPostScheduled(),
 				hasPublishAction:
-					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
+					!! store.getCurrentPost()?._links?.[ 'wp:action-publish' ],
 				showIconLabels: get( 'core', 'showIconLabels' ),
-				postStatus: getEditedPostAttribute( 'status' ),
-				postStatusHasChanged: !! getPostEdits()?.status,
-				postType: select( editorStore ).getCurrentPostType(),
+				postStatus: store.getEditedPostAttribute( 'status' ),
+				postStatusHasChanged: !! store.getPostEdits()?.status,
+				postType: store.getCurrentPostType(),
 			};
 		},
 		[ forceIsDirty ]
@@ -143,7 +134,13 @@ export default function PostSavedState( { forceIsDirty } ) {
 
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
-	const isDisabled = isSaving || isSaved || ! isSaveable || isSavingLocked;
+	const isDisabled =
+		isSaving ||
+		isSaved ||
+		! isSaveable ||
+		isSavingLocked ||
+		// Disable while a non-post entity (e.g. a newly created term) is mid-save.
+		isSavingNonPostEntityChanges;
 	let text;
 
 	if ( isSaving ) {

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -9,6 +9,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 >
   <svg
     aria-hidden="true"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"