Refactor BlockSwitcher - make function component and new specific sel…

…ector `getBlockTransformItems` (#27674)

* Refactor BlockSwitcher - function component and break into more files

* new selector for block transforms

* jsdoc selectors

* fix BlockSwitcher tests

* getBlockTransformItems tests

* make BlockStylesMenu named function

* move icon logic in `useSelect`

* fix unit tests

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -344,6 +344,40 @@ _Returns_
 
 -   `?string`: Client ID of block selection start.
 
+<a name="getBlockTransformItems" href="#getBlockTransformItems">#</a> **getBlockTransformItems**
+
+Determines the items that appear in the available block transforms list.
+
+Each item object contains what's necessary to display a menu item in the
+transform list and handle its selection.
+
+The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>)
+that combines block usage frequenty and recency.
+
+Items are returned ordered descendingly by their 'frecency'.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _rootClientId_ `?string`: Optional root client ID of block list.
+
+_Returns_
+
+-   `Array<WPEditorTransformItem>`: Items that appear in inserter.
+
+_Type Definition_
+
+-   _WPEditorTransformItem_ `Object`
+
+_Properties_
+
+-   _id_ `string`: Unique identifier for the item.
+-   _name_ `string`: The type of block to create.
+-   _title_ `string`: Title of the item, as it appears in the inserter.
+-   _icon_ `string`: Dashicon for the item, as it appears in the inserter.
+-   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
+-   _frecency_ `number`: Heuristic that combines frequency and recency.
+
 <a name="getClientIdsOfDescendants" href="#getClientIdsOfDescendants">#</a> **getClientIdsOfDescendants**
 
 Returns an array containing the clientIds of all descendants

packages/block-editor/src/components/block-switcher/block-styles-menu.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuGroup } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockStyles from '../block-styles';
+import PreviewBlockPopover from './preview-block-popover';
+
+export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
+	const [ hoveredClassName, setHoveredClassName ] = useState();
+	return (
+		<MenuGroup
+			label={ __( 'Styles' ) }
+			className="block-editor-block-switcher__styles__menugroup"
+		>
+			{ hoveredClassName && (
+				<PreviewBlockPopover
+					hoveredBlock={ hoveredBlock }
+					hoveredClassName={ hoveredClassName }
+				/>
+			) }
+			<BlockStyles
+				clientId={ hoveredBlock.clientId }
+				onSwitch={ onSwitch }
+				onHoverClassName={ setHoveredClassName }
+				itemRole="menuitem"
+			/>
+		</MenuGroup>
+	);
+}

packages/block-editor/src/components/block-switcher/block-transformations-menu.js

@@ -18,7 +18,7 @@ const BlockTransformationsMenu = ( {
 	return (
 		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
 			{ possibleBlockTransformations.map( ( item ) => {
-				const { name, icon, title } = item;
+				const { name, icon, title, isDisabled } = item;
 				return (
 					<MenuItem
 						key={ name }
@@ -27,6 +27,7 @@ const BlockTransformationsMenu = ( {
 							event.preventDefault();
 							onSelect( name );
 						} }
+						disabled={ isDisabled }
 					>
 						<BlockIcon icon={ icon } showColors />
 						{ title }