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

Move search into inserter tabs #61108

Merged
merged 24 commits into from
May 1, 2024
Merged

Move search into inserter tabs #61108

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
96cfa63
Move search into inserter tabs
jeryj Apr 25, 2024
f485c1b
Make inserterSearch component
jeryj Apr 25, 2024
94afb1c
focus the search field using a useEffect
scruffian Apr 26, 2024
93f8f86
use request animation frame
scruffian Apr 26, 2024
d203d3e
add comment
scruffian Apr 26, 2024
8fda50f
remove unused code
scruffian Apr 26, 2024
dcd15b7
change selector for search
scruffian Apr 29, 2024
dab64f4
use useRefEffect instead of the requestAnimationFrame
scruffian Apr 29, 2024
d6caacb
Only inserter on mount
jeryj Apr 30, 2024
cf0e71c
keep the imperative ref and focus once the tabs are done
draganescu May 1, 2024
6e9b42f
revert changes to the inserter tabs and leave the tabs contents memoized
draganescu May 1, 2024
4b126ef
reset order
scruffian May 1, 2024
1de6dfd
remove unneeded change
scruffian May 1, 2024
429a0d7
reset order
scruffian May 1, 2024
eec8797
show message if no blocks and no patterns available, do not auto focu…
draganescu May 1, 2024
affc8af
fix test
scruffian May 1, 2024
489d6a1
fix firefox bug
scruffian May 1, 2024
5d7340c
auto focus the inserter when open so that we can tab into it
draganescu May 1, 2024
ca00872
Remove unused searchRef
jeryj May 1, 2024
0b1e2fb
Pin hint to bottom of block tab panel so it doesn't flash
jeryj May 1, 2024
3044f5f
Remove unnecessary tab filtering
jeryj May 1, 2024
521b732
restore no results message
scruffian May 1, 2024
fbd8901
Focus first active tab
jeryj May 1, 2024
020277c
hide the inserter tabs on the widget editor
scruffian May 1, 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
140 changes: 82 additions & 58 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

This change set does multiple things:

  • keeps the tabs always visible by removing showAsTabs and the code that creates it (e.g. removes showPatterns, mediaCategories, showMedia, showMediaPanel)
  • moves the search control into a reusable variable
  • moves the search block into the blocks and patterns tabs
  • removes the auto focus of the search control (removing the useImperativeHandle on the ref passed to InserterMenu by the parent libarary component) - see reasoning in PR description
  • sets the default tab to blocks

Copy link
Contributor

Choose a reason for hiding this comment

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

removes the auto focus of the search control (removing the useImperativeHandle on the ref passed to InserterMenu by the parent libarary component) - see reasoning in PR description

But it introduces breaking changes in the API, like @mattsherman mentioned in this issue.
After these changes, the ref doesn't expose the focusSearch method, which caused the product editor to break.

Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {
useState,
useCallback,
useMemo,
useImperativeHandle,
useRef,
useImperativeHandle,
} from '@wordpress/element';
import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
Expand All @@ -36,6 +36,7 @@ import { store as blockEditorStore } from '../../store';
import { useZoomOut } from '../../hooks/use-zoom-out';

const NOOP = () => {};

function InserterMenu(
{
rootClientId,
Expand All @@ -59,7 +60,7 @@ function InserterMenu(
const [ patternFilter, setPatternFilter ] = useState( 'all' );
const [ selectedMediaCategory, setSelectedMediaCategory ] =
useState( null );
const [ selectedTab, setSelectedTab ] = useState( null );
const [ selectedTab, setSelectedTab ] = useState( 'blocks' );

const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
useInsertionPoint( {
Expand Down Expand Up @@ -135,10 +136,9 @@ function InserterMenu(
! delayedFilterValue &&
selectedPatternCategory;

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

const showAsTabs = showPatterns || showMedia;

const blocksTab = useMemo(
() => (
Expand Down Expand Up @@ -227,24 +227,6 @@ function InserterMenu(
]
);

const inserterTabsContents = useMemo(
() => ( {
blocks: blocksTab,
patterns: patternsTab,
media: mediaTab,
} ),
[ blocksTab, mediaTab, patternsTab ]
);

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

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

// When the pattern panel is showing, we want to use zoom out mode
useZoomOut( showPatternPanel );

Expand All @@ -256,24 +238,24 @@ function InserterMenu(
setSelectedTab( value );
};

return (
<div
className={ classnames( 'block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
} ) }
>
<div
className={ classnames( 'block-editor-inserter__main-area', {
'show-as-tabs': showAsTabs,
} ) }
>
const searchRef = useRef();
useImperativeHandle( ref, () => ( {
focusSearch: () => {
window.requestAnimationFrame( () => searchRef.current.focus() );
},
} ) );
draganescu marked this conversation as resolved.
Show resolved Hide resolved

const inserterSearch = useMemo( () => {
if ( selectedTab === 'media' ) {
return null;
}
return (
<>
<SearchControl
__nextHasNoMarginBottom
className="block-editor-inserter__search"
onChange={ ( value ) => {
if ( hoveredItem ) {
setHoveredItem( null );
}
if ( hoveredItem ) setHoveredItem( null );
setFilterValue( value );
} }
value={ filterValue }
Expand All @@ -282,34 +264,76 @@ function InserterMenu(
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>
<InserterSearchResults
filterValue={ delayedFilterValue }
onSelect={ onSelect }
onHover={ onHover }
onHoverPattern={ onHoverPattern }
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
__experimentalInsertionIndex={
__experimentalInsertionIndex
}
showBlockDirectory
shouldFocusBlock={ shouldFocusBlock }
prioritizePatterns={ selectedTab === 'patterns' }
/>
) }
</>
);
}, [
selectedTab,
hoveredItem,
setHoveredItem,
setFilterValue,
filterValue,
delayedFilterValue,
onSelect,
onHover,
onHoverPattern,
shouldFocusBlock,
clientId,
rootClientId,
__experimentalInsertionIndex,
isAppender,
searchRef,
] );

return (
<div
className={ classnames( 'block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
} ) }
ref={ ref }
>
<div
className={ classnames( 'block-editor-inserter__main-area', {
'show-as-tabs': showAsTabs,
} ) }
>
{ showAsTabs && (
<InserterTabs
showPatterns={ showPatterns }
showMedia={ showMedia }
onSelect={ handleSetSelectedTab }
tabsContents={ inserterTabsContents }
/>
>
{ ( selectedTab === 'blocks' ||
selectedTab === 'patterns' ) &&
inserterSearch }
{ selectedTab === 'blocks' &&
! delayedFilterValue &&
blocksTab }
{ selectedTab === 'patterns' &&
! delayedFilterValue &&
patternsTab }
{ selectedTab === 'media' && mediaTab }
</InserterTabs>
) }
{ ! delayedFilterValue && ! showAsTabs && (
{ ! showAsTabs && (
<div className="block-editor-inserter__no-tab-container">
{ blocksTab }
{ inserterSearch }
{ ! delayedFilterValue && blocksTab }
</div>
) }
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inserter/tabs.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

This change removes optionally hiding tabs if they're empty. This makes them always show.

Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function InserterTabs( {
showPatterns = false,
showMedia = false,
onSelect,
tabsContents,
children,
} ) {
const tabs = [
blocksTab,
Expand Down Expand Up @@ -61,7 +61,7 @@ function InserterTabs( {
focusable={ false }
className="block-editor-inserter__tabpanel"
>
{ tabsContents[ tab.name ] }
{ children }
</Tabs.TabPanel>
) ) }
</Tabs>
Expand Down
5 changes: 2 additions & 3 deletions test/e2e/specs/editor/various/adding-patterns.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ test.describe( 'adding patterns', () => {
} );

test( 'should insert a block pattern', async ( { page, editor } ) => {
await page.click(
'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
);
await page.getByLabel( 'Toggle block inserter' ).click();

await page.getByRole( 'tab', { name: 'Patterns' } ).click();
await page.fill(
'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
'Social links with a shared background color'
Expand Down
4 changes: 3 additions & 1 deletion test/performance/specs/post-editor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,9 +418,11 @@ test.describe( 'Post Editor Performance', () => {
const globalInserterToggle = page.getByRole( 'button', {
name: 'Toggle block inserter',
} );

// Open Inserter.
await globalInserterToggle.click();

await page.getByRole( 'searchbox' ).click();

await perfUtils.expectExpandedState( globalInserterToggle, 'true' );

const samples = 10;
Expand Down
Loading