@wordpress/editor 14.33.4 → 14.33.5

package/src/components/collab-sidebar/comment-menu-item.js

@@ -4,8 +4,12 @@
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { comment as commentIcon } from '@wordpress/icons';
-
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,23 +18,59 @@ import { unlock } from '../../lock-unlock';
 
 const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 
-const AddCommentMenuItem = ( { onClick } ) => {
+const AddCommentMenuItem = ( { clientId, onClick, isDistractionFree } ) => {
+	const block = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	if (
+		! block?.isValid ||
+		block?.name === getUnregisteredTypeHandlerName()
+	) {
+		return null;
+	}
+
+	const isDisabled = isDistractionFree || block?.name === 'core/freeform';
+
+	let infoText;
+
+	if ( isDistractionFree ) {
+		infoText = __( 'Notes are disabled in distraction free mode.' );
+	} else if ( block?.name === 'core/freeform' ) {
+		infoText = __( 'Convert to blocks to add notes.' );
+	}
+
+	return (
+		<MenuItem
+			icon={ commentIcon }
+			onClick={ onClick }
+			aria-haspopup="dialog"
+			disabled={ isDisabled }
+			info={ infoText }
+		>
+			{ __( 'Add note' ) }
+		</MenuItem>
+	);
+};
+
+const AddCommentMenuItemFill = ( { onClick, isDistractionFree } ) => {
 	return (
 		<CommentIconSlotFill.Fill>
-			{ ( { onClose } ) => (
-				<MenuItem
-					icon={ commentIcon }
+			{ ( { clientId, onClose } ) => (
+				<AddCommentMenuItem
+					clientId={ clientId }
+					isDistractionFree={ isDistractionFree }
 					onClick={ () => {
 						onClick();
 						onClose();
 					} }
-					aria-haspopup="dialog"
-				>
-					{ __( 'Add note' ) }
-				</MenuItem>
+				/>
 			) }
 		</CommentIconSlotFill.Fill>
 	);
 };
 
-export default AddCommentMenuItem;
+export default AddCommentMenuItemFill;

package/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 (
@@ -459,8 +447,6 @@ function Thread( {
 	}
 
 	return (
-		// Disable reason: role="listitem" does in fact support aria-expanded.
-		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
 		<VStack
 			className={ clsx( 'editor-collab-sidebar-panel__thread', {
 				'is-selected': isSelected,
@@ -495,7 +481,7 @@ function Thread( {
 				}
 			} }
 			tabIndex={ 0 }
-			role="listitem"
+			role="treeitem"
 			aria-label={ ariaLabel }
 			aria-expanded={ isSelected }
 			ref={ isFloating ? refs.setFloating : undefined }
@@ -586,7 +572,7 @@ function Thread( {
 				/>
 			) }
 			{ isSelected && (
-				<VStack spacing="2">
+				<VStack spacing="2" role="treeitem">
 					<HStack alignment="left" spacing="3" justify="flex-start">
 						<CommentAuthorInfo />
 					</HStack>
@@ -716,7 +702,10 @@ const CommentBoard = ( {
 			: [];
 
 	return (
-		<VStack spacing="2">
+		<VStack
+			spacing="2"
+			role={ thread.parent !== 0 ? 'treeitem' : undefined }
+		>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<CommentAuthorInfo
 					avatar={ thread?.author_avatar_urls?.[ 48 ] }

package/src/components/collab-sidebar/index.js

@@ -50,7 +50,7 @@ function NotesSidebarContent( {
 		<VStack
 			className="editor-collab-sidebar-panel"
 			style={ styles }
-			role="list"
+			role="tree"
 			spacing="3"
 			justify="flex-start"
 			ref={ ( node ) => {
@@ -60,6 +60,9 @@ function NotesSidebarContent( {
 					commentSidebarRef.current = node;
 				}
 			} }
+			aria-label={
+				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
+			}
 		>
 			<Comments
 				threads={ comments }
@@ -87,17 +90,24 @@ function NotesSidebar( { postId, mode } ) {
 
 	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const _clientId = getSelectedBlockClientId();
-		return {
-			clientId: _clientId,
-			blockCommentId: _clientId
-				? getBlockAttributes( _clientId )?.metadata?.noteId
-				: null,
-		};
-	}, [] );
+	const { clientId, blockCommentId, isDistractionFree } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getSettings,
+			} = select( blockEditorStore );
+			const _clientId = getSelectedBlockClientId();
+			return {
+				clientId: _clientId,
+				blockCommentId: _clientId
+					? getBlockAttributes( _clientId )?.metadata?.noteId
+					: null,
+				isDistractionFree: getSettings().isDistractionFree,
+			};
+		},
+		[]
+	);
 
 	const {
 		resultComments,
@@ -118,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' );
@@ -150,6 +162,10 @@ function NotesSidebar( { postId, mode } ) {
 		toggleBlockSpotlight( clientId, true );
 	}
 
+	if ( isDistractionFree ) {
+		return <AddCommentMenuItem isDistractionFree />;
+	}
+
 	return (
 		<>
 			{ blockCommentId && (
@@ -159,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 }

package/src/components/collab-sidebar/utils.js

@@ -99,23 +99,32 @@ 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;
 	}
 
 	// A thread without a commentId is a new comment thread.
 	const threadSelector = commentId
-		? `[role=listitem][id="comment-thread-${ commentId }"]`
-		: '[role=listitem]:not([id])';
+		? `[role=treeitem][id="comment-thread-${ commentId }"]`
+		: '[role=treeitem]:not([id])';
 	const selector = additionalSelector
 		? `${ threadSelector } ${ 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,

package/src/components/editor/index.js

@@ -87,11 +87,11 @@ function Editor( {
 						{ extraContent }
 					</EditorInterface>
 					{ children }
-					<NotesSidebar />
 					<Sidebar
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }
 					/>
+					<NotesSidebar />
 				</ExperimentalEditorProvider>
 			) }
 		</>