Inline Commenting: Update placement of reply input and add author info header

packages/editor/src/components/collab-sidebar/add-comment.js

@@ -1,22 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Button,
-	TextControl,
 } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
 
 /**
  * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
@@ -32,39 +29,14 @@ export function AddComment( {
 	showCommentBoard,
 	setShowCommentBoard,
 } ) {
-	// State to manage the comment thread.
-	const [ inputComment, setInputComment ] = useState( '' );
-
-	const { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(
-		( select ) => {
-			const { getSettings, getSelectedBlock } =
-				select( blockEditorStore );
-			const { __experimentalDiscussionSettings } = getSettings();
-			const selectedBlock = getSelectedBlock();
-			const userData = select( coreStore ).getCurrentUser();
-			return {
-				defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
-				clientId: selectedBlock?.clientId,
-				blockCommentId: selectedBlock?.attributes?.blockCommentId,
-				currentUser: userData,
-			};
-		},
-		[]
-	);
-
-	const userAvatar =
-		currentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]
-			? currentUser.avatar_urls[ 48 ]
-			: defaultAvatar;
-
-	useEffect( () => {
-		setInputComment( '' );
-	}, [ clientId ] );
-
-	const handleCancel = () => {
-		setShowCommentBoard( false );
-		setInputComment( '' );
-	};
+	const { clientId, blockCommentId } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		const selectedBlock = getSelectedBlock();
+		return {
+			clientId: selectedBlock?.clientId,
+			blockCommentId: selectedBlock?.attributes?.blockCommentId,
+		};
+	} );
 
 	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
 		return null;
@@ -76,46 +48,17 @@ export function AddComment( {
 			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
 		>
 			<HStack alignment="left" spacing="3">
-				<img
-					src={ userAvatar }
-					// translators: alt text for user avatar image
-					alt={ __( 'User Avatar' ) }
-					className="editor-collab-sidebar-panel__user-avatar"
-					width={ 32 }
-					height={ 32 }
-				/>
-				<span className="editor-collab-sidebar-panel__user-name">
-					{ currentUser?.name ?? '' }
-				</span>
+				<CommentAuthorInfo />
 			</HStack>
-			<TextControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				value={ inputComment }
-				onChange={ setInputComment }
-				placeholder={ _x( 'Comment', 'noun' ) }
+			<CommentForm
+				onSubmit={ ( inputComment ) => {
+					onSubmit( inputComment );
+				} }
+				onCancel={ () => {
+					setShowCommentBoard( false );
+				} }
+				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
 			/>
-			<HStack alignment="right" spacing="3">
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					text={ _x( 'Cancel', 'Cancel comment button' ) }
-					onClick={ handleCancel }
-				/>
-				<Button
-					__next40pxDefaultSize
-					accessibleWhenDisabled
-					variant="primary"
-					text={ _x( 'Comment', 'Add comment button' ) }
-					disabled={
-						0 === sanitizeCommentString( inputComment ).length
-					}
-					onClick={ () => {
-						onSubmit( inputComment );
-						setInputComment( '' );
-					} }
-				/>
-			</HStack>
 		</VStack>
 	);
 }

packages/editor/src/components/collab-sidebar/comment-author-info.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * 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.
+ *
+ * @return {JSX.Element} The JSX element representing the author's information.
+ */
+function CommentAuthorInfo( { avatar, name, date } ) {
+	const dateSettings = getDateSettings();
+	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
+
+	const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
+		const userData = select( coreStore ).getCurrentUser();
+
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+		return {
+			currentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,
+			currentUserName: userData?.name,
+		};
+	}, [] );
+
+	const currentDate = new Date();
+
+	return (
+		<>
+			<img
+				src={ avatar ?? currentUserAvatar }
+				className="editor-collab-sidebar-panel__user-avatar"
+				// translators: alt text for user avatar image
+				alt={ __( 'User avatar' ) }
+				width={ 32 }
+				height={ 32 }
+			/>
+			<VStack spacing="0">
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ name ?? currentUserName }
+				</span>
+				<time
+					dateTime={ dateI18n( 'c', date ?? currentDate ) }
+					className="editor-collab-sidebar-panel__user-time"
+				>
+					{ dateI18n( dateTimeFormat, date ?? currentDate ) }
+				</time>
+			</VStack>
+		</>
+	);
+}
+
+export default CommentAuthorInfo;

packages/editor/src/components/collab-sidebar/comment-form.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	Button,
+	TextareaControl,
+} from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Function} props.onSubmit         - The function to call when updating the comment.
+ * @param {Function} props.onCancel         - The function to call when canceling the comment update.
+ * @param {Object}   props.thread           - The comment thread object.
+ * @param {string}   props.submitButtonText - The text to display on the submit button.
+ * @return {JSX.Element} The CommentForm component.
+ */
+function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+	const [ inputComment, setInputComment ] = useState(
+		thread?.content?.raw ?? ''
+	);
+
+	return (
+		<>
+			<TextareaControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment ?? '' }
+				onChange={ setInputComment }
+			/>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					onClick={ () => onSubmit( inputComment ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					text={ submitButtonText }
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onCancel }
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+				/>
+			</HStack>
+		</>
+	);
+}
+
+export default CommentForm;