diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 0960dc87eaa499..663b7297d96a54 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -29,15 +29,20 @@ import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
+function DropDownPanel( {
+	clientIds,
+	blocks,
+	onClose,
+	blockVariationTransformations,
+	hasPossibleBlockTransformations,
+	hasPossibleBlockVariationTransformations,
+} ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
 		canRemove,
 		hasBlockStyles,
-		icon,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -47,7 +52,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				__experimentalGetPatternTransformItems,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
-			const { getBlockStyles, getBlockType } = select( blocksStore );
+			const { getBlockStyles } = select( blocksStore );
 			const rootClientId = getBlockRootClientId(
 				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
@@ -55,18 +60,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			const _isSingleBlockSelected = blocks.length === 1;
 			const styles =
 				_isSingleBlockSelected && getBlockStyles( firstBlockName );
-			let _icon;
-			if ( _isSingleBlockSelected ) {
-				_icon = blockInformation?.icon; // Take into account active block variations.
-			} else {
-				const isSelectionOfSameType =
-					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
-				// When selection consists of blocks of multiple types, display an
-				// appropriate icon to communicate the non-uniformity.
-				_icon = isSelectionOfSameType
-					? getBlockType( firstBlockName )?.icon
-					: copy;
-			}
 			return {
 				possibleBlockTransformations: getBlockTransformItems(
 					blocks,
@@ -74,30 +67,15 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
-				icon: _icon,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
 				),
 			};
 		},
-		[ clientIds, blocks, blockInformation?.icon ]
+		[ clientIds, blocks ]
 	);
 
-	const blockVariationTransformations = useBlockVariationTransforms( {
-		clientIds,
-		blocks,
-	} );
-
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
-		maximumLength: 35,
-	} );
-
-	const isSingleBlock = blocks.length === 1;
-	const isReusable = isSingleBlock && isReusableBlock( blocks[ 0 ] );
-	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
-
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
 			multiSelect(
@@ -128,6 +106,119 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		selectForMultipleBlocks( transformedBlocks );
 	}
 
+	const hasPatternTransformation = !! patterns?.length && canRemove;
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
+	const showDropDown =
+		hasBlockStyles ||
+		hasBlockOrBlockVariationTransforms ||
+		hasPatternTransformation;
+
+	if ( ! showDropDown ) {
+		return null;
+	}
+
+	return (
+		<div className="block-editor-block-switcher__container">
+			{ hasPatternTransformation && (
+				<PatternTransformationsMenu
+					blocks={ blocks }
+					patterns={ patterns }
+					onSelect={ ( transformedBlocks ) => {
+						onPatternTransform( transformedBlocks );
+						onClose();
+					} }
+				/>
+			) }
+			{ hasBlockOrBlockVariationTransforms && (
+				<BlockTransformationsMenu
+					className="block-editor-block-switcher__transforms__menugroup"
+					possibleBlockTransformations={
+						possibleBlockTransformations
+					}
+					possibleBlockVariationTransformations={
+						blockVariationTransformations
+					}
+					blocks={ blocks }
+					onSelect={ ( name ) => {
+						onBlockTransform( name );
+						onClose();
+					} }
+					onSelectVariation={ ( name ) => {
+						onBlockVariationTransform( name );
+						onClose();
+					} }
+				/>
+			) }
+			{ hasBlockStyles && (
+				<BlockStylesMenu
+					hoveredBlock={ blocks[ 0 ] }
+					onSwitch={ onClose }
+				/>
+			) }
+		</div>
+	);
+}
+
+export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
+	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
+	const { possibleBlockTransformations, canRemove, hasBlockStyles, icon } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					getBlockTransformItems,
+					canRemoveBlocks,
+				} = select( blockEditorStore );
+				const { getBlockStyles, getBlockType } = select( blocksStore );
+				const rootClientId = getBlockRootClientId(
+					Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+				);
+				const [ { name: firstBlockName } ] = blocks;
+				const _isSingleBlockSelected = blocks.length === 1;
+				const styles =
+					_isSingleBlockSelected && getBlockStyles( firstBlockName );
+				let _icon;
+				if ( _isSingleBlockSelected ) {
+					_icon = blockInformation?.icon; // Take into account active block variations.
+				} else {
+					const isSelectionOfSameType =
+						new Set( blocks.map( ( { name } ) => name ) ).size ===
+						1;
+					// When selection consists of blocks of multiple types, display an
+					// appropriate icon to communicate the non-uniformity.
+					_icon = isSelectionOfSameType
+						? getBlockType( firstBlockName )?.icon
+						: copy;
+				}
+				return {
+					possibleBlockTransformations: getBlockTransformItems(
+						blocks,
+						rootClientId
+					),
+					canRemove: canRemoveBlocks( clientIds, rootClientId ),
+					hasBlockStyles: !! styles?.length,
+					icon: _icon,
+				};
+			},
+			[ clientIds, blocks, blockInformation?.icon ]
+		);
+
+	const blockVariationTransformations = useBlockVariationTransforms( {
+		clientIds,
+		blocks,
+	} );
+
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
+
+	const isSingleBlock = blocks.length === 1;
+	const isReusable = isSingleBlock && isReusableBlock( blocks[ 0 ] );
+	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
+
 	/**
 	 * The `isTemplate` check is a stopgap solution here.
 	 * Ideally, the Transforms API should handle this
@@ -137,7 +228,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
 	const hasPossibleBlockVariationTransformations =
 		!! blockVariationTransformations?.length;
-	const hasPatternTransformation = !! patterns?.length && canRemove;
+
 	if (
 		! hasBlockStyles &&
 		! hasPossibleBlockTransformations &&
@@ -180,13 +271,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				blocks.length
 		  );
 
-	const hasBlockOrBlockVariationTransforms =
-		hasPossibleBlockTransformations ||
-		hasPossibleBlockVariationTransformations;
-	const showDropDown =
-		hasBlockStyles ||
-		hasBlockOrBlockVariationTransforms ||
-		hasPatternTransformation;
 	return (
 		<ToolbarGroup>
 			<ToolbarItem>
@@ -218,54 +302,22 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						} }
 						menuProps={ { orientation: 'both' } }
 					>
-						{ ( { onClose } ) =>
-							showDropDown && (
-								<div className="block-editor-block-switcher__container">
-									{ hasPatternTransformation && (
-										<PatternTransformationsMenu
-											blocks={ blocks }
-											patterns={ patterns }
-											onSelect={ (
-												transformedBlocks
-											) => {
-												onPatternTransform(
-													transformedBlocks
-												);
-												onClose();
-											} }
-										/>
-									) }
-									{ hasBlockOrBlockVariationTransforms && (
-										<BlockTransformationsMenu
-											className="block-editor-block-switcher__transforms__menugroup"
-											possibleBlockTransformations={
-												possibleBlockTransformations
-											}
-											possibleBlockVariationTransformations={
-												blockVariationTransformations
-											}
-											blocks={ blocks }
-											onSelect={ ( name ) => {
-												onBlockTransform( name );
-												onClose();
-											} }
-											onSelectVariation={ ( name ) => {
-												onBlockVariationTransform(
-													name
-												);
-												onClose();
-											} }
-										/>
-									) }
-									{ hasBlockStyles && (
-										<BlockStylesMenu
-											hoveredBlock={ blocks[ 0 ] }
-											onSwitch={ onClose }
-										/>
-									) }
-								</div>
-							)
-						}
+						{ ( { onClose } ) => (
+							<DropDownPanel
+								clientIds={ clientIds }
+								blocks={ blocks }
+								onClose={ onClose }
+								blockVariationTransformations={
+									blockVariationTransformations
+								}
+								hasPossibleBlockTransformations={
+									hasPossibleBlockTransformations
+								}
+								hasPossibleBlockVariationTransformations={
+									hasPossibleBlockVariationTransformations
+								}
+							/>
+						) }
 					</DropdownMenu>
 				) }
 			</ToolbarItem>