From bfc6f266febbee5b6e5aa176d563f8e84a161815 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 25 May 2023 10:06:20 +1000
Subject: [PATCH] Fix flicker of focus state when initially right clicking

---
 .../list-view/block-select-button.js          |  2 ++
 .../src/components/list-view/block.js         | 35 +++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index b95735bb7b178..76e150a9260fd 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -37,6 +37,7 @@ function ListViewBlockSelectButton(
 		block: { clientId },
 		onClick,
 		onContextMenu,
+		onMouseDown,
 		onToggleExpanded,
 		tabIndex,
 		onFocus,
@@ -197,6 +198,7 @@ function ListViewBlockSelectButton(
 				onClick={ onClick }
 				onContextMenu={ onContextMenu }
 				onKeyDown={ onKeyDownHandler }
+				onMouseDown={ onMouseDown }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index b371d3bce1517..f79c708065d1a 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -18,6 +18,7 @@ import {
 	useRef,
 	useEffect,
 	useCallback,
+	useMemo,
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -251,9 +252,38 @@ function ListViewBlock( {
 				event.preventDefault();
 			}
 		},
-		[ settingsRef, showBlockActions ]
+		[ allowRightClickOverrides, settingsRef, showBlockActions ]
 	);
 
+	const onMouseDown = useCallback(
+		( event ) => {
+			// Prevent right-click from focusing the block,
+			// because focus will be handled when opening the block settings dropdown.
+			if ( allowRightClickOverrides && event.button === 2 ) {
+				event.preventDefault();
+			}
+		},
+		[ allowRightClickOverrides ]
+	);
+
+	const settingsPopoverAnchor = useMemo( () => {
+		const { ownerDocument } = rowRef?.current || {};
+
+		// If no custom position is set, the settings dropdown will be anchored to the
+		// DropdownMenu toggle button.
+		if ( ! settingsAnchorRect || ! ownerDocument ) {
+			return undefined;
+		}
+
+		// Position the settings dropdown at the cursor when right-clicking a block.
+		return {
+			ownerDocument,
+			getBoundingClientRect() {
+				return settingsAnchorRect;
+			},
+		};
+	}, [ settingsAnchorRect ] );
+
 	const clearSettingsAnchorRect = useCallback( () => {
 		// Clear the custom position for the settings dropdown so that it is restored back
 		// to being anchored to the DropdownMenu toggle button.
@@ -328,6 +358,7 @@ function ListViewBlock( {
 							block={ block }
 							onClick={ selectEditorBlock }
 							onContextMenu={ onContextMenu }
+							onMouseDown={ onMouseDown }
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
@@ -395,7 +426,7 @@ function ListViewBlock( {
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							popoverProps={ {
-								anchorRect: settingsAnchorRect, // Used to position the settings at the cursor on right-click.
+								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
 							} }
 							toggleProps={ {
 								ref,