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

[Widgets screen] Fix categorization not showing in the global inserter #28036

Merged
merged 5 commits into from
Jan 19, 2021
Merged

[Widgets screen] Fix categorization not showing in the global inserter #28036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7b3a7dd
Make widget-area a special block to show cateogrization in the inserter
kevin940726 Jan 7, 2021
ce4d88a
Fix test
kevin940726 Jan 7, 2021
78e983a
Remove outdated childBlocks check in the inserter
kevin940726 Jan 15, 2021
82d25b6
Add test for the widgets screen
kevin940726 Jan 15, 2021
473484c
Remove unused ChildBlocks component
kevin940726 Jan 18, 2021
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
118 changes: 43 additions & 75 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 @@ -7,15 +7,12 @@ import { map, findIndex, flow, sortBy, groupBy, orderBy } from 'lodash';
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { useMemo, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import BlockTypesList from '../block-types-list';
import ChildBlocks from './child-blocks';
import InserterPanel from './panel';
import useBlockTypesState from './hooks/use-block-types-state';

Expand All @@ -34,17 +31,6 @@ export function BlockTypesTab( {
onInsert
);

const hasChildItems = useSelect(
( select ) => {
const { getBlockName } = select( 'core/block-editor' );
const { getChildBlockNames } = select( blocksStore );
const rootBlockName = getBlockName( rootClientId );

return !! getChildBlockNames( rootBlockName ).length;
},
[ rootClientId ]
);

const suggestedItems = useMemo( () => {
return orderBy( items, [ 'frecency' ], [ 'desc' ] ).slice(
0,
Expand Down Expand Up @@ -94,56 +80,39 @@ export function BlockTypesTab( {

return (
<div>
{ hasChildItems && (
<ChildBlocks rootClientId={ rootClientId }>
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
{ showMostUsedBlocks && !! suggestedItems.length && (
<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
<BlockTypesList
// Pass along every block, as useBlockTypesState() and
// getInserterItems() will have already filtered out
// non-child blocks.
items={ items }
items={ suggestedItems }
onSelect={ onSelectItem }
onHover={ onHover }
label={ __( 'Child Blocks' ) }
label={ _x( 'Most used', 'blocks' ) }
/>
</ChildBlocks>
</InserterPanel>
) }

{ showMostUsedBlocks &&
! hasChildItems &&
!! suggestedItems.length && (
<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
{ map( categories, ( category ) => {
const categoryItems = itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
return (
<InserterPanel
key={ category.slug }
title={ category.title }
icon={ category.icon }
>
<BlockTypesList
items={ suggestedItems }
items={ categoryItems }
onSelect={ onSelectItem }
onHover={ onHover }
label={ _x( 'Most used', 'blocks' ) }
label={ category.title }
/>
</InserterPanel>
) }

{ ! hasChildItems &&
map( categories, ( category ) => {
const categoryItems = itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
return (
<InserterPanel
key={ category.slug }
title={ category.title }
icon={ category.icon }
>
<BlockTypesList
items={ categoryItems }
onSelect={ onSelectItem }
onHover={ onHover }
label={ category.title }
/>
</InserterPanel>
);
} ) }

{ ! hasChildItems && !! uncategorizedItems.length && (
);
} ) }

{ ! uncategorizedItems.length && (
<InserterPanel
className="block-editor-inserter__uncategorized-blocks-panel"
title={ __( 'Uncategorized' ) }
Expand All @@ -157,28 +126,27 @@ export function BlockTypesTab( {
</InserterPanel>
) }

{ ! hasChildItems &&
map( collections, ( collection, namespace ) => {
const collectionItems = itemsPerCollection[ namespace ];
if ( ! collectionItems || ! collectionItems.length ) {
return null;
}

return (
<InserterPanel
key={ namespace }
title={ collection.title }
icon={ collection.icon }
>
<BlockTypesList
items={ collectionItems }
onSelect={ onSelectItem }
onHover={ onHover }
label={ collection.title }
/>
</InserterPanel>
);
} ) }
{ map( collections, ( collection, namespace ) => {
const collectionItems = itemsPerCollection[ namespace ];
if ( ! collectionItems || ! collectionItems.length ) {
return null;
}

return (
<InserterPanel
key={ namespace }
title={ collection.title }
icon={ collection.icon }
>
<BlockTypesList
items={ collectionItems }
onSelect={ onSelectItem }
onHover={ onHover }
label={ collection.title }
/>
</InserterPanel>
);
} ) }
</div>
);
}
Expand Down
35 changes: 0 additions & 35 deletions packages/block-editor/src/components/inserter/child-blocks.js
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions packages/block-editor/src/components/inserter/test/block-types-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { render, fireEvent } from '@testing-library/react';
* WordPress dependencies
*/
import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand Down Expand Up @@ -80,8 +79,6 @@ describe( 'InserterMenu', () => {
categories,
collections,
] );

useSelect.mockImplementation( () => false );
} );

it( 'should show nothing if there are no items', () => {
Expand Down Expand Up @@ -138,18 +135,6 @@ describe( 'InserterMenu', () => {
expect( blocks[ 2 ].textContent ).toBe( 'Some Other Block' );
} );

it( 'displays child blocks UI when root block has child blocks', () => {
useSelect.mockImplementation( () => true );

const { container } = render( <InserterBlockList /> );

const childBlocksContent = container.querySelector(
'.block-editor-inserter__child-blocks'
);

expect( childBlocksContent ).not.toBeNull();
} );

it( 'should disable items with `isDisabled`', () => {
const { container } = initializeAllClosedMenuState();
const layoutTabContent = container.querySelectorAll(
Expand Down
5 changes: 5 additions & 0 deletions packages/e2e-tests/specs/widgets/adding-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,11 @@ describe( 'Widgets screen', () => {
const blockLibrary = await page.waitForSelector(
'[aria-label="Block Library"][role="region"]'
);

// Check that there are categorizations in the inserter (#26329).
const categoryHeader = await blockLibrary.$$( 'h2' );
expect( categoryHeader.length > 0 ).toBe( true );

const [ addParagraphBlock ] = await blockLibrary.$x(
'//*[@role="option"][*[text()="Paragraph"]]'
);
Expand Down