transforms preview (#27861)

WordPress · Dec 23, 2020 · d9d06f3 · d9d06f3
1 parent 068a4f9
commit d9d06f3
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 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
@@ -4,28 +4,49 @@
 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
  */
 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' ) }
 			className="block-editor-block-switcher__styles__menugroup"
 		>
 			{ 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
@@ -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
@@ -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
@@ -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>