@wordpress/block-editor 15.13.2-next.v.202602241322.0 → 15.14.0

package/build-style/content-rtl.css

@@ -432,6 +432,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   font-family: Menlo, Consolas, monaco, monospace;
   font-size: 15px;
   line-height: 1.5;
+  direction: ltr;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
@@ -735,21 +736,25 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-  flex-direction: row;
-  box-shadow: none;
-  height: 24px;
-  width: 24px;
-  min-width: 24px;
-  display: none;
-  padding: 0 !important;
   background: #1e1e1e;
   color: #fff;
+  padding: 0;
+  min-width: 24px;
+  height: 24px;
 }
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
+  flex-direction: row;
+  box-shadow: none;
+  width: 24px;
+  display: none;
+  padding: 0 !important;
+}
 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
   display: none;
 }

package/build-style/content.css

@@ -432,6 +432,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   font-family: Menlo, Consolas, monaco, monospace;
   font-size: 15px;
   line-height: 1.5;
+  /*rtl:ignore*/
+  direction: ltr;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
@@ -735,21 +737,25 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-  flex-direction: row;
-  box-shadow: none;
-  height: 24px;
-  width: 24px;
-  min-width: 24px;
-  display: none;
-  padding: 0 !important;
   background: #1e1e1e;
   color: #fff;
+  padding: 0;
+  min-width: 24px;
+  height: 24px;
 }
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
+  flex-direction: row;
+  box-shadow: none;
+  width: 24px;
+  display: none;
+  padding: 0 !important;
+}
 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
   display: none;
 }

package/build-style/style-rtl.css

@@ -1198,11 +1198,6 @@ iframe[name=editor-canvas] {
   text-align-last: center;
 }
 
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-  box-sizing: border-box !important;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -1238,14 +1233,6 @@ iframe[name=editor-canvas] {
   overflow: unset;
 }
 
-.block-editor-block-switcher__preview-title {
-  margin-bottom: 12px;
-  color: #757575;
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 499;
-}
-
 .block-editor-block-switcher__preview-patterns-container {
   padding-bottom: 16px;
 }

package/build-style/style.css

@@ -1198,11 +1198,6 @@ iframe[name=editor-canvas] {
   text-align-last: center;
 }
 
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-  box-sizing: border-box !important;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -1238,14 +1233,6 @@ iframe[name=editor-canvas] {
   overflow: unset;
 }
 
-.block-editor-block-switcher__preview-title {
-  margin-bottom: 12px;
-  color: #757575;
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 499;
-}
-
 .block-editor-block-switcher__preview-patterns-container {
   padding-bottom: 16px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.13.2-next.v.202602241322.0+bce7cff88",
+	"version": "15.14.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/api-fetch": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/blob": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/block-serialization-default-parser": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/blocks": "^15.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/commands": "^1.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/components": "^32.3.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/compose": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/data": "^10.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/dataviews": "^12.1.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/date": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/dom": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/element": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/escape-html": "^3.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/global-styles-engine": "^1.7.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/hooks": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/html-entities": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/i18n": "^6.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/icons": "^11.7.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/image-cropper": "^1.4.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/interactivity": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/is-shallow-equal": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/keyboard-shortcuts": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/notices": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/preferences": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/priority-queue": "^3.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/rich-text": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/style-engine": "^2.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/token-list": "^3.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/upload-media": "^0.25.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/url": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/warning": "^3.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/wordcount": "^4.40.1-next.v.202602241322.0+bce7cff88",
+		"@wordpress/a11y": "^4.41.0",
+		"@wordpress/api-fetch": "^7.41.0",
+		"@wordpress/base-styles": "^6.17.0",
+		"@wordpress/blob": "^4.41.0",
+		"@wordpress/block-serialization-default-parser": "^5.41.0",
+		"@wordpress/blocks": "^15.14.0",
+		"@wordpress/commands": "^1.41.0",
+		"@wordpress/components": "^32.3.0",
+		"@wordpress/compose": "^7.41.0",
+		"@wordpress/data": "^10.41.0",
+		"@wordpress/dataviews": "^13.0.0",
+		"@wordpress/date": "^5.41.0",
+		"@wordpress/deprecated": "^4.41.0",
+		"@wordpress/dom": "^4.41.0",
+		"@wordpress/element": "^6.41.0",
+		"@wordpress/escape-html": "^3.41.0",
+		"@wordpress/global-styles-engine": "^1.8.0",
+		"@wordpress/hooks": "^4.41.0",
+		"@wordpress/html-entities": "^4.41.0",
+		"@wordpress/i18n": "^6.14.0",
+		"@wordpress/icons": "^11.8.0",
+		"@wordpress/image-cropper": "^1.5.0",
+		"@wordpress/interactivity": "^6.41.0",
+		"@wordpress/is-shallow-equal": "^5.41.0",
+		"@wordpress/keyboard-shortcuts": "^5.41.0",
+		"@wordpress/keycodes": "^4.41.0",
+		"@wordpress/notices": "^5.41.0",
+		"@wordpress/preferences": "^4.41.0",
+		"@wordpress/priority-queue": "^3.41.0",
+		"@wordpress/private-apis": "^1.41.0",
+		"@wordpress/rich-text": "^7.41.0",
+		"@wordpress/style-engine": "^2.41.0",
+		"@wordpress/token-list": "^3.41.0",
+		"@wordpress/upload-media": "^0.26.0",
+		"@wordpress/url": "^4.41.0",
+		"@wordpress/warning": "^3.41.0",
+		"@wordpress/wordcount": "^4.41.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "943dde7f0b600ce238726c36284bc9f70ce0ffa4"
+	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
 }

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

@@ -390,6 +390,10 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	line-height: 1.5;
+	// HTML input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
+
 	@media not ( prefers-reduced-motion ) {
 		transition: padding 0.2s linear;
 	}

package/src/components/block-quick-navigation/index.js

@@ -19,6 +19,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export default function BlockQuickNavigation( {
 	clientIds,
@@ -78,7 +79,11 @@ function BlockQuickNavigationItem( {
 		);
 
 	const blockType = getBlockType( blockName );
-	const blockTitle = blockType?.title || blockName;
+	const displayTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const blockTitle = displayTitle || blockType?.title || blockName;
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const hasChildren = childBlocks && childBlocks.length > 0;

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

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { moreVertical } from '@wordpress/icons';
+import { chevronDown, chevronUp, moreVertical } from '@wordpress/icons';
 import { Children, cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -74,6 +74,7 @@ export function BlockSettingsDropdown( {
 	clientIds,
 	children,
 	__experimentalSelectBlock,
+	isContentOnlyListView,
 	...props
 } ) {
 	// Get the client id of the current block for this menu, if one is set.
@@ -88,6 +89,9 @@ export function BlockSettingsDropdown( {
 		isContentOnly,
 		isZoomOut,
 		canEdit,
+		canMove,
+		isFirst,
+		isLast,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -99,6 +103,9 @@ export function BlockSettingsDropdown( {
 				getBlockEditingMode,
 				isZoomOut: _isZoomOut,
 				canEditBlock,
+				canMoveBlocks,
+				getBlockIndex,
+				getBlockCount,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -124,14 +131,21 @@ export function BlockSettingsDropdown( {
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 				isZoomOut: _isZoomOut(),
 				canEdit: canEditBlock( firstBlockClientId ),
+				canMove: canMoveBlocks( clientIds ),
+				isFirst: getBlockIndex( firstBlockClientId ) === 0,
+				isLast:
+					getBlockIndex( firstBlockClientId ) ===
+					getBlockCount( _firstParentClientId ) - 1,
 			};
 		},
-		[ firstBlockClientId ]
+		[ firstBlockClientId, clientIds ]
 	);
 
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
+	const { moveBlocksDown, moveBlocksUp } = useDispatch( blockEditorStore );
+
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		return {
@@ -243,6 +257,36 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
+									{ canMove && isContentOnlyListView && (
+										<>
+											<MenuItem
+												icon={ chevronUp }
+												disabled={ isFirst }
+												accessibleWhenDisabled
+												onClick={ pipe( onClose, () => {
+													moveBlocksUp(
+														clientIds,
+														firstParentClientId
+													);
+												} ) }
+											>
+												{ __( 'Move up' ) }
+											</MenuItem>
+											<MenuItem
+												icon={ chevronDown }
+												disabled={ isLast }
+												accessibleWhenDisabled
+												onClick={ pipe( onClose, () => {
+													moveBlocksDown(
+														clientIds,
+														firstParentClientId
+													);
+												} ) }
+											>
+												{ __( 'Move down' ) }
+											</MenuItem>
+										</>
+									) }
 									{ canEdit && count === 1 && (
 										<BlockHTMLConvertButton
 											clientId={ firstBlockClientId }

package/src/components/block-settings-menu-controls/index.js

@@ -79,6 +79,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		<Slot
 			fillProps={ {
 				...fillProps,
+				canEdit,
 				selectedBlocks,
 				selectedClientIds,
 			} }

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

@@ -6,12 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { debounce, useViewportMatch } from '@wordpress/compose';
+import { useState, useMemo } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,
-	Popover,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -20,10 +19,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockStylesPreviewPanel from './preview-panel';
+import PreviewBlockPopover from '../block-switcher/preview-block-popover';
 import useStylesForBlocks from './use-styles-for-block';
 import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
-import { getDefaultStyle } from './utils';
+import { getDefaultStyle, replaceActiveStyle } from './utils';
 
 const noop = () => {};
 
@@ -34,15 +33,35 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		stylesToRender,
 		activeStyle,
 		genericPreviewBlock,
-		className: previewClassName,
+		className,
 	} = useStylesForBlocks( {
 		clientId,
 		onSwitch,
 	} );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const previewBlocks = useMemo( () => {
+		if ( ! hoveredStyle || ! genericPreviewBlock ) {
+			return null;
+		}
+		const previewClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			hoveredStyle
+		);
+		return [
+			{
+				...genericPreviewBlock,
+				attributes: {
+					...( genericPreviewBlock.attributes || {} ),
+					className: previewClassName,
+				},
+			},
+		];
+	}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );
+
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
@@ -90,7 +109,10 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				isShownByDefault
 				panelId={ clientId }
 			>
-				<div className="block-editor-block-styles">
+				<div
+					ref={ setBlockStylesAnchor }
+					className="block-editor-block-styles"
+				>
 					<div className="block-editor-block-styles__variants">
 						{ stylesToRender.map( ( style ) => {
 							const buttonText = style.label || style.name;
@@ -133,24 +155,13 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 							);
 						} ) }
 					</div>
-					{ hoveredStyle && ! isMobileViewport && (
-						<Popover
+					{ previewBlocks && (
+						<PreviewBlockPopover
+							blocks={ previewBlocks }
 							placement="left-start"
 							offset={ 34 }
-							focusOnMount={ false }
-						>
-							<div
-								className="block-editor-block-styles__preview-panel"
-								onMouseLeave={ () => styleItemHandler( null ) }
-							>
-								<BlockStylesPreviewPanel
-									activeStyle={ activeStyle }
-									className={ previewClassName }
-									genericPreviewBlock={ genericPreviewBlock }
-									style={ hoveredStyle }
-								/>
-							</div>
-						</Popover>
+							anchor={ blockStylesAnchor }
+						/>
 					) }
 				</div>
 			</ToolsPanelItem>

package/src/components/block-styles/menu-items.js

@@ -4,19 +4,14 @@
 import { MenuItem, __experimentalText as Text } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import useStylesForBlocks from './use-styles-for-block';
-
 const noop = () => {};
 
-export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
-	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
-		clientId,
-		onSwitch,
-	} );
-
+export default function BlockStylesMenuItems( {
+	stylesToRender,
+	activeStyle,
+	onSelect = noop,
+	onHoverStyle = noop,
+} ) {
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
@@ -29,6 +24,10 @@ export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
 						key={ style.name }
 						icon={ activeStyle.name === style.name ? check : null }
 						onClick={ () => onSelect( style ) }
+						onFocus={ () => onHoverStyle( style ) }
+						onBlur={ () => onHoverStyle( null ) }
+						onMouseEnter={ () => onHoverStyle( style ) }
+						onMouseLeave={ () => onHoverStyle( null ) }
 					>
 						<Text
 							as="span"

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

@@ -67,10 +67,3 @@
 	}
 }
 
-// To prevent overflow in the preview container,
-// ensure that block contents' margin and padding
-// do not add to the block container's width.
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-	box-sizing: border-box !important;
-}

package/src/components/block-switcher/block-styles-menu.js

@@ -3,21 +3,67 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockStylesMenuItems from '../block-styles/menu-items';
+import useStylesForBlocks from '../block-styles/use-styles-for-block';
+import { replaceActiveStyle } from '../block-styles/utils';
+import PreviewBlockPopover from './preview-block-popover';
 
 export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
 	const { clientId } = hoveredBlock;
+	const [ hoveredStyle, setHoveredStyle ] = useState( null );
+	const {
+		onSelect,
+		stylesToRender,
+		activeStyle,
+		genericPreviewBlock,
+		className,
+	} = useStylesForBlocks( {
+		clientId,
+		onSwitch,
+	} );
+	const previewBlocks = useMemo( () => {
+		if ( ! hoveredStyle || ! genericPreviewBlock ) {
+			return null;
+		}
+		const previewClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			hoveredStyle
+		);
+		return [
+			{
+				...genericPreviewBlock,
+				attributes: {
+					...( genericPreviewBlock.attributes || {} ),
+					className: previewClassName,
+				},
+			},
+		];
+	}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
 
 	return (
 		<MenuGroup
 			label={ __( 'Styles' ) }
 			className="block-editor-block-switcher__styles__menugroup"
 		>
-			<BlockStylesMenuItems clientId={ clientId } onSwitch={ onSwitch } />
+			{ previewBlocks && (
+				<PreviewBlockPopover blocks={ previewBlocks } />
+			) }
+			<BlockStylesMenuItems
+				stylesToRender={ stylesToRender }
+				activeStyle={ activeStyle }
+				onSelect={ onSelect }
+				onHoverStyle={ setHoveredStyle }
+			/>
 		</MenuGroup>
 	);
 }

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

@@ -176,6 +176,8 @@ function BlockTransformationItem( {
 			disabled={ isDisabled }
 			onMouseLeave={ () => setHoveredTransformItemName( null ) }
 			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+			onFocus={ () => setHoveredTransformItemName( name ) }
+			onBlur={ () => setHoveredTransformItemName( null ) }
 		>
 			<BlockIcon icon={ icon } showColors />
 			{ title }

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

@@ -100,6 +100,8 @@ function BlockVariationTransformationItem( {
 			} }
 			onMouseLeave={ () => setHoveredTransformItemName( null ) }
 			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+			onFocus={ () => setHoveredTransformItemName( name ) }
+			onBlur={ () => setHoveredTransformItemName( null ) }
 		>
 			<BlockIcon icon={ icon } showColors />
 			{ title }

package/src/components/block-switcher/preview-block-popover.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -10,7 +9,12 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import BlockPreview from '../block-preview';
 
-export default function PreviewBlockPopover( { blocks } ) {
+export default function PreviewBlockPopover( {
+	blocks,
+	placement = 'right-start',
+	offset = 16,
+	anchor,
+} ) {
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	if ( isMobile ) {
@@ -21,14 +25,12 @@ export default function PreviewBlockPopover( { blocks } ) {
 		<div className="block-editor-block-switcher__popover-preview-container">
 			<Popover
 				className="block-editor-block-switcher__popover-preview"
-				placement="right-start"
+				placement={ placement }
 				focusOnMount={ false }
-				offset={ 16 }
+				offset={ offset }
+				anchor={ anchor }
 			>
 				<div className="block-editor-block-switcher__preview">
-					<div className="block-editor-block-switcher__preview-title">
-						{ __( 'Preview' ) }
-					</div>
 					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
 						We set the viewport width to 601px to make sure that the media-text 
 						block which uses this breakpoint has the correct padding. */ }