Block Comments: Update 'Actions' menu design (#71877)

Mamaduka · adamsilverstein · t-hamano · web-flow · commit b0becb3319b0 · 2025-09-25T09:05:04.000+04:00
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: adamsilverstein &lt;adamsilverstein@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
@@ -12,7 +12,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
-	DropdownMenu,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 import { published, moreVertical } from '@wordpress/icons';
@@ -31,6 +31,7 @@ import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 /**
  * Renders the Comments component.
@@ -261,12 +262,14 @@ const CommentBoard = ( {
 	const actions = [
 		onEdit &&
 			status !== 'approved' && {
+				id: 'edit',
 				title: _x( 'Edit', 'Edit comment' ),
 				onClick: () => {
 					setActionState( 'edit' );
 				},
 			},
 		onDelete && {
+			id: 'delete',
 			title: _x( 'Delete', 'Delete comment' ),
 			onClick: () => {
 				setActionState( 'delete' );
@@ -275,13 +278,15 @@ const CommentBoard = ( {
 		},
 		onReopen &&
 			status === 'approved' && {
+				id: 'reopen',
 				title: _x( 'Reopen', 'Reopen comment' ),
 				onClick: () => {
 					onReopen( thread.id );
 				},
 			},
 	];
 
+	const canResolve = thread?.parent === 0 && onResolve;
 	const moreActions = actions.filter( ( item ) => item?.onClick );
 
 	return (
@@ -294,7 +299,7 @@ const CommentBoard = ( {
 				/>
 				<span className="editor-collab-sidebar-panel__comment-status">
 					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread?.parent && onResolve && (
+						{ canResolve && (
 							<Button
 								label={ _x(
 									'Resolve',
@@ -309,17 +314,34 @@ const CommentBoard = ( {
 								} }
 							/>
 						) }
-						{ 0 < moreActions.length && (
-							<DropdownMenu
-								icon={ moreVertical }
-								label={ _x(
-									'Select an action',
-									'Select comment action'
-								) }
-								className="editor-collab-sidebar-panel__comment-dropdown-menu"
-								controls={ moreActions }
+						<Menu placement="bottom-end">
+							<Menu.TriggerButton
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Actions' ) }
+										disabled={ ! moreActions.length }
+										accessibleWhenDisabled
+									/>
+								}
 							/>
-						) }
+							<Menu.Popover>
+								{ moreActions.map( ( action ) => (
+									<Menu.Item
+										key={ action.id }
+										onClick={ ( event ) => {
+											event.stopPropagation();
+											action.onClick();
+										} }
+									>
+										<Menu.ItemLabel>
+											{ action.title }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								) ) }
+							</Menu.Popover>
+						</Menu>
 					</HStack>
 				</span>
 			</HStack>
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
@@ -112,10 +112,6 @@
 	}
 }
 
-.editor-collab-sidebar-panel__comment-dropdown-menu {
-	flex-shrink: 0;
-}
-
 .editor-collab-sidebar-panel__show-more-reply {
 	font-weight: 500;
 	font-style: italic;
diff --git a/test/e2e/specs/editor/various/block-comments.spec.js b/test/e2e/specs/editor/various/block-comments.spec.js
@@ -89,8 +89,7 @@ test.describe( 'Block Comments', () => {
 			attributes: { content: 'Testing block comments' },
 			comment: 'test comment before edit',
 		} );
-		await page.getByRole( 'button', { name: 'Select an action' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Edit' } ).click();
+		await blockCommentUtils.clickBlockCommentActionMenuItem( 'Edit' );
 		await page
 			.getByRole( 'textbox', { name: 'Comment' } )
 			.first()
@@ -119,8 +118,7 @@ test.describe( 'Block Comments', () => {
 			attributes: { content: 'Testing block comments' },
 			comment: 'Test comment to delete.',
 		} );
-		await page.getByRole( 'button', { name: 'Select an action' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+		await blockCommentUtils.clickBlockCommentActionMenuItem( 'Delete' );
 		await page
 			.getByRole( 'dialog' )
 			.getByRole( 'button', { name: 'Delete' } )
@@ -150,8 +148,7 @@ test.describe( 'Block Comments', () => {
 		await resolveButton.click();
 		await expect( resolveButton ).toBeDisabled();
 
-		await page.getByRole( 'button', { name: 'Select an action' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Reopen' } ).click();
+		await blockCommentUtils.clickBlockCommentActionMenuItem( 'Reopen' );
 		await expect( resolveButton ).toBeEnabled();
 	} );
 
@@ -257,4 +254,12 @@ class BlockCommentUtils {
 			{ box: true }
 		);
 	}
+
+	async clickBlockCommentActionMenuItem( actionName ) {
+		await this.#page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Actions' } )
+			.click();
+		await this.#page.getByRole( 'menuitem', { name: actionName } ).click();
+	}
 }

Original file line number	Diff line number	Diff line change
`@@ -112,10 +112,6 @@`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`
`115`		`-.editor-collab-sidebar-panel__comment-dropdown-menu {`
`116`		`- flex-shrink: 0;`
`117`		`-}`
`118`		`-`
`119`	`115`	`.editor-collab-sidebar-panel__show-more-reply {`
`120`	`116`	`font-weight: 500;`
`121`	`117`	`font-style: italic;`