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

Refactor InserterTabs to use children and remove re-memoizing #61295

Merged
merged 3 commits into from
May 2, 2024
Merged

Refactor InserterTabs to use children and remove re-memoizing #61295

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
2b02e30
Refactor InserterTabs to use children and remove re-memoizing
jeryj May 1, 2024
4483d6a
don't make selectedTab a dependency of each tab
scruffian May 2, 2024
dffc184
cast the categories to a bool
scruffian May 2, 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
168 changes: 74 additions & 94 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 @@ -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
Open in desktop
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
Loading