From 54d4f63a89d0034e07b6d2c651d2d3d4adfdd41c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 12 Sep 2022 11:37:59 +0300
Subject: [PATCH 1/3] [Block Editor]: Better block transforms organization

---
 .../block-transformations-menu.js             | 117 ++++++++++++++----
 1 file changed, 93 insertions(+), 24 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
index 17c751e1090c8a..800390b720b450 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -7,7 +7,7 @@ import {
 	getBlockMenuDefaultClassName,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,53 @@ import { useState } from '@wordpress/element';
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
 
+/**
+ * Helper hook to group transformations to display them in a specific order in the UI.
+ * For now we group only priority content driven transformations(ex. paragraph -> heading).
+ *
+ * Later on we could also group 'layout' transformations(ex. paragraph -> group) and
+ * display them in different sections.
+ *
+ * @param {Object[]} possibleBlockTransformations The available block transformations.
+ * @return {Record<string, Object[]>} The grouped block transformations.
+ */
+function useGroupedTransforms( possibleBlockTransformations ) {
+	const priorityContentTranformationBlocks = {
+		'core/paragraph': 1,
+		'core/heading': 2,
+		'core/list': 3,
+		'core/quote': 4,
+	};
+	const transformations = useMemo( () => {
+		const priorityTextTranformsNames = Object.keys(
+			priorityContentTranformationBlocks
+		);
+		return possibleBlockTransformations.reduce(
+			( accumulator, item ) => {
+				const { name } = item;
+				if ( priorityTextTranformsNames.includes( name ) ) {
+					accumulator.priorityTextTransformations.push( item );
+				} else {
+					accumulator.restTransformations.push( item );
+				}
+				return accumulator;
+			},
+			{ priorityTextTransformations: [], restTransformations: [] }
+		);
+	}, [ possibleBlockTransformations ] );
+
+	// Order the priority text transformations.
+	transformations.priorityTextTransformations.sort(
+		( { name: currentName }, { name: nextName } ) => {
+			return priorityContentTranformationBlocks[ currentName ] <
+				priorityContentTranformationBlocks[ nextName ]
+				? -1
+				: 1;
+		}
+	);
+	return transformations;
+}
+
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
@@ -23,6 +70,11 @@ const BlockTransformationsMenu = ( {
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
 		useState();
+
+	const { priorityTextTransformations, restTransformations } =
+		useGroupedTransforms( possibleBlockTransformations );
+	const needsTextTransformationsSeparator =
+		priorityTextTransformations.length && restTransformations.length;
 	return (
 		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
 			{ hoveredTransformItemName && (
@@ -33,31 +85,48 @@ const BlockTransformationsMenu = ( {
 					) }
 				/>
 			) }
-			{ possibleBlockTransformations.map( ( item ) => {
-				const { name, icon, title, isDisabled } = item;
-				return (
-					<MenuItem
-						key={ name }
-						className={ getBlockMenuDefaultClassName( name ) }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							onSelect( name );
-						} }
-						disabled={ isDisabled }
-						onMouseLeave={ () =>
-							setHoveredTransformItemName( null )
-						}
-						onMouseEnter={ () =>
-							setHoveredTransformItemName( name )
-						}
-					>
-						<BlockIcon icon={ icon } showColors />
-						{ title }
-					</MenuItem>
-				);
-			} ) }
+			{ priorityTextTransformations.map( ( item ) => (
+				<BlockTranformationItem
+					key={ item.name }
+					item={ item }
+					onSelect={ onSelect }
+					setHoveredTransformItemName={ setHoveredTransformItemName }
+				/>
+			) ) }
+			{ !! needsTextTransformationsSeparator && <hr /> }
+			{ restTransformations.map( ( item ) => (
+				<BlockTranformationItem
+					key={ item.name }
+					item={ item }
+					onSelect={ onSelect }
+					setHoveredTransformItemName={ setHoveredTransformItemName }
+				/>
+			) ) }
 		</MenuGroup>
 	);
 };
 
+function BlockTranformationItem( {
+	item,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	const { name, icon, title, isDisabled } = item;
+	return (
+		<MenuItem
+			className={ getBlockMenuDefaultClassName( name ) }
+			onClick={ ( event ) => {
+				event.preventDefault();
+				onSelect( name );
+			} }
+			disabled={ isDisabled }
+			onMouseLeave={ () => setHoveredTransformItemName( null ) }
+			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+		>
+			<BlockIcon icon={ icon } showColors />
+			{ title }
+		</MenuItem>
+	);
+}
+
 export default BlockTransformationsMenu;

From c2e171847997716eabfc0d60ac9097f29601b032 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 12 Sep 2022 12:19:10 +0300
Subject: [PATCH 2/3] add different MenuGroup if both content transforms exist

---
 .../block-transformations-menu.js             | 77 ++++++++++++-------
 1 file changed, 50 insertions(+), 27 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
index 800390b720b450..2f03b5a817bc28 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -73,39 +73,62 @@ const BlockTransformationsMenu = ( {
 
 	const { priorityTextTransformations, restTransformations } =
 		useGroupedTransforms( possibleBlockTransformations );
-	const needsTextTransformationsSeparator =
+	// We have to check if both content transformations(priority and rest) are set
+	// in order to create a separate MenuGroup for them.
+	const hasBothContentTransformations =
 		priorityTextTransformations.length && restTransformations.length;
+	const restTransformItems = !! restTransformations.length && (
+		<RestTransformationItems
+			restTransformations={ restTransformations }
+			onSelect={ onSelect }
+			setHoveredTransformItemName={ setHoveredTransformItemName }
+		/>
+	);
 	return (
-		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
-			{ hoveredTransformItemName && (
-				<PreviewBlockPopover
-					blocks={ switchToBlockType(
-						blocks,
-						hoveredTransformItemName
-					) }
-				/>
+		<>
+			<MenuGroup label={ __( 'Transform to' ) } className={ className }>
+				{ hoveredTransformItemName && (
+					<PreviewBlockPopover
+						blocks={ switchToBlockType(
+							blocks,
+							hoveredTransformItemName
+						) }
+					/>
+				) }
+				{ priorityTextTransformations.map( ( item ) => (
+					<BlockTranformationItem
+						key={ item.name }
+						item={ item }
+						onSelect={ onSelect }
+						setHoveredTransformItemName={
+							setHoveredTransformItemName
+						}
+					/>
+				) ) }
+				{ ! hasBothContentTransformations && restTransformItems }
+			</MenuGroup>
+			{ !! hasBothContentTransformations && (
+				<MenuGroup>{ restTransformItems }</MenuGroup>
 			) }
-			{ priorityTextTransformations.map( ( item ) => (
-				<BlockTranformationItem
-					key={ item.name }
-					item={ item }
-					onSelect={ onSelect }
-					setHoveredTransformItemName={ setHoveredTransformItemName }
-				/>
-			) ) }
-			{ !! needsTextTransformationsSeparator && <hr /> }
-			{ restTransformations.map( ( item ) => (
-				<BlockTranformationItem
-					key={ item.name }
-					item={ item }
-					onSelect={ onSelect }
-					setHoveredTransformItemName={ setHoveredTransformItemName }
-				/>
-			) ) }
-		</MenuGroup>
+		</>
 	);
 };
 
+function RestTransformationItems( {
+	restTransformations,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	return restTransformations.map( ( item ) => (
+		<BlockTranformationItem
+			key={ item.name }
+			item={ item }
+			onSelect={ onSelect }
+			setHoveredTransformItemName={ setHoveredTransformItemName }
+		/>
+	) );
+}
+
 function BlockTranformationItem( {
 	item,
 	onSelect,

From 330397a3afed3b9e333393bbc67f53131f26e84b Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 12 Sep 2022 13:17:48 +0300
Subject: [PATCH 3/3] preserve same menu group css class

---
 .../components/block-switcher/block-transformations-menu.js   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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
index 2f03b5a817bc28..6b88fddb1163fa 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -108,7 +108,9 @@ const BlockTransformationsMenu = ( {
 				{ ! hasBothContentTransformations && restTransformItems }
 			</MenuGroup>
 			{ !! hasBothContentTransformations && (
-				<MenuGroup>{ restTransformItems }</MenuGroup>
+				<MenuGroup className={ className }>
+					{ restTransformItems }
+				</MenuGroup>
 			) }
 		</>
 	);