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

Only close inserter on Escape or button press on inserter toggle #60391

Closed
wants to merge 3 commits into from
Closed

Only close inserter on Escape or button press on inserter toggle #60391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b669f5
Only close inserter on Escape or button press on inserter toggle
jeryj Apr 2, 2024
3483005
Add search into blocks and patterns tabs
jeryj Apr 24, 2024
9a1ec9c
add a separate useMemo to the blocktabcontents and patternstabcontents
scruffian Apr 24, 2024
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
136 changes: 84 additions & 52 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 @@ -6,14 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
forwardRef,
useState,
useCallback,
useMemo,
useImperativeHandle,
useRef,
} from '@wordpress/element';
import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
Expand All @@ -36,6 +29,7 @@ import { store as blockEditorStore } from '../../store';
import { useZoomOut } from '../../hooks/use-zoom-out';

const NOOP = () => {};

function InserterMenu(
{
rootClientId,
Expand Down Expand Up @@ -131,16 +125,14 @@ function InserterMenu(
);

const showPatternPanel =
selectedTab === 'patterns' &&
! delayedFilterValue &&
selectedPatternCategory;
selectedTab === 'patterns' && selectedPatternCategory;

const showMediaPanel =
selectedTab === 'media' &&
! delayedFilterValue &&
selectedMediaCategory;

const blocksTab = useMemo(
const BlocksTabContents = useMemo(
() => (
<>
<div className="block-editor-inserter__block-list">
Expand Down Expand Up @@ -170,7 +162,44 @@ function InserterMenu(
]
);

const patternsTab = useMemo(
const blocksTab = useMemo(
() => (
<>
<SearchControl
__nextHasNoMarginBottom
className="block-editor-inserter__search"
onChange={ ( value ) => {
if ( hoveredItem ) setHoveredItem( null );
setFilterValue( value );
} }
value={ filterValue }
label={ __( 'Search for blocks and patterns' ) }
placeholder={ __( 'Search' ) }
/>
{ !! delayedFilterValue && (
<InserterSearchResults
filterValue={ delayedFilterValue }
onSelect={ onSelect }
onHover={ onHover }
onHoverPattern={ onHoverPattern }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
__experimentalInsertionIndex={
__experimentalInsertionIndex
}
showBlockDirectory
shouldFocusBlock={ shouldFocusBlock }
maxBlockPatterns={ 0 }
/>
) }
{ ! delayedFilterValue && BlocksTabContents }
</>
),
[ delayedFilterValue ]
);

const PatternsTabContents = useMemo(
() => (
<BlockPatternsTab
rootClientId={ destinationRootClientId }
Expand All @@ -191,6 +220,7 @@ function InserterMenu(
</BlockPatternsTab>
),
[
delayedFilterValue,
destinationRootClientId,
onHoverPattern,
onInsertPattern,
Expand All @@ -201,6 +231,43 @@ function InserterMenu(
]
);

const patternsTab = useMemo(
() => (
<>
<SearchControl
__nextHasNoMarginBottom
className="block-editor-inserter__search"
onChange={ ( value ) => {
if ( hoveredItem ) setHoveredItem( null );
setFilterValue( value );
} }
value={ filterValue }
label={ __( 'Search for blocks and patterns' ) }
placeholder={ __( 'Search' ) }
/>
{ !! delayedFilterValue && (
<InserterSearchResults
filterValue={ delayedFilterValue }
onSelect={ onSelect }
onHover={ onHover }
onHoverPattern={ onHoverPattern }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
__experimentalInsertionIndex={
__experimentalInsertionIndex
}
showBlockDirectory
shouldFocusBlock={ shouldFocusBlock }
maxBlockTypes={ 0 }
/>
) }
{ ! delayedFilterValue && PatternsTabContents }
</>
),
[ delayedFilterValue ]
);

const mediaTab = useMemo(
() => (
<MediaTab
Expand Down Expand Up @@ -236,14 +303,7 @@ function InserterMenu(
[ blocksTab, mediaTab, patternsTab ]
);

const searchRef = useRef();
useImperativeHandle( ref, () => ( {
focusSearch: () => {
searchRef.current.focus();
},
} ) );

const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
const showAsTabs = showPatterns || showMedia;

// When the pattern panel is showing, we want to use zoom out mode
useZoomOut( showPatternPanel );
Expand All @@ -261,42 +321,14 @@ function InserterMenu(
className={ classnames( 'block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
} ) }
ref={ ref }
tabIndex={ -1 } // Fallback if there are no focusables
>
<div
className={ classnames( 'block-editor-inserter__main-area', {
'show-as-tabs': showAsTabs,
} ) }
>
<SearchControl
__nextHasNoMarginBottom
className="block-editor-inserter__search"
onChange={ ( value ) => {
if ( hoveredItem ) setHoveredItem( null );
setFilterValue( value );
} }
value={ filterValue }
label={ __( 'Search for blocks and patterns' ) }
placeholder={ __( 'Search' ) }
ref={ searchRef }
/>
{ !! delayedFilterValue && (
<div className="block-editor-inserter__no-tab-container">
<InserterSearchResults
filterValue={ delayedFilterValue }
onSelect={ onSelect }
onHover={ onHover }
onHoverPattern={ onHoverPattern }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
__experimentalInsertionIndex={
__experimentalInsertionIndex
}
showBlockDirectory
shouldFocusBlock={ shouldFocusBlock }
/>
</div>
) }
{ showAsTabs && (
<InserterTabs
showPatterns={ showPatterns }
Expand All @@ -305,7 +337,7 @@ function InserterMenu(
tabsContents={ inserterTabsContents }
/>
) }
{ ! delayedFilterValue && ! showAsTabs && (
{ ! showAsTabs && (
<div className="block-editor-inserter__no-tab-container">
{ blocksTab }
</div>
Expand Down
40 changes: 24 additions & 16 deletions packages/editor/src/components/inserter-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { Button, VisuallyHidden } from '@wordpress/components';
import { __experimentalLibrary as Library } from '@wordpress/block-editor';
import { close } from '@wordpress/icons';
import {
useViewportMatch,
__experimentalUseDialog as useDialog,
} from '@wordpress/compose';
import { useViewportMatch, useRefEffect } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useEffect, useRef } from '@wordpress/element';
import { store as preferencesStore } from '@wordpress/preferences';
import { ESCAPE } from '@wordpress/keycodes';
import { focus } from '@wordpress/dom';

/**
* Internal dependencies
Expand All @@ -35,22 +34,31 @@ export default function InserterSidebar( {

const isMobileViewport = useViewportMatch( 'medium', '<' );
const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
onClose: () => setIsInserterOpened( false ),
focusOnMount: null,
} );

const libraryRef = useRef();
useEffect( () => {
libraryRef.current.focusSearch();
const libraryRef = useRefEffect( ( element ) => {
focus.focusable.find( element )[ 0 ]?.focus() || element.focus();

function onKeyDown( event ) {
const { keyCode } = event;

if ( event.defaultPrevented ) {
return;
}

if ( keyCode === ESCAPE ) {
event.preventDefault();
setIsInserterOpened( false );
}
}

element.addEventListener( 'keydown', onKeyDown );
return () => {
element.removeEventListener( 'keydown', onKeyDown );
};
}, [] );

return (
<div
ref={ inserterDialogRef }
{ ...inserterDialogProps }
className="editor-inserter-sidebar"
>
<div ref={ libraryRef } className="editor-inserter-sidebar">
<TagName className="editor-inserter-sidebar__header">
<Button
icon={ close }
Expand Down
Loading