Skip to content

Commit

Permalink
Refactor InserterTabs to use children and remove re-memoizing (#61295)
Browse files Browse the repository at this point in the history 
* Refactor InserterTabs to use children and remove re-memoizing

* don't make selectedTab a dependency of each tab

* cast the categories to a bool

---------

Co-authored-by: Ben Dwyer <[email protected]>

Co-authored-by: jeryj <[email protected]>
Co-authored-by: scruffian <[email protected]>
  • Loading branch information
@jeryj @scruffian
3 people authored May 2, 2024
1 parent 32a905b commit 123e216
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 96 deletions.
168 changes: 74 additions & 94 deletions packages/block-editor/src/components/inserter/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,15 @@ function InserterMenu(
const showPatternPanel =
selectedTab === 'patterns' &&
! delayedFilterValue &&
selectedPatternCategory;
!! selectedPatternCategory;

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

const inserterSearch = useMemo( () => {
if ( selectedTab === 'media' ) {
return null;
}

return (
<>
<SearchControl
Expand Down Expand Up @@ -177,83 +178,67 @@ function InserterMenu(
isAppender,
] );

const blocksTab = useMemo(
() => (
const blocksTab = useMemo( () => {
return (
<>
{ inserterSearch }
{ ! delayedFilterValue && (
<>
<div className="block-editor-inserter__block-list">
<BlockTypesTab
rootClientId={ destinationRootClientId }
onInsert={ onInsert }
onHover={ onHover }
showMostUsedBlocks={ showMostUsedBlocks }
/>
</div>
{ showInserterHelpPanel && (
<div className="block-editor-inserter__tips">
<VisuallyHidden as="h2">
{ __( 'A tip for using the block editor' ) }
</VisuallyHidden>
<Tips />
</div>
) }
</>
<div className="block-editor-inserter__block-list">
<BlockTypesTab
rootClientId={ destinationRootClientId }
onInsert={ onInsert }
onHover={ onHover }
showMostUsedBlocks={ showMostUsedBlocks }
/>
</div>
{ showInserterHelpPanel && (
<div className="block-editor-inserter__tips">
<VisuallyHidden as="h2">
{ __( 'A tip for using the block editor' ) }
</VisuallyHidden>
<Tips />
</div>
) }
</>
),
[
destinationRootClientId,
onInsert,
onHover,
showMostUsedBlocks,
showInserterHelpPanel,
inserterSearch,
delayedFilterValue,
]
);
);
}, [
destinationRootClientId,
onInsert,
onHover,
showMostUsedBlocks,
showInserterHelpPanel,
] );

const patternsTab = useMemo(
() => (
<>
{ inserterSearch }
{ ! delayedFilterValue && (
<BlockPatternsTab
const patternsTab = useMemo( () => {
return (
<BlockPatternsTab
rootClientId={ destinationRootClientId }
onInsert={ onInsertPattern }
onSelectCategory={ onClickPatternCategory }
selectedCategory={ selectedPatternCategory }
>
{ showPatternPanel && (
<PatternCategoryPreviewPanel
rootClientId={ destinationRootClientId }
onInsert={ onInsertPattern }
onSelectCategory={ onClickPatternCategory }
selectedCategory={ selectedPatternCategory }
>
{ showPatternPanel && (
<PatternCategoryPreviewPanel
rootClientId={ destinationRootClientId }
onInsert={ onInsertPattern }
onHover={ onHoverPattern }
category={ selectedPatternCategory }
patternFilter={ patternFilter }
showTitlesAsTooltip
/>
) }
</BlockPatternsTab>
onHover={ onHoverPattern }
category={ selectedPatternCategory }
patternFilter={ patternFilter }
showTitlesAsTooltip
/>
) }
</>
),
[
destinationRootClientId,
onHoverPattern,
onInsertPattern,
onClickPatternCategory,
patternFilter,
selectedPatternCategory,
showPatternPanel,
inserterSearch,
delayedFilterValue,
]
);
</BlockPatternsTab>
);
}, [
destinationRootClientId,
onHoverPattern,
onInsertPattern,
onClickPatternCategory,
patternFilter,
selectedPatternCategory,
showPatternPanel,
] );

const mediaTab = useMemo(
() => (
const mediaTab = useMemo( () => {
return (
<MediaTab
rootClientId={ destinationRootClientId }
selectedCategory={ selectedMediaCategory }
Expand All @@ -268,24 +253,14 @@ function InserterMenu(
/>
) }
</MediaTab>
),
[
destinationRootClientId,
onInsert,
selectedMediaCategory,
setSelectedMediaCategory,
showMediaPanel,
]
);

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

// When the pattern panel is showing, we want to use zoom out mode
useZoomOut( showPatternPanel );
Expand Down Expand Up @@ -318,11 +293,16 @@ function InserterMenu(
ref={ ref }
>
<div className="block-editor-inserter__main-area">
<InserterTabs
ref={ tabsRef }
onSelect={ handleSetSelectedTab }
tabsContents={ inserterTabsContents }
/>
<InserterTabs ref={ tabsRef } onSelect={ handleSetSelectedTab }>
{ inserterSearch }
{ selectedTab === 'blocks' &&
! delayedFilterValue &&
blocksTab }
{ selectedTab === 'patterns' &&
! delayedFilterValue &&
patternsTab }
{ selectedTab === 'media' && mediaTab }
</InserterTabs>
</div>
{ showInserterHelpPanel && hoveredItem && (
<Popover
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inserter/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const mediaTab = {
title: __( 'Media' ),
};

function InserterTabs( { onSelect, tabsContents }, ref ) {
function InserterTabs( { onSelect, children }, ref ) {
const tabs = [ blocksTab, patternsTab, mediaTab ];

return (
Expand All @@ -53,7 +53,7 @@ function InserterTabs( { onSelect, tabsContents }, ref ) {
focusable={ false }
className="block-editor-inserter__tabpanel"
>
{ tabsContents[ tab.name ] }
{ children }
</Tabs.TabPanel>
) ) }
</Tabs>
Expand Down

0 comments on commit 123e216

Please sign in to comment.