@wordpress/block-editor 9.3.0 → 9.6.0

package/src/components/inserter/block-types-tab.native.js

@@ -1,36 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockTypesList from '../block-types-list';
 import useClipboardBlock from './hooks/use-clipboard-block';
-import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
+import useBlockTypesState from './hooks/use-block-types-state';
 
-function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
-	const clipboardBlock = useClipboardBlock( rootClientId );
-
-	const { blockTypes } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const blockItems = filterInserterItems(
-				getInserterItems( rootClientId )
-			);
+const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
-			return {
-				blockTypes: clipboardBlock
-					? [ clipboardBlock, ...blockItems ]
-					: blockItems,
-			};
-		},
-		[ rootClientId ]
+function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
+	const [ rawBlockTypes, , collections ] = useBlockTypesState(
+		rootClientId,
+		onSelect
 	);
-
+	const clipboardBlock = useClipboardBlock( rootClientId );
+	const filteredBlockTypes = filterInserterItems( rawBlockTypes );
+	const blockTypes = clipboardBlock
+		? [ clipboardBlock, ...filteredBlockTypes ]
+		: filteredBlockTypes;
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 
@@ -39,10 +32,38 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 		onSelect( ...args );
 	};
 
+	const collectionSections = useMemo( () => {
+		const result = [];
+		Object.keys( collections ).forEach( ( namespace ) => {
+			const data = items.filter(
+				( item ) => getBlockNamespace( item ) === namespace
+			);
+			if ( data.length > 0 ) {
+				result.push(
+					createInserterSection( {
+						key: `collection-${ namespace }`,
+						metadata: {
+							icon: collections[ namespace ].icon,
+							title: collections[ namespace ].title,
+						},
+						items: data,
+					} )
+				);
+			}
+		} );
+
+		return result;
+	}, [ items, collections ] );
+
+	const sections = [
+		createInserterSection( { key: 'default', items } ),
+		...collectionSections,
+	];
+
 	return (
 		<BlockTypesList
 			name="Blocks"
-			items={ items }
+			sections={ sections }
 			onSelect={ handleSelect }
 			listProps={ listProps }
 		/>

package/src/components/inserter/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { size } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -233,10 +232,9 @@ export default compose( [
 		const settings = getSettings();
 
 		const hasSingleBlockType =
-			size( allowedBlocks ) === 1 &&
-			size(
-				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-			) === 0;
+			allowedBlocks?.length === 1 &&
+			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+				?.length === 0;
 
 		let allowedBlockType = false;
 		if ( hasSingleBlockType ) {

package/src/components/inserter/preview-panel.js

@@ -5,7 +5,6 @@ import {
 	isReusableBlock,
 	createBlock,
 	getBlockFromExample,
-	getBlockType,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -16,31 +15,24 @@ import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';
 
 function InserterPreviewPanel( { item } ) {
-	const { name, title, icon, description, initialAttributes } = item;
-	const hoveredItemBlockType = getBlockType( name );
+	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
-				{ isReusable || hoveredItemBlockType?.example ? (
+				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							__experimentalPadding={ 16 }
-							viewportWidth={
-								hoveredItemBlockType.example?.viewportWidth ??
-								500
-							}
+							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
-								hoveredItemBlockType.example
+								example
 									? getBlockFromExample( item.name, {
 											attributes: {
-												...hoveredItemBlockType.example
-													.attributes,
+												...example.attributes,
 												...initialAttributes,
 											},
-											innerBlocks:
-												hoveredItemBlockType.example
-													.innerBlocks,
+											innerBlocks: example.innerBlocks,
 									  } )
 									: createBlock( name, initialAttributes )
 							}

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -8,7 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 	const { items } = useSelect(
@@ -23,10 +23,12 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 		[ rootClientId ]
 	);
 
+	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
+
 	return (
 		<BlockTypesList
 			name="ReusableBlocks"
-			items={ items }
+			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
 		/>

package/src/components/inserter/search-results.native.js

@@ -11,7 +11,7 @@ import BlockTypesList from '../block-types-list';
 import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { filterInserterItems } from './utils';
+import { createInserterSection, filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
@@ -51,7 +51,9 @@ function InserterSearchResults( {
 		<BlockTypesList
 			name="Blocks"
 			initialNumToRender={ isFullScreen ? 10 : 3 }
-			{ ...{ items, onSelect: handleSelect, listProps } }
+			sections={ [ createInserterSection( { key: 'search', items } ) ] }
+			onSelect={ handleSelect }
+			listProps={ listProps }
 		/>
 	);
 }

package/src/components/inserter/style.scss

@@ -342,7 +342,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height;
+		top: $header-height + $grid-unit-20;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

package/src/components/inserter/test/block-types-tab.native.js

@@ -18,6 +18,8 @@ jest.mock( '../hooks/use-clipboard-block' );
 jest.mock( '@wordpress/data/src/components/use-select' );
 
 const selectMock = {
+	getCategories: jest.fn().mockReturnValue( [] ),
+	getCollections: jest.fn().mockReturnValue( [] ),
 	getInserterItems: jest.fn().mockReturnValue( [] ),
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),

package/src/components/inserter/test/utils.native.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { createInserterSection } from '../utils';
+
+describe( 'createInserterSection', () => {
+	it( 'returns the expected object shape', () => {
+		const key = 'mock-1';
+		const items = [ 1, 2, 3 ];
+		const metadata = { icon: 'icon-mock', title: 'Title Mock' };
+
+		expect( createInserterSection( { key, metadata, items } ) ).toEqual(
+			expect.objectContaining( {
+				metadata,
+				data: [ { key, list: items } ],
+			} )
+		);
+	} );
+
+	it( 'return always includes metadata', () => {
+		const key = 'mock-1';
+		const items = [ 1, 2, 3 ];
+
+		expect( createInserterSection( { key, items } ) ).toEqual(
+			expect.objectContaining( {
+				metadata: {},
+				data: [ { key, list: items } ],
+			} )
+		);
+	} );
+
+	it( 'requires a unique key', () => {
+		expect( () => {
+			createInserterSection( { items: [ 1, 2, 3 ] } );
+		} ).toThrow( 'A unique key for the section must be provided.' );
+	} );
+} );

package/src/components/inserter/utils.native.js

@@ -33,3 +33,14 @@ export function filterInserterItems(
 		blockAllowed( block, { onlyReusable, allowReusable } )
 	);
 }
+
+export function createInserterSection( { key, metadata = {}, items } ) {
+	if ( ! key ) {
+		throw new Error( 'A unique key for the section must be provided.' );
+	}
+
+	return {
+		metadata,
+		data: [ { key, list: items } ],
+	};
+}

package/src/components/inserter-list-item/index.js

@@ -11,6 +11,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 } from '@wordpress/blocks';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER } from '@wordpress/keycodes';
 
 /**
@@ -135,7 +136,9 @@ function InserterListItem( {
 							<BlockIcon icon={ item.icon } showColors />
 						</span>
 						<span className="block-editor-block-types-list__item-title">
-							{ item.title }
+							<Truncate numberOfLines={ 3 }>
+								{ item.title }
+							</Truncate>
 						</span>
 					</InserterListboxItem>
 				</div>

package/src/components/link-control/index.js

@@ -235,6 +235,7 @@ function LinkControl( {
 			internalTextValue !== value?.title
 		) {
 			onChange( {
+				...value,
 				url: currentInputValue,
 				title: internalTextValue,
 			} );

package/src/components/link-control/test/fixtures/index.js

@@ -1,7 +1,6 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
+let uniqueIdCounter = 1;
+
+export const uniqueId = () => uniqueIdCounter++;
 
 export const fauxEntitySuggestions = [
 	{

package/src/components/link-control/test/index.js

@@ -4,7 +4,6 @@
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
 import { queryByText, queryByRole } from '@testing-library/react';
-import { default as lodash, first, last, nth, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -18,13 +17,20 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import LinkControl from '../';
-import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
+import {
+	fauxEntitySuggestions,
+	fetchFauxEntitySuggestions,
+	uniqueId,
+} from './fixtures';
 
 // Mock debounce() so that it runs instantly.
-lodash.debounce = jest.fn( ( callback ) => {
-	callback.cancel = jest.fn();
-	return callback;
-} );
+jest.mock( 'lodash', () => ( {
+	...jest.requireActual( 'lodash' ),
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
 
 const mockFetchSearchSuggestions = jest.fn();
 
@@ -357,7 +363,7 @@ describe( 'Searching for a link', () => {
 
 	it( 'should display only search suggestions when current input value is not URL-like', async () => {
 		const searchTerm = 'Hello world';
-		const firstFauxSuggestion = first( fauxEntitySuggestions );
+		const firstFauxSuggestion = fauxEntitySuggestions[ 0 ];
 
 		act( () => {
 			render( <LinkControl />, container );
@@ -377,9 +383,9 @@ describe( 'Searching for a link', () => {
 
 		const searchResultElements = getSearchResults();
 
-		const firstSearchResultItemHTML =
-			first( searchResultElements ).innerHTML;
-		const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
+		const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
+		const lastSearchResultItemHTML =
+			searchResultElements[ searchResultElements.length - 1 ].innerHTML;
 
 		expect( searchResultElements ).toHaveLength(
 			fauxEntitySuggestions.length
@@ -502,7 +508,8 @@ describe( 'Searching for a link', () => {
 			const searchResultElements = getSearchResults();
 
 			const lastSearchResultItemHTML =
-				last( searchResultElements ).innerHTML;
+				searchResultElements[ searchResultElements.length - 1 ]
+					.innerHTML;
 			const additionalDefaultFallbackURLSuggestionLength = 1;
 
 			// We should see a search result for each of the expect search suggestions
@@ -974,11 +981,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				'[role="listbox"] [role="option"]'
 			);
 
-			const createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'Create:' )
-				)
-			);
+			const createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'Create:' )
+			)[ 0 ];
 
 			expect( createButton ).not.toBeNull();
 			expect( createButton.innerHTML ).toEqual(
@@ -1071,11 +1076,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			'[role="listbox"] [role="option"]'
 		);
 
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Create:' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Create:' )
+		)[ 0 ];
 
 		await act( async () => {
 			Simulate.click( createButton );
@@ -1143,11 +1146,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		const searchResultElements = container.querySelectorAll(
 			'[role="listbox"] [role="option"]'
 		);
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Create:' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Create:' )
+		)[ 0 ];
 
 		// Step down into the search results, highlighting the first result item.
 		act( () => {
@@ -1210,11 +1211,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			'[role="listbox"] [role="option"]'
 		);
 
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Custom suggestion text' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Custom suggestion text' )
+		)[ 0 ];
 
 		expect( createButton ).not.toBeNull();
 	} );
@@ -1241,11 +1240,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				const searchResultElements = container.querySelectorAll(
 					'[role="listbox"] [role="option"]'
 				);
-				const createButton = first(
-					Array.from( searchResultElements ).filter( ( result ) =>
-						result.innerHTML.includes( 'Create:' )
-					)
-				);
+				const createButton = Array.from( searchResultElements ).filter(
+					( result ) => result.innerHTML.includes( 'Create:' )
+				)[ 0 ];
 
 				// Verify input has no value.
 				expect( searchInput.value ).toBe( '' );
@@ -1275,11 +1272,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			const searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			const createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'New page' )
-				)
-			);
+			const createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'New page' )
+			)[ 0 ];
 
 			// Verify input has no value.
 			expect( searchInput.value ).toBe( '' );
@@ -1321,11 +1316,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 					'[role="listbox"] [role="option"]'
 				);
 
-				const createButton = first(
-					Array.from( searchResultElements ).filter( ( result ) =>
-						result.innerHTML.includes( 'New page' )
-					)
-				);
+				const createButton = Array.from( searchResultElements ).filter(
+					( result ) => result.innerHTML.includes( 'New page' )
+				)[ 0 ];
 
 				expect( createButton ).toBeFalsy(); // Shouldn't exist!
 			}
@@ -1366,11 +1359,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			let searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			let createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'Create:' )
-				)
-			);
+			let createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'Create:' )
+			)[ 0 ];
 
 			await act( async () => {
 				Simulate.click( createButton );
@@ -1407,18 +1398,16 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'New page' )
-				)
-			);
+			createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'New page' )
+			)[ 0 ];
 		} );
 	} );
 } );
 
 describe( 'Selecting links', () => {
 	it( 'should display a selected link corresponding to the provided "currentLink" prop', () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
@@ -1447,7 +1436,7 @@ describe( 'Selecting links', () => {
 	} );
 
 	it( 'should hide "selected" link UI and display search UI prepopulated with previously selected link title when "Change" button is clicked', () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
 			const [ link, setLink ] = useState( selectedLink );
@@ -1484,7 +1473,7 @@ describe( 'Selecting links', () => {
 
 	describe( 'Selection using mouse click', () => {
 		it.each( [
-			[ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // Entity search.
+			[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ], // Entity search.
 			[
 				'url',
 				'https://www.wordpress.org',
@@ -1528,7 +1517,7 @@ describe( 'Selecting links', () => {
 
 				const searchResultElements = getSearchResults();
 
-				const firstSearchSuggestion = first( searchResultElements );
+				const firstSearchSuggestion = searchResultElements[ 0 ];
 
 				// Simulate selecting the first of the search suggestions.
 				act( () => {
@@ -1557,7 +1546,7 @@ describe( 'Selecting links', () => {
 
 	describe( 'Selection using keyboard', () => {
 		it.each( [
-			[ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // Entity search.
+			[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ], // Entity search.
 			[
 				'url',
 				'https://www.wordpress.org',
@@ -1607,8 +1596,8 @@ describe( 'Selecting links', () => {
 
 				const searchResultElements = getSearchResults();
 
-				const firstSearchSuggestion = first( searchResultElements );
-				const secondSearchSuggestion = nth( searchResultElements, 1 );
+				const firstSearchSuggestion = searchResultElements[ 0 ];
+				const secondSearchSuggestion = searchResultElements[ 1 ];
 
 				let selectedSearchResultElement = container.querySelector(
 					'[role="option"][aria-selected="true"]'
@@ -1711,8 +1700,8 @@ describe( 'Selecting links', () => {
 
 			const searchResultElements = getSearchResults();
 
-			const firstSearchSuggestion = first( searchResultElements );
-			const secondSearchSuggestion = nth( searchResultElements, 1 );
+			const firstSearchSuggestion = searchResultElements[ 0 ];
+			const secondSearchSuggestion = searchResultElements[ 1 ];
 
 			let selectedSearchResultElement = container.querySelector(
 				'[role="option"][aria-selected="true"]'
@@ -1758,7 +1747,7 @@ describe( 'Selecting links', () => {
 
 describe( 'Addition Settings UI', () => {
 	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
 
 		const LinkControlConsumer = () => {
@@ -1791,7 +1780,7 @@ describe( 'Addition Settings UI', () => {
 	} );
 
 	it( 'should display a setting control with correct default state for each of the custom settings provided', async () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const customSettings = [
 			{
@@ -2266,7 +2255,7 @@ describe( 'Rich link previews', () => {
 } );
 
 describe( 'Controlling link title text', () => {
-	const selectedLink = first( fauxEntitySuggestions );
+	const selectedLink = fauxEntitySuggestions[ 0 ];
 
 	it( 'should not show a means to alter the link title text by default', async () => {
 		act( () => {
@@ -2285,7 +2274,7 @@ describe( 'Controlling link title text', () => {
 		'should not show the link title text input when the URL is `%s`',
 		async ( urlValue ) => {
 			const selectedLinkWithoutURL = {
-				...first( fauxEntitySuggestions ),
+				...fauxEntitySuggestions[ 0 ],
 				url: urlValue,
 			};
 
@@ -2428,10 +2417,12 @@ describe( 'Controlling link title text', () => {
 			Simulate.keyDown( textInput, { keyCode: ENTER } );
 		} );
 
-		expect( mockOnChange ).toHaveBeenCalledWith( {
-			title: textValue,
-			url: selectedLink.url,
-		} );
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: textValue,
+				url: selectedLink.url,
+			} )
+		);
 
 		// The text input should not be showing as the form is submitted.
 		expect(