@wordpress/block-editor 13.0.1 → 13.0.2

package/build-style/style-rtl.css

@@ -122,19 +122,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
   box-sizing: border-box;
   width: 100%;
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -2895,8 +2887,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3419,10 +3410,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-left: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,

package/build-style/style.css

@@ -122,19 +122,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
-  min-width: 260px;
-  padding: 16px;
-}
-
-.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
-  fill: var(--wp-block-synced-color);
-}
-
-.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
-  height: 32px;
-}
-
 iframe[name=editor-canvas] {
   box-sizing: border-box;
   width: 100%;
@@ -1196,6 +1183,11 @@ iframe[name=editor-canvas] {
   margin: 0;
 }
 
+.block-editor-block-switcher__binding-indicator {
+  display: block;
+  padding: 8px;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -2896,8 +2888,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3420,10 +3411,10 @@ iframe[name=editor-canvas] {
   border: 0;
   border-right: 1px solid #ddd;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors, .block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.1",
+	"version": "13.0.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -39,11 +39,11 @@
 		"@wordpress/a11y": "^4.0.1",
 		"@wordpress/api-fetch": "^7.0.1",
 		"@wordpress/blob": "^4.0.1",
-		"@wordpress/blocks": "^13.0.1",
-		"@wordpress/commands": "^1.0.1",
-		"@wordpress/components": "^28.0.1",
+		"@wordpress/blocks": "^13.0.2",
+		"@wordpress/commands": "^1.0.2",
+		"@wordpress/components": "^28.0.2",
 		"@wordpress/compose": "^7.0.1",
-		"@wordpress/data": "^10.0.1",
+		"@wordpress/data": "^10.0.2",
 		"@wordpress/date": "^5.0.1",
 		"@wordpress/deprecated": "^4.0.1",
 		"@wordpress/dom": "^4.0.1",
@@ -54,13 +54,13 @@
 		"@wordpress/i18n": "^5.0.1",
 		"@wordpress/icons": "^10.0.1",
 		"@wordpress/is-shallow-equal": "^5.0.1",
-		"@wordpress/keyboard-shortcuts": "^5.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.0.2",
 		"@wordpress/keycodes": "^4.0.1",
-		"@wordpress/notices": "^5.0.1",
-		"@wordpress/preferences": "^4.0.1",
-		"@wordpress/private-apis": "^1.0.1",
-		"@wordpress/rich-text": "^7.0.1",
-		"@wordpress/style-engine": "^2.0.1",
+		"@wordpress/notices": "^5.0.2",
+		"@wordpress/preferences": "^4.0.2",
+		"@wordpress/private-apis": "^1.0.2",
+		"@wordpress/rich-text": "^7.0.2",
+		"@wordpress/style-engine": "^2.0.2",
 		"@wordpress/token-list": "^3.0.1",
 		"@wordpress/url": "^4.0.1",
 		"@wordpress/warning": "^3.0.1",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
+	"gitHead": "a68c6b5ef53956cccf4961d53d79b6af7e00ae60"
 }

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

@@ -31,12 +31,10 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
-				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,11 +44,9 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds, rootClientId ),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock:
-					( canInsertDefaultBlock || !! directInsertBlock ) &&
-					rootBlockEditingMode === 'default',
+				canMove: canMoveBlocks( clientIds ),
+				canRemove: canRemoveBlocks( clientIds ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

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

@@ -53,7 +53,7 @@ const BlockDraggable = ( {
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: canMoveBlocks( clientIds, rootClientId ),
+				isDraggable: canMoveBlocks( clientIds ),
 				icon: variation?.icon || _getBlockType( blockName )?.icon,
 				visibleInserter: isBlockInsertionPointVisible(),
 				getBlockType: _getBlockType,

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

@@ -623,8 +623,8 @@ function BlockListBlockProvider( props ) {
 			}
 
 			const _isSelected = isBlockSelected( clientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId );
+			const canMove = canMoveBlock( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;

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

@@ -432,8 +432,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	const attributes = getBlockAttributes( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
-	const canRemove = canRemoveBlock( clientId, rootClientId );
-	const canMove = canMoveBlock( clientId, rootClientId );
+	const canRemove = canRemoveBlock( clientId );
+	const canMove = canMoveBlock( clientId );
 
 	// The fallback to `{}` is a temporary fix.
 	// This function should never be called when a block is not present in

package/src/components/block-list/use-in-between-inserter.js

@@ -40,7 +40,9 @@ export function useInBetweenInserter() {
 			}
 
 			function onMouseMove( event ) {
-				if ( openRef.current ) {
+				// openRef is the reference to the insertion point between blocks.
+				// If the reference is not set or the insertion point is already open, return.
+				if ( openRef === undefined || openRef.current ) {
 					return;
 				}
 

package/src/components/block-lock/use-block-lock.js

@@ -24,14 +24,12 @@ export default function useBlockLock( clientId ) {
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
-				getBlockRootClientId,
 				getTemplateLock,
 			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
 
 			const canEdit = canEditBlock( clientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId );
+			const canRemove = canRemoveBlock( clientId );
 
 			return {
 				canEdit,

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

@@ -46,7 +46,7 @@ function BlockMover( {
 			const blockOrder = getBlockOrder( _rootClientId );
 
 			return {
-				canMove: canMoveBlocks( clientIds, _rootClientId ),
+				canMove: canMoveBlocks( clientIds ),
 				rootClientId: _rootClientId,
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,

package/src/components/block-mover/index.native.js

@@ -166,7 +166,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			canMove: canMoveBlocks( clientIds, rootClientId ),
+			canMove: canMoveBlocks( clientIds ),
 			rootClientId,
 		};
 	} ),

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

@@ -256,7 +256,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertBlock && (
+								{ canInsertBlock && ! isContentOnly && (
 									<>
 										<MenuItem
 											onClick={ pipe(

package/src/components/block-switcher/block-variation-transformations.js

@@ -22,17 +22,12 @@ const EMPTY_OBJECT = {};
 export function useBlockVariationTransforms( { clientIds, blocks } ) {
 	const { activeBlockVariation, blockVariationTransformations } = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
+			const canRemove = canRemoveBlocks( clientIds );
 			// Only handle single selected blocks for now.
 			if ( blocks.length !== 1 || ! canRemove ) {
 				return EMPTY_OBJECT;

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

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	__experimentalText as Text,
+	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
+	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
@@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {
 			</p>
 		);
 	}
+
+	const connectedBlockDescription = isSingleBlock
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+
 	return (
 		<div className="block-editor-block-switcher__container">
 			{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
 		</div>
 	);
 }
 
-export const BlockSwitcher = ( { clientIds, disabled } ) => {
+export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -170,21 +191,14 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 		isTemplate,
 	} = useSelect(
 		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlocksByClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
+			const { getBlocksByClientId, getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
 			}
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
@@ -206,7 +220,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 			}
 
 			return {
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds ),
 				hasBlockStyles:
 					_isSingleBlockSelected &&
 					!! getBlockStyles( firstBlockName )?.length,
@@ -303,6 +317,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
+								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -203,3 +203,8 @@
 	padding: 6px $grid-unit;
 	margin: 0;
 }
+
+.block-editor-block-switcher__binding-indicator {
+	display: block;
+	padding: $grid-unit;
+}

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

@@ -35,9 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import Shuffle from './shuffle';
-import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
+
 /**
  * Renders the block toolbar.
  *
@@ -62,7 +61,6 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
-		blockName,
 		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
@@ -94,13 +92,14 @@ export function PrivateBlockToolbar( {
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
-		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
-			?.metadata?.bindings;
+		const _isUsingBindings = selectedBlockClientIds.every(
+			( clientId ) =>
+				!! getBlockAttributes( clientId )?.metadata?.bindings
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockName: _blockName,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
@@ -146,6 +145,7 @@ export function PrivateBlockToolbar( {
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
+		'is-connected': isUsingBindings,
 	} );
 
 	return (
@@ -167,9 +167,6 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
-				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator clientIds={ blockClientIds } />
-				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div
@@ -180,6 +177,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher
 									clientIds={ blockClientIds }
 									disabled={ ! isDefaultEditingMode }
+									isUsingBindings={ isUsingBindings }
 								/>
 								{ isDefaultEditingMode && (
 									<>

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

@@ -39,14 +39,17 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
-	}
-
-	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		&:disabled .block-editor-block-icon.has-colors {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-switcher .components-button .block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
+
+		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+			&:disabled .block-editor-block-icon.has-colors {
+				color: var(--wp-block-synced-color);
+			}
+		}
 	}
 
 	> :last-child,

package/src/components/block-tools/block-selection-button.js

@@ -107,8 +107,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId, rootClientId ),
-				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canMove: canMoveBlock( clientId ),
 			};
 		},
 		[ clientId, rootClientId ]

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

@@ -89,10 +89,7 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
+		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
 	];
 };
 

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

@@ -651,7 +651,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					( [ variationName, variation ] ) => {
 						variations[ variationName ] =
 							pickStyleKeys( variation );
-
+						if ( variation?.css ) {
+							variations[ variationName ].css = variation.css;
+						}
 						const variationSelector =
 							blockSelectors[ blockName ]
 								.styleVariationSelectors?.[ variationName ];
@@ -697,6 +699,14 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 											.featureSelectors
 									);
 
+								const variationBlockStyleNodes =
+									pickStyleKeys( variationBlockStyles );
+
+								if ( variationBlockStyles?.css ) {
+									variationBlockStyleNodes.css =
+										variationBlockStyles.css;
+								}
+
 								nodes.push( {
 									selector: variationBlockSelector,
 									duotoneSelector: variationDuotoneSelector,
@@ -707,9 +717,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
 											.hasLayoutSupport,
-									styles: pickStyleKeys(
-										variationBlockStyles
-									),
+									styles: variationBlockStyleNodes,
 								} );
 
 								// Process element styles for the inner blocks
@@ -995,6 +1003,12 @@ export const toStyles = (
 						';'
 					) };}`;
 				}
+				if ( styles?.css ) {
+					ruleset += processCSSNesting(
+						styles.css,
+						`:root :where(${ selector })`
+					);
+				}
 
 				if ( styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
@@ -1041,6 +1055,12 @@ export const toStyles = (
 										';'
 									) };}`;
 								}
+								if ( styleVariations?.css ) {
+									ruleset += processCSSNesting(
+										styleVariations.css,
+										`:root :where(${ styleVariationSelector })`
+									);
+								}
 							}
 						}
 					);

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

@@ -181,6 +181,12 @@ function ListViewBlock( {
 			return;
 		}
 
+		// Do not handle events if it comes from modals;
+		// retain the default behavior for these keys.
+		if ( event.target.closest( '[role=dialog]' ) ) {
+			return;
+		}
+
 		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
 
 		// If multiple blocks are selected, deselect all blocks when the user
@@ -196,12 +202,6 @@ function ListViewBlock( {
 			isDeleteKey ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
-			// Do not handle single-key block deletion shortcuts when events come from modals;
-			// retain the default behavior for these keys.
-			if ( isDeleteKey && event.target.closest( '[role=dialog]' ) ) {
-				return;
-			}
-
 			const {
 				blocksToUpdate: blocksToDelete,
 				firstBlockClientId,
@@ -210,7 +210,7 @@ function ListViewBlock( {
 			} = getBlocksToUpdate();
 
 			// Don't update the selection if the blocks cannot be deleted.
-			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
+			if ( ! canRemoveBlocks( blocksToDelete ) ) {
 				return;
 			}
 

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

@@ -194,10 +194,14 @@ function ListViewBranch( props ) {
 				// 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.
+				// The first and last blocks of the list are always rendered, to ensure
+				// that Home and End keys work as expected.
 				const showBlock =
 					isDragged ||
 					blockInView ||
-					( isSelected && clientId === selectedClientIds[ 0 ] );
+					( isSelected && clientId === selectedClientIds[ 0 ] ) ||
+					index === 0 ||
+					index === blockCount - 1;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

package/src/components/list-view/use-clipboard-handler.js

@@ -112,12 +112,7 @@ export default function useClipboardHandler( { selectBlock } ) {
 
 			if ( event.type === 'cut' ) {
 				// Don't update the selection if the blocks cannot be deleted.
-				if (
-					! canRemoveBlocks(
-						selectedBlockClientIds,
-						firstBlockRootClientId
-					)
-				) {
+				if ( ! canRemoveBlocks( selectedBlockClientIds ) ) {
 					return;
 				}