Notes: Hide pinned sidebar when there are no notes (#72872)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: desrosj <desrosj@git.wordpress.org>

Author: 8 people

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

@@ -308,21 +308,9 @@ export function Comments( {
 	] );
 
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
+	// This should no longer happen since https://github.com/WordPress/gutenberg/pull/72872.
 	if ( ! hasThreads && ! isFloating ) {
-		return (
-			<>
-				<AddComment
-					onSubmit={ onAddReply }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
-					commentSidebarRef={ commentSidebarRef }
-				/>
-				<Text as="p">{ __( 'No notes available.' ) }</Text>
-				<Text as="p" variant="muted">
-					{ __( 'Only logged in users can see Notes.' ) }
-				</Text>
-			</>
-		);
+		return null;
 	}
 
 	return (

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

@@ -128,6 +128,8 @@ function NotesSidebar( { postId, mode } ) {
 	const currentThread = blockCommentId
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
 		: null;
+	const showAllNotesSidebar =
+		resultComments.length > 0 || ! showFloatingSidebar;
 
 	async function openTheSidebar() {
 		const prevArea = await getActiveComplementaryArea( 'core' );
@@ -173,27 +175,29 @@ function NotesSidebar( { postId, mode } ) {
 				/>
 			) }
 			<AddCommentMenuItem onClick={ openTheSidebar } />
-			<PluginSidebar
-				identifier={ collabHistorySidebarName }
-				name={ collabHistorySidebarName }
-				title={ __( 'All notes' ) }
-				header={
-					<h2 className="interface-complementary-area-header__title">
-						{ __( 'All notes' ) }
-					</h2>
-				}
-				icon={ commentIcon }
-				closeLabel={ __( 'Close Notes' ) }
-			>
-				<NotesSidebarContent
-					comments={ resultComments }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
-					commentSidebarRef={ commentSidebarRef }
-					reflowComments={ reflowComments }
-					commentLastUpdated={ commentLastUpdated }
-				/>
-			</PluginSidebar>
+			{ showAllNotesSidebar && (
+				<PluginSidebar
+					identifier={ collabHistorySidebarName }
+					name={ collabHistorySidebarName }
+					title={ __( 'All notes' ) }
+					header={
+						<h2 className="interface-complementary-area-header__title">
+							{ __( 'All notes' ) }
+						</h2>
+					}
+					icon={ commentIcon }
+					closeLabel={ __( 'Close Notes' ) }
+				>
+					<NotesSidebarContent
+						comments={ resultComments }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+						reflowComments={ reflowComments }
+						commentLastUpdated={ commentLastUpdated }
+					/>
+				</PluginSidebar>
+			) }
 			{ isLargeViewport && (
 				<PluginSidebar
 					isPinnable={ false }

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

@@ -99,11 +99,15 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
  * @typedef {import('@wordpress/element').RefObject} RefObject
  *
  * @param {string}       commentId          The ID of the comment thread to focus.
- * @param {?HTMLElement} container          The container element to search within.
+ * @param {?HTMLElement} threadContainer    The container element to search within.
  * @param {string}       additionalSelector The additional selector to focus on.
  */
-export function focusCommentThread( commentId, container, additionalSelector ) {
-	if ( ! container ) {
+export function focusCommentThread(
+	commentId,
+	threadContainer,
+	additionalSelector
+) {
+	if ( ! threadContainer ) {
 		return;
 	}
 
@@ -116,6 +120,11 @@ export function focusCommentThread( commentId, container, additionalSelector ) {
 		: threadSelector;
 
 	return new Promise( ( resolve ) => {
+		// Watch the sidebar skeleton in case the sidebar disappears and re-appears.
+		const container = threadContainer.closest(
+			'.interface-interface-skeleton__sidebar'
+		);
+
 		if ( container.querySelector( selector ) ) {
 			return resolve( container.querySelector( selector ) );
 		}
@@ -129,6 +138,7 @@ export function focusCommentThread( commentId, container, additionalSelector ) {
 				resolve( container.querySelector( selector ) );
 			}
 		} );
+
 		observer.observe( container, {
 			childList: true,
 			subtree: true,

packages/editor/src/components/editor/index.js

@@ -109,11 +109,11 @@ function Editor( {
 						{ extraContent }
 					</EditorInterface>
 					{ children }
-					<NotesSidebar />
 					<Sidebar
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }
 					/>
+					<NotesSidebar />
 					{ isBlockTheme && <GlobalStylesRenderer /> }
 					{ showGlobalStyles && <GlobalStylesSidebar /> }
 				</ExperimentalEditorProvider>

test/e2e/specs/editor/various/block-comments.spec.js

@@ -10,9 +10,8 @@ test.use( {
 } );
 
 test.describe( 'Block Comments', () => {
-	test.beforeEach( async ( { admin, blockCommentUtils } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.createNewPost();
-		await blockCommentUtils.openBlockCommentSidebar();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
@@ -22,7 +21,13 @@ test.describe( 'Block Comments', () => {
 	test( 'should move focus to add a new note form', async ( {
 		editor,
 		page,
+		blockCommentUtils,
 	} ) => {
+		await blockCommentUtils.addBlockWithComment( {
+			type: 'core/paragraph',
+			attributes: { content: 'Howdy!' },
+			comment: 'Test comment',
+		} );
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: { content: 'Testing block comments' },
@@ -157,6 +162,7 @@ test.describe( 'Block Comments', () => {
 			attributes: { content: 'Testing block comments' },
 			comment: 'Test comment to resolve.',
 		} );
+		await blockCommentUtils.openBlockCommentSidebar();
 
 		const thread = page
 			.getByRole( 'region', { name: 'Editor settings' } )
@@ -206,6 +212,7 @@ test.describe( 'Block Comments', () => {
 				.filter( { hasText: 'Note marked as resolved.' } )
 		).toBeVisible();
 
+		await blockCommentUtils.openBlockCommentSidebar();
 		await page.locator( '.editor-collab-sidebar-panel__thread' ).click();
 		await expect( resolveButton ).toBeDisabled();
 		const commentForm = page.getByRole( 'textbox', { name: 'Reply to' } );