Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pattern Inserter: show insertion indicator when hovering on patterns #47316

Merged
merged 4 commits into from
Jan 26, 2023
Merged

Pattern Inserter: show insertion indicator when hovering on patterns #47316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f7c74dd
Pattern Inserter: show insertion indicator when hovering on patterns
t-hamano Jan 20, 2023
31aad1a
Try to fix e2e test
t-hamano Jan 20, 2023
171b896
Don't show indicator when focus
t-hamano Jan 23, 2023
9c79940
Fix e2e test
t-hamano Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 29 additions & 3 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import {
VisuallyHidden,
__unstableComposite as Composite,
Expand Down Expand Up @@ -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 }`;
Expand All @@ -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 }
Expand All @@ -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
Expand Down Expand Up @@ -95,6 +119,7 @@ function BlockPatternList( {
isDraggable,
blockPatterns,
shownPatterns,
onHover,
onClickPattern,
orientation,
label = __( 'Block Patterns' ),
Expand All @@ -115,6 +140,7 @@ function BlockPatternList( {
key={ pattern.name }
pattern={ pattern }
onClick={ onClickPattern }
onHover={ onHover }
isDraggable={ isDraggable }
composite={ composite }
showTooltip={ showTitlesAsTooltip }
Expand Down
7 changes: 0 additions & 7 deletions packages/block-editor/src/components/inserter-list-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions packages/block-editor/src/components/inserter/block-patterns-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function usePatternsCategories( rootClientId ) {
export function BlockPatternsCategoryDialog( {
rootClientId,
onInsert,
onHover,
category,
showTitlesAsTooltip,
} ) {
Expand All @@ -113,6 +114,7 @@ export function BlockPatternsCategoryDialog( {
<BlockPatternsCategoryPanel
rootClientId={ rootClientId }
onInsert={ onInsert }
onHover={ onHover }
category={ category }
showTitlesAsTooltip={ showTitlesAsTooltip }
/>
Expand All @@ -123,6 +125,7 @@ export function BlockPatternsCategoryDialog( {
export function BlockPatternsCategoryPanel( {
rootClientId,
onInsert,
onHover,
category,
showTitlesAsTooltip,
} ) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -170,6 +176,7 @@ export function BlockPatternsCategoryPanel( {
shownPatterns={ currentShownPatterns }
blockPatterns={ currentCategoryPatterns }
onClickPattern={ onClick }
onHover={ onHover }
label={ category.label }
orientation="vertical"
category={ category.label }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@ function InserterMenu(
<BlockPatternsCategoryDialog
rootClientId={ destinationRootClientId }
onInsert={ onInsertPattern }
onHover={ onHover }
category={ selectedPatternCategory }
showTitlesAsTooltip
/>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inserter/search-results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ function InserterSearchResults( {
shownPatterns={ currentShownPatterns }
blockPatterns={ filteredBlockPatterns }
onClickPattern={ onSelectBlockPattern }
onHover={ onHover }
isDraggable={ isDraggable }
/>
</div>
Expand Down
6 changes: 4 additions & 2 deletions packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Comment on lines -350 to +353
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed one E2E test failure.
In this PR, hover() must be performed because the inserter is no longer visible when in focus().

const preview = await page.waitForSelector(
'.block-editor-inserter__preview',
{
Expand Down