From d9d06f332d9c5057a19f8ad334625bcbce3e137a Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Wed, 23 Dec 2020 11:44:58 +0200
Subject: [PATCH] transforms preview (#27861)

---
 .../block-switcher/block-styles-menu.js       | 29 ++++++++++++++---
 .../block-transformations-menu.js             | 26 ++++++++++++++-
 .../src/components/block-switcher/index.js    |  1 +
 .../block-switcher/preview-block-popover.js   | 32 ++-----------------
 4 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/block-styles-menu.js b/packages/block-editor/src/components/block-switcher/block-styles-menu.js
index e600f062423df0..7ca6336c5f9176 100644
--- a/packages/block-editor/src/components/block-switcher/block-styles-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-styles-menu.js
@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { MenuGroup } from '@wordpress/components';
 import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { cloneBlock, getBlockFromExample } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,8 +13,16 @@ import { useState } from '@wordpress/element';
 import BlockStyles from '../block-styles';
 import PreviewBlockPopover from './preview-block-popover';
 
-export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
+export default function BlockStylesMenu( {
+	hoveredBlock: { name, clientId },
+	onSwitch,
+} ) {
 	const [ hoveredClassName, setHoveredClassName ] = useState();
+	const blockType = useSelect(
+		( select ) => select( 'core/blocks' ).getBlockType( name ),
+		[ name ]
+	);
+
 	return (
 		<MenuGroup
 			label={ __( 'Styles' ) }
@@ -20,12 +30,23 @@ export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
 		>
 			{ hoveredClassName && (
 				<PreviewBlockPopover
-					hoveredBlock={ hoveredBlock }
-					hoveredClassName={ hoveredClassName }
+					blocks={
+						blockType.example
+							? getBlockFromExample( blockType.name, {
+									attributes: {
+										...blockType.example.attributes,
+										className: hoveredClassName,
+									},
+									innerBlocks: blockType.example.innerBlocks,
+							  } )
+							: cloneBlock( blockType, {
+									className: hoveredClassName,
+							  } )
+					}
 				/>
 			) }
 			<BlockStyles
-				clientId={ hoveredBlock.clientId }
+				clientId={ clientId }
 				onSwitch={ onSwitch }
 				onHoverClassName={ setHoveredClassName }
 				itemRole="menuitem"
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 e8e4566112b4a0..49f1d3044ee791 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
@@ -3,20 +3,38 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup, MenuItem } from '@wordpress/components';
-import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import {
+	getBlockMenuDefaultClassName,
+	switchToBlockType,
+} from '@wordpress/blocks';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import PreviewBlockPopover from './preview-block-popover';
 
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
 	onSelect,
+	blocks,
 } ) => {
+	const [
+		hoveredTransformItemName,
+		setHoveredTransformItemName,
+	] = useState();
 	return (
 		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
+			{ hoveredTransformItemName && (
+				<PreviewBlockPopover
+					blocks={ switchToBlockType(
+						blocks,
+						hoveredTransformItemName
+					) }
+				/>
+			) }
 			{ possibleBlockTransformations.map( ( item ) => {
 				const { name, icon, title, isDisabled } = item;
 				return (
@@ -28,6 +46,12 @@ const BlockTransformationsMenu = ( {
 							onSelect( name );
 						} }
 						disabled={ isDisabled }
+						onMouseLeave={ () =>
+							setHoveredTransformItemName( null )
+						}
+						onMouseEnter={ () =>
+							setHoveredTransformItemName( name )
+						}
 					>
 						<BlockIcon icon={ icon } showColors />
 						{ title }
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index b789dd7348c146..9428084a21c57b 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -129,6 +129,7 @@ const BlockSwitcher = ( { clientIds } ) => {
 											possibleBlockTransformations={
 												possibleBlockTransformations
 											}
+											blocks={ blocks }
 											onSelect={ ( name ) => {
 												onTransform( name );
 												onClose();
diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index 4e8e0cd0b66842..53adb87f337ad7 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -3,21 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
-import {
-	getBlockType,
-	cloneBlock,
-	getBlockFromExample,
-} from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 
-export default function PreviewBlockPopover( {
-	hoveredBlock,
-	hoveredClassName,
-} ) {
-	const hoveredBlockType = getBlockType( hoveredBlock.name );
+export default function PreviewBlockPopover( { blocks } ) {
 	return (
 		<div className="block-editor-block-switcher__popover__preview__parent">
 			<div className="block-editor-block-switcher__popover__preview__container">
@@ -30,25 +22,7 @@ export default function PreviewBlockPopover( {
 						<div className="block-editor-block-switcher__preview-title">
 							{ __( 'Preview' ) }
 						</div>
-						<BlockPreview
-							viewportWidth={ 500 }
-							blocks={
-								hoveredBlockType.example
-									? getBlockFromExample( hoveredBlock.name, {
-											attributes: {
-												...hoveredBlockType.example
-													.attributes,
-												className: hoveredClassName,
-											},
-											innerBlocks:
-												hoveredBlockType.example
-													.innerBlocks,
-									  } )
-									: cloneBlock( hoveredBlock, {
-											className: hoveredClassName,
-									  } )
-							}
-						/>
+						<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
 					</div>
 				</Popover>
 			</div>