@wordpress/editor 14.33.4 → 14.33.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.33.4",
+	"version": "14.33.6",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -57,35 +57,35 @@
 		"@wordpress/api-fetch": "^7.33.1",
 		"@wordpress/base-styles": "^6.9.1",
 		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.2",
+		"@wordpress/block-editor": "^15.6.4",
 		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.1",
-		"@wordpress/components": "^30.6.1",
+		"@wordpress/commands": "^1.33.2",
+		"@wordpress/components": "^30.6.2",
 		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.2",
+		"@wordpress/core-data": "^7.33.4",
 		"@wordpress/data": "^10.33.1",
-		"@wordpress/dataviews": "^10.1.2",
+		"@wordpress/dataviews": "^10.1.3",
 		"@wordpress/date": "^5.33.1",
 		"@wordpress/deprecated": "^4.33.1",
 		"@wordpress/dom": "^4.33.1",
 		"@wordpress/element": "^6.33.1",
-		"@wordpress/fields": "^0.25.4",
+		"@wordpress/fields": "^0.25.6",
 		"@wordpress/hooks": "^4.33.1",
 		"@wordpress/html-entities": "^4.33.1",
 		"@wordpress/i18n": "^6.6.1",
 		"@wordpress/icons": "^11.0.1",
-		"@wordpress/interface": "^9.18.1",
+		"@wordpress/interface": "^9.18.2",
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/media-utils": "^5.33.1",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.2",
-		"@wordpress/plugins": "^7.33.1",
-		"@wordpress/preferences": "^4.33.1",
+		"@wordpress/patterns": "^2.33.4",
+		"@wordpress/plugins": "^7.33.2",
+		"@wordpress/preferences": "^4.33.2",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.2",
+		"@wordpress/reusable-blocks": "^5.33.4",
 		"@wordpress/rich-text": "^7.33.1",
-		"@wordpress/server-side-render": "^6.9.1",
+		"@wordpress/server-side-render": "^6.9.2",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/warning": "^3.33.1",
 		"@wordpress/wordcount": "^4.33.1",
@@ -108,5 +108,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "45005cc254bab59182927e35a68cd22f6320634d"
+	"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
 }

package/src/components/collab-sidebar/add-comment.js

@@ -28,32 +28,30 @@ const { useBlockElement } = unlock( blockEditorPrivateApis );
 
 export function AddComment( {
 	onSubmit,
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments = noop,
 	isFloating = false,
 	y,
 	refs,
 } ) {
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
+	const { clientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
 		return {
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.metadata?.noteId,
+			clientId: getSelectedBlockClientId(),
 		};
 	}, [] );
 	const blockElement = useBlockElement( clientId );
 	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
 
 	const unselectThread = () => {
-		setShowCommentBoard( false );
+		setNewNoteFormState( 'closed' );
 		blockElement?.focus();
 		toggleBlockSpotlight( clientId, false );
 	};
 
-	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
+	if ( newNoteFormState !== 'open' || ! clientId ) {
 		return null;
 	}
 
@@ -68,7 +66,7 @@ export function AddComment( {
 			spacing="3"
 			tabIndex={ 0 }
 			aria-label={ __( 'New note' ) }
-			role="listitem"
+			role="treeitem"
 			ref={ isFloating ? refs.setFloating : undefined }
 			style={
 				isFloating
@@ -81,7 +79,7 @@ export function AddComment( {
 					return;
 				}
 				toggleBlockSpotlight( clientId, false );
-				setShowCommentBoard( false );
+				setNewNoteFormState( 'closed' );
 			} }
 		>
 			<HStack alignment="left" spacing="3">
@@ -91,7 +89,7 @@ export function AddComment( {
 				onSubmit={ async ( inputComment ) => {
 					const { id } = await onSubmit( { content: inputComment } );
 					focusCommentThread( id, commentSidebarRef.current );
-					setShowCommentBoard( false );
+					setNewNoteFormState( 'creating' );
 				} }
 				onCancel={ unselectThread }
 				reflowComments={ reflowComments }

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

@@ -53,8 +53,8 @@ export function Comments( {
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments,
 	isFloating = false,
@@ -68,15 +68,18 @@ export function Comments( {
 	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
 	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
 		useSelect( ( select ) => {
-			const { getBlockAttributes, getSelectedBlockClientId } =
-				select( blockEditorStore );
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getClientIdsWithDescendants,
+			} = select( blockEditorStore );
 			const clientId = getSelectedBlockClientId();
 			return {
 				blockCommentId: clientId
 					? getBlockAttributes( clientId )?.metadata?.noteId
 					: null,
 				selectedBlockClientId: clientId,
-				orderedBlockIds: select( blockEditorStore ).getBlockOrder(),
+				orderedBlockIds: getClientIdsWithDescendants(),
 			};
 		}, [] );
 
@@ -90,7 +93,7 @@ export function Comments( {
 		// add a "new note" entry to the threads. This special thread type
 		// gets sorted and floated like regular threads, but shows an AddComment
 		// component instead of a regular comment thread.
-		if ( isFloating && showCommentBoard && undefined === blockCommentId ) {
+		if ( isFloating && newNoteFormState === 'open' ) {
 			// Insert the new note entry at the correct location for its blockId.
 			const newNoteThread = {
 				id: 'new-note-thread',
@@ -116,8 +119,7 @@ export function Comments( {
 	}, [
 		noteThreads,
 		isFloating,
-		showCommentBoard,
-		blockCommentId,
+		newNoteFormState,
 		selectedBlockClientId,
 		orderedBlockIds,
 	] );
@@ -144,7 +146,7 @@ export function Comments( {
 			focusCommentThread( prevThread.id, commentSidebarRef.current );
 		} else {
 			setSelectedThread( null );
-			setShowCommentBoard( false );
+			setNewNoteFormState( 'closed' );
 			// Move focus to the related block.
 			relatedBlockElement?.focus();
 		}
@@ -153,9 +155,10 @@ export function Comments( {
 	// Auto-select the related comment thread when a block is selected.
 	useEffect( () => {
 		// Fallback to 'new-note-thread' when showing the comment board for a new note.
-		const fallback = showCommentBoard ? 'new-note-thread' : null;
-		setSelectedThread( blockCommentId ?? fallback );
-	}, [ blockCommentId, showCommentBoard ] );
+		setSelectedThread(
+			newNoteFormState === 'open' ? 'new-note-thread' : blockCommentId
+		);
+	}, [ blockCommentId, newNoteFormState ] );
 
 	const setBlockRef = useCallback( ( id, blockRef ) => {
 		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
@@ -308,35 +311,21 @@ 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 (
 		<>
-			{ ! isFloating &&
-				showCommentBoard &&
-				undefined === blockCommentId && (
-					<AddComment
-						onSubmit={ onAddReply }
-						showCommentBoard={ showCommentBoard }
-						setShowCommentBoard={ setShowCommentBoard }
-						commentSidebarRef={ commentSidebarRef }
-					/>
-				) }
+			{ ! isFloating && newNoteFormState === 'open' && (
+				<AddComment
+					onSubmit={ onAddReply }
+					newNoteFormState={ newNoteFormState }
+					setNewNoteFormState={ setNewNoteFormState }
+					commentSidebarRef={ commentSidebarRef }
+				/>
+			) }
 			{ threads.map( ( thread ) => (
 				<Thread
 					key={ thread.id }
@@ -346,7 +335,7 @@ export function Comments( {
 					onEditComment={ onEditComment }
 					isSelected={ selectedThread === thread.id }
 					setSelectedThread={ setSelectedThread }
-					setShowCommentBoard={ setShowCommentBoard }
+					setNewNoteFormState={ setNewNoteFormState }
 					commentSidebarRef={ commentSidebarRef }
 					reflowComments={ reflowComments }
 					isFloating={ isFloating }
@@ -355,7 +344,7 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
-					showCommentBoard={ showCommentBoard }
+					newNoteFormState={ newNoteFormState }
 				/>
 			) ) }
 		</>
@@ -368,7 +357,7 @@ function Thread( {
 	onAddReply,
 	onCommentDelete,
 	isSelected,
-	setShowCommentBoard,
+	setNewNoteFormState,
 	commentSidebarRef,
 	reflowComments,
 	isFloating,
@@ -378,7 +367,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
-	showCommentBoard,
+	newNoteFormState,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -406,7 +395,7 @@ function Thread( {
 	};
 
 	const handleCommentSelect = () => {
-		setShowCommentBoard( false );
+		setNewNoteFormState( 'closed' );
 		setSelectedThread( thread.id );
 		if ( !! thread.blockClientId ) {
 			// Pass `null` as the second parameter to prevent focusing the block.
@@ -417,7 +406,7 @@ function Thread( {
 
 	const unselectThread = () => {
 		setSelectedThread( null );
-		setShowCommentBoard( false );
+		setNewNoteFormState( 'closed' );
 		toggleBlockSpotlight( thread.blockClientId, false );
 	};
 
@@ -443,12 +432,16 @@ function Thread( {
 				commentExcerpt
 		  );
 
-	if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
+	if (
+		thread.id === 'new-note-thread' &&
+		newNoteFormState === 'open' &&
+		isFloating
+	) {
 		return (
 			<AddComment
 				onSubmit={ onAddReply }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
 				commentSidebarRef={ commentSidebarRef }
 				reflowComments={ reflowComments }
 				isFloating={ isFloating }
@@ -459,8 +452,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 +486,7 @@ function Thread( {
 				}
 			} }
 			tabIndex={ 0 }
-			role="listitem"
+			role="treeitem"
 			aria-label={ ariaLabel }
 			aria-expanded={ isSelected }
 			ref={ isFloating ? refs.setFloating : undefined }
@@ -524,14 +515,17 @@ function Thread( {
 				thread={ thread }
 				isExpanded={ isSelected }
 				onEdit={ ( params = {} ) => {
-					const { status } = params;
 					onEditComment( params );
-					if ( status === 'approved' ) {
+					if ( params.status === 'approved' ) {
 						unselectThread();
-						focusCommentThread(
-							thread.id,
-							commentSidebarRef.current
-						);
+						if ( isFloating ) {
+							relatedBlockElement?.focus();
+						} else {
+							focusCommentThread(
+								thread.id,
+								commentSidebarRef.current
+							);
+						}
 					}
 				} }
 				onDelete={ onCommentDelete }
@@ -586,7 +580,7 @@ function Thread( {
 				/>
 			) }
 			{ isSelected && (
-				<VStack spacing="2">
+				<VStack spacing="2" role="treeitem">
 					<HStack alignment="left" spacing="3" justify="flex-start">
 						<CommentAuthorInfo />
 					</HStack>
@@ -716,7 +710,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

@@ -34,8 +34,8 @@ import PostTypeSupportCheck from '../post-type-support-check';
 import { unlock } from '../../lock-unlock';
 
 function NotesSidebarContent( {
-	showCommentBoard,
-	setShowCommentBoard,
+	newNoteFormState,
+	setNewNoteFormState,
 	styles,
 	comments,
 	commentSidebarRef,
@@ -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,14 +60,17 @@ function NotesSidebarContent( {
 					commentSidebarRef.current = node;
 				}
 			} }
+			aria-label={
+				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
+			}
 		>
 			<Comments
 				threads={ comments }
 				onEditComment={ onEdit }
 				onAddReply={ onCreate }
 				onCommentDelete={ onDelete }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
 				commentSidebarRef={ commentSidebarRef }
 				reflowComments={ reflowComments }
 				commentLastUpdated={ commentLastUpdated }
@@ -78,7 +81,8 @@ function NotesSidebarContent( {
 }
 
 function NotesSidebar( { postId, mode } ) {
-	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	// Enum: 'closed' | 'creating' | 'open'
+	const [ newNoteFormState, setNewNoteFormState ] = useState( 'closed' );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
@@ -87,17 +91,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,
@@ -107,7 +118,8 @@ function NotesSidebar( { postId, mode } ) {
 	} = useBlockComments( postId );
 	useEnableFloatingSidebar(
 		showFloatingSidebar &&
-			( unresolvedSortedThreads.length > 0 || showCommentBoard )
+			( unresolvedSortedThreads.length > 0 ||
+				newNoteFormState !== 'closed' )
 	);
 
 	// Get the global styles to set the background color of the sidebar.
@@ -118,6 +130,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' );
@@ -125,7 +139,7 @@ function NotesSidebar( { postId, mode } ) {
 
 		if ( currentThread?.status === 'approved' ) {
 			enableComplementaryArea( 'core', collabHistorySidebarName );
-		} else if ( ! activeNotesArea ) {
+		} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {
 			enableComplementaryArea(
 				'core',
 				showFloatingSidebar
@@ -140,46 +154,52 @@ function NotesSidebar( { postId, mode } ) {
 			return;
 		}
 
-		setShowCommentBoard( ! blockCommentId );
+		setNewNoteFormState( ! currentThread ? 'open' : 'closed' );
 		focusCommentThread(
-			blockCommentId,
+			currentThread?.id,
 			commentSidebarRef.current,
 			// Focus a comment thread when there's a selected block with a comment.
-			! blockCommentId ? 'textarea' : undefined
+			! currentThread ? 'textarea' : undefined
 		);
 		toggleBlockSpotlight( clientId, true );
 	}
 
+	if ( isDistractionFree ) {
+		return <AddCommentMenuItem isDistractionFree />;
+	}
+
 	return (
 		<>
-			{ blockCommentId && (
+			{ !! currentThread && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
 					onClick={ openTheSidebar }
 				/>
 			) }
 			<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 }
+						newNoteFormState={ newNoteFormState }
+						setNewNoteFormState={ setNewNoteFormState }
+						commentSidebarRef={ commentSidebarRef }
+						reflowComments={ reflowComments }
+						commentLastUpdated={ commentLastUpdated }
+					/>
+				</PluginSidebar>
+			) }
 			{ isLargeViewport && (
 				<PluginSidebar
 					isPinnable={ false }
@@ -191,8 +211,8 @@ function NotesSidebar( { postId, mode } ) {
 				>
 					<NotesSidebarContent
 						comments={ unresolvedSortedThreads }
-						showCommentBoard={ showCommentBoard }
-						setShowCommentBoard={ setShowCommentBoard }
+						newNoteFormState={ newNoteFormState }
+						setNewNoteFormState={ setNewNoteFormState }
 						commentSidebarRef={ commentSidebarRef }
 						reflowComments={ reflowComments }
 						commentLastUpdated={ commentLastUpdated }