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,63 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
  );
 }
 
+function __experimentalBlockVariationTransforms( { blockClientId } ) {
+ const { updateBlockAttributes } = useDispatch( blockEditorStore );
+ const { activeBlockVariation, variations } = useSelect(
+ ( select ) => {
+ const { getActiveBlockVariation, getBlockVariations } = select(
+ blocksStore
+ );
+ const { getBlockName, getBlockAttributes } = select(
+ blockEditorStore
+ );
+ const name = blockClientId && getBlockName( blockClientId );
+ return {
+ activeBlockVariation: getActiveBlockVariation(
+ name,
+ getBlockAttributes( blockClientId )
+ ),
+ variations: name && getBlockVariations( name, 'transform' ),
+ };
+ },
+ [ blockClientId ]
+ );
+
+ 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;
+
+ const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+
+ return (
+ <Component
+ 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',