List View: Add right-click behaviour to open block settings dropdown, and add right click overrides editor setting

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -48,6 +48,7 @@ export function BlockSettingsDropdown( {
 	clientIds,
 	__experimentalSelectBlock,
 	children,
+	popoverProps,
 	...props
 } ) {
 	const blockClientIds = castArray( clientIds );
@@ -195,7 +196,7 @@ export function BlockSettingsDropdown( {
 					icon={ moreVertical }
 					label={ __( 'Options' ) }
 					className="block-editor-block-settings-menu"
-					popoverProps={ POPOVER_PROPS }
+					popoverProps={ { ...POPOVER_PROPS, ...popoverProps } }
 					noIcons
 					{ ...props }
 				>

packages/block-editor/src/components/list-view/block-select-button.js

@@ -25,6 +25,7 @@ function ListViewBlockSelectButton(
 		className,
 		block: { clientId },
 		onClick,
+		onContextMenu,
 		onToggleExpanded,
 		tabIndex,
 		onFocus,
@@ -60,6 +61,7 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onContextMenu={ onContextMenu }
 				onKeyDown={ onKeyDownHandler }
 				ref={ ref }
 				tabIndex={ tabIndex }

packages/block-editor/src/components/list-view/block.js

@@ -56,7 +56,9 @@ function ListViewBlock( {
 	preventAnnouncement,
 } ) {
 	const cellRef = useRef( null );
+	const settingsRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
+	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 	const { clientId } = block;
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
@@ -71,6 +73,12 @@ function ListViewBlock( {
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
 	);
+	const { allowRightClickOverrides } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			allowRightClickOverrides: getSettings().allowRightClickOverrides,
+		};
+	} );
 
 	// When a block hides its toolbar it also hides the block settings menu,
 	// since that menu is part of the toolbar in the editor canvas.
@@ -173,6 +181,24 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
+	// Allow right-clicking an item in the List View to open up the block settings dropdown.
+	const onContextMenu = useCallback( ( event ) => {
+		if ( showBlockActions && allowRightClickOverrides ) {
+			settingsRef.current?.click();
+			// Ensure the position of the settings dropdown is at the cursor.
+			setSettingsAnchorRect(
+				new window.DOMRect( event.clientX, event.clientY, 0, 0 )
+			);
+			event.preventDefault();
+		}
+	} );
+
+	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.
+		setSettingsAnchorRect( undefined );
+	} );
+
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -227,6 +253,7 @@ function ListViewBlock( {
 						<ListViewBlockContents
 							block={ block }
 							onClick={ selectEditorBlock }
+							onContextMenu={ onContextMenu }
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
@@ -284,16 +311,21 @@ function ListViewBlock( {
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected }
+					ref={ settingsRef }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ dropdownClientIds }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
+							popoverProps={ {
+								anchorRect: settingsAnchorRect, // Used to position the settings at the cursor on right-click.
+							} }
 							toggleProps={ {
 								ref,
 								className: 'block-editor-list-view-block__menu',
 								tabIndex,
+								onClick: clearSettingsAnchorRect,
 								onFocus,
 							} }
 							disableOpenOnArrowDown

packages/edit-post/src/components/preferences-modal/index.js

@@ -145,6 +145,15 @@ export default function EditPostPreferencesModal() {
 									label={ __( 'Display block breadcrumbs' ) }
 								/>
 							) }
+							<EnableFeature
+								featureName="allowRightClickOverrides"
+								help={ __(
+									'Allows contextual menus via right-click, overriding browser defaults.'
+								) }
+								label={ __(
+									'Allow right-click contextual menus'
+								) }
+							/>
 						</PreferencesModalSection>
 					</>
 				),

packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -52,6 +52,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 help="Shows block breadcrumbs at the bottom of the editor."
                 label="Display block breadcrumbs"
               />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="allowRightClickOverrides"
+                help="Allows contextual menus via right-click, overriding browser defaults."
+                label="Allow right-click contextual menus"
+              />
             </Section>
           </React.Fragment>,
           "name": "general",
@@ -183,6 +188,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 help="Shows block breadcrumbs at the bottom of the editor."
                 label="Display block breadcrumbs"
               />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="allowRightClickOverrides"
+                help="Allows contextual menus via right-click, overriding browser defaults."
+                label="Allow right-click contextual menus"
+              />
             </Section>
           </React.Fragment>,
           "name": "general",

packages/edit-post/src/editor.js

@@ -36,6 +36,7 @@ function Editor( {
 	...props
 } ) {
 	const {
+		allowRightClickOverrides,
 		hasFixedToolbar,
 		focusMode,
 		hasReducedUI,
@@ -80,6 +81,9 @@ function Editor( {
 			const isViewable = getPostType( postType )?.viewable ?? false;
 
 			return {
+				allowRightClickOverrides: isFeatureActive(
+					'allowRightClickOverrides'
+				),
 				hasFixedToolbar:
 					isFeatureActive( 'fixedToolbar' ) ||
 					__experimentalGetPreviewDeviceType() !== 'Desktop',
@@ -118,6 +122,7 @@ function Editor( {
 			hasFixedToolbar,
 			focusMode,
 			hasReducedUI,
+			allowRightClickOverrides,
 
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
@@ -145,6 +150,7 @@ function Editor( {
 
 		return result;
 	}, [
+		allowRightClickOverrides,
 		settings,
 		hasFixedToolbar,
 		focusMode,

packages/edit-post/src/index.js

@@ -107,6 +107,7 @@ export function initializeEditor(
 	);
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		allowRightClickOverrides: true,
 		editorMode: 'visual',
 		fixedToolbar: false,
 		fullscreenMode: true,

packages/edit-site/src/components/preferences-modal/index.js

@@ -48,6 +48,13 @@ export default function EditSitePreferencesModal( {
 						) }
 						label={ __( 'Always open list view' ) }
 					/>
+					<EnableFeature
+						featureName="allowRightClickOverrides"
+						help={ __(
+							'Allows contextual menus via right-click, overriding browser defaults.'
+						) }
+						label={ __( 'Allow right-click contextual menus' ) }
+					/>
 				</PreferencesModalSection>
 			),
 		},

packages/edit-site/src/index.js

@@ -59,6 +59,7 @@ export function reinitializeEditor( target, settings ) {
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	{
 		dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+			allowRightClickOverrides: true,
 			editorMode: 'visual',
 			fixedToolbar: false,
 			focusMode: false,

packages/edit-site/src/store/selectors.js

@@ -128,6 +128,10 @@ export const getSettings = createSelector(
 				state,
 				'showIconLabels'
 			),
+			allowRightClickOverrides: !! __unstableGetPreference(
+				state,
+				'allowRightClickOverrides'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
 			__experimentalPreferPatternsOnRoot:
@@ -155,6 +159,7 @@ export const getSettings = createSelector(
 		__unstableGetPreference( state, 'fixedToolbar' ),
 		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
 		__unstableGetPreference( state, 'showIconLabels' ),
+		__unstableGetPreference( state, 'allowRightClickOverrides' ),
 		getReusableBlocks( state ),
 		getEditedPostType( state ),
 	]

packages/edit-site/src/store/test/selectors.js

@@ -76,6 +76,7 @@ describe( 'selectors', () => {
 			};
 			const setInserterOpened = () => {};
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
+				allowRightClickOverrides: false,
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
@@ -100,6 +101,7 @@ describe( 'selectors', () => {
 			const setInserterOpened = () => {};
 
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
+				allowRightClickOverrides: false,
 				outlineMode: true,
 				key: 'value',
 				focusMode: true,

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -124,6 +124,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'__unstableGalleryWithImageBlocks',
 				'alignWide',
 				'allowedBlockTypes',
+				'allowRightClickOverrides',
 				'bodyPlaceholder',
 				'canLockBlocks',
 				'codeEditingEnabled',