Partial revert of Use Dropdown for Block Styles control

This partially reverts commit d3fa9c2.

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

@@ -1,14 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import { Popover } from '@wordpress/components';
+import {
+	Button,
+	__experimentalTruncate as Truncate,
+	Popover,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockStylesDropdown from './block-styles-dropdown';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -53,12 +61,40 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	return (
 		<div className="block-editor-block-styles">
-			<BlockStylesDropdown
-				handlePreview={ styleItemHandler }
-				onSelect={ onSelectStylePreview }
-				styles={ stylesToRender }
-				value={ activeStyle }
-			/>
+			<div className="block-editor-block-styles__variants">
+				{ stylesToRender.map( ( style ) => {
+					const buttonText = style.label || style.name;
+
+					return (
+						<Button
+							__next40pxDefaultSize
+							className={ classnames(
+								'block-editor-block-styles__item',
+								{
+									'is-active':
+										activeStyle.name === style.name,
+								}
+							) }
+							key={ style.name }
+							variant="secondary"
+							label={ buttonText }
+							onMouseEnter={ () => styleItemHandler( style ) }
+							onFocus={ () => styleItemHandler( style ) }
+							onMouseLeave={ () => styleItemHandler( null ) }
+							onBlur={ () => styleItemHandler( null ) }
+							onClick={ () => onSelectStylePreview( style ) }
+							aria-current={ activeStyle.name === style.name }
+						>
+							<Truncate
+								numberOfLines={ 1 }
+								className="block-editor-block-styles__item-text"
+							>
+								{ buttonText }
+							</Truncate>
+						</Button>
+					);
+				} ) }
+			</div>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"

packages/block-editor/src/components/block-styles/style.scss

@@ -13,14 +13,6 @@
 	}
 }
 
-.block-editor-block-styles__dropdown {
-	width: 100%;
-}
-.block-editor-block-styles__dropdown-toggle {
-	box-shadow: inset 0 0 0 $border-width $gray-300;
-	width: 100%;
-}
-
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.