move variation transforms to the top of the list

WordPress · May 11, 2023 · ee59699 · ee59699
1 parent 383c87d
commit ee59699
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -14,6 +14,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
@@ -65,7 +66,9 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
+	possibleBlockVariationTransformations,
 	onSelect,
+	onSelectVariation,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
@@ -95,6 +98,15 @@ const BlockTransformationsMenu = ( {
 						) }
 					/>
 				) }
+				{ !! possibleBlockVariationTransformations?.length && (
+					<BlockVariationTransformations
+						transformations={
+							possibleBlockVariationTransformations
+						}
+						blocks={ blocks }
+						onSelect={ onSelectVariation }
+					/>
+				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTranformationItem
 						key={ item.name }

diff --git a/...r/block-variation-transformations-menu.js → ...itcher/block-variation-transformations.js b/...r/block-variation-transformations-menu.js → ...itcher/block-variation-transformations.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { MenuGroup, MenuItem } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import {
 	getBlockMenuDefaultClassName,
 	cloneBlock,
@@ -58,15 +57,15 @@ export function useBlockVariationTransforms( { clientIds, blocks } ) {
 	return transformations;
 }
 
-const BlockVariationTransformationsMenu = ( {
+const BlockVariationTransformations = ( {
 	transformations,
 	onSelect,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
 		useState();
 	return (
-		<MenuGroup label={ __( 'Variations' ) }>
+		<>
 			{ hoveredTransformItemName && (
 				<PreviewBlockPopover
 					blocks={ cloneBlock(
@@ -85,7 +84,7 @@ const BlockVariationTransformationsMenu = ( {
 					setHoveredTransformItemName={ setHoveredTransformItemName }
 				/>
 			) ) }
-		</MenuGroup>
+		</>
 	);
 };
 
@@ -111,4 +110,4 @@ function BlockVariationTranformationItem( {
 	);
 }
 
-export default BlockVariationTransformationsMenu;
+export default BlockVariationTransformations;
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -24,10 +24,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
-import {
-	useBlockVariationTransforms,
-	default as BlockVariationTransformationsMenu,
-} from './block-variation-transformations-menu';
+import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
@@ -184,10 +181,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					blocks.length
 			  );
 
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
 	const showDropDown =
 		hasBlockStyles ||
-		hasPossibleBlockTransformations ||
-		hasPossibleBlockVariationTransformations ||
+		hasBlockOrBlockVariationTransforms ||
 		hasPatternTransformation;
 	return (
 		<ToolbarGroup>
@@ -238,26 +237,21 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 											} }
 										/>
 									) }
-									{ hasPossibleBlockTransformations && (
+									{ hasBlockOrBlockVariationTransforms && (
 										<BlockTransformationsMenu
 											className="block-editor-block-switcher__transforms__menugroup"
 											possibleBlockTransformations={
 												possibleBlockTransformations
 											}
+											possibleBlockVariationTransformations={
+												blockVariationTransformations
+											}
 											blocks={ blocks }
 											onSelect={ ( name ) => {
 												onBlockTransform( name );
 												onClose();
 											} }
-										/>
-									) }
-									{ hasPossibleBlockVariationTransformations && (
-										<BlockVariationTransformationsMenu
-											transformations={
-												blockVariationTransformations
-											}
-											blocks={ blocks }
-											onSelect={ ( name ) => {
+											onSelectVariation={ ( name ) => {
 												onBlockVariationTransform(
 													name
 												);