@wordpress/editor 14.45.0 → 14.45.2-next.v.202605131032.0

package/src/components/collab-sidebar/notes.js

@@ -111,12 +111,15 @@ export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
 			return;
 		}
 
-		if ( nextThread ) {
-			selectNote( nextThread.id );
-			focusNoteThread( nextThread.id, sidebarRef.current );
-		} else if ( prevThread ) {
-			selectNote( prevThread.id );
-			focusNoteThread( prevThread.id, sidebarRef.current );
+		const adjacentThread = nextThread ?? prevThread;
+		if ( adjacentThread ) {
+			selectNote( adjacentThread.id );
+			focusNoteThread( adjacentThread.id, sidebarRef.current );
+			if ( adjacentThread.blockClientId ) {
+				toggleBlockSpotlight( adjacentThread.blockClientId, true );
+				// Pass `null` as the second parameter to prevent focusing the block.
+				selectBlock( adjacentThread.blockClientId, null );
+			}
 		} else {
 			selectNote( undefined );
 			toggleBlockSpotlight( note.blockClientId, false );

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

@@ -51,6 +51,10 @@
 		// so each thread tracks the canvas scroll.
 		transform: translateY(var(--canvas-scroll, 0));
 		will-change: transform;
+		// Keep the reply input reachable when a thread is taller than the viewport
+		// (e.g. many replies on short content where the canvas can't scroll).
+		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - #{$header-height + $grid-unit-80});
+		overflow-y: auto;
 	}
 }
 

package/src/components/collab-sidebar/utils.js

@@ -198,18 +198,17 @@ export function calculateNotePositions( {
 }
 
 /**
- * Shift focus to the note thread associated with a particular note ID.
- * If an additional selector is provided, the focus will be shifted to the element matching the selector.
+ * Resolve the DOM element for a note thread once it's mounted,
+ * or `null` if not found within 3 seconds.
  *
- * @typedef {import('@wordpress/element').RefObject} RefObject
- *
- * @param {string}       noteId             The ID of the note thread to focus.
- * @param {?HTMLElement} container          The container element to search within.
- * @param {string}       additionalSelector The additional selector to focus on.
+ * @param {string}       noteId             Note thread ID.
+ * @param {?HTMLElement} container          Container to search within.
+ * @param {string}       additionalSelector Optional descendant selector.
+ * @return {Promise<HTMLElement|null>} Resolved element, or `null` on timeout.
  */
-export function focusNoteThread( noteId, container, additionalSelector ) {
+function findNoteThread( noteId, container, additionalSelector ) {
 	if ( ! container ) {
-		return;
+		return Promise.resolve( null );
 	}
 
 	// A thread without a noteId is a new note thread.
@@ -236,15 +235,43 @@ export function focusNoteThread( noteId, container, additionalSelector ) {
 			}
 		} );
 
-		observer.observe( container, {
-			childList: true,
-			subtree: true,
-		} );
+		observer.observe( container, { childList: true, subtree: true } );
 
 		// Stop trying after 3 seconds.
 		timer = setTimeout( () => {
 			observer.disconnect();
 			resolve( null );
 		}, 3000 );
-	} ).then( ( element ) => element?.focus() );
+	} );
+}
+
+/**
+ * Focus a note thread (or a descendant) and scroll it into view.
+ *
+ * @param {string}       noteId             Note thread ID.
+ * @param {?HTMLElement} container          Container to search within.
+ * @param {string}       additionalSelector Optional descendant selector.
+ */
+export function focusNoteThread( noteId, container, additionalSelector ) {
+	return findNoteThread( noteId, container, additionalSelector ).then(
+		( element ) => {
+			if ( ! element ) {
+				return;
+			}
+			element.focus();
+			element.scrollIntoView( { block: 'nearest' } );
+		}
+	);
+}
+
+/**
+ * Scroll a note thread into view without changing focus.
+ *
+ * @param {string}       noteId    Note thread ID.
+ * @param {?HTMLElement} container Container to search within.
+ */
+export function scrollNoteThreadIntoView( noteId, container ) {
+	return findNoteThread( noteId, container ).then( ( element ) => {
+		element?.scrollIntoView( { block: 'nearest' } );
+	} );
 }

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

@@ -13,8 +13,6 @@ import { unlock } from '../../lock-unlock';
 import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
 import { createCursorRegistry } from '../collaborators-overlay/cursor-registry';
-
-import './styles/collaborators-presence.scss';
 import { CollaboratorsOverlay } from '../collaborators-overlay';
 
 const { useActiveCollaborators } = unlock( privateApis );

package/src/components/collaborators-presence/list.tsx

@@ -9,8 +9,6 @@ import { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
 import { type CursorRegistry } from '../collaborators-overlay/cursor-registry';
 
-import './styles/collaborators-list.scss';
-
 interface CollaboratorsListProps {
 	activeCollaborators: PostEditorAwarenessState[];
 	popoverAnchor?: HTMLElement | null;

package/src/components/post-last-revision/index.js

@@ -63,6 +63,11 @@ export function PrivatePostLastRevision() {
 					onClick={ () => setCurrentRevisionId( lastRevisionId ) }
 					className="editor-private-post-last-revision__button"
 					text={ revisionsCount }
+					aria-label={ sprintf(
+						/* translators: %s: number of revisions. */
+						__( 'Open revisions screen: %s revisions' ),
+						revisionsCount
+					) }
 					variant="tertiary"
 					size="compact"
 				/>

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

@@ -2,16 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
+import { Button, Spinner, CheckboxControl } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	Button,
-	Spinner,
-	CheckboxControl,
-	withFocusReturn,
-	withConstrainedTabbing,
-} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+	useConstrainedTabbing,
+	useEvent,
+	useFocusReturn,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { closeSmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -23,135 +22,36 @@ import PostPublishPanelPrepublish from './prepublish';
 import PostPublishPanelPostpublish from './postpublish';
 import { store as editorStore } from '../../store';
 
-export class PostPublishPanel extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onSubmit = this.onSubmit.bind( this );
-		this.cancelButtonNode = createRef();
-	}
-
-	componentDidMount() {
-		// This timeout is necessary to make sure the `useEffect` hook of
-		// `useFocusReturn` gets the correct element (the button that opens the
-		// PostPublishPanel) otherwise it will get this button.
-		this.timeoutID = setTimeout( () => {
-			this.cancelButtonNode.current.focus();
-		}, 0 );
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeoutID );
-	}
-
-	componentDidUpdate( prevProps ) {
-		// Automatically collapse the publish sidebar when a post
-		// is published and the user makes an edit.
-		if (
-			( prevProps.isPublished &&
-				! this.props.isSaving &&
-				this.props.isDirty ) ||
-			this.props.currentPostId !== prevProps.currentPostId
-		) {
-			this.props.onClose();
-		}
-	}
-
-	onSubmit() {
-		const { onClose, hasPublishAction, isPostTypeViewable } = this.props;
-		if ( ! hasPublishAction || ! isPostTypeViewable ) {
-			onClose();
-		}
-	}
-
-	render() {
-		const {
-			forceIsDirty,
-			isBeingScheduled,
-			isPublished,
-			isPublishSidebarEnabled,
-			isScheduled,
-			isSaving,
-			isSavingNonPostEntityChanges,
-			onClose,
-			onTogglePublishSidebar,
-			PostPublishExtension,
-			PrePublishExtension,
-			currentPostId,
-			...additionalProps
-		} = this.props;
-		const {
-			hasPublishAction,
-			isDirty,
-			isPostTypeViewable,
-			...propsForPanel
-		} = additionalProps;
-		const isPublishedOrScheduled =
-			isPublished || ( isScheduled && isBeingScheduled );
-		const isPrePublish = ! isPublishedOrScheduled && ! isSaving;
-		const isPostPublish = isPublishedOrScheduled && ! isSaving;
-		return (
-			<div className="editor-post-publish-panel" { ...propsForPanel }>
-				<div className="editor-post-publish-panel__header">
-					{ isPostPublish ? (
-						<Button
-							size="compact"
-							onClick={ onClose }
-							icon={ closeSmall }
-							label={ __( 'Close panel' ) }
-						/>
-					) : (
-						<>
-							<div className="editor-post-publish-panel__header-cancel-button">
-								<Button
-									ref={ this.cancelButtonNode }
-									accessibleWhenDisabled
-									disabled={ isSavingNonPostEntityChanges }
-									onClick={ onClose }
-									variant="secondary"
-									size="compact"
-								>
-									{ __( 'Cancel' ) }
-								</Button>
-							</div>
-							<div className="editor-post-publish-panel__header-publish-button">
-								<PostPublishButton
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-								/>
-							</div>
-						</>
-					) }
-				</div>
-				<div className="editor-post-publish-panel__content">
-					{ isPrePublish && (
-						<PostPublishPanelPrepublish>
-							{ PrePublishExtension && <PrePublishExtension /> }
-						</PostPublishPanelPrepublish>
-					) }
-					{ isPostPublish && (
-						<PostPublishPanelPostpublish focusOnMount>
-							{ PostPublishExtension && <PostPublishExtension /> }
-						</PostPublishPanelPostpublish>
-					) }
-					{ isSaving && <Spinner /> }
-				</div>
-				<div className="editor-post-publish-panel__footer">
-					<CheckboxControl
-						label={ __( 'Always show pre-publish checks.' ) }
-						checked={ isPublishSidebarEnabled }
-						onChange={ onTogglePublishSidebar }
-					/>
-				</div>
-			</div>
-		);
-	}
-}
-
 /**
  * Renders a panel for publishing a post.
+ *
+ * @param {Object}              props                        Component props.
+ * @param {boolean}             [props.forceIsDirty]         Whether to force the dirty state.
+ * @param {()=>void}            props.onClose                Called when the panel requests to close.
+ * @param {React.ComponentType} [props.PostPublishExtension] Component rendered after publishing.
+ * @param {React.ComponentType} [props.PrePublishExtension]  Component rendered before publishing.
+ *
+ * @return {React.JSX.Element} The post publish panel.
  */
-export default compose( [
-	withSelect( ( select ) => {
+export default function PostPublishPanel( {
+	forceIsDirty,
+	onClose,
+	PostPublishExtension,
+	PrePublishExtension,
+	...propsForPanel
+} ) {
+	const {
+		hasPublishAction,
+		isPostTypeViewable,
+		isBeingScheduled,
+		isDirty,
+		isPublished,
+		isPublishSidebarEnabled,
+		isSaving,
+		isSavingNonPostEntityChanges,
+		isScheduled,
+		currentPostId,
+	} = useSelect( ( select ) => {
 		const { getPostType } = select( coreStore );
 		const {
 			getCurrentPost,
@@ -163,9 +63,9 @@ export default compose( [
 			isEditedPostDirty,
 			isAutosavingPost,
 			isSavingPost,
-			isSavingNonPostEntityChanges,
+			isSavingNonPostEntityChanges: _isSavingNonPostEntityChanges,
+			isPublishSidebarEnabled: _isPublishSidebarEnabled,
 		} = select( editorStore );
-		const { isPublishSidebarEnabled } = select( editorStore );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
 		return {
@@ -175,26 +75,119 @@ export default compose( [
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			isDirty: isEditedPostDirty(),
 			isPublished: isCurrentPostPublished(),
-			isPublishSidebarEnabled: isPublishSidebarEnabled(),
+			isPublishSidebarEnabled: _isPublishSidebarEnabled(),
 			isSaving: isSavingPost() && ! isAutosavingPost(),
-			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
+			isSavingNonPostEntityChanges: _isSavingNonPostEntityChanges(),
 			isScheduled: isCurrentPostScheduled(),
 			currentPostId: getCurrentPostId(),
 		};
-	} ),
-	withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
-		const { disablePublishSidebar, enablePublishSidebar } =
-			dispatch( editorStore );
-		return {
-			onTogglePublishSidebar: () => {
-				if ( isPublishSidebarEnabled ) {
-					disablePublishSidebar();
-				} else {
-					enablePublishSidebar();
-				}
-			},
-		};
-	} ),
-	withFocusReturn,
-	withConstrainedTabbing,
-] )( PostPublishPanel );
+	}, [] );
+
+	const { disablePublishSidebar, enablePublishSidebar } =
+		useDispatch( editorStore );
+
+	const cancelButtonRef = useRef( null );
+	const wrapperRef = useMergeRefs( [
+		useFocusReturn(),
+		useConstrainedTabbing(),
+	] );
+
+	useEffect( () => {
+		cancelButtonRef.current?.focus();
+	}, [] );
+
+	// Auto-collapse the publish sidebar when a post is published and the user
+	// makes an edit, or when the edited post changes. The panel only mounts
+	// for unpublished posts, so `isPublished && isDirty` cannot be true on
+	// mount — it implies a publish-then-edit transition.
+	const prevPostIdRef = useRef( currentPostId );
+	const stableOnClose = useEvent( onClose );
+	useEffect( () => {
+		const postChanged = currentPostId !== prevPostIdRef.current;
+		prevPostIdRef.current = currentPostId;
+
+		if ( postChanged || ( isPublished && ! isSaving && isDirty ) ) {
+			stableOnClose();
+		}
+	}, [ isPublished, isSaving, isDirty, currentPostId, stableOnClose ] );
+
+	function onTogglePublishSidebar() {
+		if ( isPublishSidebarEnabled ) {
+			disablePublishSidebar();
+		} else {
+			enablePublishSidebar();
+		}
+	}
+
+	function onSubmit() {
+		if ( ! hasPublishAction || ! isPostTypeViewable ) {
+			onClose();
+		}
+	}
+
+	const isPublishedOrScheduled =
+		isPublished || ( isScheduled && isBeingScheduled );
+	const isPrePublish = ! isPublishedOrScheduled && ! isSaving;
+	const isPostPublish = isPublishedOrScheduled && ! isSaving;
+
+	return (
+		<div
+			ref={ wrapperRef }
+			tabIndex={ -1 }
+			className="editor-post-publish-panel"
+			{ ...propsForPanel }
+		>
+			<div className="editor-post-publish-panel__header">
+				{ isPostPublish ? (
+					<Button
+						size="compact"
+						onClick={ onClose }
+						icon={ closeSmall }
+						label={ __( 'Close panel' ) }
+					/>
+				) : (
+					<>
+						<div className="editor-post-publish-panel__header-cancel-button">
+							<Button
+								ref={ cancelButtonRef }
+								accessibleWhenDisabled
+								disabled={ isSavingNonPostEntityChanges }
+								onClick={ onClose }
+								variant="secondary"
+								size="compact"
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</div>
+						<div className="editor-post-publish-panel__header-publish-button">
+							<PostPublishButton
+								onSubmit={ onSubmit }
+								forceIsDirty={ forceIsDirty }
+							/>
+						</div>
+					</>
+				) }
+			</div>
+			<div className="editor-post-publish-panel__content">
+				{ isPrePublish && (
+					<PostPublishPanelPrepublish>
+						{ PrePublishExtension && <PrePublishExtension /> }
+					</PostPublishPanelPrepublish>
+				) }
+				{ isPostPublish && (
+					<PostPublishPanelPostpublish focusOnMount>
+						{ PostPublishExtension && <PostPublishExtension /> }
+					</PostPublishPanelPostpublish>
+				) }
+				{ isSaving && <Spinner /> }
+			</div>
+			<div className="editor-post-publish-panel__footer">
+				<CheckboxControl
+					label={ __( 'Always show pre-publish checks.' ) }
+					checked={ isPublishSidebarEnabled }
+					onChange={ onTogglePublishSidebar }
+				/>
+			</div>
+		</div>
+	);
+}

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

@@ -54,6 +54,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
 <div>
   <div
     class="editor-post-publish-panel"
+    tabindex="-1"
   >
     <div
       class="editor-post-publish-panel__header"
@@ -278,6 +279,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
 <div>
   <div
     class="editor-post-publish-panel"
+    tabindex="-1"
   >
     <div
       class="editor-post-publish-panel__header"
@@ -329,7 +331,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             </span>
           </a>
            
-          is now live.
+          is now scheduled. It will go live on
+           
+          Immediately
+          .
         </div>
         <div
           class="components-panel__body is-opened"
@@ -380,30 +385,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary has-icon has-icon-right"
-              href="https://wordpress.local/sample-page/"
-              target="_blank"
-            >
-              <span
-                data-visually-hidden=""
-              >
-                (opens in a new tab)
-              </span>
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
-                />
-              </svg>
-            </a>
-            <a
-              class="components-button is-next-40px-default-size is-secondary"
+              class="components-button is-next-40px-default-size is-primary"
               href="post-new.php?"
             />
           </div>
@@ -492,6 +474,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
 <div>
   <div
     class="editor-post-publish-panel"
+    tabindex="-1"
   >
     <div
       class="editor-post-publish-panel__header"
@@ -645,6 +628,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
 <div>
   <div
     class="editor-post-publish-panel"
+    tabindex="-1"
   >
     <div
       class="editor-post-publish-panel__header"
@@ -842,6 +826,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
 <div>
   <div
     class="editor-post-publish-panel"
+    tabindex="-1"
   >
     <div
       class="editor-post-publish-panel__header"
@@ -861,7 +846,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact is-busy"
           type="button"
         >
           Submit for Review

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

@@ -7,58 +7,76 @@ import { render } from '@testing-library/react';
  * WordPress dependencies
  */
 import { select } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { PostPublishPanel } from '../index';
+import PostPublishPanel from '../index';
 
 describe( 'PostPublishPanel', () => {
-	jest.spyOn( select( coreStore ), 'getPostType' ).mockReturnValue( {
-		labels: {
-			singular_name: 'post',
-		},
+	beforeEach( () => {
+		jest.spyOn( select( coreStore ), 'getPostType' ).mockReturnValue( {
+			labels: {
+				singular_name: 'post',
+			},
+		} );
+
+		jest.spyOn( select( editorStore ), 'getCurrentPost' ).mockReturnValue( {
+			link: 'https://wordpress.local/sample-page/',
+		} );
 	} );
 
-	jest.spyOn( select( editorStore ), 'getCurrentPost' ).mockReturnValue( {
-		link: 'https://wordpress.local/sample-page/',
+	afterEach( () => {
+		jest.restoreAllMocks();
 	} );
 
 	it( 'should render the pre-publish panel if the post is not saving, published or scheduled', () => {
-		const { container } = render(
-			<PostPublishPanel
-				isPublished={ false }
-				isScheduled={ false }
-				isSaving={ false }
-			/>
-		);
+		const { container } = render( <PostPublishPanel /> );
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the pre-publish panel if post status is scheduled but date is before now', () => {
-		const { container } = render(
-			<PostPublishPanel isScheduled isBeingScheduled={ false } />
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'isCurrentPostScheduled'
+		).mockReturnValue( true );
 
+		const { container } = render( <PostPublishPanel /> );
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the spinner if the post is being saved', () => {
-		const { container } = render( <PostPublishPanel isSaving /> );
+		jest.spyOn( select( editorStore ), 'isSavingPost' ).mockReturnValue(
+			true
+		);
+
+		const { container } = render( <PostPublishPanel /> );
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the post-publish panel if the post is published', () => {
-		const { container } = render( <PostPublishPanel isPublished /> );
+		jest.spyOn(
+			select( editorStore ),
+			'isCurrentPostPublished'
+		).mockReturnValue( true );
+
+		const { container } = render( <PostPublishPanel /> );
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the post-publish panel if the post is scheduled', () => {
-		const { container } = render(
-			<PostPublishPanel isScheduled isBeingScheduled />
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'isCurrentPostScheduled'
+		).mockReturnValue( true );
+		jest.spyOn(
+			select( editorStore ),
+			'isEditedPostBeingScheduled'
+		).mockReturnValue( true );
+
+		const { container } = render( <PostPublishPanel /> );
 		expect( container ).toMatchSnapshot();
 	} );
 } );