Block Styles: Remove preview from inspector panel

packages/block-editor/src/components/block-styles/index.js

@@ -6,59 +6,29 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { debounce, useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,
-	Popover,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
 const noop = () => {};
 
 // Block Styles component for the Settings Sidebar.
-function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
-	const {
-		onSelect,
-		stylesToRender,
-		activeStyle,
-		genericPreviewBlock,
-		className: previewClassName,
-	} = useStylesForBlocks( {
+function BlockStyles( { clientId, onSwitch = noop } ) {
+	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
 		clientId,
 		onSwitch,
 	} );
-	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
 
-	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
-
-	const onSelectStylePreview = ( style ) => {
-		onSelect( style );
-		onHoverClassName( null );
-		setHoveredStyle( null );
-		debouncedSetHoveredStyle.cancel();
-	};
-
-	const styleItemHandler = ( item ) => {
-		if ( hoveredStyle === item ) {
-			debouncedSetHoveredStyle.cancel();
-			return;
-		}
-		debouncedSetHoveredStyle( item );
-		onHoverClassName( item?.name ?? null );
-	};
-
 	return (
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
@@ -78,11 +48,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 							key={ style.name }
 							variant="secondary"
 							label={ buttonText }
-							onMouseEnter={ () => styleItemHandler( style ) }
-							onFocus={ () => styleItemHandler( style ) }
-							onMouseLeave={ () => styleItemHandler( null ) }
-							onBlur={ () => styleItemHandler( null ) }
-							onClick={ () => onSelectStylePreview( style ) }
+							onClick={ () => onSelect( style ) }
 							aria-current={ activeStyle.name === style.name }
 						>
 							<Truncate
@@ -95,25 +61,6 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 					);
 				} ) }
 			</div>
-			{ hoveredStyle && ! isMobileViewport && (
-				<Popover
-					placement="left-start"
-					offset={ 34 }
-					focusOnMount={ false }
-				>
-					<div
-						className="block-editor-block-styles__preview-panel"
-						onMouseLeave={ () => styleItemHandler( null ) }
-					>
-						<BlockStylesPreviewPanel
-							activeStyle={ activeStyle }
-							className={ previewClassName }
-							genericPreviewBlock={ genericPreviewBlock }
-							style={ hoveredStyle }
-						/>
-					</div>
-				</Popover>
-			) }
 		</div>
 	);
 }

packages/block-editor/src/components/block-styles/style.scss

@@ -1,18 +1,3 @@
-.block-editor-block-styles__preview-panel {
-	display: none;
-	// Same layer as the sidebar from which it's triggered.
-	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
-
-	// Only show in narrow widths.
-	@include break-medium() {
-		display: block;
-	}
-
-	.block-editor-block-icon {
-		display: none;
-	}
-}
-
 .block-editor-block-styles__variants {
 	display: flex;
 	flex-wrap: wrap;
@@ -57,11 +42,3 @@
 		text-align-last: center;
 	}
 }
-
-// To prevent overflow in the preview container,
-// ensure that block contents' margin and padding
-// do not add to the block container's width.
-.block-editor-block-styles__block-preview-container,
-.block-editor-block-styles__block-preview-container * {
-	box-sizing: border-box !important;
-}

packages/block-editor/src/components/block-styles/use-styles-for-block.js

@@ -2,54 +2,28 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	cloneBlock,
-	getBlockType,
-	getBlockFromExample,
-	store as blocksStore,
-} from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';
 import { store as blockEditorStore } from '../../store';
 
-/**
- *
- * @param {WPBlock}     block Block object.
- * @param {WPBlockType} type  Block type settings.
- * @return {WPBlock}          A generic block ready for styles preview.
- */
-function useGenericPreviewBlock( block, type ) {
-	return useMemo( () => {
-		const example = type?.example;
-		const blockName = type?.name;
-
-		if ( example && blockName ) {
-			return getBlockFromExample( blockName, {
-				attributes: example.attributes,
-				innerBlocks: example.innerBlocks,
-			} );
-		}
-
-		if ( block ) {
-			return cloneBlock( block );
-		}
-	}, [ type?.example ? block?.name : block, type ] );
-}
-
 /**
  * @typedef useStylesForBlocksArguments
  * @property {string}     clientId Block client ID.
  * @property {() => void} onSwitch Block style switch callback function.
  */
 
 /**
+ * Returns the collection of available block styles, the currently active
+ * block style, as well as an onSelect handler to update block attributes
+ * with the selected block style's className.
  *
  * @param {useStylesForBlocksArguments} useStylesForBlocks arguments.
- * @return {Object}                                         Results of the select methods.
+ *
+ * @return {Object} Results of the select methods.
  */
 export default function useStylesForBlocks( { clientId, onSwitch } ) {
 	const selector = ( select ) => {
@@ -69,13 +43,10 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 			className: block.attributes.className || '',
 		};
 	};
-	const { styles, block, blockType, className } = useSelect( selector, [
-		clientId,
-	] );
+	const { styles, className } = useSelect( selector, [ clientId ] );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const stylesToRender = getRenderedStyles( styles );
 	const activeStyle = getActiveStyle( stylesToRender, className );
-	const genericPreviewBlock = useGenericPreviewBlock( block, blockType );
 
 	const onSelect = ( style ) => {
 		const styleClassName = replaceActiveStyle(
@@ -93,7 +64,5 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 		onSelect,
 		stylesToRender,
 		activeStyle,
-		genericPreviewBlock,
-		className,
 	};
 }