@wordpress/editor 14.33.3-next.36001005c.0 → 14.34.0

package/src/components/collab-sidebar/add-comment.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -18,7 +22,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { focusCommentThread } from './utils';
+import { focusCommentThread, noop } from './utils';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 
@@ -27,6 +31,10 @@ export function AddComment( {
 	showCommentBoard,
 	setShowCommentBoard,
 	commentSidebarRef,
+	reflowComments = noop,
+	isFloating = false,
+	y,
+	refs,
 } ) {
 	const { clientId, blockCommentId } = useSelect( ( select ) => {
 		const { getSelectedBlock } = select( blockEditorStore );
@@ -44,10 +52,29 @@ export function AddComment( {
 
 	return (
 		<VStack
-			className="editor-collab-sidebar-panel__thread is-selected"
+			className={ clsx(
+				'editor-collab-sidebar-panel__thread is-selected',
+				{
+					'is-floating': isFloating,
+				}
+			) }
 			spacing="3"
 			tabIndex={ 0 }
+			aria-label={ __( 'New note' ) }
 			role="listitem"
+			ref={ isFloating ? refs.setFloating : undefined }
+			style={
+				isFloating
+					? // Delay showing the floating note box until a Y position is known to prevent blink.
+					  { top: y, opacity: ! y ? 0 : undefined }
+					: undefined
+			}
+			onBlur={ ( event ) => {
+				if ( event.currentTarget.contains( event.relatedTarget ) ) {
+					return;
+				}
+				setShowCommentBoard( false );
+			} }
 		>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />
@@ -62,8 +89,9 @@ export function AddComment( {
 					setShowCommentBoard( false );
 					blockElement?.focus();
 				} }
+				reflowComments={ reflowComments }
 				submitButtonText={ __( 'Add note' ) }
-				labelText={ __( 'New Note' ) }
+				labelText={ __( 'New note' ) }
 			/>
 		</VStack>
 	);

package/src/components/collab-sidebar/comment-author-info.js

@@ -18,38 +18,45 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { getAvatarBorderColor } from './utils';
 
-/**
- * Render author information for a comment.
- *
- * @param {Object} props        - Component properties.
- * @param {string} props.avatar - URL of the author's avatar.
- * @param {string} props.name   - Name of the author.
- * @param {string} props.date   - Date of the comment.
- * @param {string} props.userId - User ID of the author.
- *
- * @return {React.ReactNode} The JSX element representing the author's information.
- */
 function CommentAuthorInfo( { avatar, name, date, userId } ) {
+	const hasAvatar = !! avatar;
 	const dateSettings = getDateSettings();
 	const {
 		currentUserAvatar,
 		currentUserName,
 		currentUserId,
 		dateFormat = dateSettings.formats.date,
-	} = useSelect( ( select ) => {
-		const { getCurrentUser, getEntityRecord } = select( coreStore );
-		const { getSettings } = select( blockEditorStore );
-		const userData = getCurrentUser();
-		const { __experimentalDiscussionSettings } = getSettings();
-		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			currentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
-			currentUserName: userData?.name,
-			currentUserId: userData?.id,
-			dateFormat: siteSettings?.date_format,
-		};
-	}, [] );
+	} = useSelect(
+		( select ) => {
+			const { canUser, getCurrentUser, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+
+			if ( hasAvatar ) {
+				return {
+					dateFormat: siteSettings?.date_format,
+				};
+			}
+
+			const { getSettings } = select( blockEditorStore );
+			const { __experimentalDiscussionSettings } = getSettings();
+			const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+			const userData = getCurrentUser();
+			return {
+				currentUserAvatar:
+					userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
+				currentUserName: userData?.name,
+				currentUserId: userData?.id,
+				dateFormat: siteSettings?.date_format,
+			};
+		},
+		[ hasAvatar ]
+	);
 
 	const commentDate = getDate( date );
 	const commentDateTime = dateI18n( 'c', commentDate );

package/src/components/collab-sidebar/comment-indicator-toolbar.js

@@ -6,11 +6,6 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * Internal dependencies
  */
@@ -19,7 +14,7 @@ import { getAvatarBorderColor } from './utils';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
+const CommentAvatarIndicator = ( { onClick, thread } ) => {
 	const threadParticipants = useMemo( () => {
 		if ( ! thread ) {
 			return [];
@@ -34,15 +29,13 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		allComments.forEach( ( comment ) => {
 			// Track thread participants (original commenter + repliers).
 			if ( comment.author_name && comment.author_avatar_urls ) {
-				const authorKey = `${ comment.author }-${ comment.author_name }`;
-				if ( ! participantsMap.has( authorKey ) ) {
-					participantsMap.set( authorKey, {
+				if ( ! participantsMap.has( comment.author ) ) {
+					participantsMap.set( comment.author, {
 						name: comment.author_name,
 						avatar:
 							comment.author_avatar_urls?.[ '48' ] ||
 							comment.author_avatar_urls?.[ '96' ],
 						id: comment.author,
-						isOriginalCommenter: comment.id === thread.id,
 						date: comment.date,
 					} );
 				}
@@ -52,14 +45,6 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		return Array.from( participantsMap.values() );
 	}, [ thread ] );
 
-	const hasUnresolved = thread?.status !== 'approved';
-
-	// Check if this specific thread has more participants due to pagination.
-	// If we have pagination AND this thread + its replies equals or exceeds the API limit,
-	// then this thread likely has more participants that weren't loaded.
-	const threadHasMoreParticipants =
-		hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
-
 	if ( ! threadParticipants.length ) {
 		return null;
 	}
@@ -68,6 +53,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	const maxAvatars = 3;
 	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
 	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
 	const overflowText =
@@ -95,9 +81,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className={ clsx( 'comment-avatar-indicator', {
-					'has-unresolved': hasUnresolved,
-				} ) }
+				className="comment-avatar-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
@@ -105,7 +89,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 				<div className="comment-avatar-stack">
 					{ visibleParticipants.map( ( participant, index ) => (
 						<img
-							key={ participant.name + index }
+							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"

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

@@ -6,7 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	RawHTML,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
@@ -33,32 +39,19 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { getCommentExcerpt, focusCommentThread } from './utils';
+import { focusCommentThread, getCommentExcerpt } from './utils';
 import { useFloatingThread } from './hooks';
+import { AddComment } from './add-comment';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
 
-/**
- * Renders the Comments component.
- *
- * @param {Object}   props                     - The component props.
- * @param {Array}    props.threads             - The array of comment threads.
- * @param {Function} props.onEditComment       - The function to handle comment editing.
- * @param {Function} props.onAddReply          - The function to add a reply to a comment.
- * @param {Function} props.onCommentDelete     - The function to delete a comment.
- * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
- * @param {Ref}      props.commentSidebarRef   - The ref to the comment sidebar.
- * @param {Function} props.reflowComments      - The function to call indicating a comment is updated.
- * @param {boolean}  props.isFloating          - Whether the comment thread is floating.
- * @param {number}   props.commentLastUpdated  - Timestamp of the last comment update.
- * @return {React.ReactNode} The rendered Comments component.
- */
 export function Comments( {
-	threads,
+	threads: noteThreads,
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
+	showCommentBoard,
 	setShowCommentBoard,
 	commentSidebarRef,
 	reflowComments,
@@ -70,20 +63,62 @@ export function Comments( {
 	const [ boardOffsets, setBoardOffsets ] = useState( {} );
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
-	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return {
-			blockCommentId: clientId
-				? getBlockAttributes( clientId )?.metadata?.noteId
-				: null,
-			selectedBlockClientId: clientId,
-		};
-	}, [] );
+	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
+		useSelect( ( select ) => {
+			const { getBlockAttributes, getSelectedBlockClientId } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockCommentId: clientId
+					? getBlockAttributes( clientId )?.metadata?.noteId
+					: null,
+				selectedBlockClientId: clientId,
+				orderedBlockIds: select( blockEditorStore ).getBlockOrder(),
+			};
+		}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
+	const threads = useMemo( () => {
+		const t = [ ...noteThreads ];
+		const orderedThreads = [];
+		// In floating mode, when the note board is shown, and as long
+		// as the selected block doesn't have an existing note attached -
+		// add a "new note" entry to the threads. This special thread type
+		// gets sorted and floated like regular threads, but shows an AddComment
+		// component instead of a regular comment thread.
+		if ( isFloating && showCommentBoard && undefined === blockCommentId ) {
+			// Insert the new note entry at the correct location for its blockId.
+			const newNoteThread = {
+				id: 'new-note-thread',
+				blockClientId: selectedBlockClientId,
+				content: { rendered: '' },
+			};
+			// Insert the new comment block at the right order within the threads.
+			orderedBlockIds.forEach( ( blockId ) => {
+				if ( blockId === selectedBlockClientId ) {
+					orderedThreads.push( newNoteThread );
+				} else {
+					const threadForBlock = t.find(
+						( thread ) => thread.blockClientId === blockId
+					);
+					if ( threadForBlock ) {
+						orderedThreads.push( threadForBlock );
+					}
+				}
+			} );
+			return orderedThreads;
+		}
+		return t;
+	}, [
+		noteThreads,
+		isFloating,
+		showCommentBoard,
+		blockCommentId,
+		selectedBlockClientId,
+		orderedBlockIds,
+	] );
+
 	const handleDelete = async ( comment ) => {
 		const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
 		const nextThread = threads[ currentIndex + 1 ];
@@ -247,17 +282,33 @@ export function Comments( {
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	if ( ! hasThreads && ! isFloating ) {
 		return (
-			<VStack alignment="left" justify="flex-start" spacing="2">
+			<>
+				<AddComment
+					onSubmit={ onAddReply }
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
+				/>
 				<Text as="p">{ __( 'No notes available.' ) }</Text>
 				<Text as="p" variant="muted">
 					{ __( 'Only logged in users can see Notes.' ) }
 				</Text>
-			</VStack>
+			</>
 		);
 	}
 
 	return (
-		<VStack spacing="3">
+		<>
+			{ ! isFloating &&
+				showCommentBoard &&
+				undefined === blockCommentId && (
+					<AddComment
+						onSubmit={ onAddReply }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+					/>
+				) }
 			{ threads.map( ( thread ) => (
 				<Thread
 					key={ thread.id }
@@ -276,9 +327,10 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
+					showCommentBoard={ showCommentBoard }
 				/>
 			) ) }
-		</VStack>
+		</>
 	);
 }
 
@@ -298,6 +350,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
+	showCommentBoard,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -347,7 +400,7 @@ function Thread( {
 	const restReplies = allReplies.length > 0 ? allReplies.slice( 0, -1 ) : [];
 
 	const commentExcerpt = getCommentExcerpt(
-		stripHTML( thread.content.rendered ),
+		stripHTML( thread.content?.rendered ),
 		10
 	);
 	const ariaLabel = !! thread.blockClientId
@@ -362,6 +415,21 @@ function Thread( {
 				commentExcerpt
 		  );
 
+	if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
+		return (
+			<AddComment
+				onSubmit={ onAddReply }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+				commentSidebarRef={ commentSidebarRef }
+				reflowComments={ reflowComments }
+				isFloating={ isFloating }
+				y={ y }
+				refs={ refs }
+			/>
+		);
+	}
+
 	return (
 		// Disable reason: role="listitem" does in fact support aria-expanded.
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
@@ -378,6 +446,9 @@ function Thread( {
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
 			onKeyDown={ ( event ) => {
+				if ( event.defaultPrevented ) {
+					return;
+				}
 				// Expand or Collapse thread.
 				if (
 					event.key === 'Enter' &&
@@ -745,7 +816,9 @@ const CommentBoard = ( {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{ __( 'Are you sure you want to delete this note?' ) }
+					{ __(
+						"Are you sure you want to delete this note? This will also delete all of this note's replies."
+					) }
 				</ConfirmDialog>
 			) }
 		</VStack>

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

@@ -50,10 +50,10 @@ export function useBlockComments( postId ) {
 		post: postId,
 		type: 'note',
 		status: 'all',
-		per_page: 100,
+		per_page: -1,
 	};
 
-	const { records: threads, totalPages } = useEntityRecords(
+	const { records: threads } = useEntityRecords(
 		'root',
 		'comment',
 		queryArgs,
@@ -160,7 +160,6 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	};
@@ -399,7 +398,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs ] );
+	}, [ blockRef, refs, commentLastUpdated ] );
 
 	// Track thread heights.
 	useEffect( () => {

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

@@ -20,7 +20,6 @@ import {
 	SIDEBARS,
 } from './constants';
 import { Comments } from './comments';
-import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentMenuItem from './comment-menu-item';
 import CommentAvatarIndicator from './comment-indicator-toolbar';
@@ -31,9 +30,9 @@ import {
 	useEnableFloatingSidebar,
 } from './hooks';
 import { focusCommentThread } from './utils';
-import PluginMoreMenuItem from '../plugin-more-menu-item';
+import PostTypeSupportCheck from '../post-type-support-check';
 
-function CollabSidebarContent( {
+function NotesSidebarContent( {
 	showCommentBoard,
 	setShowCommentBoard,
 	styles,
@@ -61,12 +60,6 @@ function CollabSidebarContent( {
 				}
 			} }
 		>
-			<AddComment
-				onSubmit={ onCreate }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
-				commentSidebarRef={ commentSidebarRef }
-			/>
 			<Comments
 				threads={ comments }
 				onEditComment={ onEdit }
@@ -83,22 +76,14 @@ function CollabSidebarContent( {
 	);
 }
 
-/**
- * Renders the Collab sidebar.
- */
-export default function CollabSidebar() {
+function NotesSidebar( { postId, mode } ) {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
-	const { postId } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
-		return {
-			postId: getCurrentPostId(),
-		};
-	}, [] );
+	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
 	const blockCommentId = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
@@ -112,17 +97,14 @@ export default function CollabSidebar() {
 	const {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	} = useBlockComments( postId );
 	useEnableFloatingSidebar(
-		isLargeViewport &&
+		showFloatingSidebar &&
 			( unresolvedSortedThreads.length > 0 || showCommentBoard )
 	);
 
-	const hasMoreComments = totalPages && totalPages > 1;
-
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
@@ -132,20 +114,18 @@ export default function CollabSidebar() {
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
 		: null;
 
-	// If postId is not a valid number, do not render the comment sidebar.
-	if ( ! ( !! postId && typeof postId === 'number' ) ) {
-		return null;
-	}
-
 	async function openTheSidebar() {
 		const prevArea = await getActiveComplementaryArea( 'core' );
 		const activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );
 
-		// If the notes sidebar is not already active, enable the floating sidebar.
-		if ( ! activeNotesArea ) {
+		if ( currentThread?.status === 'approved' ) {
+			enableComplementaryArea( 'core', collabHistorySidebarName );
+		} else if ( ! activeNotesArea ) {
 			enableComplementaryArea(
 				'core',
-				isLargeViewport ? collabSidebarName : collabHistorySidebarName
+				showFloatingSidebar
+					? collabSidebarName
+					: collabHistorySidebarName
 			);
 		}
 
@@ -169,18 +149,18 @@ export default function CollabSidebar() {
 			{ blockCommentId && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
-					hasMoreComments={ hasMoreComments }
 					onClick={ openTheSidebar }
 				/>
 			) }
 			<AddCommentMenuItem onClick={ openTheSidebar } />
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
+				name={ collabHistorySidebarName }
 				title={ __( 'Notes' ) }
 				icon={ commentIcon }
 				closeLabel={ __( 'Close Notes' ) }
 			>
-				<CollabSidebarContent
+				<NotesSidebarContent
 					comments={ resultComments }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
@@ -198,7 +178,7 @@ export default function CollabSidebar() {
 					headerClassName="editor-collab-sidebar__header"
 					backgroundColor={ backgroundColor }
 				>
-					<CollabSidebarContent
+					<NotesSidebarContent
 						comments={ unresolvedSortedThreads }
 						showCommentBoard={ showCommentBoard }
 						setShowCommentBoard={ setShowCommentBoard }
@@ -212,14 +192,26 @@ export default function CollabSidebar() {
 					/>
 				</PluginSidebar>
 			) }
-			<PluginMoreMenuItem
-				icon={ commentIcon }
-				onClick={ () =>
-					enableComplementaryArea( 'core', collabHistorySidebarName )
-				}
-			>
-				{ __( 'Notes' ) }
-			</PluginMoreMenuItem>
 		</>
 	);
 }
+
+export default function NotesSidebarContainer() {
+	const { postId, mode } = useSelect( ( select ) => {
+		const { getCurrentPostId, getRenderingMode } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			mode: getRenderingMode(),
+		};
+	}, [] );
+
+	if ( ! postId || typeof postId !== 'number' ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys="editor.notes">
+			<NotesSidebar postId={ postId } mode={ mode } />
+		</PostTypeSupportCheck>
+	);
+}

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

@@ -16,7 +16,7 @@
 }
 
 .editor-collab-sidebar-panel {
-	padding: $grid-unit-20;
+	padding: $grid-unit-20 $grid-unit-20 $grid-unit-30;
 	height: 100%;
 	overflow: hidden;
 }
@@ -161,27 +161,6 @@
 	min-width: auto;
 	background: transparent;
 	border: none;
-
-	&:hover::before {
-		background: rgba(0, 0, 0, 0.04);
-	}
-
-	&.has-unresolved {
-		.comment-avatar-stack {
-			&::after {
-				content: "";
-				position: absolute;
-				top: -2px;
-				right: -2px;
-				width: $grid-unit-10;
-				height: $grid-unit-10;
-				background: #d63638;
-				border-radius: $radius-round;
-				border: $border-width solid $white;
-				z-index: 10;
-			}
-		}
-	}
 }
 
 .comment-avatar-stack {