Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Nov 18, 2024
Merged

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

Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9aa7b82
Update placement of reply input and add author info header
akasunil Oct 29, 2024
cdf5903
Merge branch 'trunk' of github.com:WordPress/gutenberg into try/inlin…
akasunil Oct 30, 2024
2e3c1d3
Moved the comment author info component to a separate file
akasunil Oct 30, 2024
ec881d4
Reuse CommentAuthorInfo component into AddComment
akasunil Oct 30, 2024
ca47581
Fix date issue
akasunil Oct 30, 2024
01caa5c
Merge branch 'trunk' of github.com:WordPress/gutenberg into try/inlin…
akasunil Oct 30, 2024
b9d56a1
Synced with trunk and resolved conflicts
akasunil Nov 4, 2024
bcd082d
Extracted comment form to separate component to reusability
akasunil Nov 4, 2024
51ef3b1
Cleanup and error fix
akasunil Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 86 additions & 47 deletions packages/editor/src/components/collab-sidebar/comments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
import { Icon, check, published, moreVertical } from '@wordpress/icons';
import { __, _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useEntityProp, store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
Expand Down Expand Up @@ -209,14 +209,33 @@ export function Comments( {
spacing="3"
>
<CommentBoard thread={ thread } />
{ 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 && (
<HStack
alignment="left"
spacing="3"
justify="flex-start"
className="editor-collab-sidebar-panel__user-comment"
<VStack
className="editor-collab-sidebar-panel__child-thread"
spacing="2"
>
<HStack
alignment="left"
spacing="3"
justify="flex-start"
>
<CommentAuthorInfo />
</HStack>
<VStack
spacing="3"
className="editor-collab-sidebar-panel__comment-field"
Expand All @@ -234,22 +253,8 @@ export function Comments( {
}
/>
</VStack>
</HStack>
) }
{ 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>
) ) }
) }
</VStack>
) ) }
</>
Expand Down Expand Up @@ -321,13 +326,6 @@ function CommentHeader( {
onReply,
status,
} ) {
const dateSettings = getDateSettings();
const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
'root',
'site',
'time_format'
);

const actions = [
{
title: _x( 'Edit', 'Edit comment' ),
Expand All @@ -347,29 +345,15 @@ function CommentHeader( {

return (
<HStack alignment="left" spacing="3" justify="flex-start">
<img
src={ thread?.author_avatar_urls?.[ 48 ] }
className="editor-collab-sidebar-panel__user-avatar"
// translators: alt text for user avatar image
alt={ __( 'User avatar' ) }
width={ 32 }
height={ 32 }
<CommentAuthorInfo
avatar={ thread?.author_avatar_urls?.[ 48 ] }
name={ thread?.author_name }
date={ thread?.date }
/>
<VStack spacing="0">
<span className="editor-collab-sidebar-panel__user-name">
{ thread.author_name }
</span>
<time
dateTime={ format( 'h:i A', thread.date ) }
className="editor-collab-sidebar-panel__user-time"
>
{ dateI18n( dateTimeFormat, thread.date ) }
</time>
</VStack>
<span className="editor-collab-sidebar-panel__comment-status">
{ status !== 'approved' && (
<HStack alignment="right" justify="flex-end" spacing="0">
{ 0 === thread.parent && onResolve && (
{ 0 === thread?.parent && onResolve && (
<Button
label={ _x(
'Resolve',
Expand Down Expand Up @@ -402,3 +386,58 @@ function CommentHeader( {
</HStack>
);
}

/**
* 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 } ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we reuse this in AddComment?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, definitely. I'll update the PR.

const dateSettings = getDateSettings();
const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
'root',
'site',
'time_format'
);

const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
const currentUserId = select( coreStore ).getCurrentUser()?.id;
const user = select( coreStore ).getUser( currentUserId );

return {
currentUserAvatar: user?.avatar_urls?.[ 48 ],
currentUserName: user?.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={ format( 'h:i A', date ?? currentDate ) }
className="editor-collab-sidebar-panel__user-time"
>
{ dateI18n( dateTimeFormat, date ?? currentDate ) }
</time>
</VStack>
</>
);
}
Loading