diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index 8c7a710bce308a..39303620dd6222 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch, resolveSelect } from '@wordpress/data';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
import { comment as commentIcon } from '@wordpress/icons';
import { addFilter } from '@wordpress/hooks';
import { store as noticesStore } from '@wordpress/notices';
@@ -22,7 +22,7 @@ import { store as editorStore } from '../../store';
import AddCommentButton from './comment-button';
import AddCommentToolbarButton from './comment-button-toolbar';
-const threadsEmptyArray = [];
+const EMPTY_ARRAY = [];
const isBlockCommentExperimentEnabled =
window?.__experimentalEnableBlockComment;
@@ -54,50 +54,41 @@ export default function CollabSidebar() {
const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
const { getEntityRecord } = resolveSelect( coreStore );
const { enableComplementaryArea } = useDispatch( interfaceStore );
- const [ blockCommentID, setBlockCommentID ] = useState( null );
const [ showCommentBoard, setShowCommentBoard ] = useState( false );
- const { postId } = useSelect( ( select ) => {
+
+ const { postId, postStatus, threads } = useSelect( ( select ) => {
+ const { getCurrentPostId, getEditedPostAttribute } =
+ select( editorStore );
+ const _postId = getCurrentPostId();
+ const data = !! _postId
+ ? select( coreStore ).getEntityRecords( 'root', 'comment', {
+ post: _postId,
+ type: 'block_comment',
+ status: 'any',
+ per_page: 100,
+ } )
+ : null;
+
return {
- postId: select( editorStore ).getCurrentPostId(),
+ postId: _postId,
+ postStatus: getEditedPostAttribute( 'status' ),
+ threads: data ?? EMPTY_ARRAY,
};
}, [] );
- const postStatus = useSelect( ( select ) => {
- const post = select( editorStore ).getCurrentPost();
- return { postStatus: post?.status };
- }, [] );
-
- const threads = useSelect(
- ( select ) => {
- if ( ! postId ) {
- return threadsEmptyArray;
- }
- const { getEntityRecords } = select( coreStore );
- const data = getEntityRecords( 'root', 'comment', {
- post: postId,
- type: 'block_comment',
- status: 'any',
- per_page: 100,
- } );
- return data || threadsEmptyArray;
- },
- [ postId ]
- );
+ const { clientId, blockCommentId } = useSelect( ( select ) => {
+ const { getBlockAttributes, getSelectedBlockClientId } =
+ select( blockEditorStore );
+ const _clientId = getSelectedBlockClientId();
- const clientId = useSelect( ( select ) => {
- const { getSelectedBlockClientId } = select( blockEditorStore );
- return getSelectedBlockClientId();
+ return {
+ clientId: _clientId,
+ blockCommentId: _clientId
+ ? getBlockAttributes( _clientId )?.blockCommentId
+ : null,
+ };
}, [] );
- const blockDetails = useSelect(
- ( select ) => {
- return clientId
- ? select( blockEditorStore ).getBlock( clientId )
- : null;
- },
- [ clientId ]
- );
-
// Get the dispatch functions to save the comment and update the block attributes.
const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -257,27 +248,18 @@ export default function CollabSidebar() {
);
};
- useEffect( () => {
- if ( blockDetails ) {
- setBlockCommentID( blockDetails?.attributes.blockCommentId );
- }
- }, [ postId, clientId ] );
-
// Check if the experimental flag is enabled.
- if (
- ! isBlockCommentExperimentEnabled ||
- postStatus.postStatus === 'publish'
- ) {
+ if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) {
return null; // or maybe return some message indicating no threads are available.
}
return (
<>
- { ! blockCommentID && (
+ { ! blockCommentId && (
) }
- { blockCommentID > 0 && (
+ { blockCommentId > 0 && (
) }