@wordpress/editor 14.33.8 → 14.33.10

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

@@ -381,9 +381,16 @@ export function Comments( {
 	};
 
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
-	// This should no longer happen since https://github.com/WordPress/gutenberg/pull/72872.
+	// A special case for `template-locked` mode - https://github.com/WordPress/gutenberg/pull/72646.
 	if ( ! hasThreads && ! isFloating ) {
-		return null;
+		return (
+			<AddComment
+				onSubmit={ onAddReply }
+				newNoteFormState={ newNoteFormState }
+				setNewNoteFormState={ setNewNoteFormState }
+				commentSidebarRef={ commentSidebarRef }
+			/>
+		);
 	}
 
 	return (
@@ -463,6 +470,7 @@ function Thread( {
 		selectedThread,
 		commentLastUpdated,
 	} );
+	const isKeyboardTabbingRef = useRef( false );
 
 	const onMouseEnter = () => {
 		debouncedToggleBlockHighlight( thread.blockClientId, true );
@@ -472,13 +480,48 @@ function Thread( {
 		debouncedToggleBlockHighlight( thread.blockClientId, false );
 	};
 
+	const onFocus = () => {
+		toggleBlockHighlight( thread.blockClientId, true );
+	};
+
+	const onBlur = ( event ) => {
+		const isNoteFocused = event.relatedTarget?.closest(
+			'.editor-collab-sidebar-panel__thread'
+		);
+		const isDialogFocused =
+			event.relatedTarget?.closest( '[role="dialog"]' );
+		const isTabbing = isKeyboardTabbingRef.current;
+
+		// When another note is clicked, do nothing because the current note is automatically closed.
+		if ( isNoteFocused && ! isTabbing ) {
+			return;
+		}
+		// When deleting a note, a dialog appears, but the note should not be collapsed.
+		if ( isDialogFocused ) {
+			return;
+		}
+		// When tabbing, do nothing if the focus is within the current note.
+		if (
+			isTabbing &&
+			event.currentTarget.contains( event.relatedTarget )
+		) {
+			return;
+		}
+
+		// Closes a note that has lost focus when any of the following conditions are met:
+		// - An element other than a note is clicked.
+		// - Focus was lost by tabbing.
+		toggleBlockHighlight( thread.blockClientId, false );
+		unselectThread();
+	};
+
 	const handleCommentSelect = () => {
 		setNewNoteFormState( 'closed' );
 		setSelectedThread( thread.id );
+		toggleBlockSpotlight( thread.blockClientId, true );
 		if ( !! thread.blockClientId ) {
 			// Pass `null` as the second parameter to prevent focusing the block.
 			selectBlock( thread.blockClientId, null );
-			toggleBlockSpotlight( thread.blockClientId, true );
 		}
 	};
 
@@ -540,9 +583,20 @@ function Thread( {
 			onClick={ handleCommentSelect }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
-			onFocus={ onMouseEnter }
-			onBlur={ onMouseLeave }
-			onKeyDown={ onKeyDown }
+			onFocus={ onFocus }
+			onBlur={ onBlur }
+			onKeyUp={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = false;
+				}
+			} }
+			onKeyDown={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = true;
+				} else {
+					onKeyDown( event );
+				}
+			} }
 			tabIndex={ 0 }
 			role="treeitem"
 			aria-label={ ariaLabel }
@@ -562,7 +616,7 @@ function Thread( {
 					);
 				} }
 			>
-				{ __( 'Add new note' ) }
+				{ __( 'Add new reply' ) }
 			</Button>
 			{ ! thread.blockClientId && (
 				<Text as="p" weight={ 500 } variant="muted">
@@ -767,6 +821,14 @@ const CommentBoard = ( {
 			? actions.filter( ( item ) => item.isEligible( thread ) )
 			: [];
 
+	const deleteConfirmMessage =
+		// When deleting a top level note, descendants will also be deleted.
+		thread.parent === 0
+			? __(
+					"Are you sure you want to delete this note? This will also delete all of this note's replies."
+			  )
+			: __( 'Are you sure you want to delete this reply?' );
+
 	return (
 		<VStack
 			spacing="2"
@@ -821,7 +883,12 @@ const CommentBoard = ( {
 										/>
 									}
 								/>
-								<Menu.Popover>
+								<Menu.Popover
+									// The menu popover is rendered in a portal, which causes focus to be
+									// lost and the note to be collapsed unintentionally. To prevent this,
+									// the popover should be rendered as an inline.
+									modal={ false }
+								>
 									{ moreActions.map( ( action ) => (
 										<Menu.Item
 											key={ action.id }
@@ -902,9 +969,7 @@ const CommentBoard = ( {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{ __(
-						"Are you sure you want to delete this note? This will also delete all of this note's replies."
-					) }
+					{ deleteConfirmMessage }
 				</ConfirmDialog>
 			) }
 		</VStack>

package/src/hooks/template-part-navigation-edit-button.js

@@ -6,14 +6,10 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
-	BlockControls,
+	__unstableBlockToolbarLastItem as BlockToolbarLastItem,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	__experimentalDivider as Divider,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -96,15 +92,8 @@ function TemplatePartNavigationEditButton( { clientId } ) {
 	}
 
 	return (
-		<BlockControls group="other">
+		<BlockToolbarLastItem>
 			<ToolbarGroup>
-				{ /*
-				 * Add a vertical divider to visually separate the "Edit navigation"
-				 * button from the template part's "Edit" button. Both buttons share
-				 * the same toolbar group ("other"), so without this divider they
-				 * would appear directly adjacent with no visual separation.
-				 */ }
-				<Divider orientation="vertical" marginEnd={ 3 } />
 				<ToolbarButton
 					label={ __( 'Edit navigation' ) }
 					onClick={ onEditNavigation }
@@ -112,7 +101,7 @@ function TemplatePartNavigationEditButton( { clientId } ) {
 					{ __( 'Edit navigation' ) }
 				</ToolbarButton>
 			</ToolbarGroup>
-		</BlockControls>
+		</BlockToolbarLastItem>
 	);
 }