Use new block styles control

WordPress · Feb 21, 2024 · ea76a86 · ea76a86
1 parent ff5c1db
commit ea76a86
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 55 deletions.
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -1,22 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-	Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockStylesControl from './block-styles-control';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -30,10 +22,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		activeStyle,
 		genericPreviewBlock,
 		className: previewClassName,
-	} = useStylesForBlocks( {
-		clientId,
-		onSwitch,
-	} );
+	} = useStylesForBlocks( { clientId, onSwitch } );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
@@ -43,58 +32,31 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
 
-	const onSelectStylePreview = ( style ) => {
-		onSelect( style );
+	const handleOnChange = ( style ) => {
+		onSelect( { name: style } );
 		onHoverClassName( null );
 		setHoveredStyle( null );
 		debouncedSetHoveredStyle.cancel();
 	};
 
-	const styleItemHandler = ( item ) => {
-		if ( hoveredStyle === item ) {
+	const hoverStyleHandler = ( style ) => {
+		if ( hoveredStyle === style ) {
 			debouncedSetHoveredStyle.cancel();
 			return;
 		}
-		debouncedSetHoveredStyle( item );
-		onHoverClassName( item?.name ?? null );
+
+		debouncedSetHoveredStyle( style );
+		onHoverClassName( style?.name ?? null );
 	};
 
 	return (
 		<div className="block-editor-block-styles">
-			<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>
+			<BlockStylesControl
+				blockStyles={ stylesToRender }
+				value={ activeStyle }
+				onChange={ handleOnChange }
+				onHover={ hoverStyleHandler }
+			/>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
@@ -103,7 +65,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				>
 					<div
 						className="block-editor-block-styles__preview-panel"
-						onMouseLeave={ () => styleItemHandler( null ) }
+						onMouseLeave={ () => hoverStyleHandler( null ) }
 					>
 						<BlockStylesPreviewPanel
 							activeStyle={ activeStyle }

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,6 +13,10 @@
 	}
 }
 
+.block-editor-block-styles__popover {
+	z-index: z-index(".components-popover");
+}
+
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.