Block API: Allow block registration without category (#22280)

* Block API: Allow block registration without category

* Block Editor: Show uncategorized block items in inserter

* Blocks: Add test case to verify behavior omitting category

Search implementation leverages block category, which may be absent. It did not actually require changes to the implementation to support, but the test case can help assure this continues to be supported into the future.

* Edit Post: Display uncategorized blocks as section in Manage Blocks

* Block Editor: Replace Lodash with native array filter

* Block Editor: Inserter: Avoid zero output in rendering

packages/block-editor/src/components/inserter/block-list.js

@@ -4,7 +4,6 @@
 import {
  map,
  includes,
- filter,
  findIndex,
  flow,
  sortBy,
@@ -119,20 +118,25 @@ export function InserterBlockList( {
  }, [ filterValue, items, categories, collections ] );
 
  const childItems = useMemo( () => {
- return filter( filteredItems, ( { name } ) =>
+ return filteredItems.filter( ( { name } ) =>
  includes( rootChildBlocks, name )
  );
  }, [ filteredItems, rootChildBlocks ] );
 
  const suggestedItems = useMemo( () => {
- return filter( items, ( item ) => item.utility > 0 ).slice(
- 0,
- MAX_SUGGESTED_ITEMS
- );
+ return items
+ .filter( ( item ) => item.utility > 0 )
+ .slice( 0, MAX_SUGGESTED_ITEMS );
  }, [ items ] );
 
  const reusableItems = useMemo( () => {
- return filter( filteredItems, { category: 'reusable' } );
+ return filteredItems.filter(
+ ( { category } ) => category === 'reusable'
+ );
+ }, [ filteredItems ] );
+
+ const uncategorizedItems = useMemo( () => {
+ return filteredItems.filter( ( item ) => ! item.category );
  }, [ filteredItems ] );
 
  const itemsPerCategory = useMemo( () => {
@@ -145,7 +149,9 @@ export function InserterBlockList( {
 
  return flow(
  ( itemList ) =>
- filter( itemList, ( item ) => item.category !== 'reusable' ),
+ itemList.filter(
+ ( item ) => item.category && item.category !== 'reusable'
+ ),
  ( itemList ) => sortBy( itemList, getCategoryIndex ),
  ( itemList ) => groupBy( itemList, 'category' )
  )( filteredItems );
@@ -219,6 +225,19 @@ export function InserterBlockList( {
  );
  } ) }
 
+ { ! hasChildItems && !! uncategorizedItems.length && (
+ <InserterPanel
+ className="block-editor-inserter__uncategorized-blocks-panel"
+ title={ __( 'Uncategorized' ) }
+ >
+ <BlockTypesList
+ items={ uncategorizedItems }
+ onSelect={ onSelectItem }
+ onHover={ onHover }
+ />
+ </InserterPanel>
+ ) }
+
  { ! hasChildItems &&
  map( collections, ( collection, namespace ) => {
  const collectionItems = itemsPerCollection[ namespace ];

packages/blocks/src/api/registration.js

@@ -1,4 +1,4 @@
-/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+/* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
 
 /**
  * External dependencies
@@ -203,20 +203,20 @@ export function registerBlockType( name, settings ) {
  console.error( 'The "edit" property must be a valid function.' );
  return;
  }
- if ( ! ( 'category' in settings ) ) {
- console.error( 'The block "' + name + '" must have a category.' );
- return;
- }
  if (
  'category' in settings &&
  ! some( select( 'core/blocks' ).getCategories(), {
  slug: settings.category,
  } )
  ) {
- console.error(
- 'The block "' + name + '" must have a registered category.'
+ console.warn(
+ 'The block "' +
+ name +
+ '" is registered with an invalid category "' +
+ settings.category +
+ '".'
  );
- return;
+ delete settings.category;
  }
  if ( ! ( 'title' in settings ) || settings.title === '' ) {
  console.error( 'The block "' + name + '" must have a title.' );

packages/blocks/src/api/test/registration.js

@@ -173,23 +173,7 @@ describe( 'blocks', () => {
  expect( block ).toBeUndefined();
  } );
 
- it( 'should reject blocks without category', () => {
- const blockType = {
- settingName: 'settingValue',
- save: noop,
- title: 'block title',
- },
- block = registerBlockType(
- 'my-plugin/fancy-block-8',
- blockType
- );
- expect( console ).toHaveErroredWith(
- 'The block "my-plugin/fancy-block-8" must have a category.'
- );
- expect( block ).toBeUndefined();
- } );
-
- it( 'should reject blocks with non registered category.', () => {
+ it( 'should unset category of blocks with non registered category.', () => {
  const blockType = {
  save: noop,
  category: 'custom-category-slug',
@@ -199,10 +183,11 @@ describe( 'blocks', () => {
  'my-plugin/fancy-block-9',
  blockType
  );
- expect( console ).toHaveErroredWith(
- 'The block "my-plugin/fancy-block-9" must have a registered category.'
+ expect( console ).toHaveWarnedWith(
+ 'The block "my-plugin/fancy-block-9" is registered with an invalid category "custom-category-slug".'
  );
- expect( block ).toBeUndefined();
+ expect( block ).not.toBeUndefined();
+ expect( block.category ).toBeUndefined();
  } );
 
  it( 'should reject blocks without title', () => {

packages/blocks/src/store/test/selectors.js

@@ -1,6 +1,8 @@
 /**
  * External dependencies
  */
+import { omit } from 'lodash';
+
 import deepFreeze from 'deep-freeze';
 
 /**
@@ -243,6 +245,7 @@ describe( 'selectors', () => {
  describe.each( [
  [ 'name', name ],
  [ 'block type', blockType ],
+ [ 'block type without category', omit( blockType, 'category' ) ],
  ] )( 'by %s', ( label, nameOrType ) => {
  it( 'should return false if not match', () => {
  const result = isMatchingSearchTerm(
@@ -304,15 +307,17 @@ describe( 'selectors', () => {
  expect( result ).toBe( true );
  } );
 
- it( 'should return true if match using the categories', () => {
- const result = isMatchingSearchTerm(
- state,
- nameOrType,
- 'COMMON'
- );
-
- expect( result ).toBe( true );
- } );
+ if ( nameOrType.category ) {
+ it( 'should return true if match using the categories', () => {
+ const result = isMatchingSearchTerm(
+ state,
+ nameOrType,
+ 'COMMON'
+ );
+
+ expect( result ).toBe( true );
+ } );
+ }
  } );
  } );
 

packages/edit-post/src/components/manage-blocks-modal/category.js

@@ -19,7 +19,7 @@ import EditPostSettings from '../edit-post-settings';
 
 function BlockManagerCategory( {
  instanceId,
- category,
+ title,
  blockTypes,
  hiddenBlockTypes,
  toggleVisible,
@@ -70,7 +70,7 @@ function BlockManagerCategory( {
  onChange={ toggleAllVisible }
  className="edit-post-manage-blocks-modal__category-title"
  aria-checked={ ariaChecked }
- label={ <span id={ titleId }>{ category.title }</span> }
+ label={ <span id={ titleId }>{ title }</span> }
  />
  <BlockTypesChecklist
  blockTypes={ filteredBlockTypes }

packages/edit-post/src/components/manage-blocks-modal/manager.js

@@ -76,12 +76,19 @@ function BlockManager( {
  { categories.map( ( category ) => (
  <BlockManagerCategory
  key={ category.slug }
- category={ category }
+ title={ category.title }
  blockTypes={ filter( blockTypes, {
  category: category.slug,
  } ) }
  />
  ) ) }
+ <BlockManagerCategory
+ title={ __( 'Uncategorized' ) }
+ blockTypes={ filter(
+ blockTypes,
+ ( { category } ) => ! category
+ ) }
+ />
  </div>
  </div>
  );