Lodash: Refactor block editor away from _.find() (#46577)

.eslintrc.js

@@ -68,6 +68,7 @@ const restrictedImports = [
 			'every',
 			'extend',
 			'filter',
+			'find',
 			'findIndex',
 			'findKey',
 			'findLast',

packages/block-editor/src/components/alignment-control/ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 

packages/block-editor/src/components/block-styles/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { ScrollView } from 'react-native';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const renderedStyles = find( styles, 'isDefault' )
+	const renderedStyles = styles?.find( ( style ) => style.isDefault )
 		? styles
 		: [
 				{

packages/block-editor/src/components/block-styles/utils.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -23,13 +19,15 @@ export function getActiveStyle( styles, className ) {
 		}
 
 		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
+		const activeStyle = styles?.find(
+			( { name } ) => name === potentialStyleName
+		);
 		if ( activeStyle ) {
 			return activeStyle;
 		}
 	}
 
-	return find( styles, 'isDefault' );
+	return getDefaultStyle( styles );
 }
 
 /**
@@ -88,5 +86,5 @@ export function getRenderedStyles( styles ) {
  * @return {Object?}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
+	return styles?.find( ( style ) => style.isDefault );
 }

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -240,8 +239,7 @@ function wrapperSelector( select ) {
 	);
 
 	// Get the clientId of the topmost parent with the capture toolbars setting.
-	const capturingClientId = find(
-		blockParentsClientIds,
+	const capturingClientId = blockParentsClientIds.find(
 		( parentClientId ) =>
 			parentBlockListSettings[ parentClientId ]
 				?.__experimentalCaptureToolbars

packages/block-editor/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -26,7 +26,9 @@ export const getColorObjectByAttributeValues = (
 	customColor
 ) => {
 	if ( definedColor ) {
-		const colorObj = find( colors, { slug: definedColor } );
+		const colorObj = colors?.find(
+			( color ) => color.slug === definedColor
+		);
 
 		if ( colorObj ) {
 			return colorObj;
@@ -47,7 +49,7 @@ export const getColorObjectByAttributeValues = (
  *                   Returns undefined if no color object matches this requirement.
  */
 export const getColorObjectByColorValue = ( colors, colorValue ) => {
-	return find( colors, { color: colorValue } );
+	return colors?.find( ( color ) => color.color === colorValue );
 };
 
 /**

packages/block-editor/src/components/font-sizes/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -20,7 +20,9 @@ export const getFontSize = (
 	customFontSizeAttribute
 ) => {
 	if ( fontSizeAttribute ) {
-		const fontSizeObject = find( fontSizes, { slug: fontSizeAttribute } );
+		const fontSizeObject = fontSizes?.find(
+			( { slug } ) => slug === fontSizeAttribute
+		);
 		if ( fontSizeObject ) {
 			return fontSizeObject;
 		}
@@ -39,7 +41,7 @@ export const getFontSize = (
  * @return {Object} Font size object.
  */
 export function getFontSizeObjectByValue( fontSizes, value ) {
-	const fontSizeObject = find( fontSizes, { size: value } );
+	const fontSizeObject = fontSizes?.find( ( { size } ) => size === value );
 	if ( fontSizeObject ) {
 		return fontSizeObject;
 	}

packages/block-editor/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy } from 'lodash';
+import { pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -107,9 +107,9 @@ export default ( ...fontSizeNames ) => {
 						customFontSizeAttributeName
 					) {
 						return ( fontSizeValue ) => {
-							const fontSizeObject = find( this.props.fontSizes, {
-								size: Number( fontSizeValue ),
-							} );
+							const fontSizeObject = this.props.fontSizes?.find(
+								( { size } ) => size === Number( fontSizeValue )
+							);
 							this.props.setAttributes( {
 								[ fontSizeAttributeName ]:
 									fontSizeObject && fontSizeObject.slug

packages/block-editor/src/components/gradients/use-gradient.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -32,15 +27,15 @@ export function __experimentalGetGradientClass( gradientSlug ) {
  * @return {string} Gradient value.
  */
 export function getGradientValueBySlug( gradients, slug ) {
-	const gradient = find( gradients, [ 'slug', slug ] );
+	const gradient = gradients?.find( ( g ) => g.slug === slug );
 	return gradient && gradient.gradient;
 }
 
 export function __experimentalGetGradientObjectByGradientValue(
 	gradients,
 	value
 ) {
-	const gradient = find( gradients, [ 'gradient', value ] );
+	const gradient = gradients?.find( ( g ) => g.gradient === value );
 	return gradient;
 }
 

packages/block-editor/src/components/inserter/search-items.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
 import { noCase } from 'change-case';
 
 // Default search helpers.
@@ -88,7 +87,7 @@ export const searchBlockItems = (
 
 	const config = {
 		getCategory: ( item ) =>
-			find( categories, { slug: item.category } )?.title,
+			categories.find( ( { slug } ) => slug === item.category )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
 	};

packages/block-editor/src/components/rich-text/format-edit.js

@@ -6,10 +6,6 @@ import {
 	getActiveObject,
 	isCollapsed,
 } from '@wordpress/rich-text';
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -40,13 +36,13 @@ export default function FormatEdit( {
 		if ( name === 'core/link' && ! isCollapsed( value ) ) {
 			const formats = value.formats;
 
-			const linkFormatAtStart = find( formats[ value.start ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtStart = formats[ value.start ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
-			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
 			if (
 				! linkFormatAtStart ||

packages/block-editor/src/components/rich-text/index.js

@@ -368,6 +368,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }

packages/block-editor/src/components/url-popover/image-url-input-ui.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -189,7 +189,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -236,8 +236,9 @@ const ImageURLInputUI = ( {
 	const linkEditorValue = urlInput !== null ? urlInput : url;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
 	return (

packages/block-editor/src/hooks/font-family.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, find } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -2469,8 +2469,7 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
  */
 export const __experimentalGetReusableBlockTitle = createSelector(
 	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
+		const reusableBlock = getReusableBlocks( state ).find(
 			( block ) => block.id === ref
 		);
 		if ( ! reusableBlock ) {