@wordpress/editor 14.44.0 → 14.45.0

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

@@ -0,0 +1,155 @@
+/**
+ * Internal dependencies
+ */
+import { calculateNotePositions } from '../utils';
+
+function makeRect( top ) {
+	return { top };
+}
+
+describe( 'calculateNotePositions', () => {
+	it( 'returns empty positions when the anchor thread has no blockRect', () => {
+		const { positions } = calculateNotePositions( {
+			threads: [ { id: 1 } ],
+			selectedNoteId: undefined,
+			blockRects: {},
+			heights: {},
+			scrollTop: 0,
+		} );
+		expect( positions ).toEqual( {} );
+	} );
+
+	it( 'falls back to the first thread as anchor when none is selected', () => {
+		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 { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: undefined,
+			blockRects,
+			heights,
+			scrollTop: 0,
+		} );
+
+		// 1: 100 - 16 = 84
+		// 2: 300 - 16 = 284
+		// 3: 500 - 16 = 484
+		expect( positions ).toEqual( { 1: 84, 2: 284, 3: 484 } );
+	} );
+
+	it( 'pushes an overlapping thread above the anchor upward', () => {
+		const threads = [ { id: 1 }, { id: 2 } ];
+		const blockRects = {
+			1: makeRect( 150 ),
+			2: makeRect( 180 ),
+		};
+		const heights = { 1: 60, 2: 50 };
+
+		const { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: 2,
+			blockRects,
+			heights,
+			scrollTop: 0,
+		} );
+
+		// 2 (anchor): 180 - 16 = 164
+		// 1 (upward):  164 - 60 - 20 = 84
+		expect( positions ).toEqual( { 1: 84, 2: 164 } );
+	} );
+
+	it( 'cascades downward offsets through consecutive overlapping threads', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 110 ),
+			3: makeRect( 120 ),
+		};
+		const heights = { 1: 80, 2: 80, 3: 80 };
+
+		const { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+			scrollTop: 0,
+		} );
+
+		// 1 (anchor):    100 - 16 = 84
+		// 2 (downward):   84 + 80 + 20 = 184
+		// 3 (downward):  184 + 80 + 20 = 284
+		expect( positions ).toEqual( { 1: 84, 2: 184, 3: 284 } );
+	} );
+
+	it( 'omits threads that have no blockRect', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			3: makeRect( 500 ),
+		};
+		const heights = { 1: 50, 3: 50 };
+
+		const { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+			scrollTop: 0,
+		} );
+
+		// 1: 100 - 16 = 84
+		// 3: 500 - 16 = 484
+		expect( positions ).toEqual( { 1: 84, 3: 484 } );
+	} );
+
+	it( 'allows upward cascade to produce negative positions', () => {
+		const threads = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 } ];
+		const blockRects = {
+			1: makeRect( 150 ),
+			2: makeRect( 200 ),
+			3: makeRect( 250 ),
+			4: makeRect( 300 ),
+		};
+		const heights = { 1: 90, 2: 90, 3: 90, 4: 230 };
+
+		const { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: 4,
+			blockRects,
+			heights,
+			scrollTop: 0,
+		} );
+
+		// 4 (anchor):  300 - 16 = 284
+		// 3 (upward):  284 - 90 - 20 = 174
+		// 2 (upward):  174 - 90 - 20 = 64
+		// 1 (upward):   64 - 90 - 20 = -46
+		expect( positions ).toEqual( { 1: -46, 2: 64, 3: 174, 4: 284 } );
+	} );
+
+	it( 'adds scrollTop to the final positions', () => {
+		const threads = [ { id: 1 }, { id: 2 } ];
+		const blockRects = {
+			1: makeRect( 100 ),
+			2: makeRect( 300 ),
+		};
+		const heights = { 1: 50, 2: 50 };
+
+		const { positions } = calculateNotePositions( {
+			threads,
+			selectedNoteId: 1,
+			blockRects,
+			heights,
+			scrollTop: 500,
+		} );
+
+		// 1: 100 + 500 - 16 = 584
+		// 2: 300 + 500 - 16 = 784
+		expect( positions ).toEqual( { 1: 584, 2: 784 } );
+	} );
+} );

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

@@ -4,19 +4,18 @@
 import { _x } from '@wordpress/i18n';
 
 /**
- * Sanitizes a comment string by removing non-printable ASCII characters.
+ * Sanitizes a note string by removing non-printable ASCII characters.
  *
- * @param {string} str - The comment string to sanitize.
- * @return {string} - The sanitized comment string.
+ * @param {string} str - The note string to sanitize.
+ * @return {string} - The sanitized note string.
  */
-export function sanitizeCommentString( str ) {
+export function sanitizeNoteContent( 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;
 
 /**
  * Avatar border colors chosen to be visually distinct from each other and from
@@ -43,13 +42,13 @@ export function getAvatarBorderColor( userId ) {
 }
 
 /**
- * Generates a comment excerpt from text based on word count type and length.
+ * Generates a note excerpt from text based on word count type and length.
  *
- * @param {string} text          - The comment text to generate excerpt from.
- * @param {number} excerptLength - The maximum length for the commentexcerpt.
- * @return {string} - The generated comment excerpt.
+ * @param {string} text          - The note text to generate excerpt from.
+ * @param {number} excerptLength - The maximum length for the note excerpt.
+ * @return {string} - The generated note excerpt.
  */
-export function getCommentExcerpt( text, excerptLength = 10 ) {
+export function getNoteExcerpt( text, excerptLength = 10 ) {
 	if ( ! text ) {
 		return '';
 	}
@@ -92,24 +91,131 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
 }
 
 /**
- * Shift focus to the comment thread associated with a particular comment ID.
+ * Calculate final top positions for all floating note threads in the
+ * editor's content coordinate space. 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.
+ * @param {number}                  params.scrollTop      Current scroll offset of the editor content.
+ * @return {{ positions: Object<string,number> }} Computed top positions.
+ */
+export function calculateNotePositions( {
+	threads,
+	selectedNoteId,
+	blockRects,
+	heights,
+	scrollTop = 0,
+} ) {
+	const offsets = {};
+
+	const anchorIndex = Math.max(
+		0,
+		threads.findIndex( ( thread ) => thread.id === selectedNoteId )
+	);
+
+	const anchorThread = threads[ anchorIndex ];
+
+	if ( ! anchorThread || ! blockRects[ anchorThread.id ] ) {
+		return { positions: {} };
+	}
+
+	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;
+	}
+
+	// blockRect.top + scrollTop is the block's absolute y within the editor's
+	// scroll content; CSS translates each thread by -scrollTop at render time.
+	const positions = {};
+	for ( const thread of threads ) {
+		const blockRect = blockRects[ thread.id ];
+		if ( blockRect && offsets[ thread.id ] !== undefined ) {
+			positions[ thread.id ] =
+				blockRect.top + scrollTop + offsets[ thread.id ];
+		}
+	}
+
+	return { positions };
+}
+
+/**
+ * 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.
  *
  * @typedef {import('@wordpress/element').RefObject} RefObject
  *
- * @param {string}       commentId          The ID of the comment thread to focus.
+ * @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.
  */
-export function focusCommentThread( commentId, container, additionalSelector ) {
+export function focusNoteThread( noteId, container, additionalSelector ) {
 	if ( ! container ) {
 		return;
 	}
 
-	// A thread without a commentId is a new comment thread.
+	// A thread without a noteId is a new note thread.
 	const threadSelector =
-		commentId && commentId !== 'new'
-			? `[role=treeitem][id="comment-thread-${ commentId }"]`
+		noteId && noteId !== 'new'
+			? `[role=treeitem][id="note-thread-${ noteId }"]`
 			: '[role=treeitem]:not([id])';
 	const selector = additionalSelector
 		? `${ threadSelector } ${ additionalSelector }`

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-bar/index.js

@@ -10,7 +10,7 @@ import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
@@ -206,7 +206,7 @@ export default function DocumentBar( props ) {
 				/>
 			) }
 			{ isNotFound ? (
-				<Text>{ __( 'Document not found' ) }</Text>
+				<WCText>{ __( 'Document not found' ) }</WCText>
 			) : (
 				<Button
 					className="editor-document-bar__command"
@@ -236,7 +236,7 @@ export default function DocumentBar( props ) {
 						}
 					>
 						{ icon && <BlockIcon icon={ icon } /> }
-						<Text size="body" as="h1">
+						<WCText size="body" as="h1">
 							<span className="editor-document-bar__post-title">
 								{ title
 									? stripHTML( title )
@@ -265,7 +265,7 @@ export default function DocumentBar( props ) {
 										) }` }
 									</span>
 								) }
-						</Text>
+						</WCText>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">
 						{ displayShortcut.primary( 'k' ) }

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/error-boundary/index.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { select } from '@wordpress/data';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -71,9 +71,9 @@ class ErrorBoundary extends Component {
 				expanded={ false }
 				wrap
 			>
-				<Text as="p">
+				<WCText as="p">
 					{ __( 'The editor has encountered an unexpected error.' ) }
-				</Text>
+				</WCText>
 				<HStack expanded={ false }>
 					{ canCopyContent && (
 						<CopyButton text={ getContent }>

package/src/components/list-view-sidebar/list-view-outline.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,17 +17,17 @@ export default function ListViewOutline() {
 		<>
 			<div className="editor-list-view-sidebar__outline">
 				<div>
-					<Text>{ __( 'Characters:' ) }</Text>
-					<Text>
+					<WCText>{ __( 'Characters:' ) }</WCText>
+					<WCText>
 						<CharacterCount />
-					</Text>
+					</WCText>
 				</div>
 				<div>
-					<Text>{ __( 'Words:' ) }</Text>
+					<WCText>{ __( 'Words:' ) }</WCText>
 					<WordCount />
 				</div>
 				<div>
-					<Text>{ __( 'Time to read:' ) }</Text>
+					<WCText>{ __( 'Time to read:' ) }</WCText>
 					<TimeToRead />
 				</div>
 			</div>

package/src/components/media/media-editor-modal.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useSettings } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { privateApis as mediaEditorPrivateApis } from '@wordpress/media-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import usePostFields from '../post-fields';
+
+const { MediaEditorModal } = unlock( mediaEditorPrivateApis );
+
+function ratioToNumber( ratio ) {
+	if ( ratio === undefined || ratio === null ) {
+		return NaN;
+	}
+	const [ a, b, ...rest ] = String( ratio ).split( '/' ).map( Number );
+	if (
+		a <= 0 ||
+		b <= 0 ||
+		Number.isNaN( a ) ||
+		Number.isNaN( b ) ||
+		rest.length
+	) {
+		return NaN;
+	}
+	return b ? a / b : a;
+}
+
+function aspectRatioPresetFromSettings( { name, ratio } = {} ) {
+	const value = ratioToNumber( ratio );
+	if ( ! name || ! Number.isFinite( value ) || value <= 0 ) {
+		return null;
+	}
+	return {
+		label: name,
+		value,
+	};
+}
+
+/**
+ * Mounts the MediaEditorModal alongside existing editor modals.
+ *
+ * Bridges `@wordpress/editor`'s `usePostFields('attachment')` hook
+ * into the modal, since `@wordpress/media-editor` cannot depend on
+ * `@wordpress/editor`.
+ *
+ * @return {Element} The MediaEditorModal component wired with attachment fields.
+ */
+export default function MediaEditorModalMount() {
+	const fields = usePostFields( { postType: 'attachment' } );
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+	const aspectRatioPresets = useMemo( () => {
+		const hasAspectRatioSettings =
+			Array.isArray( defaultRatios ) ||
+			Array.isArray( themeRatios ) ||
+			typeof showDefaultRatios === 'boolean';
+
+		if ( ! hasAspectRatioSettings ) {
+			return undefined;
+		}
+
+		const candidateRatios = [
+			...( showDefaultRatios && Array.isArray( defaultRatios )
+				? defaultRatios
+				: [] ),
+			...( Array.isArray( themeRatios ) ? themeRatios : [] ),
+		];
+		const presets = candidateRatios
+			.map( aspectRatioPresetFromSettings )
+			.filter( Boolean );
+
+		// Passing `undefined` lets the media editor use its fallback presets.
+		// Passing `[]` explicitly removes fixed presets when defaults are off.
+		if ( presets.length || showDefaultRatios === false ) {
+			return presets;
+		}
+
+		return undefined;
+	}, [ defaultRatios, themeRatios, showDefaultRatios ] );
+
+	return (
+		<MediaEditorModal
+			fields={ fields }
+			aspectRatioPresets={ aspectRatioPresets }
+		/>
+	);
+}

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

@@ -5,17 +5,13 @@ import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external, moreVertical } from '@wordpress/icons';
-import {
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-	DropdownMenu,
-} from '@wordpress/components';
+import { MenuGroup, MenuItem, DropdownMenu } from '@wordpress/components';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
 import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -132,10 +128,10 @@ 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">
+								<VisuallyHidden render={ <span /> }>
 									{
 										/* translators: accessibility text */
 										__( '(opens in a new tab)' )

package/src/components/post-actions/set-as-homepage.js

@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -92,7 +92,7 @@ const SetAsHomepageModal = ( { items, closeModal } ) => {
 	return (
 		<form onSubmit={ onSetPageAsHomepage }>
 			<VStack spacing="5">
-				<Text>{ modalText }</Text>
+				<WCText>{ modalText }</WCText>
 				<HStack justify="right">
 					<Button
 						__next40pxDefaultSize

package/src/components/post-actions/set-as-posts-page.js

@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -88,7 +88,7 @@ const SetAsPostsPageModal = ( { items, closeModal } ) => {
 	return (
 		<form onSubmit={ onSetPageAsPostsPage }>
 			<VStack spacing="5">
-				<Text>{ modalText }</Text>
+				<WCText>{ modalText }</WCText>
 				<HStack justify="right">
 					<Button
 						__next40pxDefaultSize