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

WIP just testing perf metrics #66770

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
+5 −37
Draft

WIP just testing perf metrics #66770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
33 changes: 3 additions & 30 deletions packages/block-editor/src/components/inserter/block-types-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { __, _x } from '@wordpress/i18n';
import { useMemo, useEffect, forwardRef } from '@wordpress/element';
import { useAsyncList } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -19,14 +18,6 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];

const MAX_SUGGESTED_ITEMS = 6;

/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation and rerendering the component.
*
* @type {Array}
*/
const EMPTY_ARRAY = [];

export function BlockTypesTabPanel( {
items,
collections,
Expand Down Expand Up @@ -65,24 +56,6 @@ export function BlockTypesTabPanel( {
// Hide block preview on unmount.
useEffect( () => () => onHover( null ), [] );

/**
* The inserter contains a big number of blocks and opening it is a costful operation.
* The rendering is the most costful part of it, in order to improve the responsiveness
* of the "opening" action, these lazy lists allow us to render the inserter category per category,
* once all the categories are rendered, we start rendering the collections and the uncategorized block types.
*/
const currentlyRenderedCategories = useAsyncList( categories );
const didRenderAllCategories =
categories.length === currentlyRenderedCategories.length;

// Async List requires an array.
const collectionEntries = useMemo( () => {
return Object.entries( collections );
}, [ collections ] );
const currentlyRenderedCollections = useAsyncList(
didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
);

return (
<div className={ className }>
{ showMostUsedBlocks &&
Expand All @@ -100,7 +73,7 @@ export function BlockTypesTabPanel( {
</InserterPanel>
) }

{ currentlyRenderedCategories.map( ( category ) => {
{ categories.map( ( category ) => {
const categoryItems = items.filter(
( item ) => item.category === category.slug
);
Expand All @@ -123,7 +96,7 @@ export function BlockTypesTabPanel( {
);
} ) }

{ didRenderAllCategories && uncategorizedItems.length > 0 && (
{ uncategorizedItems.length > 0 && (
<InserterPanel
className="block-editor-inserter__uncategorized-blocks-panel"
title={ __( 'Uncategorized' ) }
Expand All @@ -137,7 +110,7 @@ export function BlockTypesTabPanel( {
</InserterPanel>
) }

{ currentlyRenderedCollections.map(
{ Object.entries( collections ).map(
( [ namespace, collection ] ) => {
const collectionItems = itemsPerCollection[ namespace ];
if ( ! collectionItems || ! collectionItems.length ) {
Expand Down
9 changes: 2 additions & 7 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 @@ -4,7 +4,7 @@
import { useMemo, useEffect } from '@wordpress/element';
import { __, _n, sprintf } from '@wordpress/i18n';
import { VisuallyHidden } from '@wordpress/components';
import { useDebounce, useAsyncList } from '@wordpress/compose';
import { useDebounce } from '@wordpress/compose';
import { speak } from '@wordpress/a11y';
import { useSelect } from '@wordpress/data';

Expand All @@ -25,7 +25,6 @@ import { orderBy } from '../../utils/sorting';
import { orderInserterBlockItems } from '../../utils/order-inserter-block-items';
import { store as blockEditorStore } from '../../store';

const INITIAL_INSERTER_RESULTS = 9;
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation and rerendering the component.
Expand Down Expand Up @@ -156,10 +155,6 @@ function InserterSearchResults( {
filteredBlockPatterns,
] );

const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
step: INITIAL_INSERTER_RESULTS,
} );

const hasItems =
filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;

Expand All @@ -168,7 +163,7 @@ function InserterSearchResults( {
title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
>
<BlockTypesList
items={ currentShownBlockTypes }
items={ filteredBlockTypes }
onSelect={ onSelectBlockType }
onHover={ onHover }
label={ __( 'Blocks' ) }
Expand Down
Loading