@wordpress/block-editor 12.10.2 → 12.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.10.2",
+	"version": "12.10.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.42.2",
-		"@wordpress/api-fetch": "^6.39.2",
-		"@wordpress/blob": "^3.42.2",
-		"@wordpress/blocks": "^12.19.2",
-		"@wordpress/commands": "^0.13.2",
-		"@wordpress/components": "^25.8.2",
-		"@wordpress/compose": "^6.19.2",
-		"@wordpress/data": "^9.12.2",
-		"@wordpress/date": "^4.42.2",
-		"@wordpress/deprecated": "^3.42.2",
-		"@wordpress/dom": "^3.42.2",
-		"@wordpress/element": "^5.19.2",
-		"@wordpress/escape-html": "^2.42.2",
-		"@wordpress/hooks": "^3.42.2",
-		"@wordpress/html-entities": "^3.42.2",
-		"@wordpress/i18n": "^4.42.2",
-		"@wordpress/icons": "^9.33.2",
-		"@wordpress/is-shallow-equal": "^4.42.2",
-		"@wordpress/keyboard-shortcuts": "^4.19.2",
-		"@wordpress/keycodes": "^3.42.2",
-		"@wordpress/notices": "^4.10.2",
-		"@wordpress/preferences": "^3.19.2",
-		"@wordpress/private-apis": "^0.24.2",
-		"@wordpress/rich-text": "^6.19.2",
-		"@wordpress/shortcode": "^3.42.2",
-		"@wordpress/style-engine": "^1.25.2",
-		"@wordpress/token-list": "^2.42.2",
-		"@wordpress/url": "^3.43.2",
-		"@wordpress/warning": "^2.42.2",
-		"@wordpress/wordcount": "^3.42.2",
+		"@wordpress/a11y": "^3.42.4",
+		"@wordpress/api-fetch": "^6.39.4",
+		"@wordpress/blob": "^3.42.4",
+		"@wordpress/blocks": "^12.19.4",
+		"@wordpress/commands": "^0.13.4",
+		"@wordpress/components": "^25.8.4",
+		"@wordpress/compose": "^6.19.4",
+		"@wordpress/data": "^9.12.4",
+		"@wordpress/date": "^4.42.4",
+		"@wordpress/deprecated": "^3.42.4",
+		"@wordpress/dom": "^3.42.4",
+		"@wordpress/element": "^5.19.4",
+		"@wordpress/escape-html": "^2.42.4",
+		"@wordpress/hooks": "^3.42.4",
+		"@wordpress/html-entities": "^3.42.4",
+		"@wordpress/i18n": "^4.42.4",
+		"@wordpress/icons": "^9.33.4",
+		"@wordpress/is-shallow-equal": "^4.42.4",
+		"@wordpress/keyboard-shortcuts": "^4.19.4",
+		"@wordpress/keycodes": "^3.42.4",
+		"@wordpress/notices": "^4.10.4",
+		"@wordpress/preferences": "^3.19.4",
+		"@wordpress/private-apis": "^0.24.4",
+		"@wordpress/rich-text": "^6.19.4",
+		"@wordpress/shortcode": "^3.42.4",
+		"@wordpress/style-engine": "^1.25.4",
+		"@wordpress/token-list": "^2.42.4",
+		"@wordpress/url": "^3.43.4",
+		"@wordpress/warning": "^2.42.4",
+		"@wordpress/wordcount": "^3.42.4",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5d2e3d07cc97af8090fc32c1e5d5013a2967e752"
+	"gitHead": "d1072bbcaf037a18d414da7865ebaf366a0e7062"
 }

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

@@ -14,7 +14,6 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,9 +64,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.isDefault
-						? __( 'Default' )
-						: style.label || style.name;
+					const buttonText = style.label || style.name;
 
 					return (
 						<Button

package/src/components/global-styles/hooks.js

@@ -117,7 +117,7 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 					`settings${ appendedBlockPath }.${ setting }`
 				) ??
 				getValueFromObjectPath( configToUse, `settings.${ setting }` );
-			if ( value ) {
+			if ( value !== undefined ) {
 				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );

package/src/components/global-styles/test/use-global-styles-output.js

@@ -14,6 +14,7 @@ import {
 	toCustomProperties,
 	toStyles,
 	getStylesDeclarations,
+	processCSSNesting,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -967,4 +968,42 @@ describe( 'global styles renderer', () => {
 			] );
 		} );
 	} );
+
+	describe( 'processCSSNesting', () => {
+		it( 'should return processed CSS without any nested selectors', () => {
+			expect(
+				processCSSNesting( 'color: red; margin: auto;', '.foo' )
+			).toEqual( '.foo{color: red; margin: auto;}' );
+		} );
+		it( 'should return processed CSS with nested selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}'
+			);
+		} );
+		it( 'should return processed CSS with pseudo elements', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}'
+			);
+		} );
+		it( 'should return processed CSS with multiple root selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+					'.foo, .bar'
+				)
+			).toEqual(
+				'.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}'
+			);
+		} );
+	} );
 } );

package/src/components/global-styles/use-global-styles-output.js

@@ -15,7 +15,12 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import {
+	PRESET_METADATA,
+	ROOT_BLOCK_SELECTOR,
+	scopeSelector,
+	appendToSelector,
+} from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import {
 	getTypographyFontSizeValue,
@@ -1124,18 +1129,33 @@ function updateConfigWithSeparator( config ) {
 	return config;
 }
 
-const processCSSNesting = ( css, blockSelector ) => {
+export function processCSSNesting( css, blockSelector ) {
 	let processedCSS = '';
 
 	// Split CSS nested rules.
 	const parts = css.split( '&' );
 	parts.forEach( ( part ) => {
-		processedCSS += ! part.includes( '{' )
-			? blockSelector + '{' + part + '}' // If the part doesn't contain braces, it applies to the root level.
-			: blockSelector + part; // Prepend the selector, which effectively replaces the "&" character.
+		const isRootCss = ! part.includes( '{' );
+		if ( isRootCss ) {
+			// If the part doesn't contain braces, it applies to the root level.
+			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+		} else {
+			// If the part contains braces, it's a nested CSS rule.
+			const splittedPart = part.replace( '}', '' ).split( '{' );
+			if ( splittedPart.length !== 2 ) {
+				return;
+			}
+
+			const [ nestedSelector, cssValue ] = splittedPart;
+			const combinedSelector = nestedSelector.startsWith( ' ' )
+				? scopeSelector( blockSelector, nestedSelector )
+				: appendToSelector( blockSelector, nestedSelector );
+
+			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+		}
 	} );
 	return processedCSS;
-};
+}
 
 /**
  * Returns the global styles output using a global styles configuration.

package/src/components/global-styles/utils.js

@@ -393,6 +393,27 @@ export function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
+/**
+ * Appends a sub-selector to an existing one.
+ *
+ * Given the compounded `selector` "h1, h2, h3"
+ * and the `toAppend` selector ".some-class" the result will be
+ * "h1.some-class, h2.some-class, h3.some-class".
+ *
+ * @param {string} selector Original selector.
+ * @param {string} toAppend Selector to append.
+ *
+ * @return {string} The new selector.
+ */
+export function appendToSelector( selector, toAppend ) {
+	if ( ! selector.includes( ',' ) ) {
+		return selector + toAppend;
+	}
+	const selectors = selector.split( ',' );
+	const newSelectors = selectors.map( ( sel ) => sel + toAppend );
+	return newSelectors.join( ',' );
+}
+
 /**
  * Compares global style variations according to their styles and settings properties.
  *

package/src/components/iframe/index.js

@@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
 		init.clientX += rect.left;
 		init.clientY += rect.top;

package/src/components/inserter/block-patterns-filter.js

@@ -7,10 +7,11 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	ExternalLink,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,13 +74,11 @@ export function BlockPatternsSyncFilter( {
 			{
 				value: SYNC_TYPES.full,
 				label: __( 'Synced' ),
-				info: __( 'Updated everywhere' ),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Standard' ),
-				info: __( 'Edit freely' ),
+				label: __( 'Not synced' ),
 				disabled: shouldDisableSyncFilter,
 			},
 		],
@@ -95,20 +94,17 @@ export function BlockPatternsSyncFilter( {
 			},
 			{
 				value: PATTERN_TYPES.directory,
-				label: __( 'Directory' ),
-				info: __( 'Pattern directory & core' ),
+				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.theme,
-				label: __( 'Theme' ),
-				info: __( 'Bundled with the theme' ),
+				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.user,
 				label: __( 'User' ),
-				info: __( 'Custom created' ),
 			},
 		],
 		[ shouldDisableNonUserSources ]
@@ -149,7 +145,7 @@ export function BlockPatternsSyncFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Author' ) }>
+						<MenuGroup label={ __( 'Source' ) }>
 							<MenuItemsChoice
 								choices={ patternSourceMenuOptions }
 								onSelect={ ( value ) => {
@@ -175,6 +171,22 @@ export function BlockPatternsSyncFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
+						<div className="block-editor-tool-selector__help">
+							{ createInterpolateElement(
+								__(
+									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'
+								),
+								{
+									Link: (
+										<ExternalLink
+											href={ __(
+												'https://wordpress.org/patterns/'
+											) }
+										/>
+									),
+								}
+							) }
+						</div>
 					</>
 				) }
 			</DropdownMenu>

package/src/components/inserter/block-patterns-tab.js

@@ -321,9 +321,6 @@ export function BlockPatternsCategoryPanel( {
 						category={ category }
 					/>
 				</HStack>
-				{ category.description && (
-					<Text>{ category.description }</Text>
-				) }
 				{ ! currentCategoryPatterns.length && (
 					<Text
 						variant="muted"

package/src/components/inserter/media-tab/hooks.js

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
-/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
-/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.
@@ -50,48 +51,14 @@ export function useMediaResults( category, query = {} ) {
 	return { mediaList, isLoading };
 }
 
-function useInserterMediaCategories() {
-	const {
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			inserterMediaCategories: settings.inserterMediaCategories,
-			allowedMimeTypes: settings.allowedMimeTypes,
-			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
-		};
-	}, [] );
-	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
-	// some of them. In this case we shouldn't add the category to the available media
-	// categories list in the inserter.
-	const allowedCategories = useMemo( () => {
-		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
-			return;
-		}
-		return inserterMediaCategories.filter( ( category ) => {
-			// Check if Openverse category is enabled.
-			if (
-				! enableOpenverseMediaCategory &&
-				category.name === 'openverse'
-			) {
-				return false;
-			}
-			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
-				mimeType.startsWith( `${ category.mediaType }/` )
-			);
-		} );
-	}, [
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	] );
-	return allowedCategories;
-}
-
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
 	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
 		( select ) => {
 			const { canInsertBlockType } = select( blockEditorStore );
@@ -112,7 +79,6 @@ export function useMediaCategories( rootClientId ) {
 		},
 		[ rootClientId ]
 	);
-	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
 			const _categories = [];

package/src/components/inserter/style.scss

@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 		overflow-y: auto;
 		flex-grow: 1;
 		height: 100%;
-		padding: $grid-unit-40 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 

package/src/components/link-control/search-item.js

@@ -13,7 +13,8 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
+import { pipe } from '@wordpress/compose';
 
 const ICONS_MAP = {
 	post: postList,
@@ -44,6 +45,58 @@ function SearchItemIcon( { isURL, suggestion } ) {
 	return null;
 }
 
+/**
+ * Adds a leading slash to a url if it doesn't already have one.
+ * @param {string} url the url to add a leading slash to.
+ * @return {string} the url with a leading slash.
+ */
+function addLeadingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /^\/?/, '/' );
+}
+
+function removeTrailingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /\/$/, '' );
+}
+
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
+const defaultTo = ( d ) => ( v ) => {
+	return v === null || v === undefined || v !== v ? d : v;
+};
+
+/**
+ * Prepares a URL for display in the UI.
+ * - decodes the URL.
+ * - filters it (removes protocol, www, etc.).
+ * - truncates it if necessary.
+ * - adds a leading slash.
+ * @param {string} url the url.
+ * @return {string} the processed url to display.
+ */
+function getURLForDisplay( url ) {
+	if ( ! url ) return url;
+
+	return pipe(
+		safeDecodeURI,
+		getPath,
+		defaultTo( '' ),
+		partialRight( filterURLForDisplay, 24 ),
+		removeTrailingSlash,
+		addLeadingSlash
+	)( url );
+}
+
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
@@ -54,7 +107,7 @@ export const LinkControlSearchItem = ( {
 } ) => {
 	const info = isURL
 		? __( 'Press ENTER to add this link' )
-		: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );
+		: getURLForDisplay( suggestion.url );
 
 	return (
 		<MenuItem

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

@@ -13,16 +13,9 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
-import {
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	memo,
-} from '@wordpress/element';
+import { useState, useRef, useCallback, memo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -36,7 +29,7 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
+import { getBlockPositionDescription, focusListItem } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -120,7 +113,6 @@ function ListViewBlock( {
 	);
 
 	const {
-		isTreeGridMounted,
 		expand,
 		collapse,
 		BlockSettingsMenu,
@@ -142,15 +134,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
 	// If multiple blocks are selected, deselect all blocks when the user
 	// presses the escape key.
 	const onKeyDown = ( event ) => {
@@ -188,30 +171,7 @@ function ListViewBlock( {
 				selectBlock( undefined, focusClientId, null, null );
 			}
 
-			const getFocusElement = () => {
-				const row = treeGridElementRef.current?.querySelector(
-					`[role=row][data-block="${ focusClientId }"]`
-				);
-				if ( ! row ) return null;
-				// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-				return focus.focusable.find( row )[ 0 ];
-			};
-
-			let focusElement = getFocusElement();
-			if ( focusElement ) {
-				focusElement.focus();
-			} else {
-				// The element hasn't been painted yet. Defer focusing on the next frame.
-				// This could happen when all blocks have been deleted and the default block
-				// hasn't been added to the editor yet.
-				window.requestAnimationFrame( () => {
-					focusElement = getFocusElement();
-					// Ignore if the element still doesn't exist.
-					if ( focusElement ) {
-						focusElement.focus();
-					}
-				} );
-			}
+			focusListItem( focusClientId, treeGridElementRef );
 		},
 		[ selectBlock, treeGridElementRef ]
 	);

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

@@ -168,8 +168,18 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+
+				// To avoid performance issues, we only render blocks that are in view,
+				// or blocks that are selected or dragged. If a block is selected,
+				// it is only counted if it is the first of the block selection.
+				// This prevents the entire tree from being rendered when a branch is
+				// selected, or a user selects all blocks, while still enabling scroll
+				// into view behavior when selecting a block or opening the list view.
 				const showBlock =
-					isDragged || blockInView || isSelected || isBranchDragged;
+					isDragged ||
+					blockInView ||
+					isBranchDragged ||
+					( isSelected && clientId === selectedClientIds[ 0 ] );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

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

@@ -32,6 +32,7 @@ import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
 import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
+import { focusListItem } from './utils';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -132,8 +133,6 @@ function ListViewComponent(
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
-	const isMounted = useRef( false );
-
 	const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
@@ -156,7 +155,13 @@ function ListViewComponent(
 		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
-		isMounted.current = true;
+		// If a blocks are already selected when the list view is initially
+		// mounted, shift focus to the first selected block.
+		if ( selectedClientIds?.length ) {
+			focusListItem( selectedClientIds[ 0 ], elementRef );
+		}
+		// Disable reason: Only focus on the selected item when the list view is mounted.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const expand = useCallback(
@@ -204,7 +209,6 @@ function ListViewComponent(
 
 	const contextValue = useMemo(
 		() => ( {
-			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,