diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 3b2ab959e3ef9..94b76b02ac694 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -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'; @@ -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, @@ -94,56 +80,39 @@ export function BlockTypesTab( { return (
- { hasChildItems && ( - + { showMostUsedBlocks && !! suggestedItems.length && ( + - + ) } - { showMostUsedBlocks && - ! hasChildItems && - !! suggestedItems.length && ( - + { map( categories, ( category ) => { + const categoryItems = itemsPerCategory[ category.slug ]; + if ( ! categoryItems || ! categoryItems.length ) { + return null; + } + return ( + - ) } - - { ! hasChildItems && - map( categories, ( category ) => { - const categoryItems = itemsPerCategory[ category.slug ]; - if ( ! categoryItems || ! categoryItems.length ) { - return null; - } - return ( - - - - ); - } ) } - - { ! hasChildItems && !! uncategorizedItems.length && ( + ); + } ) } + + { ! uncategorizedItems.length && ( ) } - { ! hasChildItems && - map( collections, ( collection, namespace ) => { - const collectionItems = itemsPerCollection[ namespace ]; - if ( ! collectionItems || ! collectionItems.length ) { - return null; - } - - return ( - - - - ); - } ) } + { map( collections, ( collection, namespace ) => { + const collectionItems = itemsPerCollection[ namespace ]; + if ( ! collectionItems || ! collectionItems.length ) { + return null; + } + + return ( + + + + ); + } ) }
); } diff --git a/packages/block-editor/src/components/inserter/child-blocks.js b/packages/block-editor/src/components/inserter/child-blocks.js deleted file mode 100644 index 6e18131954b9d..0000000000000 --- a/packages/block-editor/src/components/inserter/child-blocks.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * WordPress dependencies - */ -import { store as blocksStore } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import BlockIcon from '../block-icon'; - -export default function ChildBlocks( { rootClientId, children } ) { - const { rootBlockTitle, rootBlockIcon } = useSelect( ( select ) => { - const { getBlockType } = select( blocksStore ); - const { getBlockName } = select( 'core/block-editor' ); - const rootBlockName = getBlockName( rootClientId ); - const rootBlockType = getBlockType( rootBlockName ); - return { - rootBlockTitle: rootBlockType && rootBlockType.title, - rootBlockIcon: rootBlockType && rootBlockType.icon, - }; - } ); - - return ( -
- { ( rootBlockIcon || rootBlockTitle ) && ( -
- - { rootBlockTitle &&

{ rootBlockTitle }

} -
- ) } - { children } -
- ); -} diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.js b/packages/block-editor/src/components/inserter/test/block-types-tab.js index 2e0d465ce9f41..22e5f9bf81e7b 100644 --- a/packages/block-editor/src/components/inserter/test/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/test/block-types-tab.js @@ -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 @@ -80,8 +79,6 @@ describe( 'InserterMenu', () => { categories, collections, ] ); - - useSelect.mockImplementation( () => false ); } ); it( 'should show nothing if there are no items', () => { @@ -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( ); - - 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( diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js index 0123fab09fe86..657fb46d80104 100644 --- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js @@ -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"]]' );