Resolved conflict and sync with trunk

packages/block-library/src/image/block.json

@@ -4,7 +4,14 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"postId",
+		"postType",
+		"queryId"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

packages/block-library/src/post-content/block.json

@@ -69,4 +69,4 @@
 	},
 	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
-}
+}

packages/editor/src/components/collab-sidebar/comments.js

@@ -195,13 +195,25 @@ export function Comments( {
 						spacing="3"
 					>
 						<CommentBoard thread={ thread } />
-						{ 'edit' !== actionState?.action &&
-							thread.id === blockCommentId && (
-								<HStack
-									alignment="left"
-									spacing="3"
-									justify="flex-start"
-									className="editor-collab-sidebar-panel__user-comment"
+						{ 0 < thread?.reply?.length &&
+							thread.reply.map( ( reply ) => (
+								<VStack
+									key={ reply.id }
+									className="editor-collab-sidebar-panel__child-thread"
+									id={ reply.id }
+									spacing="2"
+								>
+									<CommentBoard
+										thread={ reply }
+										parentThread={ thread }
+									/>
+								</VStack>
+							) ) }
+						{ 'reply' === actionState?.action &&
+							thread.id === actionState?.id && (
+								<VStack
+									className="editor-collab-sidebar-panel__child-thread"
+									spacing="2"
 								>
 									<HStack
 										alignment="left"
@@ -221,6 +233,13 @@ export function Comments( {
 													thread.id
 												);
 											} }
+											onCancel={ () =>
+												setActionState( false )
+											}
+											submitButtonText={ _x(
+												'Reply',
+												'Add reply comment'
+											) }
 										/>
 									</VStack>
 								</VStack>
@@ -231,53 +250,6 @@ export function Comments( {
 	);
 }
 
-/**
- * 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.
- * @return {JSX.Element} The CommentForm component.
- */
-function CommentForm( { onSubmit, onCancel, thread } ) {
-	const [ inputComment, setInputComment ] = useState(
-		thread?.content?.raw ?? ''
-	);
-
-	return (
-		<>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={ inputComment ?? '' }
-				onChange={ setInputComment }
-			/>
-			<VStack alignment="left" spacing="3" justify="flex-start">
-				<HStack alignment="left" spacing="3" justify="flex-start">
-					<Button
-						__next40pxDefaultSize
-						accessibleWhenDisabled
-						variant="primary"
-						onClick={ () => onSubmit( inputComment ) }
-						disabled={
-							0 === sanitizeCommentString( inputComment ).length
-						}
-					>
-						{ thread
-							? _x( 'Update', 'verb' )
-							: _x( 'Reply', 'Add reply comment' ) }
-					</Button>
-					{ onCancel && (
-						<Button __next40pxDefaultSize onClick={ onCancel }>
-							{ _x( 'Cancel', 'Cancel comment edit' ) }
-						</Button>
-					) }
-				</HStack>
-			</VStack>
-		</>
-	);
-}
-
 /**
  * Renders the header of a comment in the collaboration sidebar.
  *
@@ -286,17 +258,18 @@ function CommentForm( { onSubmit, onCancel, thread } ) {
  * @param {Function} props.onResolve - The function to resolve the comment.
  * @param {Function} props.onEdit    - The function to edit the comment.
  * @param {Function} props.onDelete  - The function to delete the comment.
+ * @param {Function} props.onReply   - The function to reply to the comment.
  * @param {string}   props.status    - The status of the comment.
  * @return {JSX.Element} The rendered comment header.
  */
-function CommentHeader( { thread, onResolve, onEdit, onDelete, status } ) {
-	const dateSettings = getDateSettings();
-	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
-		'root',
-		'site',
-		'time_format'
-	);
-
+function CommentHeader( {
+	thread,
+	onResolve,
+	onEdit,
+	onDelete,
+	onReply,
+	status,
+} ) {
 	const actions = [
 		{
 			title: _x( 'Edit', 'Edit comment' ),
@@ -306,6 +279,10 @@ function CommentHeader( { thread, onResolve, onEdit, onDelete, status } ) {
 			title: _x( 'Delete', 'Delete comment' ),
 			onClick: onDelete,
 		},
+		{
+			title: _x( 'Reply', 'Reply on a comment' ),
+			onClick: onReply,
+		},
 	];
 
 	const moreActions = actions.filter( ( item ) => item.onClick );