@wordpress/editor 14.34.0 → 14.35.0

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -28,25 +28,30 @@ const { useBlockElement } = unlock( blockEditorPrivateApis );
 
 export function AddComment( {
 	onSubmit,
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments = noop,
 	isFloating = false,
 	y,
 	refs,
 } ) {
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
+	const { clientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
 		return {
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.metadata?.noteId,
+			clientId: getSelectedBlockClientId(),
 		};
 	}, [] );
 	const blockElement = useBlockElement( clientId );
+	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
 
-	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
+	const unselectThread = () => {
+		setNewNoteFormState( 'closed' );
+		blockElement?.focus();
+		toggleBlockSpotlight( clientId, false );
+	};
+
+	if ( newNoteFormState !== 'open' || ! clientId ) {
 		return null;
 	}
 
@@ -61,7 +66,7 @@ export function AddComment( {
 			spacing="3"
 			tabIndex={ 0 }
 			aria-label={ __( 'New note' ) }
-			role="listitem"
+			role="treeitem"
 			ref={ isFloating ? refs.setFloating : undefined }
 			style={
 				isFloating
@@ -73,7 +78,8 @@ export function AddComment( {
 				if ( event.currentTarget.contains( event.relatedTarget ) ) {
 					return;
 				}
-				setShowCommentBoard( false );
+				toggleBlockSpotlight( clientId, false );
+				setNewNoteFormState( 'closed' );
 			} }
 		>
 			<HStack alignment="left" spacing="3">
@@ -83,12 +89,9 @@ export function AddComment( {
 				onSubmit={ async ( inputComment ) => {
 					const { id } = await onSubmit( { content: inputComment } );
 					focusCommentThread( id, commentSidebarRef.current );
-					setShowCommentBoard( false );
-				} }
-				onCancel={ () => {
-					setShowCommentBoard( false );
-					blockElement?.focus();
+					setNewNoteFormState( 'creating' );
 				} }
+				onCancel={ unselectThread }
 				reflowComments={ reflowComments }
 				submitButtonText={ __( 'Add note' ) }
 				labelText={ __( 'New note' ) }

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

@@ -94,7 +94,7 @@ function CommentAuthorInfo( { avatar, name, date, userId } ) {
 					{ name ?? currentUserName }
 				</span>
 				{ date && (
-					<Tooltip placement="top" text={ tooltipText }>
+					<Tooltip text={ tooltipText }>
 						<time
 							dateTime={ commentDateTime }
 							className="editor-collab-sidebar-panel__user-time"

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

@@ -16,6 +16,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId, useDebounce } from '@wordpress/compose';
+import { isKeyboardEvent } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -50,6 +51,12 @@ function CommentForm( {
 		<VStack
 			className="editor-collab-sidebar-panel__comment-form"
 			spacing="4"
+			as="form"
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				onSubmit( inputComment );
+				setInputComment( '' );
+			} }
 		>
 			<VisuallyHidden as="label" htmlFor={ inputId }>
 				{ labelText ?? __( 'Note' ) }
@@ -63,6 +70,14 @@ function CommentForm( {
 				} }
 				rows={ 1 }
 				maxRows={ 20 }
+				onKeyDown={ ( event ) => {
+					if (
+						isKeyboardEvent.primary( event, 'Enter' ) &&
+						! isDisabled
+					) {
+						event.target.parentNode.requestSubmit();
+					}
+				} }
 			/>
 			<HStack spacing="2" justify="flex-end" wrap>
 				<Button size="compact" variant="tertiary" onClick={ onCancel }>
@@ -72,10 +87,7 @@ function CommentForm( {
 					size="compact"
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => {
-						onSubmit( inputComment );
-						setInputComment( '' );
-					} }
+					type="submit"
 					disabled={ isDisabled }
 				>
 					<Truncate>{ submitButtonText }</Truncate>

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

@@ -1,8 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	ToolbarButton,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -49,10 +53,16 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 		return null;
 	}
 
-	// Show up to 3 avatars, with overflow indicator.
+	// If there are more than 3 participants, show 2 avatars and a "+n" number.
 	const maxAvatars = 3;
-	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
-	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const isOverflow = threadParticipants.length > maxAvatars;
+	const visibleParticipants = isOverflow
+		? threadParticipants.slice( 0, maxAvatars - 1 )
+		: threadParticipants;
+	const overflowCount = Math.max(
+		0,
+		threadParticipants.length - visibleParticipants.length
+	);
 	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
@@ -65,19 +75,6 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 					overflowCount
 			  );
 
-	const overflowTitle =
-		threadHasMoreParticipants && overflowCount > 0
-			? __( '100+ participants' )
-			: sprintf(
-					// translators: %s: Number of participants.
-					_n(
-						'+%s more participant',
-						'+%s more participants',
-						overflowCount
-					),
-					overflowCount
-			  );
-
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
@@ -86,15 +83,14 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 				onClick={ onClick }
 				showTooltip
 			>
-				<div className="comment-avatar-stack">
-					{ visibleParticipants.map( ( participant, index ) => (
+				<HStack spacing="1">
+					{ visibleParticipants.map( ( participant ) => (
 						<img
 							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
 							style={ {
-								zIndex: maxAvatars - index,
 								borderColor: getAvatarBorderColor(
 									participant.id
 								),
@@ -102,15 +98,9 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 						/>
 					) ) }
 					{ overflowCount > 0 && (
-						<div
-							className="comment-avatar-overflow"
-							style={ { zIndex: 0 } }
-							title={ overflowTitle }
-						>
-							{ overflowText }
-						</div>
+						<Text weight={ 500 }>{ overflowText }</Text>
 					) }
-				</div>
+				</HStack>
 			</ToolbarButton>
 		</CommentIconToolbarSlotFill.Fill>
 	);

package/src/components/collab-sidebar/comment-menu-item.js

@@ -4,8 +4,12 @@
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { comment as commentIcon } from '@wordpress/icons';
-
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,23 +18,59 @@ import { unlock } from '../../lock-unlock';
 
 const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 
-const AddCommentMenuItem = ( { onClick } ) => {
+const AddCommentMenuItem = ( { clientId, onClick, isDistractionFree } ) => {
+	const block = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	if (
+		! block?.isValid ||
+		block?.name === getUnregisteredTypeHandlerName()
+	) {
+		return null;
+	}
+
+	const isDisabled = isDistractionFree || block?.name === 'core/freeform';
+
+	let infoText;
+
+	if ( isDistractionFree ) {
+		infoText = __( 'Notes are disabled in distraction free mode.' );
+	} else if ( block?.name === 'core/freeform' ) {
+		infoText = __( 'Convert to blocks to add notes.' );
+	}
+
+	return (
+		<MenuItem
+			icon={ commentIcon }
+			onClick={ onClick }
+			aria-haspopup="dialog"
+			disabled={ isDisabled }
+			info={ infoText }
+		>
+			{ __( 'Add note' ) }
+		</MenuItem>
+	);
+};
+
+const AddCommentMenuItemFill = ( { onClick, isDistractionFree } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
-			{ ( { onClose } ) => (
-				<MenuItem
-					icon={ commentIcon }
+			{ ( { clientId, onClose } ) => (
+				<AddCommentMenuItem
+					clientId={ clientId }
+					isDistractionFree={ isDistractionFree }
 					onClick={ () => {
 						onClick();
 						onClose();
 					} }
-					aria-haspopup="dialog"
-				>
-					{ __( 'Add note' ) }
-				</MenuItem>
+				/>
 			) }
 		</CommentIconSlotFill.Fill>
 	);
 };
 
-export default AddCommentMenuItem;
+export default AddCommentMenuItemFill;