Lodash: Refactor away from _.difference()

.eslintrc.js

@@ -89,6 +89,7 @@ module.exports = {
 							'defaults',
 							'defaultTo',
 							'delay',
+							'difference',
 							'differenceWith',
 							'dropRight',
 							'each',

packages/block-editor/src/components/list-view/use-block-selection.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -126,9 +121,8 @@ export default function useBlockSelection() {
 				return;
 			}
 
-			const selectionDiff = difference(
-				selectedBlocks,
-				updatedSelectedBlocks
+			const selectionDiff = selectedBlocks.filter(
+				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
 			);
 
 			let label;

packages/blocks/src/api/parser/fix-custom-classname.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { difference, omit } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * Internal dependencies
@@ -58,7 +58,10 @@ export function fixCustomClassname( blockAttributes, blockType, innerHTML ) {
 		const serialized = getSaveContent( blockType, attributesSansClassName );
 		const defaultClasses = getHTMLRootElementClasses( serialized );
 		const actualClasses = getHTMLRootElementClasses( innerHTML );
-		const customClasses = difference( actualClasses, defaultClasses );
+
+		const customClasses = actualClasses.filter(
+			( className ) => ! defaultClasses.includes( className )
+		);
 
 		if ( customClasses.length ) {
 			blockAttributes.className = customClasses.join( ' ' );

packages/blocks/src/api/raw-handling/is-inline-content.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -33,7 +28,9 @@ function isInline( node, contextTag ) {
 	];
 
 	return inlineAllowedTagGroups.some(
-		( tagGroup ) => difference( [ tag, contextTag ], tagGroup ).length === 0
+		( tagGroup ) =>
+			[ tag, contextTag ].filter( ( t ) => ! tagGroup.includes( t ) )
+				.length === 0
 	);
 }
 

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `ComboboxControl`: Normalize hyphen-like characters to an ASCII hyphen ([#42942](https://github.com/WordPress/gutenberg/pull/42942)).
+-   `FormTokenField`: Refactor away from `_.difference()` ([#43224](https://github.com/WordPress/gutenberg/pull/43224/)).
 
 ## 19.17.0 (2022-08-10)
 

packages/components/src/form-token-field/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, clone, uniq, map, difference, some } from 'lodash';
+import { last, clone, uniq, map, some } from 'lodash';
 import classnames from 'classnames';
 import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
 
@@ -475,7 +475,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		} );
 
 		if ( match.length === 0 ) {
-			_suggestions = difference( _suggestions, normalizedValue );
+			_suggestions = _suggestions.filter(
+				( suggestion ) => ! normalizedValue.includes( suggestion )
+			);
 		} else {
 			match = match.toLocaleLowerCase();
 

packages/edit-navigation/src/store/actions.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -128,10 +123,15 @@ const batchSaveMenuItems =
 		);
 
 		// Delete menu items.
-		const deletedIds = difference(
-			oldMenuItems.map( ( { id } ) => id ),
-			blocksTreeToList( navBlockAfterUpdates ).map( getRecordIdFromBlock )
-		);
+		const deletedIds = oldMenuItems
+			.map( ( { id } ) => id )
+			.filter(
+				( id ) =>
+					! blocksTreeToList( navBlockAfterUpdates )
+						.map( getRecordIdFromBlock )
+						.includes( id )
+			);
+
 		await dispatch( batchDeleteMenuItems( deletedIds ) );
 
 		return navBlockAfterUpdates;

packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,7 +6,7 @@ import { MenuItem } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 
 const isEverySelectedBlockAllowed = ( selected, allowed ) =>
-	difference( selected, allowed ).length === 0;
+	selected.filter( ( id ) => ! allowed.includes( id ) ).length === 0;
 
 /**
  * Plugins may want to add an item to the menu either for every block