Remove the utility property from the inserter items objects (#22523)

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -383,14 +383,6 @@ items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
 Each item object contains what's necessary to display a button in the
 inserter and handle its selection.
 
-The 'utility' property indicates how useful we think an item will be to the
-user. There are 4 levels of utility:
-
-1.  Blocks that are contextually useful (utility = 3)
-2.  Blocks that have been previously inserted (utility = 2)
-3.  Blocks that are in the common category (utility = 1)
-4.  All other blocks (utility = 0)
-
 The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>)
 that combines block usage frequenty and recency.
 
@@ -419,7 +411,6 @@ _Properties_
 -   _category_ `string`: Block category that the item is associated with.
 -   _keywords_ `Array<string>`: Keywords that can be searched to find this item.
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
--   _utility_ `number`: How useful we think this item is, between 0 and 3.
 -   _frecency_ `number`: Hueristic that combines frequency and recency.
 
 <a name="getLastMultiSelectedBlockClientId" href="#getLastMultiSelectedBlockClientId">#</a> **getLastMultiSelectedBlockClientId**

packages/block-editor/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 -   The block control value for `InnerBlocks` has been changed from `__experimentalBlocks` to `value` and is now considered a stable API.
+-   Removed the `utility` property from the objects returned by the `getInserterItems` selector.
 
 ## 3.7.0 (2020-02-10)
 

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

@@ -124,9 +124,7 @@ export function InserterBlockList( {
 	}, [ filteredItems, rootChildBlocks ] );
 
 	const suggestedItems = useMemo( () => {
-		return items
-			.filter( ( item ) => item.utility > 0 )
-			.slice( 0, MAX_SUGGESTED_ITEMS );
+		return items.slice( 0, MAX_SUGGESTED_ITEMS );
 	}, [ items ] );
 
 	const reusableItems = useMemo( () => {

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

@@ -89,20 +89,6 @@ describe( 'InserterMenu', () => {
 		assertNoResultsMessageToBePresent( container );
 	} );
 
-	it( 'should show only high utility items in the suggested tab', () => {
-		const { container } = render( <InserterBlockList /> );
-		const firstPanel = container.querySelector(
-			'.block-editor-inserter__panel-content'
-		);
-		const visibleBlocks = firstPanel.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
-		expect( visibleBlocks ).toHaveLength( 3 );
-		expect( visibleBlocks[ 0 ].textContent ).toEqual( 'Text' );
-		expect( visibleBlocks[ 1 ].textContent ).toEqual( 'Advanced Text' );
-		expect( visibleBlocks[ 2 ].textContent ).toEqual( 'Some Other Block' );
-	} );
-
 	it( 'should show items from the embed category in the embed tab', () => {
 		const { container } = initializeAllClosedMenuState();
 		const embedTabContent = container.querySelectorAll(

packages/block-editor/src/components/inserter/test/fixtures/index.js

@@ -31,7 +31,7 @@ export const withVariationsItem = {
 	title: 'With Variations',
 	category: 'widgets',
 	isDisabled: false,
-	utility: 0,
+	utility: 1,
 	variations: [
 		{
 			name: 'variation-one',
@@ -75,7 +75,7 @@ export const moreItem = {
 	title: 'More',
 	category: 'layout',
 	isDisabled: true,
-	utility: 0,
+	utility: 1,
 };
 
 export const youtubeItem = {
@@ -86,7 +86,7 @@ export const youtubeItem = {
 	category: 'embed',
 	keywords: [ 'google', 'video' ],
 	isDisabled: false,
-	utility: 0,
+	utility: 1,
 };
 
 export const textEmbedItem = {
@@ -96,7 +96,7 @@ export const textEmbedItem = {
 	title: 'A Text Embed',
 	category: 'embed',
 	isDisabled: false,
-	utility: 0,
+	utility: 1,
 };
 
 export const reusableItem = {
@@ -106,7 +106,7 @@ export const reusableItem = {
 	title: 'My reusable block',
 	category: 'reusable',
 	isDisabled: false,
-	utility: 0,
+	utility: 1,
 };
 
 export default [

packages/block-editor/src/store/selectors.js

@@ -42,27 +42,6 @@ import { SVG, Rect, G, Path } from '@wordpress/components';
  */
 
 // Module constants
-
-/**
- * @private
- */
-export const INSERTER_UTILITY_HIGH = 3;
-
-/**
- * @private
- */
-export const INSERTER_UTILITY_MEDIUM = 2;
-
-/**
- * @private
- */
-export const INSERTER_UTILITY_LOW = 1;
-
-/**
- * @private
- */
-export const INSERTER_UTILITY_NONE = 0;
-
 const MILLISECONDS_PER_HOUR = 3600 * 1000;
 const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
 const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
@@ -1261,14 +1240,6 @@ const canIncludeBlockTypeInInserter = ( state, blockType, rootClientId ) => {
  * Each item object contains what's necessary to display a button in the
  * inserter and handle its selection.
  *
- * The 'utility' property indicates how useful we think an item will be to the
- * user. There are 4 levels of utility:
- *
- * 1. Blocks that are contextually useful (utility = 3)
- * 2. Blocks that have been previously inserted (utility = 2)
- * 3. Blocks that are in the common category (utility = 1)
- * 4. All other blocks (utility = 0)
- *
  * The 'frecency' property is a heuristic (https://en.wikipedia.org/wiki/Frecency)
  * that combines block usage frequenty and recency.
  *
@@ -1289,22 +1260,10 @@ const canIncludeBlockTypeInInserter = ( state, blockType, rootClientId ) => {
  * @property {string[]} keywords          Keywords that can be searched to find this item.
  * @property {boolean}  isDisabled        Whether or not the user should be prevented from inserting
  *                                        this item.
- * @property {number}   utility           How useful we think this item is, between 0 and 3.
  * @property {number}   frecency          Hueristic that combines frequency and recency.
  */
 export const getInserterItems = createSelector(
 	( state, rootClientId = null ) => {
-		const calculateUtility = ( category, count, isContextual ) => {
-			if ( isContextual ) {
-				return INSERTER_UTILITY_HIGH;
-			} else if ( count > 0 ) {
-				return INSERTER_UTILITY_MEDIUM;
-			} else if ( category === 'common' ) {
-				return INSERTER_UTILITY_LOW;
-			}
-			return INSERTER_UTILITY_NONE;
-		};
-
 		const calculateFrecency = ( time, count ) => {
 			if ( ! time ) {
 				return count;
@@ -1342,7 +1301,6 @@ export const getInserterItems = createSelector(
 				);
 			}
 
-			const isContextual = isArray( blockType.parent );
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
 			const inserterVariations = blockType.variations.filter(
 				( { scope } ) => ! scope || scope.includes( 'inserter' )
@@ -1360,11 +1318,7 @@ export const getInserterItems = createSelector(
 				variations: inserterVariations,
 				example: blockType.example,
 				isDisabled,
-				utility: calculateUtility(
-					blockType.category,
-					count,
-					isContextual
-				),
+				utility: 1, // deprecated
 				frecency: calculateFrecency( time, count ),
 			};
 		};
@@ -1384,7 +1338,6 @@ export const getInserterItems = createSelector(
 			}
 
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
-			const utility = calculateUtility( 'reusable', count, false );
 			const frecency = calculateFrecency( time, count );
 
 			return {
@@ -1398,7 +1351,7 @@ export const getInserterItems = createSelector(
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,
-				utility,
+				utility: 1, // deprecated
 				frecency,
 			};
 		};
@@ -1419,7 +1372,7 @@ export const getInserterItems = createSelector(
 
 		return orderBy(
 			[ ...blockTypeInserterItems, ...reusableBlockInserterItems ],
-			[ 'utility', 'frecency' ],
+			[ 'frecency' ],
 			[ 'desc', 'desc' ]
 		);
 	},

packages/block-editor/src/store/test/selectors.js

@@ -62,9 +62,6 @@ const {
 	getBlockListSettings,
 	__experimentalGetBlockListSettingsForBlocks,
 	__experimentalGetLastBlockAttributeChanges,
-	INSERTER_UTILITY_HIGH,
-	INSERTER_UTILITY_MEDIUM,
-	INSERTER_UTILITY_LOW,
 	getLowestCommonAncestorWithSelectedBlock,
 } = selectors;
 
@@ -2323,7 +2320,7 @@ describe( 'selectors', () => {
 				keywords: [ 'testing' ],
 				variations: [],
 				isDisabled: false,
-				utility: 0,
+				utility: 1,
 				frecency: 0,
 			} );
 			const reusableBlockItem = items.find(
@@ -2340,12 +2337,12 @@ describe( 'selectors', () => {
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,
-				utility: 0,
+				utility: 1,
 				frecency: 0,
 			} );
 		} );
 
-		it( 'should order items by descending utility and frecency', () => {
+		it( 'should order items by descending frecency', () => {
 			const state = {
 				blocks: {
 					byClientId: {},
@@ -2384,12 +2381,12 @@ describe( 'selectors', () => {
 				( item ) => item.id
 			);
 			expect( itemIDs ).toEqual( [
-				'core/post-content-child',
 				'core/block/2',
 				'core/block/1',
+				'core/test-block-a',
 				'core/test-block-b',
 				'core/test-freeform',
-				'core/test-block-a',
+				'core/post-content-child',
 			] );
 		} );
 
@@ -2457,9 +2454,9 @@ describe( 'selectors', () => {
 			);
 			expect( firstBlockFirstCall ).toBe( firstBlockSecondCall );
 			expect( firstBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
+				'core/test-block-a',
 				'core/test-block-b',
 				'core/test-freeform',
-				'core/test-block-a',
 				'core/block/1',
 				'core/block/2',
 			] );
@@ -2470,9 +2467,9 @@ describe( 'selectors', () => {
 				'block4'
 			);
 			expect( secondBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
+				'core/test-block-a',
 				'core/test-block-b',
 				'core/test-freeform',
-				'core/test-block-a',
 				'core/block/1',
 				'core/block/2',
 			] );
@@ -2514,29 +2511,7 @@ describe( 'selectors', () => {
 			expect( testBlockBItem.isDisabled ).toBe( true );
 		} );
 
-		it( 'should give common blocks a low utility', () => {
-			const state = {
-				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
-					cache: {},
-				},
-				preferences: {
-					insertUsage: {},
-				},
-				blockListSettings: {},
-				settings: {},
-			};
-			const items = getInserterItems( state );
-			const testBlockBItem = items.find(
-				( item ) => item.id === 'core/test-block-b'
-			);
-			expect( testBlockBItem.utility ).toBe( INSERTER_UTILITY_LOW );
-		} );
-
-		it( 'should give used blocks a medium utility and set a frecency', () => {
+		it( 'should set a frecency', () => {
 			const state = {
 				blocks: {
 					byClientId: {},
@@ -2557,44 +2532,8 @@ describe( 'selectors', () => {
 			const reusableBlock2Item = items.find(
 				( item ) => item.id === 'core/test-block-b'
 			);
-			expect( reusableBlock2Item.utility ).toBe(
-				INSERTER_UTILITY_MEDIUM
-			);
 			expect( reusableBlock2Item.frecency ).toBe( 2.5 );
 		} );
-
-		it( 'should give contextual blocks a high utility', () => {
-			const state = {
-				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-b' },
-					},
-					attributes: {
-						block1: { attribute: {} },
-					},
-					order: {
-						'': [ 'block1' ],
-					},
-					parents: {
-						block1: '',
-					},
-					cache: {
-						block1: {},
-					},
-					controlledInnerBlocks: {},
-				},
-				preferences: {
-					insertUsage: {},
-				},
-				blockListSettings: {},
-				settings: {},
-			};
-			const items = getInserterItems( state, 'block1' );
-			const testBlockCItem = items.find(
-				( item ) => item.id === 'core/test-block-c'
-			);
-			expect( testBlockCItem.utility ).toBe( INSERTER_UTILITY_HIGH );
-		} );
 	} );
 
 	describe( 'isValidTemplate', () => {