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,