Pattern Inserter: show insertion indicator when hovering on patterns (#…

…47316) * Pattern Inserter: show insertion indicator when hovering on patterns * Try to fix e2e test * Don't show indicator when focus * Fix e2e test
WordPress · Jan 26, 2023 · 2797c8c · 2797c8c · github-actions · Jan 26, 2023
1 parent 38a95a6
commit 2797c8c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
@@ -28,9 +29,11 @@ function BlockPattern( {
 	isDraggable,
 	pattern,
 	onClick,
+	onHover,
 	composite,
 	showTooltip,
 } ) {
+	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
@@ -45,8 +48,19 @@ function BlockPattern( {
 				<div
 					className="block-editor-block-patterns-list__list-item"
 					draggable={ draggable }
-					onDragStart={ onDragStart }
-					onDragEnd={ onDragEnd }
+					onDragStart={ ( event ) => {
+						setIsDragging( true );
+						if ( onDragStart ) {
+							onHover( null );
+							onDragStart( event );
+						}
+					} }
+					onDragEnd={ ( event ) => {
+						setIsDragging( false );
+						if ( onDragEnd ) {
+							onDragEnd( event );
+						}
+					} }
 				>
 					<WithToolTip
 						showTooltip={ showTooltip }
@@ -57,7 +71,17 @@ function BlockPattern( {
 							as="div"
 							{ ...composite }
 							className="block-editor-block-patterns-list__item"
-							onClick={ () => onClick( pattern, blocks ) }
+							onClick={ () => {
+								onClick( pattern, blocks );
+								onHover( null );
+							} }
+							onMouseEnter={ () => {
+								if ( isDragging ) {
+									return;
+								}
+								onHover( pattern );
+							} }
+							onMouseLeave={ () => onHover( null ) }
 							aria-label={ pattern.title }
 							aria-describedby={
 								pattern.description ? descriptionId : undefined
@@ -95,6 +119,7 @@ function BlockPatternList( {
 	isDraggable,
 	blockPatterns,
 	shownPatterns,
+	onHover,
 	onClickPattern,
 	orientation,
 	label = __( 'Block Patterns' ),
@@ -115,6 +140,7 @@ function BlockPatternList( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onClick={ onClickPattern }
+						onHover={ onHover }
 						isDraggable={ isDraggable }
 						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -107,20 +107,13 @@ function InserterListItem( {
 								onHover( null );
 							}
 						} }
-						onFocus={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
 						onMouseEnter={ () => {
 							if ( isDragging.current ) {
 								return;
 							}
 							onHover( item );
 						} }
 						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
 						{ ...props }
 					>
 						<span

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -92,6 +92,7 @@ function usePatternsCategories( rootClientId ) {
 export function BlockPatternsCategoryDialog( {
 	rootClientId,
 	onInsert,
+	onHover,
 	category,
 	showTitlesAsTooltip,
 } ) {
@@ -113,6 +114,7 @@ export function BlockPatternsCategoryDialog( {
 			<BlockPatternsCategoryPanel
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
+				onHover={ onHover }
 				category={ category }
 				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
@@ -123,6 +125,7 @@ export function BlockPatternsCategoryDialog( {
 export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
+	onHover,
 	category,
 	showTitlesAsTooltip,
 } ) {
@@ -156,6 +159,9 @@ export function BlockPatternsCategoryPanel( {
 
 	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
 
+	// Hide block pattern preview on unmount.
+	useEffect( () => () => onHover( null ), [] );
+
 	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
@@ -170,6 +176,7 @@ export function BlockPatternsCategoryPanel( {
 				shownPatterns={ currentShownPatterns }
 				blockPatterns={ currentCategoryPatterns }
 				onClickPattern={ onClick }
+				onHover={ onHover }
 				label={ category.label }
 				orientation="vertical"
 				category={ category.label }

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -296,6 +296,7 @@ function InserterMenu(
 				<BlockPatternsCategoryDialog
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
+					onHover={ onHover }
 					category={ selectedPatternCategory }
 					showTitlesAsTooltip
 				/>

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -157,6 +157,7 @@ function InserterSearchResults( {
 					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onSelectBlockPattern }
+					onHover={ onHover }
 					isDraggable={ isDraggable }
 				/>
 			</div>

diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -347,8 +347,10 @@ describe( 'Inserting blocks', () => {
 
 	it( 'shows block preview when hovering over block in inserter', async () => {
 		await openGlobalBlockInserter();
-		await page.waitForSelector( '.editor-block-list-item-paragraph' );
-		await page.focus( '.editor-block-list-item-paragraph' );
+		const paragraphButton = (
+			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
+		 )[ 0 ];
+		await paragraphButton.hover();
 		const preview = await page.waitForSelector(
 			'.block-editor-inserter__preview',
 			{