Add previews for style variation transforms

packages/block-editor/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,8 @@ export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
 						key={ style.name }
 						icon={ activeStyle.name === style.name ? check : null }
 						onClick={ () => onSelect( style ) }
+						onMouseEnter={ () => onHoverStyle( style ) }
+						onMouseLeave={ () => onHoverStyle( null ) }
 					>
 						<Text
 							as="span"

packages/block-editor/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>
 	);
 }