@wordpress/editor 14.44.0 → 14.44.1-next.v.202604201441.0

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

@@ -38,12 +38,9 @@ function NotesSidebarContent( {
 	styles,
 	comments,
 	commentSidebarRef,
-	reflowComments,
-	commentLastUpdated,
 	isFloating = false,
 } ) {
-	const { onCreate, onEdit, onDelete } =
-		useBlockCommentsActions( reflowComments );
+	const { onCreate, onEdit, onDelete } = useBlockCommentsActions();
 
 	return (
 		<VStack
@@ -70,8 +67,6 @@ function NotesSidebarContent( {
 				onAddReply={ onCreate }
 				onCommentDelete={ onDelete }
 				commentSidebarRef={ commentSidebarRef }
-				reflowComments={ reflowComments }
-				commentLastUpdated={ commentLastUpdated }
 				isFloating={ isFloating }
 			/>
 		</VStack>
@@ -119,12 +114,8 @@ function NotesSidebar( { postId } ) {
 		[]
 	);
 
-	const {
-		resultComments,
-		unresolvedSortedThreads,
-		reflowComments,
-		commentLastUpdated,
-	} = useBlockComments( postId );
+	const { resultComments, unresolvedSortedThreads } =
+		useBlockComments( postId );
 
 	// Only enable the floating sidebar for large viewports.
 	const showFloatingSidebar = isLargeViewport;
@@ -239,8 +230,6 @@ function NotesSidebar( { postId } ) {
 					<NotesSidebarContent
 						comments={ unresolvedSortedThreads }
 						commentSidebarRef={ commentSidebarRef }
-						reflowComments={ reflowComments }
-						commentLastUpdated={ commentLastUpdated }
 						styles={ {
 							backgroundColor,
 						} }

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

@@ -0,0 +1,153 @@
+/**
+ * Internal dependencies
+ */
+import { calculateAllOffsets } from '../utils';
+
+function makeRect( top ) {
+	return { top };
+}
+
+describe( 'calculateAllOffsets', () => {
+	it( 'returns empty offsets when no threads match blockRects', () => {
+		const { offsets, minHeight } = calculateAllOffsets( {
+			threads: [ { id: 1 } ],
+			selectedNoteId: undefined,
+			blockRects: {},
+			heights: {},
+		} );
+		expect( offsets ).toEqual( {} );
+		expect( minHeight ).toBe( 0 );
+	} );
+
+	it( 'assigns default offset when there is no selected thread', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 300 ),
+			3: makeRect( 500 ),
+		};
+		const heights = { 1: 50, 2: 50, 3: 50 };
+
+		const { offsets } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: undefined,
+			blockRects,
+			heights,
+		} );
+
+		// With no selected thread, breakIndex falls back to 0 (first thread).
+		expect( offsets[ 1 ] ).toBe( -16 );
+		// Non-overlapping threads get the default offset.
+		expect( offsets[ 2 ] ).toBe( -16 );
+		expect( offsets[ 3 ] ).toBe( -16 );
+	} );
+
+	it( 'pushes neighbors below the selected thread downward when overlapping', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		// Thread 2 selected; thread 3 starts inside thread 2's space.
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 200 ),
+			3: makeRect( 220 ),
+		};
+		const heights = { 1: 50, 2: 80, 3: 50 };
+
+		const { offsets } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: 2,
+			blockRects,
+			heights,
+		} );
+
+		expect( offsets[ 2 ] ).toBe( -16 );
+		// thread 3 overlaps thread 2: previous bottom = (200-16)+80 = 264.
+		// 220 < 264+16 = 280, so offset = 264 - 220 + 20 = 64.
+		expect( offsets[ 3 ] ).toBe( 64 );
+	} );
+
+	it( 'pushes neighbors above the selected thread upward when overlapping', () => {
+		const threads = [ { id: 1 }, { id: 2 } ];
+		// Thread 1 is tall and overlaps where thread 2 sits.
+		const blockRects = {
+			1: makeRect( 150 ),
+			2: makeRect( 180 ),
+		};
+		const heights = { 1: 60, 2: 50 };
+
+		const { offsets } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: 2,
+			blockRects,
+			heights,
+		} );
+
+		expect( offsets[ 2 ] ).toBe( -16 );
+		// Thread 1 bottom = 150 + 60 = 210, next threadTop = 180 - 16 = 164.
+		// 210 > 164, so offset = 164 - 150 - 60 - 20 = -66.
+		expect( offsets[ 1 ] ).toBe( -66 );
+	} );
+
+	it( 'cascades overlap adjustment across multiple threads below', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		// All three threads are tightly packed.
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 110 ),
+			3: makeRect( 120 ),
+		};
+		const heights = { 1: 80, 2: 80, 3: 80 };
+
+		const { offsets } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+		} );
+
+		expect( offsets[ 1 ] ).toBe( -16 );
+		// Thread 2: previous bottom = (100-16)+80 = 164. 110 < 164+16, offset = 164-110+20 = 74.
+		expect( offsets[ 2 ] ).toBe( 74 );
+		// Thread 3: previous bottom = (110+74)+80 = 264. 120 < 264+16, offset = 264-120+20 = 164.
+		expect( offsets[ 3 ] ).toBe( 164 );
+	} );
+
+	it( 'skips threads with missing blockRects', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			// id 2 is missing
+			3: makeRect( 500 ),
+		};
+		const heights = { 1: 50, 3: 50 };
+
+		const { offsets } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+		} );
+
+		expect( offsets[ 1 ] ).toBe( -16 );
+		expect( offsets[ 2 ] ).toBeUndefined();
+		expect( offsets[ 3 ] ).toBe( -16 );
+	} );
+
+	it( 'computes minHeight from the last thread position', () => {
+		const threads = [ { id: 1 }, { id: 2 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 400 ),
+		};
+		const heights = { 1: 50, 2: 60 };
+
+		const { minHeight } = calculateAllOffsets( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+		} );
+
+		// Last thread: top=400, height=60, offset=-16, + 32 = 476.
+		expect( minHeight ).toBe( 476 );
+	} );
+} );

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

@@ -13,10 +13,10 @@ export function sanitizeCommentString( str ) {
 	return str.trim();
 }
 
-/**
- * A no-operation function that does nothing.
- */
-export function noop() {}
+const THREAD_ALIGN_OFFSET = -16;
+const THREAD_GAP = 16;
+const OVERLAP_MARGIN = 20;
+const BOARD_BOTTOM_PADDING = 32;
 
 /**
  * Avatar border colors chosen to be visually distinct from each other and from
@@ -91,6 +91,114 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
 	return isTrimmed ? trimmedExcerpt + '…' : trimmedExcerpt;
 }
 
+/**
+ * Calculate y offsets for all floating comment threads. Adjusts positions
+ * to prevent overlapping by pushing threads above the selected one upward
+ * and threads below it downward.
+ *
+ * @param {Object}                  params
+ * @param {Array}                   params.threads        Ordered list of thread objects.
+ * @param {string|number|undefined} params.selectedNoteId ID of the currently selected thread.
+ * @param {Object<string,DOMRect>}  params.blockRects     Pre-read bounding rects keyed by thread ID.
+ * @param {Object<string,number>}   params.heights        Rendered heights keyed by thread ID.
+ * @return {{ offsets: Object<string,number>, minHeight: number }} Computed offsets and minimum editor height.
+ */
+export function calculateAllOffsets( {
+	threads,
+	selectedNoteId,
+	blockRects,
+	heights,
+} ) {
+	const offsets = {};
+
+	const anchorIndex = Math.max(
+		0,
+		threads.findIndex( ( thread ) => thread.id === selectedNoteId )
+	);
+
+	const anchorThread = threads[ anchorIndex ];
+
+	if ( ! anchorThread || ! blockRects[ anchorThread.id ] ) {
+		return { offsets, minHeight: 0 };
+	}
+
+	const anchorRect = blockRects[ anchorThread.id ];
+	const anchorTop = anchorRect.top || 0;
+	const anchorHeight = heights[ anchorThread.id ] || 0;
+
+	offsets[ anchorThread.id ] = THREAD_ALIGN_OFFSET;
+
+	// Process threads after the anchor, offsetting overlapping threads downward.
+	let prevAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
+	let prevHeight = anchorHeight;
+
+	for ( let i = anchorIndex + 1; i < threads.length; i++ ) {
+		const thread = threads[ i ];
+		const threadRect = blockRects[ thread.id ];
+		if ( ! threadRect ) {
+			continue;
+		}
+
+		const threadTop = threadRect.top || 0;
+		const threadHeight = heights[ thread.id ] || 0;
+
+		let offset = THREAD_ALIGN_OFFSET;
+
+		const prevBottom = prevAdjustedTop + prevHeight;
+		if ( threadTop < prevBottom + THREAD_GAP ) {
+			offset = prevBottom - threadTop + OVERLAP_MARGIN;
+		}
+
+		offsets[ thread.id ] = offset;
+
+		prevAdjustedTop = threadTop + offset;
+		prevHeight = threadHeight;
+	}
+
+	// Process threads before the anchor, offsetting overlapping threads upward.
+	let belowAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
+
+	for ( let i = anchorIndex - 1; i >= 0; i-- ) {
+		const thread = threads[ i ];
+		const threadRect = blockRects[ thread.id ];
+		if ( ! threadRect ) {
+			continue;
+		}
+
+		const threadTop = threadRect.top || 0;
+		const threadHeight = heights[ thread.id ] || 0;
+
+		let offset = THREAD_ALIGN_OFFSET;
+
+		const threadBottom = threadTop + threadHeight;
+
+		if ( threadBottom > belowAdjustedTop ) {
+			offset =
+				belowAdjustedTop - threadTop - threadHeight - OVERLAP_MARGIN;
+		}
+
+		offsets[ thread.id ] = offset;
+
+		belowAdjustedTop = threadTop + offset;
+	}
+
+	let editorMinHeight = 0;
+	const lastThread = threads[ threads.length - 1 ];
+	const lastBlockRect = blockRects[ lastThread.id ];
+	if ( lastBlockRect ) {
+		const lastThreadTop = lastBlockRect.top || 0;
+		const lastThreadHeight = heights[ lastThread.id ] || 0;
+		const lastThreadOffset = offsets[ lastThread.id ] || 0;
+		editorMinHeight =
+			lastThreadTop +
+			lastThreadHeight +
+			lastThreadOffset +
+			BOARD_BOTTOM_PADDING;
+	}
+
+	return { offsets, minHeight: editorMinHeight };
+}
+
 /**
  * Shift focus to the comment thread associated with a particular comment ID.
  * If an additional selector is provided, the focus will be shifted to the element matching the selector.

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

@@ -73,7 +73,7 @@ function Avatar( {
 					'--editor-avatar-name-color': nameColor,
 			  }
 			: {} ),
-	} as React.CSSProperties;
+	};
 
 	const avatar = (
 		<div

package/src/components/collaborators-presence/styles/collaborators-list.scss

@@ -63,7 +63,7 @@
 		padding: $grid-unit-15 $grid-unit-20;
 		gap: $grid-unit-10;
 		width: 100%;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		transition: background-color 0.2s ease;
 
 		&:hover:not(:disabled) {

package/src/components/collaborators-presence/styles/collaborators-presence.scss

@@ -22,7 +22,7 @@
 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
 	display: flex;
 	align-items: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	position: relative;
 	padding: $grid-unit-05;
 	border-radius: $grid-unit-05;

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

@@ -43,7 +43,7 @@
 }
 
 .document-outline__button {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: none;
 	border: none;
 	display: flex;

package/src/components/media-categories/index.js

@@ -26,7 +26,7 @@ const getExternalLink = ( url, text ) =>
 	`<a ${ getExternalLinkAttributes( url ) }>${ text }</a>`;
 
 const getExternalLinkAttributes = ( url ) =>
-	`href="${ url }" target="_blank" rel="noreferrer noopener"`;
+	`href="${ url }" target="_blank" rel="noopener"`;
 
 const getOpenverseLicense = ( license, licenseVersion ) => {
 	let licenseName = license.trim();

package/src/components/more-menu/index.js

@@ -132,7 +132,7 @@ export default function MoreMenu( { disabled = false } ) {
 									'https://wordpress.org/documentation/article/wordpress-block-editor/'
 								) }
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 							>
 								{ __( 'Help' ) }
 								<VisuallyHidden as="span">

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -102,7 +102,7 @@ function Image( { clientId, alt, url } ) {
 				height: '32px',
 				objectFit: 'cover',
 				borderRadius: '2px',
-				cursor: 'pointer',
+				cursor: 'var(--wpds-cursor-control)',
 			} }
 			whileHover={ { scale: 1.08 } }
 		/>

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

@@ -89,7 +89,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noreferrer noopener"
+            rel="external noopener"
             target="_blank"
           >
             <span
@@ -316,7 +316,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noreferrer noopener"
+            rel="external noopener"
             target="_blank"
           >
             <span

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

@@ -44,7 +44,7 @@
 		min-height: 4px;
 		border: none;
 		padding: 0;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		transition: opacity 0.1s ease;
 
 		&.is-added {

package/src/components/style-book/constants.ts

@@ -227,7 +227,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.editor-style-book__example {
 	    max-width: 900px;
 		border-radius: 2px;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		display: flex;
 		flex-direction: column;
 		gap: 40px;

package/src/components/style-book/index.js

@@ -620,7 +620,7 @@ export const StyleBookBody = ( {
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
-					'body { cursor: pointer; } body * { pointer-events: none; }' }
+					'body { cursor: var(--wpds-cursor-control); } body * { pointer-events: none; }' }
 			</style>
 			<Examples
 				className="editor-style-book__examples"

package/src/components/template-actions-panel/style.scss

@@ -19,7 +19,7 @@
 	}
 
 	&[role="button"] {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&:hover .block-editor-block-preview__container::after {
 			outline-color: rgba($black, 0.3);