From d343bd5dd95c55911dc66e06d130ae07cd219331 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Fri, 16 Dec 2022 12:46:24 +0200 Subject: [PATCH] Lodash: Refactor block editor away from _.find() (#46577) --- .eslintrc.js | 1 + .../src/components/alignment-control/ui.js | 8 +------- .../src/components/block-styles/index.native.js | 3 +-- .../src/components/block-styles/utils.js | 12 +++++------- .../block-tools/selected-block-popover.js | 4 +--- .../block-editor/src/components/colors/utils.js | 8 +++++--- .../src/components/font-sizes/utils.js | 8 +++++--- .../src/components/font-sizes/with-font-sizes.js | 8 ++++---- .../src/components/gradients/use-gradient.js | 9 ++------- .../src/components/inserter/search-items.js | 3 +-- .../src/components/rich-text/format-edit.js | 16 ++++++---------- .../src/components/rich-text/index.js | 1 + .../components/url-popover/image-url-input-ui.js | 9 +++++---- packages/block-editor/src/hooks/font-family.js | 8 +++----- packages/block-editor/src/store/selectors.js | 5 ++--- 15 files changed, 43 insertions(+), 60 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 51bca0f3bc059b..3f2e466a78ff25 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -68,6 +68,7 @@ const restrictedImports = [ 'every', 'extend', 'filter', + 'find', 'findIndex', 'findKey', 'findLast', diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js index f50e69044f9e59..171a8d34c45f5c 100644 --- a/packages/block-editor/src/components/alignment-control/ui.js +++ b/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 ); diff --git a/packages/block-editor/src/components/block-styles/index.native.js b/packages/block-editor/src/components/block-styles/index.native.js index 142deafacfa7f1..7967e79c2c1cd8 100644 --- a/packages/block-editor/src/components/block-styles/index.native.js +++ b/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 : [ { diff --git a/packages/block-editor/src/components/block-styles/utils.js b/packages/block-editor/src/components/block-styles/utils.js index f60a23a4287b21..511e78da83da60 100644 --- a/packages/block-editor/src/components/block-styles/utils.js +++ b/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 ); } diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index 343cd50058655a..294813b1f34a15 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/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 diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js index e22b5ed8661d36..e48b599faa6b96 100644 --- a/packages/block-editor/src/components/colors/utils.js +++ b/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 ); }; /** diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js index 1237a13efd7db6..0948ab918f156c 100644 --- a/packages/block-editor/src/components/font-sizes/utils.js +++ b/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; } diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index e328a0b2740385..380ea5a3dc0c5c 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/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 diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js index 4acf09fc03b522..e899f9c9197708 100644 --- a/packages/block-editor/src/components/gradients/use-gradient.js +++ b/packages/block-editor/src/components/gradients/use-gradient.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { find } from 'lodash'; - /** * WordPress dependencies */ @@ -32,7 +27,7 @@ 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; } @@ -40,7 +35,7 @@ export function __experimentalGetGradientObjectByGradientValue( gradients, value ) { - const gradient = find( gradients, [ 'gradient', value ] ); + const gradient = gradients?.find( ( g ) => g.gradient === value ); return gradient; } diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js index 5451f19937b01d..35346fca09f32d 100644 --- a/packages/block-editor/src/components/inserter/search-items.js +++ b/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, }; diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js index 3c6861c341cd4b..3ab3f47d226aec 100644 --- a/packages/block-editor/src/components/rich-text/format-edit.js +++ b/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 || diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 726f8cddfff7b7..8219272ad3043a 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -368,6 +368,7 @@ function RichTextWrapper( { children && children( { value, onChange, onFocus } ) } + { + 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 ( diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index fe8693f64421bf..56335ced887074 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/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( { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 3c048a7d58a29c..f096767bf6178c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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 ) {