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

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

@@ -1,25 +1,25 @@
 /**
  * Internal dependencies
  */
-import { calculateAllOffsets } from '../utils';
+import { calculateNotePositions } from '../utils';
 
 function makeRect( top ) {
 	return { top };
 }
 
-describe( 'calculateAllOffsets', () => {
-	it( 'returns empty offsets when no threads match blockRects', () => {
-		const { offsets, minHeight } = calculateAllOffsets( {
+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( offsets ).toEqual( {} );
-		expect( minHeight ).toBe( 0 );
+		expect( positions ).toEqual( {} );
 	} );
 
-	it( 'assigns default offset when there is no selected thread', () => {
+	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 ),
@@ -28,68 +28,43 @@ describe( 'calculateAllOffsets', () => {
 		};
 		const heights = { 1: 50, 2: 50, 3: 50 };
 
-		const { offsets } = calculateAllOffsets( {
+		const { positions } = calculateNotePositions( {
 			threads,
 			selectedNoteId: undefined,
 			blockRects,
 			heights,
+			scrollTop: 0,
 		} );
 
-		// 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 );
+		// 1: 100 - 16 = 84
+		// 2: 300 - 16 = 284
+		// 3: 500 - 16 = 484
+		expect( positions ).toEqual( { 1: 84, 2: 284, 3: 484 } );
 	} );
 
-	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', () => {
+	it( 'pushes an overlapping thread above the anchor upward', () => {
 		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( {
+		const { positions } = calculateNotePositions( {
 			threads,
 			selectedNoteId: 2,
 			blockRects,
 			heights,
+			scrollTop: 0,
 		} );
 
-		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 );
+		// 2 (anchor): 180 - 16 = 164
+		// 1 (upward):  164 - 60 - 20 = 84
+		expect( positions ).toEqual( { 1: 84, 2: 164 } );
 	} );
 
-	it( 'cascades overlap adjustment across multiple threads below', () => {
+	it( 'cascades downward offsets through consecutive overlapping threads', () => {
 		const threads = [ { id: 1 }, { id: 2 }, { id: 3 } ];
-		// All three threads are tightly packed.
 		const blockRects = {
 			1: makeRect( 100 ),
 			2: makeRect( 110 ),
@@ -97,57 +72,84 @@ describe( 'calculateAllOffsets', () => {
 		};
 		const heights = { 1: 80, 2: 80, 3: 80 };
 
-		const { offsets } = calculateAllOffsets( {
+		const { positions } = calculateNotePositions( {
 			threads,
 			selectedNoteId: 1,
 			blockRects,
 			heights,
+			scrollTop: 0,
 		} );
 
-		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 );
+		// 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( 'skips threads with missing blockRects', () => {
+	it( 'omits threads that have no blockRect', () => {
 		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( {
+		const { positions } = calculateNotePositions( {
 			threads,
 			selectedNoteId: 1,
 			blockRects,
 			heights,
+			scrollTop: 0,
 		} );
 
-		expect( offsets[ 1 ] ).toBe( -16 );
-		expect( offsets[ 2 ] ).toBeUndefined();
-		expect( offsets[ 3 ] ).toBe( -16 );
+		// 1: 100 - 16 = 84
+		// 3: 500 - 16 = 484
+		expect( positions ).toEqual( { 1: 84, 3: 484 } );
 	} );
 
-	it( 'computes minHeight from the last thread position', () => {
+	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( 400 ),
+			2: makeRect( 300 ),
 		};
-		const heights = { 1: 50, 2: 60 };
+		const heights = { 1: 50, 2: 50 };
 
-		const { minHeight } = calculateAllOffsets( {
+		const { positions } = calculateNotePositions( {
 			threads,
 			selectedNoteId: 1,
 			blockRects,
 			heights,
+			scrollTop: 500,
 		} );
 
-		// Last thread: top=400, height=60, offset=-16, + 32 = 476.
-		expect( minHeight ).toBe( 476 );
+		// 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();
 }
 
 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
@@ -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,22 +91,24 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
 }
 
 /**
- * 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.
+ * 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.
- * @return {{ offsets: Object<string,number>, minHeight: number }} Computed offsets and minimum editor height.
+ * @param {number}                  params.scrollTop      Current scroll offset of the editor content.
+ * @return {{ positions: Object<string,number> }} Computed top positions.
  */
-export function calculateAllOffsets( {
+export function calculateNotePositions( {
 	threads,
 	selectedNoteId,
 	blockRects,
 	heights,
+	scrollTop = 0,
 } ) {
 	const offsets = {};
 
@@ -119,7 +120,7 @@ export function calculateAllOffsets( {
 	const anchorThread = threads[ anchorIndex ];
 
 	if ( ! anchorThread || ! blockRects[ anchorThread.id ] ) {
-		return { offsets, minHeight: 0 };
+		return { positions: {} };
 	}
 
 	const anchorRect = blockRects[ anchorThread.id ];
@@ -182,42 +183,39 @@ export function calculateAllOffsets( {
 		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;
+	// 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 { offsets, minHeight: editorMinHeight };
+	return { positions };
 }
 
 /**
- * Shift focus to the comment thread associated with a particular comment ID.
+ * 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/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/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/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
@@ -135,7 +131,7 @@ export default function MoreMenu( { disabled = false } ) {
 								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

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

@@ -6,7 +6,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { close } from '@wordpress/icons';
@@ -28,7 +28,7 @@ import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 /**
  * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
@@ -131,7 +131,7 @@ export default function PostCardPanel( {
 				alignment="flex-start"
 			>
 				<Icon className="editor-post-card-panel__icon" icon={ icon } />
-				<Text
+				<WCText
 					numberOfLines={ 2 }
 					truncate
 					className="editor-post-card-panel__title"
@@ -141,9 +141,9 @@ export default function PostCardPanel( {
 						{ title }
 					</span>
 					{ pageTypeBadge && postIds.length === 1 && (
-						<Badge>{ pageTypeBadge }</Badge>
+						<WCBadge>{ pageTypeBadge }</WCBadge>
 					) }
-				</Text>
+				</WCText>
 				{ ! hideActions && postIds.length === 1 && (
 					<PostActions
 						postType={ postType }
@@ -161,13 +161,13 @@ export default function PostCardPanel( {
 				) }
 			</HStack>
 			{ postIds.length > 1 && (
-				<Text className="editor-post-card-panel__description">
+				<WCText className="editor-post-card-panel__description">
 					{ sprintf(
 						// translators: %s: Name of the plural post type e.g: "Posts".
 						__( 'Changes will be applied to all selected %s.' ),
 						labels?.name.toLowerCase()
 					) }
-				</Text>
+				</WCText>
 			) }
 		</VStack>
 	);