Use DropdownMenu instead of Dropdown.

Create seperate BlockTransformationsMenu component

packages/block-editor/src/components/block-switcher/block-switcher-block-transformations-menu.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+
+const BlockTransformationsMenu = ( {
+	possibleBlockTransformations,
+	onSelect,
+} ) => {
+	return (
+		<MenuGroup>
+			<div className="block-editor-block-switcher__label">
+				{ __( 'Transform to' ) }
+			</div>
+			{ possibleBlockTransformations.map( ( item ) => {
+				const { name, icon: { src: iconSrc } = {}, title } = item;
+				return (
+					<MenuItem
+						key={ name }
+						icon={ iconSrc }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onSelect( name );
+						} }
+					>
+						{ title }
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
+};
+
+export default BlockTransformationsMenu;

packages/block-editor/src/components/block-switcher/index.js

@@ -1,16 +1,17 @@
 /**
  * External dependencies
  */
-import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
+import { castArray, filter, mapKeys, orderBy, uniq, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
-	Dropdown,
+	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
+	__experimentalToolbarItem as ToolbarItem,
 	MenuGroup,
 } from '@wordpress/components';
 import {
@@ -21,7 +22,6 @@ import {
 	getBlockFromExample,
 } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
-import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { layout } from '@wordpress/icons';
@@ -32,8 +32,7 @@ import { layout } from '@wordpress/icons';
 import BlockIcon from '../block-icon';
 import BlockStyles from '../block-styles';
 import BlockPreview from '../block-preview';
-import BlockTypesList from '../block-types-list';
-import NavigableToolbar from '../navigable-toolbar';
+import BlockTransformationsMenu from './block-switcher-block-transformations-menu';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
@@ -62,11 +61,11 @@ export class BlockSwitcher extends Component {
 		} = this.props;
 		const { hoveredClassName } = this.state;
 
-		if ( ! blocks || ! blocks.length ) {
+		if ( ! Array.isArray( blocks ) || ! blocks.length ) {
 			return null;
 		}
 
-		const hoveredBlock = blocks[ 0 ];
+		const [ hoveredBlock ] = blocks;
 		const hoveredBlockType = getBlockType( hoveredBlock.name );
 
 		const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
@@ -86,14 +85,16 @@ export class BlockSwitcher extends Component {
 
 		let icon;
 		if ( isSelectionOfSameType ) {
-			const sourceBlockName = blocks[ 0 ].name;
+			const sourceBlockName = hoveredBlock.name;
 			const blockType = getBlockType( sourceBlockName );
 			icon = blockType.icon;
 		} else {
 			icon = layout;
 		}
 
-		if ( ! hasBlockStyles && ! possibleBlockTransformations.length ) {
+		const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
+
+		if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 			return (
 				<ToolbarGroup>
 					<ToolbarButton
@@ -106,152 +107,111 @@ export class BlockSwitcher extends Component {
 			);
 		}
 
-		return (
-			<Dropdown
-				popoverProps={ POPOVER_PROPS }
-				className="block-editor-block-switcher"
-				contentClassName="block-editor-block-switcher__popover"
-				renderToggle={ ( { onToggle, isOpen } ) => {
-					const openOnArrowDown = ( event ) => {
-						if ( ! isOpen && event.keyCode === DOWN ) {
-							event.preventDefault();
-							event.stopPropagation();
-							onToggle();
-						}
-					};
-					const label =
-						1 === blocks.length
-							? __( 'Change block type or style' )
-							: sprintf(
-									/* translators: %s: number of blocks. */
-									_n(
-										'Change type of %d block',
-										'Change type of %d blocks',
-										blocks.length
-									),
-									blocks.length
-							  );
+		// todo check if move/rename elsewhere
+		const PreviewBlock = (
+			<div className="block-editor-block-switcher__preview">
+				<div className="block-editor-block-switcher__preview-title">
+					{ __( 'Preview' ) }
+				</div>
+				<BlockPreview
+					viewportWidth={ 500 }
+					blocks={
+						hoveredBlockType.example
+							? getBlockFromExample( hoveredBlock.name, {
+									attributes: {
+										...hoveredBlockType.example.attributes,
+										className: hoveredClassName,
+									},
+									innerBlocks:
+										hoveredBlockType.example.innerBlocks,
+							  } )
+							: cloneBlock( hoveredBlock, {
+									className: hoveredClassName,
+							  } )
+					}
+				/>
+			</div>
+		);
+
+		const blockSwitcherLabel =
+			1 === blocks.length
+				? __( 'Change block type or style' )
+				: sprintf(
+						/* translators: %s: number of blocks. */
+						_n(
+							'Change type of %d block',
+							'Change type of %d blocks',
+							blocks.length
+						),
+						blocks.length
+				  );
 
-					return (
-						<ToolbarGroup>
-							<ToolbarButton
-								className="block-editor-block-switcher__toggle"
-								onClick={ onToggle }
-								aria-haspopup="true"
-								aria-expanded={ isOpen }
-								title={ label }
-								onKeyDown={ openOnArrowDown }
-								showTooltip
-								icon={ <BlockIcon icon={ icon } showColors /> }
-							/>
-						</ToolbarGroup>
-					);
-				} }
-				renderContent={ ( { onClose } ) => (
-					<>
-						{ ( hasBlockStyles ||
-							possibleBlockTransformations.length !== 0 ) && (
-							<div className="block-editor-block-switcher__container">
-								{ possibleBlockTransformations.length !== 0 && (
-									<NavigableToolbar
-										orientation="vertical"
-										className="block-editor-block-switcher-toolbar"
-										role="menu"
-										/* translators: accessibility text for the block toolbar */
-										aria-label={ __( 'Block switcher' ) }
-									>
-										<MenuGroup>
-											<div className="block-editor-block-switcher__label">
-												{ __( 'Transform to' ) }
-											</div>
-											<BlockTypesList
-												items={ possibleBlockTransformations.map(
-													( {
-														name,
-														icon: destinationBlockTypeIcon,
-														title,
-													} ) => ( {
-														id: name,
-														icon: destinationBlockTypeIcon,
-														title,
-														role: 'menuitem', // this is to prevent scroll containers from scrolling (NavigableContainer internal check).
-													} )
-												) }
-												onSelect={ ( item ) => {
-													onTransform(
-														blocks,
-														item.id
-													);
-													onClose();
-												} }
-											/>
-										</MenuGroup>
-									</NavigableToolbar>
-								) }
-								{ hasBlockStyles && (
-									<NavigableToolbar
-										orientation="vertical"
-										className="block-editor-block-switcher-toolbar"
-										/* translators: accessibility text for the block toolbar */
-										aria-label={ __(
-											'Block Styles switcher'
-										) }
-									>
-										<MenuGroup>
-											<div className="block-editor-block-switcher__label">
-												{ __( 'Styles' ) }
-											</div>
-											<BlockStyles
-												clientId={
-													blocks[ 0 ].clientId
-												}
-												onSwitch={ onClose }
-												onHoverClassName={
-													this.onHoverClassName
-												}
-											/>
-											{ hoveredClassName !== null && (
-												<div className="block-editor-block-switcher__preview">
-													<div className="block-editor-block-switcher__preview-title">
-														{ __( 'Preview' ) }
+		return (
+			<ToolbarGroup>
+				<ToolbarItem>
+					{ ( toggleProps ) => (
+						<DropdownMenu
+							popoverProps={ POPOVER_PROPS }
+							className="block-editor-block-switcher"
+							// contentClassName="block-editor-block-switcher__popover"
+							label={ blockSwitcherLabel }
+							icon={
+								<BlockIcon
+									icon={ icon }
+									className="block-editor-block-switcher__toggle"
+									showColors
+								/>
+							}
+							toggleProps={ toggleProps }
+							menuProps={ { orientation: 'both' } }
+						>
+							{ ( { onClose } ) => (
+								<>
+									{ ( hasBlockStyles ||
+										hasPossibleBlockTransformations ) && (
+										<div className="block-editor-block-switcher__container">
+											{ hasPossibleBlockTransformations && (
+												<BlockTransformationsMenu
+													possibleBlockTransformations={
+														possibleBlockTransformations
+													}
+													onSelect={ ( name ) => {
+														onTransform(
+															blocks,
+															name
+														);
+														onClose();
+													} }
+												/>
+											) }
+											{ hasBlockStyles && (
+												<MenuGroup>
+													<div className="block-editor-block-switcher__label">
+														{ __( 'Styles' ) }
 													</div>
-													<BlockPreview
-														viewportWidth={ 500 }
-														blocks={
-															hoveredBlockType.example
-																? getBlockFromExample(
-																		hoveredBlock.name,
-																		{
-																			attributes: {
-																				...hoveredBlockType
-																					.example
-																					.attributes,
-																				className: hoveredClassName,
-																			},
-																			innerBlocks:
-																				hoveredBlockType
-																					.example
-																					.innerBlocks,
-																		}
-																  )
-																: cloneBlock(
-																		hoveredBlock,
-																		{
-																			className: hoveredClassName,
-																		}
-																  )
+													<BlockStyles
+														clientId={
+															hoveredBlock.clientId
+														}
+														onSwitch={ onClose }
+														onHoverClassName={
+															this
+																.onHoverClassName
 														}
+														role="menuitem"
 													/>
-												</div>
+													{ hoveredClassName !==
+														null && PreviewBlock }
+												</MenuGroup>
 											) }
-										</MenuGroup>
-									</NavigableToolbar>
-								) }
-							</div>
-						) }
-					</>
-				) }
-			/>
+										</div>
+									) }
+								</>
+							) }
+						</DropdownMenu>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
 		);
 	}
 }
@@ -265,7 +225,7 @@ export default compose(
 		} = select( 'core/block-editor' );
 		const { getBlockStyles } = select( 'core/blocks' );
 		const rootClientId = getBlockRootClientId(
-			first( castArray( clientIds ) )
+			castArray( clientIds )[ 0 ]
 		);
 		const blocks = getBlocksByClientId( clientIds );
 		const firstBlock = blocks && blocks.length === 1 ? blocks[ 0 ] : null;