Skip to content

Commit face7ad

Browse files
Mamadukaadamsilversteint-hamano
authored and
gutenbergplugin
committed
Notes: Don't hide floating sidebar while adding the note (#72968)
* Notes: Don't hide floating sidebar while adding the note * Revert focusCommentThread changes * Rename state and it's setter Co-authored-by: Mamaduka <[email protected]> Co-authored-by: adamsilverstein <[email protected]> Co-authored-by: t-hamano <[email protected]>
1 parent 6b50f4f commit face7ad

File tree

4 files changed

+53
-48
lines changed

4 files changed

+53
-48
lines changed

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ const { useBlockElement } = unlock( blockEditorPrivateApis );
2828

2929
export function AddComment( {
3030
onSubmit,
31-
showCommentBoard,
32-
setShowCommentBoard,
31+
newNoteFormState,
32+
setNewNoteFormState,
3333
commentSidebarRef,
3434
reflowComments = noop,
3535
isFloating = false,
@@ -48,12 +48,16 @@ export function AddComment( {
4848
const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
4949

5050
const unselectThread = () => {
51-
setShowCommentBoard( false );
51+
setNewNoteFormState( 'closed' );
5252
blockElement?.focus();
5353
toggleBlockSpotlight( clientId, false );
5454
};
5555

56-
if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
56+
if (
57+
newNoteFormState !== 'open' ||
58+
! clientId ||
59+
undefined !== blockCommentId
60+
) {
5761
return null;
5862
}
5963

@@ -81,7 +85,7 @@ export function AddComment( {
8185
return;
8286
}
8387
toggleBlockSpotlight( clientId, false );
84-
setShowCommentBoard( false );
88+
setNewNoteFormState( 'closed' );
8589
} }
8690
>
8791
<HStack alignment="left" spacing="3">
@@ -91,7 +95,7 @@ export function AddComment( {
9195
onSubmit={ async ( inputComment ) => {
9296
const { id } = await onSubmit( { content: inputComment } );
9397
focusCommentThread( id, commentSidebarRef.current );
94-
setShowCommentBoard( false );
98+
setNewNoteFormState( 'creating' );
9599
} }
96100
onCancel={ unselectThread }
97101
reflowComments={ reflowComments }

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ export function Comments( {
5353
onEditComment,
5454
onAddReply,
5555
onCommentDelete,
56-
showCommentBoard,
57-
setShowCommentBoard,
56+
newNoteFormState,
57+
setNewNoteFormState,
5858
commentSidebarRef,
5959
reflowComments,
6060
isFloating = false,
@@ -93,7 +93,11 @@ export function Comments( {
9393
// add a "new note" entry to the threads. This special thread type
9494
// gets sorted and floated like regular threads, but shows an AddComment
9595
// component instead of a regular comment thread.
96-
if ( isFloating && showCommentBoard && undefined === blockCommentId ) {
96+
if (
97+
isFloating &&
98+
newNoteFormState === 'open' &&
99+
undefined === blockCommentId
100+
) {
97101
// Insert the new note entry at the correct location for its blockId.
98102
const newNoteThread = {
99103
id: 'new-note-thread',
@@ -119,7 +123,7 @@ export function Comments( {
119123
}, [
120124
noteThreads,
121125
isFloating,
122-
showCommentBoard,
126+
newNoteFormState,
123127
blockCommentId,
124128
selectedBlockClientId,
125129
orderedBlockIds,
@@ -147,7 +151,7 @@ export function Comments( {
147151
focusCommentThread( prevThread.id, commentSidebarRef.current );
148152
} else {
149153
setSelectedThread( null );
150-
setShowCommentBoard( false );
154+
setNewNoteFormState( 'closed' );
151155
// Move focus to the related block.
152156
relatedBlockElement?.focus();
153157
}
@@ -156,9 +160,9 @@ export function Comments( {
156160
// Auto-select the related comment thread when a block is selected.
157161
useEffect( () => {
158162
// Fallback to 'new-note-thread' when showing the comment board for a new note.
159-
const fallback = showCommentBoard ? 'new-note-thread' : null;
163+
const fallback = newNoteFormState === 'open' ? 'new-note-thread' : null;
160164
setSelectedThread( blockCommentId ?? fallback );
161-
}, [ blockCommentId, showCommentBoard ] );
165+
}, [ blockCommentId, newNoteFormState ] );
162166

163167
const setBlockRef = useCallback( ( id, blockRef ) => {
164168
setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
@@ -319,12 +323,12 @@ export function Comments( {
319323
return (
320324
<>
321325
{ ! isFloating &&
322-
showCommentBoard &&
326+
newNoteFormState === 'open' &&
323327
undefined === blockCommentId && (
324328
<AddComment
325329
onSubmit={ onAddReply }
326-
showCommentBoard={ showCommentBoard }
327-
setShowCommentBoard={ setShowCommentBoard }
330+
newNoteFormState={ newNoteFormState }
331+
setNewNoteFormState={ setNewNoteFormState }
328332
commentSidebarRef={ commentSidebarRef }
329333
/>
330334
) }
@@ -337,7 +341,7 @@ export function Comments( {
337341
onEditComment={ onEditComment }
338342
isSelected={ selectedThread === thread.id }
339343
setSelectedThread={ setSelectedThread }
340-
setShowCommentBoard={ setShowCommentBoard }
344+
setNewNoteFormState={ setNewNoteFormState }
341345
commentSidebarRef={ commentSidebarRef }
342346
reflowComments={ reflowComments }
343347
isFloating={ isFloating }
@@ -346,7 +350,7 @@ export function Comments( {
346350
setBlockRef={ setBlockRef }
347351
selectedThread={ selectedThread }
348352
commentLastUpdated={ commentLastUpdated }
349-
showCommentBoard={ showCommentBoard }
353+
newNoteFormState={ newNoteFormState }
350354
/>
351355
) ) }
352356
</>
@@ -359,7 +363,7 @@ function Thread( {
359363
onAddReply,
360364
onCommentDelete,
361365
isSelected,
362-
setShowCommentBoard,
366+
setNewNoteFormState,
363367
commentSidebarRef,
364368
reflowComments,
365369
isFloating,
@@ -369,7 +373,7 @@ function Thread( {
369373
setSelectedThread,
370374
selectedThread,
371375
commentLastUpdated,
372-
showCommentBoard,
376+
newNoteFormState,
373377
} ) {
374378
const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
375379
useDispatch( blockEditorStore )
@@ -397,7 +401,7 @@ function Thread( {
397401
};
398402

399403
const handleCommentSelect = () => {
400-
setShowCommentBoard( false );
404+
setNewNoteFormState( 'closed' );
401405
setSelectedThread( thread.id );
402406
if ( !! thread.blockClientId ) {
403407
// Pass `null` as the second parameter to prevent focusing the block.
@@ -408,7 +412,7 @@ function Thread( {
408412

409413
const unselectThread = () => {
410414
setSelectedThread( null );
411-
setShowCommentBoard( false );
415+
setNewNoteFormState( 'closed' );
412416
toggleBlockSpotlight( thread.blockClientId, false );
413417
};
414418

@@ -434,12 +438,16 @@ function Thread( {
434438
commentExcerpt
435439
);
436440

437-
if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
441+
if (
442+
thread.id === 'new-note-thread' &&
443+
newNoteFormState === 'open' &&
444+
isFloating
445+
) {
438446
return (
439447
<AddComment
440448
onSubmit={ onAddReply }
441-
showCommentBoard={ showCommentBoard }
442-
setShowCommentBoard={ setShowCommentBoard }
449+
newNoteFormState={ newNoteFormState }
450+
setNewNoteFormState={ setNewNoteFormState }
443451
commentSidebarRef={ commentSidebarRef }
444452
reflowComments={ reflowComments }
445453
isFloating={ isFloating }

‎packages/editor/src/components/collab-sidebar/index.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ import PostTypeSupportCheck from '../post-type-support-check';
3434
import { unlock } from '../../lock-unlock';
3535

3636
function NotesSidebarContent( {
37-
showCommentBoard,
38-
setShowCommentBoard,
37+
newNoteFormState,
38+
setNewNoteFormState,
3939
styles,
4040
comments,
4141
commentSidebarRef,
@@ -69,8 +69,8 @@ function NotesSidebarContent( {
6969
onEditComment={ onEdit }
7070
onAddReply={ onCreate }
7171
onCommentDelete={ onDelete }
72-
showCommentBoard={ showCommentBoard }
73-
setShowCommentBoard={ setShowCommentBoard }
72+
newNoteFormState={ newNoteFormState }
73+
setNewNoteFormState={ setNewNoteFormState }
7474
commentSidebarRef={ commentSidebarRef }
7575
reflowComments={ reflowComments }
7676
commentLastUpdated={ commentLastUpdated }
@@ -81,7 +81,8 @@ function NotesSidebarContent( {
8181
}
8282

8383
function NotesSidebar( { postId, mode } ) {
84-
const [ showCommentBoard, setShowCommentBoard ] = useState( false );
84+
// Enum: 'closed' | 'creating' | 'open'
85+
const [ newNoteFormState, setNewNoteFormState ] = useState( 'closed' );
8586
const { getActiveComplementaryArea } = useSelect( interfaceStore );
8687
const { enableComplementaryArea } = useDispatch( interfaceStore );
8788
const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
@@ -117,7 +118,8 @@ function NotesSidebar( { postId, mode } ) {
117118
} = useBlockComments( postId );
118119
useEnableFloatingSidebar(
119120
showFloatingSidebar &&
120-
( unresolvedSortedThreads.length > 0 || showCommentBoard )
121+
( unresolvedSortedThreads.length > 0 ||
122+
newNoteFormState !== 'closed' )
121123
);
122124

123125
// Get the global styles to set the background color of the sidebar.
@@ -152,7 +154,7 @@ function NotesSidebar( { postId, mode } ) {
152154
return;
153155
}
154156

155-
setShowCommentBoard( ! blockCommentId );
157+
setNewNoteFormState( ! blockCommentId ? 'open' : 'closed' );
156158
focusCommentThread(
157159
blockCommentId,
158160
commentSidebarRef.current,
@@ -190,8 +192,8 @@ function NotesSidebar( { postId, mode } ) {
190192
>
191193
<NotesSidebarContent
192194
comments={ resultComments }
193-
showCommentBoard={ showCommentBoard }
194-
setShowCommentBoard={ setShowCommentBoard }
195+
newNoteFormState={ newNoteFormState }
196+
setNewNoteFormState={ setNewNoteFormState }
195197
commentSidebarRef={ commentSidebarRef }
196198
reflowComments={ reflowComments }
197199
commentLastUpdated={ commentLastUpdated }
@@ -209,8 +211,8 @@ function NotesSidebar( { postId, mode } ) {
209211
>
210212
<NotesSidebarContent
211213
comments={ unresolvedSortedThreads }
212-
showCommentBoard={ showCommentBoard }
213-
setShowCommentBoard={ setShowCommentBoard }
214+
newNoteFormState={ newNoteFormState }
215+
setNewNoteFormState={ setNewNoteFormState }
214216
commentSidebarRef={ commentSidebarRef }
215217
reflowComments={ reflowComments }
216218
commentLastUpdated={ commentLastUpdated }

‎packages/editor/src/components/collab-sidebar/utils.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,11 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
9999
* @typedef {import('@wordpress/element').RefObject} RefObject
100100
*
101101
* @param {string} commentId The ID of the comment thread to focus.
102-
* @param {?HTMLElement} threadContainer The container element to search within.
102+
* @param {?HTMLElement} container The container element to search within.
103103
* @param {string} additionalSelector The additional selector to focus on.
104104
*/
105-
export function focusCommentThread(
106-
commentId,
107-
threadContainer,
108-
additionalSelector
109-
) {
110-
if ( ! threadContainer ) {
105+
export function focusCommentThread( commentId, container, additionalSelector ) {
106+
if ( ! container ) {
111107
return;
112108
}
113109

@@ -120,11 +116,6 @@ export function focusCommentThread(
120116
: threadSelector;
121117

122118
return new Promise( ( resolve ) => {
123-
// Watch the sidebar skeleton in case the sidebar disappears and re-appears.
124-
const container = threadContainer.closest(
125-
'.interface-interface-skeleton__sidebar'
126-
);
127-
128119
if ( container.querySelector( selector ) ) {
129120
return resolve( container.querySelector( selector ) );
130121
}

0 commit comments

Comments
 (0)