Skip to content

Commit

Permalink
Inline Commenting: Update placement of reply input and add author inf…
Browse files Browse the repository at this point in the history
…o header (WordPress#66580)
  • Loading branch information
akasunil authored Nov 18, 2024
1 parent 92199e1 commit 930dfa5
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 176 deletions.
97 changes: 20 additions & 77 deletions packages/editor/src/components/collab-sidebar/add-comment.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
Expand All @@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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;
62 changes: 62 additions & 0 deletions packages/editor/src/components/collab-sidebar/comment-form.js
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 930dfa5

Please sign in to comment.