@wordpress/block-editor 12.8.1 → 12.9.0

package/build-style/content-rtl.css

@@ -181,12 +181,12 @@
   box-shadow: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -201,14 +201,10 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
-  box-shadow: none;
-  outline: none;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -220,6 +216,8 @@
   top: -14px;
   border-radius: 2px;
   border-top: 4px solid #ccc;
+  bottom: auto;
+  box-shadow: none;
 }
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
@@ -675,6 +673,9 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
+.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
+  border: none;
+}
 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
   background-color: var(--wp-admin-theme-color);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);

package/build-style/content.css

@@ -181,12 +181,12 @@
   box-shadow: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -201,14 +201,10 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
-  box-shadow: none;
-  outline: none;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -220,6 +216,8 @@
   top: -14px;
   border-radius: 2px;
   border-top: 4px solid #ccc;
+  bottom: auto;
+  box-shadow: none;
 }
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
@@ -675,6 +673,9 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
+.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
+  border: none;
+}
 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
   background-color: var(--wp-admin-theme-color);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.8.1",
+	"version": "12.9.0",
 	"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.40.1",
-		"@wordpress/api-fetch": "^6.37.1",
-		"@wordpress/blob": "^3.40.1",
-		"@wordpress/blocks": "^12.17.1",
-		"@wordpress/commands": "^0.11.1",
-		"@wordpress/components": "^25.6.1",
-		"@wordpress/compose": "^6.17.1",
-		"@wordpress/data": "^9.10.1",
-		"@wordpress/date": "^4.40.1",
-		"@wordpress/deprecated": "^3.40.1",
-		"@wordpress/dom": "^3.40.1",
-		"@wordpress/element": "^5.17.1",
-		"@wordpress/escape-html": "^2.40.1",
-		"@wordpress/hooks": "^3.40.1",
-		"@wordpress/html-entities": "^3.40.1",
-		"@wordpress/i18n": "^4.40.1",
-		"@wordpress/icons": "^9.31.1",
-		"@wordpress/is-shallow-equal": "^4.40.1",
-		"@wordpress/keyboard-shortcuts": "^4.17.1",
-		"@wordpress/keycodes": "^3.40.1",
-		"@wordpress/notices": "^4.8.1",
-		"@wordpress/preferences": "^3.17.1",
-		"@wordpress/private-apis": "^0.22.1",
-		"@wordpress/rich-text": "^6.17.1",
-		"@wordpress/shortcode": "^3.40.1",
-		"@wordpress/style-engine": "^1.23.1",
-		"@wordpress/token-list": "^2.40.1",
-		"@wordpress/url": "^3.41.1",
-		"@wordpress/warning": "^2.40.1",
-		"@wordpress/wordcount": "^3.40.1",
+		"@wordpress/a11y": "^3.41.0",
+		"@wordpress/api-fetch": "^6.38.0",
+		"@wordpress/blob": "^3.41.0",
+		"@wordpress/blocks": "^12.18.0",
+		"@wordpress/commands": "^0.12.0",
+		"@wordpress/components": "^25.7.0",
+		"@wordpress/compose": "^6.18.0",
+		"@wordpress/data": "^9.11.0",
+		"@wordpress/date": "^4.41.0",
+		"@wordpress/deprecated": "^3.41.0",
+		"@wordpress/dom": "^3.41.0",
+		"@wordpress/element": "^5.18.0",
+		"@wordpress/escape-html": "^2.41.0",
+		"@wordpress/hooks": "^3.41.0",
+		"@wordpress/html-entities": "^3.41.0",
+		"@wordpress/i18n": "^4.41.0",
+		"@wordpress/icons": "^9.32.0",
+		"@wordpress/is-shallow-equal": "^4.41.0",
+		"@wordpress/keyboard-shortcuts": "^4.18.0",
+		"@wordpress/keycodes": "^3.41.0",
+		"@wordpress/notices": "^4.9.0",
+		"@wordpress/preferences": "^3.18.0",
+		"@wordpress/private-apis": "^0.23.0",
+		"@wordpress/rich-text": "^6.18.0",
+		"@wordpress/shortcode": "^3.41.0",
+		"@wordpress/style-engine": "^1.24.0",
+		"@wordpress/token-list": "^2.41.0",
+		"@wordpress/url": "^3.42.0",
+		"@wordpress/warning": "^2.41.0",
+		"@wordpress/wordcount": "^3.41.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
+	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
 }

package/src/components/block-list/block-outline.native.js

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const BLOCKS_WITH_OUTLINE = [ 'core/social-link', 'core/missing' ];
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
 
 function BlockOutline( {
 	blockCategory,
@@ -22,7 +22,9 @@ function BlockOutline( {
 	isSelected,
 	name,
 } ) {
-	const textBlockWithOutline = BLOCKS_WITH_OUTLINE.includes( name );
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const socialBlockWithOutline = name.includes( 'core/social-link' );
+
 	const hasBlockTextCategory =
 		blockCategory === 'text' && ! textBlockWithOutline;
 	const hasBlockMediaCategory =
@@ -47,6 +49,7 @@ function BlockOutline( {
 		( ( hasBlockTextCategory && hasInnerBlocks ) ||
 			( ! hasBlockTextCategory && hasInnerBlocks ) ||
 			( ! hasBlockTextCategory && isRootList ) ||
+			socialBlockWithOutline ||
 			textBlockWithOutline );
 
 	return (

package/src/components/block-list/content.scss

@@ -85,7 +85,6 @@
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;
 
@@ -113,8 +112,6 @@
 
 	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-		box-shadow: none;
-		outline: none;
 
 		&::after {
 			content: "";
@@ -130,6 +127,8 @@
 			top: -$default-block-margin * 0.5;
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
+			bottom: auto;
+			box-shadow: none;
 		}
 	}
 

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

@@ -31,7 +31,6 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
-import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
@@ -39,6 +38,7 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
+import { useTypingObserver } from '../observe-typing';
 
 const elementContext = createContext();
 
@@ -104,7 +104,7 @@ function Root( { className, ...settings } ) {
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
-				setElement,
+				useTypingObserver(),
 			] ),
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
@@ -118,13 +118,14 @@ function Root( { className, ...settings } ) {
 		<elementContext.Provider value={ element }>
 			<IntersectionObserver.Provider value={ intersectionObserver }>
 				<div { ...innerBlocksProps } />
+				{ /* Ensure element and layout styles are always at the end of the document */ }
+				<div ref={ setElement } />
 			</IntersectionObserver.Provider>
 		</elementContext.Provider>
 	);
 }
 
 export default function BlockList( settings ) {
-	usePreParsePatterns();
 	return (
 		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
 			<Root { ...settings } />

package/src/components/block-popover/inbetween.js

@@ -81,10 +81,10 @@ function BlockPopoverInbetween( {
 			return undefined;
 		}
 
-		const { ownerDocument } = previousElement || nextElement;
+		const contextElement = previousElement || nextElement;
 
 		return {
-			ownerDocument,
+			contextElement,
 			getBoundingClientRect() {
 				const previousRect = previousElement
 					? previousElement.getBoundingClientRect()
@@ -215,7 +215,8 @@ function BlockPopoverInbetween( {
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }

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

@@ -142,7 +142,7 @@ function BlockPopover(
 
 				return new window.DOMRect( left, top, width, height );
 			},
-			ownerDocument: selectedElement.ownerDocument,
+			contextElement: selectedElement,
 		};
 	}, [
 		bottomClientId,
@@ -163,7 +163,8 @@ function BlockPopover(
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			placement="top-start"
 			resize={ false }
 			flip={ false }

package/src/components/button-block-appender/content.scss

@@ -35,6 +35,7 @@
 
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
+	// One level of nesting
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// Legacy groups have an inner container so need to be targeted separately
@@ -69,6 +70,13 @@
 		}
 	}
 
+	// Hide the dashed outline in 2-level nested cases, so for example the dashed
+	// empty column is only shown when the columns block is selected.
+	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
+		border: none;
+	}
+
+	// Drop zone.
 	&.is-drag-over .block-editor-button-block-appender {
 		background-color: var(--wp-admin-theme-color);
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

package/src/components/color-style-selector/index.js

@@ -13,7 +13,7 @@ import { DOWN } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 		<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
 	</SVG>
 );

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,18 +13,22 @@ import { store as blockEditorStore } from '../../store';
 import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { items } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
 
 			return {
-				items: filterInserterItems( allItems, { onlyReusable: true } ),
+				inserterItems: allItems,
 			};
 		},
 		[ rootClientId ]
 	);
 
+	const items = useMemo( () => {
+		return filterInserterItems( inserterItems, { onlyReusable: true } );
+	}, [ inserterItems ] );
+
 	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
 
 	return (

package/src/components/inserter/search-results.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,21 +22,24 @@ function InserterSearchResults( {
 	rootClientId,
 	isFullScreen,
 } ) {
-	const { blockTypes } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
-			const allItems =
+			const items =
 				select( blockEditorStore ).getInserterItems( rootClientId );
 
-			const availableItems = filterInserterItems( allItems, {
-				allowReusable: true,
-			} );
-			const filteredItems = searchItems( availableItems, filterValue );
-
-			return { blockTypes: filteredItems };
+			return { inserterItems: items };
 		},
-		[ rootClientId, filterValue ]
+		[ rootClientId ]
 	);
 
+	const blockTypes = useMemo( () => {
+		const availableItems = filterInserterItems( inserterItems, {
+			allowReusable: true,
+		} );
+
+		return searchItems( availableItems, filterValue );
+	}, [ inserterItems, filterValue ] );
+
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 

package/src/components/link-control/index.js

@@ -422,11 +422,7 @@ function LinkControl( {
 									settings={ settings?.filter(
 										( { id } ) => id === 'opensInNewTab'
 									) }
-									onChange={ ( { opensInNewTab } ) => {
-										onChange( {
-											opensInNewTab,
-										} );
-									} }
+									onChange={ onChange }
 								/>
 							);
 						}

package/src/components/link-control/test/index.js

@@ -1789,6 +1789,7 @@ describe( 'Addition Settings UI', () => {
 
 		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 		expect( mockOnChange ).toHaveBeenCalledWith( {
+			...selectedLink,
 			opensInNewTab: true,
 		} );
 	} );

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	Button,
 	__experimentalHStack as HStack,
@@ -55,13 +56,15 @@ function ListViewBlockSelectButton(
 	} );
 	const { isLocked } = useBlockLock( clientId );
 	const {
+		canInsertBlockType,
 		getSelectedBlockClientIds,
 		getPreviousBlockClientId,
 		getBlockRootClientId,
 		getBlockOrder,
+		getBlocksByClientId,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { removeBlocks } = useDispatch( blockEditorStore );
+	const { duplicateBlocks, removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
@@ -83,10 +86,35 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
+	// Determine which blocks to update:
+	// If the current (focused) block is part of the block selection, use the whole selection.
+	// If the focused block is not part of the block selection, only update the focused block.
+	function getBlocksToUpdate() {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const isUpdatingSelectedBlocks =
+			selectedBlockClientIds.includes( clientId );
+		const firstBlockClientId = isUpdatingSelectedBlocks
+			? selectedBlockClientIds[ 0 ]
+			: clientId;
+		const firstBlockRootClientId =
+			getBlockRootClientId( firstBlockClientId );
+
+		const blocksToUpdate = isUpdatingSelectedBlocks
+			? selectedBlockClientIds
+			: [ clientId ];
+
+		return {
+			blocksToUpdate,
+			firstBlockClientId,
+			firstBlockRootClientId,
+			selectedBlockClientIds,
+		};
+	}
+
 	/**
 	 * @param {KeyboardEvent} event
 	 */
-	function onKeyDownHandler( event ) {
+	async function onKeyDownHandler( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
 		} else if (
@@ -94,18 +122,12 @@ function ListViewBlockSelectButton(
 			event.keyCode === DELETE ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const isDeletingSelectedBlocks =
-				selectedBlockClientIds.includes( clientId );
-			const firstBlockClientId = isDeletingSelectedBlocks
-				? selectedBlockClientIds[ 0 ]
-				: clientId;
-			const firstBlockRootClientId =
-				getBlockRootClientId( firstBlockClientId );
-
-			const blocksToDelete = isDeletingSelectedBlocks
-				? selectedBlockClientIds
-				: [ clientId ];
+			const {
+				blocksToUpdate: blocksToDelete,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				selectedBlockClientIds,
+			} = getBlocksToUpdate();
 
 			// Don't update the selection if the blocks cannot be deleted.
 			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
@@ -131,6 +153,36 @@ function ListViewBlockSelectButton(
 			}
 
 			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+
+			const { blocksToUpdate, firstBlockRootClientId } =
+				getBlocksToUpdate();
+
+			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
+				( block ) => {
+					return (
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, firstBlockRootClientId )
+					);
+				}
+			);
+
+			if ( canDuplicate ) {
+				const updatedBlocks = await duplicateBlocks(
+					blocksToUpdate,
+					false
+				);
+
+				if ( updatedBlocks?.length ) {
+					// If blocks have been duplicated, focus the first duplicated block.
+					updateFocusAndSelection( updatedBlocks[ 0 ], false );
+				}
+			}
 		}
 	}
 
@@ -194,7 +246,7 @@ function ListViewBlockSelectButton(
 							{ images.map( ( image, index ) => (
 								<span
 									className="block-editor-list-view-block-select-button__image"
-									key={ `img-${ image.url }` }
+									key={ image.clientId }
 									style={ {
 										backgroundImage: `url(${ image.url })`,
 										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.

package/src/components/list-view/drop-indicator.js

@@ -159,10 +159,8 @@ export default function ListViewDropIndicator( {
 			return undefined;
 		}
 
-		const ownerDocument = targetElement.ownerDocument;
-
 		return {
-			ownerDocument,
+			contextElement: targetElement,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
 				const indent = getDropIndicatorIndent( rect );
@@ -189,9 +187,10 @@ export default function ListViewDropIndicator( {
 					'horizontal'
 				);
 
+				const doc = targetElement.ownerDocument;
 				const windowScroll =
-					scrollContainer === ownerDocument.body ||
-					scrollContainer === ownerDocument.documentElement;
+					scrollContainer === doc.body ||
+					scrollContainer === doc.documentElement;
 
 				// If the scroll container is not the window, offset the left position, if need be.
 				if ( scrollContainer && ! windowScroll ) {

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

@@ -159,19 +159,6 @@ function ListViewComponent(
 		isMounted.current = true;
 	}, [] );
 
-	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	const [ fixedListWindow ] = useFixedWindowList(
-		elementRef,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
-		}
-	);
-
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
@@ -242,6 +229,25 @@ function ListViewComponent(
 		]
 	);
 
+	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		BLOCK_LIST_ITEM_HEIGHT,
+		visibleBlockCount,
+		{
+			// Ensure that the windowing logic is recalculated when the expanded state changes.
+			// This is necessary because expanding a collapsed block in a short list view can
+			// switch the list view to a tall list view with a scrollbar, and vice versa.
+			// When this happens, the windowing logic needs to be recalculated to ensure that
+			// the correct number of blocks are rendered, by rechecking for a scroll container.
+			expandedState,
+			useWindowing: true,
+			windowOverscan: 40,
+		}
+	);
+
 	// If there are no blocks to show and we're not showing the appender, do not render the list view.
 	if ( ! clientIdsTree.length && ! showAppender ) {
 		return null;