From 328e39cf7ef89f7f42d9f375765a2f2b8ddb0699 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 17 Jan 2023 12:47:10 +0200 Subject: [PATCH] Lodash: Refactor block editor away from _.map() --- .../block-settings-menu-controls/index.js | 12 +++-------- .../components/inserter/block-types-tab.js | 7 +++---- .../inserter/hooks/use-patterns-state.js | 7 +------ .../url-popover/image-url-input-ui.js | 7 +------ packages/block-editor/src/store/selectors.js | 21 ++++++++----------- .../src/utils/transform-styles/index.js | 7 +------ 6 files changed, 18 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 35aab859d2f73e..f4fb74609f8ff5 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -40,10 +35,9 @@ const BlockSettingsMenuControlsSlot = ( { const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds(); return { - selectedBlocks: map( - getBlocksByClientId( ids ).filter( Boolean ), - ( block ) => block.name - ), + selectedBlocks: getBlocksByClientId( ids ) + .filter( Boolean ) + .map( ( block ) => block.name ), selectedClientIds: ids, canRemove: canRemoveBlocks( ids ), }; diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 095b6cc7465918..1263b14707c995 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { map, groupBy } from 'lodash'; +import { groupBy } from 'lodash'; /** * WordPress dependencies @@ -113,7 +113,7 @@ export function BlockTypesTab( { ) } - { map( currentlyRenderedCategories, ( category ) => { + { currentlyRenderedCategories.map( ( category ) => { const categoryItems = itemsPerCategory[ category.slug ]; if ( ! categoryItems || ! categoryItems.length ) { return null; @@ -148,8 +148,7 @@ export function BlockTypesTab( { ) } - { map( - currentlyRenderedCollections, + { currentlyRenderedCollections.map( ( [ namespace, collection ] ) => { const collectionItems = itemsPerCollection[ namespace ]; if ( ! collectionItems || ! collectionItems.length ) { diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index e61a5df8717e87..ca287b95c43b9b 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -41,7 +36,7 @@ const usePatternsState = ( onInsert, rootClientId ) => { const { createSuccessNotice } = useDispatch( noticesStore ); const onClickPattern = useCallback( ( pattern, blocks ) => { onInsert( - map( blocks, ( block ) => cloneBlock( block ) ), + ( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ), pattern.name ); createSuccessNotice( diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js index 471fbf2044d511..aec7456cc25ef0 100644 --- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js +++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -260,7 +255,7 @@ const ImageURLInputUI = ( { additionalControls={ ! linkEditorValue && ( - { map( getLinkDestinations(), ( link ) => ( + { getLinkDestinations().map( ( link ) => ( - map( getBlockOrder( state, rootClientId ), ( clientId ) => + getBlockOrder( state, rootClientId ).map( ( clientId ) => __unstableGetClientIdWithClientIdsTree( state, clientId ) ), ( state ) => [ state.blocks.order ] @@ -314,13 +313,11 @@ export const __experimentalGetGlobalBlocksByName = createSelector( */ export const getBlocksByClientId = createSelector( ( state, clientIds ) => - map( - Array.isArray( clientIds ) ? clientIds : [ clientIds ], + ( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map( ( clientId ) => getBlock( state, clientId ) ), ( state, clientIds ) => - map( - Array.isArray( clientIds ) ? clientIds : [ clientIds ], + ( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map( ( clientId ) => state.blocks.tree.get( clientId ) ) ); @@ -507,18 +504,18 @@ export const getBlockParents = createSelector( export const getBlockParentsByBlockName = createSelector( ( state, clientId, blockName, ascending = false ) => { const parents = getBlockParents( state, clientId, ascending ); - return map( - map( parents, ( id ) => ( { + return parents + .map( ( id ) => ( { id, name: getBlockName( state, id ), - } ) ).filter( ( { name } ) => { + } ) ) + .filter( ( { name } ) => { if ( Array.isArray( blockName ) ) { return blockName.includes( name ); } return name === blockName; - } ), - ( { id } ) => id - ); + } ) + .map( ( { id } ) => id ); }, ( state ) => [ state.blocks.parents ] ); diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js index 854ffd11da2ce1..cee8dd459d94b5 100644 --- a/packages/block-editor/src/utils/transform-styles/index.js +++ b/packages/block-editor/src/utils/transform-styles/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -23,7 +18,7 @@ import wrap from './transforms/wrap'; * @return {Array} converted rules. */ const transformStyles = ( styles, wrapperClassName = '' ) => { - return map( styles, ( { css, baseURL } ) => { + return Object.values( styles ?? [] ).map( ( { css, baseURL } ) => { const transforms = []; if ( wrapperClassName ) { transforms.push( wrap( wrapperClassName ) );