@wordpress/block-editor 15.9.1-next.738bb1424.0 → 15.9.1-next.8fd3f8831.0

package/build-style/content-rtl.css

@@ -83,6 +83,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 :root {
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;

package/build-style/content.css

@@ -83,6 +83,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 :root {
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;

package/build-style/style-rtl.css

@@ -83,6 +83,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 :root {
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
@@ -661,9 +665,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-card {
-  align-items: flex-start;
   color: #1e1e1e;
-  display: flex;
   padding: 16px;
 }
 .block-editor-block-card.is-parent {

package/build-style/style.css

@@ -83,6 +83,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 :root {
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
@@ -661,9 +665,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-card {
-  align-items: flex-start;
   color: #1e1e1e;
-  display: flex;
   padding: 16px;
 }
 .block-editor-block-card.is-parent {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.9.1-next.738bb1424.0",
+	"version": "15.9.1-next.8fd3f8831.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -62,43 +62,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.36.1-next.738bb1424.0",
-		"@wordpress/api-fetch": "^7.36.1-next.738bb1424.0",
-		"@wordpress/base-styles": "^6.12.1-next.738bb1424.0",
-		"@wordpress/blob": "^4.36.1-next.738bb1424.0",
-		"@wordpress/block-serialization-default-parser": "^5.36.1-next.738bb1424.0",
-		"@wordpress/blocks": "^15.9.1-next.738bb1424.0",
-		"@wordpress/commands": "^1.36.1-next.738bb1424.0",
-		"@wordpress/components": "^31.0.1-next.738bb1424.0",
-		"@wordpress/compose": "^7.36.1-next.738bb1424.0",
-		"@wordpress/data": "^10.36.1-next.738bb1424.0",
-		"@wordpress/dataviews": "^11.1.1-next.738bb1424.0",
-		"@wordpress/date": "^5.36.1-next.738bb1424.0",
-		"@wordpress/deprecated": "^4.36.1-next.738bb1424.0",
-		"@wordpress/dom": "^4.36.1-next.738bb1424.0",
-		"@wordpress/element": "^6.36.1-next.738bb1424.0",
-		"@wordpress/escape-html": "^3.36.1-next.738bb1424.0",
-		"@wordpress/global-styles-engine": "^1.3.1-next.738bb1424.0",
-		"@wordpress/hooks": "^4.36.1-next.738bb1424.0",
-		"@wordpress/html-entities": "^4.36.1-next.738bb1424.0",
-		"@wordpress/i18n": "^6.9.1-next.738bb1424.0",
-		"@wordpress/icons": "^11.3.1-next.738bb1424.0",
-		"@wordpress/image-cropper": "^1.0.1-next.738bb1424.0",
-		"@wordpress/interactivity": "^6.36.1-next.738bb1424.0",
-		"@wordpress/is-shallow-equal": "^5.36.1-next.738bb1424.0",
-		"@wordpress/keyboard-shortcuts": "^5.36.1-next.738bb1424.0",
-		"@wordpress/keycodes": "^4.36.1-next.738bb1424.0",
-		"@wordpress/notices": "^5.36.1-next.738bb1424.0",
-		"@wordpress/preferences": "^4.36.1-next.738bb1424.0",
-		"@wordpress/priority-queue": "^3.36.1-next.738bb1424.0",
-		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
-		"@wordpress/rich-text": "^7.36.1-next.738bb1424.0",
-		"@wordpress/style-engine": "^2.36.1-next.738bb1424.0",
-		"@wordpress/token-list": "^3.36.1-next.738bb1424.0",
-		"@wordpress/upload-media": "^0.21.1-next.738bb1424.0",
-		"@wordpress/url": "^4.36.1-next.738bb1424.0",
-		"@wordpress/warning": "^3.36.1-next.738bb1424.0",
-		"@wordpress/wordcount": "^4.36.1-next.738bb1424.0",
+		"@wordpress/a11y": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/api-fetch": "^7.36.1-next.8fd3f8831.0",
+		"@wordpress/base-styles": "^6.12.1-next.8fd3f8831.0",
+		"@wordpress/blob": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/block-serialization-default-parser": "^5.36.1-next.8fd3f8831.0",
+		"@wordpress/blocks": "^15.9.1-next.8fd3f8831.0",
+		"@wordpress/commands": "^1.36.1-next.8fd3f8831.0",
+		"@wordpress/components": "^31.0.1-next.8fd3f8831.0",
+		"@wordpress/compose": "^7.36.1-next.8fd3f8831.0",
+		"@wordpress/data": "^10.36.1-next.8fd3f8831.0",
+		"@wordpress/dataviews": "^11.1.1-next.8fd3f8831.0",
+		"@wordpress/date": "^5.36.1-next.8fd3f8831.0",
+		"@wordpress/deprecated": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/dom": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/element": "^6.36.1-next.8fd3f8831.0",
+		"@wordpress/escape-html": "^3.36.1-next.8fd3f8831.0",
+		"@wordpress/global-styles-engine": "^1.3.1-next.8fd3f8831.0",
+		"@wordpress/hooks": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/html-entities": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/i18n": "^6.9.1-next.8fd3f8831.0",
+		"@wordpress/icons": "^11.3.1-next.8fd3f8831.0",
+		"@wordpress/image-cropper": "^1.0.1-next.8fd3f8831.0",
+		"@wordpress/interactivity": "^6.36.1-next.8fd3f8831.0",
+		"@wordpress/is-shallow-equal": "^5.36.1-next.8fd3f8831.0",
+		"@wordpress/keyboard-shortcuts": "^5.36.1-next.8fd3f8831.0",
+		"@wordpress/keycodes": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/notices": "^5.36.1-next.8fd3f8831.0",
+		"@wordpress/preferences": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/priority-queue": "^3.36.1-next.8fd3f8831.0",
+		"@wordpress/private-apis": "^1.36.1-next.8fd3f8831.0",
+		"@wordpress/rich-text": "^7.36.1-next.8fd3f8831.0",
+		"@wordpress/style-engine": "^2.36.1-next.8fd3f8831.0",
+		"@wordpress/token-list": "^3.36.1-next.8fd3f8831.0",
+		"@wordpress/upload-media": "^0.21.1-next.8fd3f8831.0",
+		"@wordpress/url": "^4.36.1-next.8fd3f8831.0",
+		"@wordpress/warning": "^3.36.1-next.8fd3f8831.0",
+		"@wordpress/wordcount": "^4.36.1-next.8fd3f8831.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -121,5 +121,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
+	"gitHead": "e582b351bc4c4b8734bb087f63a3beec9875c3c7"
 }

package/src/components/block-card/index.js

@@ -11,17 +11,19 @@ import {
 	Icon,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	chevronLeft,
 	chevronRight,
 	arrowRight,
 	arrowLeft,
 } from '@wordpress/icons';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -103,18 +105,32 @@ function BlockCard( {
 		( { title, icon, description } = blockType );
 	}
 
-	const parentNavBlockClientId = useSelect(
+	const { parentBlockClientId, parentBlockName } = useSelect(
 		( select ) => {
 			if ( parentClientId || isChild || ! allowParentNavigation ) {
-				return;
+				return {};
 			}
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			const { getBlockParents, getBlockName } =
+				select( blockEditorStore );
 
-			return getBlockParentsByBlockName(
-				clientId,
-				'core/navigation',
-				true
-			)[ 0 ];
+			// Find the closest parent block that is either:
+			// 1. A navigation block (special case for ad-hoc list view support)
+			// 2. Any block with listView support
+			const parents = getBlockParents( clientId, true );
+			const foundParentId = parents.find( ( parentId ) => {
+				const parentName = getBlockName( parentId );
+				return (
+					parentName === 'core/navigation' ||
+					hasBlockSupport( parentName, 'listView' )
+				);
+			} );
+
+			return {
+				parentBlockClientId: foundParentId,
+				parentBlockName: foundParentId
+					? getBlockName( foundParentId )
+					: null,
+			};
 		},
 		[ clientId, allowParentNavigation, isChild, parentClientId ]
 	);
@@ -134,56 +150,66 @@ function BlockCard( {
 				className
 			) }
 		>
-			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
-				<Button
-					onClick={ () => selectBlock( parentNavBlockClientId ) }
-					label={
-						parentNavBlockClientId
-							? __( 'Go to parent Navigation block' )
-							: // TODO - improve copy, not sure that we should use the term 'section'
-							  __( 'Go to parent section' )
-					}
-					style={
-						// TODO: This style override is also used in ToolsPanelHeader.
-						// It should be supported out-of-the-box by Button.
-						{ minWidth: 24, padding: 0 }
-					}
-					icon={ isRTL() ? chevronRight : chevronLeft }
-					size="small"
-				/>
-			) }
-			{ isChild && (
-				<span className="block-editor-block-card__child-indicator-icon">
-					<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
-				</span>
-			) }
-			<OptionalParentSelectButton
-				onClick={
-					parentClientId
-						? () => {
-								selectBlock( parentClientId );
-						  }
-						: undefined
-				}
-			>
-				<BlockIcon icon={ icon } showColors />
-				<VStack spacing={ 1 }>
-					<TitleElement className="block-editor-block-card__title">
-						<span className="block-editor-block-card__name">
-							{ !! name?.length ? name : title }
+			<VStack>
+				<HStack justify="flex-start" spacing={ 0 }>
+					{ parentBlockClientId && (
+						<Button
+							onClick={ () => selectBlock( parentBlockClientId ) }
+							label={
+								parentBlockName
+									? sprintf(
+											/* translators: %s: The name of the parent block. */
+											__( 'Go to "%s" block' ),
+											getBlockType( parentBlockName )
+												?.title
+									  )
+									: __( 'Go to parent block' )
+							}
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							size="small"
+						/>
+					) }
+					{ isChild && (
+						<span className="block-editor-block-card__child-indicator-icon">
+							<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
 						</span>
-						{ ! parentClientId && ! isChild && !! name?.length && (
-							<Badge>{ title }</Badge>
-						) }
-					</TitleElement>
-					{ ! parentClientId && ! isChild && description && (
-						<Text className="block-editor-block-card__description">
-							{ description }
-						</Text>
 					) }
-					{ children }
-				</VStack>
-			</OptionalParentSelectButton>
+					<OptionalParentSelectButton
+						onClick={
+							parentClientId
+								? () => {
+										selectBlock( parentClientId );
+								  }
+								: undefined
+						}
+					>
+						<BlockIcon icon={ icon } showColors />
+						<VStack spacing={ 1 }>
+							<TitleElement className="block-editor-block-card__title">
+								<span className="block-editor-block-card__name">
+									{ !! name?.length ? name : title }
+								</span>
+								{ ! parentClientId &&
+									! isChild &&
+									!! name?.length && (
+										<Badge>{ title }</Badge>
+									) }
+							</TitleElement>
+							{ children }
+						</VStack>
+					</OptionalParentSelectButton>
+				</HStack>
+				{ ! parentClientId && ! isChild && description && (
+					<Text className="block-editor-block-card__description">
+						{ description }
+					</Text>
+				) }
+			</VStack>
 		</div>
 	);
 }

package/src/components/block-card/style.scss

@@ -2,9 +2,7 @@
 @use "@wordpress/base-styles/colors" as *;
 
 .block-editor-block-card {
-	align-items: flex-start;
 	color: $gray-900;
-	display: flex;
 	padding: $grid-unit-20;
 
 	&.is-parent {

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -77,7 +77,6 @@ export function BlockSettingsDropdown( {
 	...props
 } ) {
 	// Get the client id of the current block for this menu, if one is set.
-	const currentClientId = block?.clientId;
 	const count = clientIds.length;
 	const firstBlockClientId = clientIds[ 0 ];
 
@@ -86,7 +85,6 @@ export function BlockSettingsDropdown( {
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
-		openedBlockSettingsMenu,
 		isContentOnly,
 		isZoomOut,
 	} = useSelect(
@@ -97,7 +95,6 @@ export function BlockSettingsDropdown( {
 				getPreviousBlockClientId,
 				getSelectedBlockClientIds,
 				getBlockAttributes,
-				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
 				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
@@ -121,7 +118,6 @@ export function BlockSettingsDropdown( {
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
-				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 				isZoomOut: _isZoomOut(),
@@ -133,10 +129,6 @@ export function BlockSettingsDropdown( {
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
-	const { setOpenedBlockSettingsMenu } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		return {
@@ -191,29 +183,6 @@ export function BlockSettingsDropdown( {
 	const parentBlockIsSelected =
 		selectedBlockClientIds?.includes( firstParentClientId );
 
-	// When a currentClientId is in use, treat the menu as a controlled component.
-	// This ensures that only one block settings menu is open at a time.
-	// This is a temporary solution to work around an issue with `onFocusOutside`
-	// where it does not allow a dropdown to be closed if focus was never within
-	// the dropdown to begin with. Examples include a user either CMD+Clicking or
-	// right clicking into an inactive window.
-	// See: https://github.com/WordPress/gutenberg/pull/54083
-	const open = ! currentClientId
-		? undefined
-		: openedBlockSettingsMenu === currentClientId || false;
-
-	function onToggle( localOpen ) {
-		if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
-			setOpenedBlockSettingsMenu( currentClientId );
-		} else if (
-			! localOpen &&
-			openedBlockSettingsMenu &&
-			openedBlockSettingsMenu === currentClientId
-		) {
-			setOpenedBlockSettingsMenu( undefined );
-		}
-	}
-
 	const shouldShowBlockParentMenuItem =
 		! parentBlockIsSelected && !! firstParentClientId;
 
@@ -254,8 +223,6 @@ export function BlockSettingsDropdown( {
 						label={ __( 'Options' ) }
 						className="block-editor-block-settings-menu"
 						popoverProps={ POPOVER_PROPS }
-						open={ open }
-						onToggle={ onToggle }
 						noIcons
 						{ ...props }
 					>

package/src/components/inspector-controls-tabs/index.js

@@ -6,7 +6,7 @@ import {
 	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect } from '@wordpress/data';
 
@@ -18,7 +18,6 @@ import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
 import ContentTab from './content-tab';
 import InspectorControls from '../inspector-controls';
-import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -35,47 +34,36 @@ export default function InspectorControlsTabs( {
 		return select( preferencesStore ).get( 'core', 'showIconLabels' );
 	}, [] );
 
-	// The tabs panel will mount before fills are rendered to the list view
-	// slot. This means the list view tab isn't initially included in the
-	// available tabs so the panel defaults selection to the settings tab
-	// which at the time is the first tab. This check allows blocks known to
-	// include the list view tab to set it as the tab selected by default.
-	const initialTabName = ! useIsListViewTabDisabled( blockName )
-		? TAB_LIST_VIEW.name
-		: undefined;
+	const [ selectedTabId, setSelectedTabId ] = useState( tabs[ 0 ]?.name );
+	const hasUserSelectionRef = useRef( false );
 
-	const [ selectedTabId, setSelectedTabId ] = useState(
-		initialTabName ?? tabs[ 0 ]?.name
-	);
+	// Reset when switching blocks
+	useEffect( () => {
+		hasUserSelectionRef.current = false;
+	}, [ clientId ] );
 
-	// When the active tab is not amongst the available `tabs`, it indicates
-	// the list of tabs was changed dynamically with the active one being
-	// removed. Set the active tab back to the first tab.
+	// Auto-select first available tab unless user has made a selection
 	useEffect( () => {
-		// Skip this behavior if `initialTabName` is supplied. In the navigation
-		// block, the list view tab isn't present in `tabs` initially. The early
-		// return here prevents the dynamic behavior that follows from overriding
-		// `initialTabName`.
-		if ( initialTabName ) {
+		if ( ! tabs?.length || hasUserSelectionRef.current ) {
 			return;
 		}
 
-		if ( tabs?.length && selectedTabId ) {
-			const activeTab = tabs.find(
-				( tab ) => tab.name === selectedTabId
-			);
-			if ( ! activeTab ) {
-				setSelectedTabId( tabs[ 0 ].name );
-			}
+		const firstTabName = tabs[ 0 ]?.name;
+		if ( selectedTabId !== firstTabName ) {
+			setSelectedTabId( firstTabName );
 		}
-	}, [ tabs, selectedTabId, initialTabName ] );
+	}, [ tabs, selectedTabId ] );
+
+	const handleTabSelect = ( tabId ) => {
+		setSelectedTabId( tabId );
+		hasUserSelectionRef.current = true;
+	};
 
 	return (
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs
-				defaultTabId={ initialTabName }
 				selectedTabId={ selectedTabId }
-				onSelect={ setSelectedTabId }
+				onSelect={ handleTabSelect }
 				key={ clientId }
 			>
 				<Tabs.TabList>

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -8,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
-import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { InspectorAdvancedControls } from '../inspector-controls';
 import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES, TAB_CONTENT } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -50,9 +49,8 @@ export default function useInspectorControlsTabs(
 	} = InspectorControlsGroups;
 
 	// List View Tab: If there are any fills for the list group add that tab.
-	const listViewDisabled = useIsListViewTabDisabled( blockName );
 	const listFills = useSlotFills( listGroup.name );
-	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
+	const hasListFills = !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.

package/src/components/list-view/block.js

@@ -96,7 +96,6 @@ function ListViewBlock( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		setOpenedBlockSettingsMenu,
 		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 	const debouncedToggleBlockHighlight = useDebounce(
@@ -298,7 +297,6 @@ function ListViewBlock( {
 			const newlySelectedBlocks = getSelectedBlockClientIds();
 
 			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			setOpenedBlockSettingsMenu( undefined );
 			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
 		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
 			event.preventDefault();
@@ -308,7 +306,6 @@ function ListViewBlock( {
 			const newlySelectedBlocks = getSelectedBlockClientIds();
 
 			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-			setOpenedBlockSettingsMenu( undefined );
 			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
 		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
 			event.preventDefault();
@@ -368,7 +365,6 @@ function ListViewBlock( {
 				speak( __( 'Selected blocks are grouped.' ) );
 				const newlySelectedBlocks = getSelectedBlockClientIds();
 				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
-				setOpenedBlockSettingsMenu( undefined );
 				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
 			}
 		} else if (
@@ -449,6 +445,11 @@ function ListViewBlock( {
 	// Allow right-clicking an item in the List View to open up the block settings dropdown.
 	const onContextMenu = useCallback(
 		( event ) => {
+			const { ownerDocument } = settingsRef?.current || {};
+			if ( ! ownerDocument || ! ownerDocument.hasFocus() ) {
+				return;
+			}
+
 			if ( showBlockActions && allowRightClickOverrides ) {
 				settingsRef.current?.click();
 				// Ensure the position of the settings dropdown is at the cursor.

package/src/hooks/index.js

@@ -33,6 +33,7 @@ import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
+import listView from './list-view';
 import './block-renaming';
 import './grid-visualizer';
 
@@ -52,6 +53,7 @@ createBlockEditFilter(
 		blockBindingsPanel,
 		childLayout,
 		allowedBlocks,
+		listView,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [