Block Variations Transforms: Display as icon buttons if each block variation has a unique icon

packages/block-editor/src/components/block-variation-transforms/index.js

@@ -2,75 +2,85 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { __experimentalGetMatchingVariation as getMatchingVariation } from '../../utils';
 import { store as blockEditorStore } from '../../store';
 
-function __experimentalBlockVariationTransforms( { blockClientId } ) {
-	const [ selectedValue, setSelectedValue ] = useState();
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { variations, blockAttributes } = useSelect(
-		( select ) => {
-			const { getBlockVariations } = select( blocksStore );
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const blockName = blockClientId && getBlockName( blockClientId );
-			return {
-				variations:
-					blockName && getBlockVariations( blockName, 'transform' ),
-				blockAttributes: getBlockAttributes( blockClientId ),
-			};
-		},
-		[ blockClientId ]
+function VariationsButtons( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<fieldset className={ className }>
+			<VisuallyHidden as="legend">
+				{ __( 'Transform to variation' ) }
+			</VisuallyHidden>
+			{ variations.map( ( variation ) => (
+				<Button
+					key={ variation.name }
+					icon={ variation.icon }
+					isPressed={ selectedValue === variation.name }
+					label={
+						selectedValue === variation.name
+							? variation.title
+							: sprintf(
+									/* translators: %s: Name of the block variation */
+									__( 'Transform to %s' ),
+									variation.title
+							  )
+					}
+					onClick={ () => onSelectVariation( variation.name ) }
+					aria-label={ variation.title }
+					showTooltip
+				/>
+			) ) }
+		</fieldset>
 	);
-	useEffect( () => {
-		setSelectedValue(
-			getMatchingVariation( blockAttributes, variations )?.name
-		);
-	}, [ blockAttributes, variations ] );
-	if ( ! variations?.length ) return null;
+}
 
+function VariationsDropdown( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
 	const selectOptions = variations.map(
 		( { name, title, description } ) => ( {
 			value: name,
 			label: title,
 			info: description,
 		} )
 	);
-	const onSelectVariation = ( variationName ) => {
-		updateBlockAttributes( blockClientId, {
-			...variations.find( ( { name } ) => name === variationName )
-				.attributes,
-		} );
-	};
-	const baseClass = 'block-editor-block-variation-transforms';
+
 	return (
 		<DropdownMenu
-			className={ baseClass }
+			className={ className }
 			label={ __( 'Transform to variation' ) }
 			text={ __( 'Transform to variation' ) }
 			popoverProps={ {
 				position: 'bottom center',
-				className: `${ baseClass }__popover`,
+				className: `${ className }__popover`,
 			} }
 			icon={ chevronDown }
 			toggleProps={ { iconPosition: 'right' } }
 		>
 			{ () => (
-				<div className={ `${ baseClass }__container` }>
+				<div className={ `${ className }__container` }>
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ selectOptions }
@@ -84,4 +94,82 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	);
 }
 
+function __experimentalBlockVariationTransforms( { blockClientId } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { variations, blockAttributes, blockName } = useSelect(
+		( select ) => {
+			const { getBlockVariations } = select( blocksStore );
+			const { getBlockName, getBlockAttributes } = select(
+				blockEditorStore
+			);
+			const name = blockClientId && getBlockName( blockClientId );
+			return {
+				blockAttributes: getBlockAttributes( blockClientId ),
+				blockName: name,
+				variations: name && getBlockVariations( name, 'transform' ),
+			};
+		},
+		[ blockClientId ]
+	);
+	const { activeBlockVariation } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation } = select( blocksStore );
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					blockName,
+					blockAttributes
+				),
+			};
+		},
+		[ blockAttributes, blockName ]
+	);
+
+	const selectedValue = activeBlockVariation?.name;
+
+	// Check if each variation has a unique icon.
+	const hasUniqueIcons = useMemo( () => {
+		const variationIcons = new Set();
+		variations.forEach( ( variation ) => {
+			if ( variation.icon ) {
+				variationIcons.add( variation.icon );
+			}
+		} );
+		return variationIcons.size === variations.length;
+	}, [ variations ] );
+
+	const onSelectVariation = ( variationName ) => {
+		updateBlockAttributes( blockClientId, {
+			...variations.find( ( { name } ) => name === variationName )
+				.attributes,
+		} );
+	};
+
+	const baseClass = 'block-editor-block-variation-transforms';
+
+	// Skip rendering if there are no variations
+	if ( ! variations?.length ) return null;
+
+	// If each variation has a unique icon, then render the variations as a set of buttons.
+	if ( hasUniqueIcons ) {
+		return (
+			<VariationsButtons
+				className={ baseClass }
+				onSelectVariation={ onSelectVariation }
+				selectedValue={ selectedValue }
+				variations={ variations }
+			/>
+		);
+	}
+
+	// Fallback to a dropdown list of options if each variation does not have a unique icon.
+	return (
+		<VariationsDropdown
+			className={ baseClass }
+			onSelectVariation={ onSelectVariation }
+			selectedValue={ selectedValue }
+			variations={ variations }
+		/>
+	);
+}
+
 export default __experimentalBlockVariationTransforms;

packages/block-editor/src/components/block-variation-transforms/style.scss

@@ -1,5 +1,5 @@
 .block-editor-block-variation-transforms {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;
 
 	.components-dropdown-menu__toggle {

packages/block-library/src/group/variations.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { row, stack } from '@wordpress/icons';
+import { group, row, stack } from '@wordpress/icons';
 
 const variations = [
 	{
@@ -14,6 +14,7 @@ const variations = [
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			blockAttributes.layout?.type === 'default',
+		icon: group,
 	},
 	{
 		name: 'group-row',