From 79318ebaab8e2cf46b128548818c08140cae4bc4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 13 May 2020 09:48:27 -0400 Subject: [PATCH] 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 --- .../src/components/inserter/block-list.js | 35 ++++++++++++++----- packages/blocks/src/api/registration.js | 16 ++++----- packages/blocks/src/api/test/registration.js | 25 +++---------- packages/blocks/src/store/test/selectors.js | 23 +++++++----- .../manage-blocks-modal/category.js | 4 +-- .../components/manage-blocks-modal/manager.js | 9 ++++- 6 files changed, 64 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index 077a0432acdbd0..6ac48ccf3bebc5 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/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 && ( + + + + ) } + { ! hasChildItems && map( collections, ( collection, namespace ) => { const collectionItems = itemsPerCollection[ namespace ]; diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js index 6b165502173feb..d20af322af4fd2 100644 --- a/packages/blocks/src/api/registration.js +++ b/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.' ); diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js index d61b6501ae2d1c..08e4c11153e347 100644 --- a/packages/blocks/src/api/test/registration.js +++ b/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', () => { diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js index 8ee2fd064bbff7..636228f7835acb 100644 --- a/packages/blocks/src/store/test/selectors.js +++ b/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 ); + } ); + } } ); } ); diff --git a/packages/edit-post/src/components/manage-blocks-modal/category.js b/packages/edit-post/src/components/manage-blocks-modal/category.js index 5df158fe254333..3169115c86b83b 100644 --- a/packages/edit-post/src/components/manage-blocks-modal/category.js +++ b/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={ { category.title } } + label={ { title } } /> ( ) ) } + ! category + ) } + /> );