PLANET-7323: Remove Lodash dependencies

assets/src/ImageBlockExtension.js

@@ -1,6 +1,5 @@
 import {Button, ButtonGroup, PanelBody} from '@wordpress/components';
 import {InspectorControls} from '@wordpress/block-editor';
-import assign from 'lodash.assign';
 
 const {addFilter} = wp.hooks;
 const {__} = wp.i18n;
@@ -44,8 +43,8 @@ const addExtraAttributes = function() {
       return settings;
     }
 
-    // Use Lodash's assign to gracefully handle if attributes are undefined
-    settings.attributes = assign(settings.attributes, {
+    settings.attributes = {
+      ...settings.attributes,
       captionStyle: {
         type: 'string',
         default: captionStyleOptions[0].value,
@@ -54,7 +53,7 @@ const addExtraAttributes = function() {
         type: 'string',
         default: captionAlignmentOptions[1].value,
       },
-    });
+    };
 
     return settings;
   };

assets/src/blocks/Accordion/AccordionEditor.js

@@ -6,8 +6,7 @@ import {
   CheckboxControl,
   Button,
 } from '@wordpress/components';
-
-import {debounce} from 'lodash';
+import {debounce} from '@wordpress/compose';
 
 const {__} = wp.i18n;
 

assets/src/blocks/Happypoint/HappypointEditor.js

@@ -3,8 +3,7 @@ import {useSelect} from '@wordpress/data';
 import {HappypointFrontend} from './HappypointFrontend';
 import {OverrideFormHelp} from './OverrideFormHelp';
 import {USE_NONE, USE_IFRAME_URL, USE_EMBED_CODE} from './HappyPointConstants';
-
-import {debounce} from 'lodash';
+import {debounce} from '@wordpress/compose';
 
 import {
   InspectorControls,

assets/src/blocks/Media/MediaEditor.js

@@ -1,7 +1,7 @@
 import {Fragment, useCallback} from '@wordpress/element';
 import {PanelBody, TextControl} from '@wordpress/components';
 import {MediaPlaceholder, InspectorControls, RichText} from '@wordpress/block-editor';
-import {debounce} from 'lodash';
+import {debounce} from '@wordpress/compose';
 
 import {MediaElementVideo} from './MediaElementVideo';
 import {useSelect} from '@wordpress/data';

assets/src/blocks/SplitTwoColumns/SplitTwoColumnsInPlaceEdit.js

@@ -1,5 +1,5 @@
 import {RichText} from '@wordpress/block-editor';
-import {debounce} from 'lodash';
+import {debounce} from '@wordpress/compose';
 
 const {__} = wp.i18n;
 

assets/src/blocks/Spreadsheet/SpreadsheetEditor.js

@@ -2,7 +2,7 @@ import {useState} from '@wordpress/element';
 import {InspectorControls} from '@wordpress/block-editor';
 import ColorPaletteControl from '../../components/ColorPaletteControl/ColorPaletteControl';
 import {SpreadsheetFrontend} from './SpreadsheetFrontend';
-import {debounce} from 'lodash';
+import {debounce} from '@wordpress/compose';
 import {TextControl, PanelBody} from '@wordpress/components';
 
 const {__} = wp.i18n;

assets/src/blocks/Timeline/TimelineEditorScript.js

@@ -13,7 +13,7 @@ import {useStyleSheet} from '../../components/useStyleSheet/useStyleSheet';
 import {Timeline} from './Timeline';
 import {languages} from './TimelineLanguages';
 import {URLDescriptionHelp} from './URLDescriptionHelp';
-import {debounce, noConflict} from 'lodash';
+import {debounce} from '@wordpress/compose';
 
 const {__} = wp.i18n;
 const TIMELINE_JS_VERSION = '3.8.12';
@@ -24,16 +24,9 @@ const positions = [
 ];
 
 const loadAssets = () => {
-  // Revert TimelineJS global usage of lodash, as it conflicts with Wordpress underscore lib
-  // see https://jira.greenpeace.org/browse/PLANET-5960
-  const revertLodash = function() {
-    noConflict();
-  };
-
   // eslint-disable-next-line no-unused-vars
   const [scriptLoaded, scriptError] = useScript(
-    `https://cdn.knightlab.com/libs/timeline3/${TIMELINE_JS_VERSION}/js/timeline-min.js`,
-    revertLodash
+    `https://cdn.knightlab.com/libs/timeline3/${TIMELINE_JS_VERSION}/js/timeline-min.js`
   );
 
   // eslint-disable-next-line no-unused-vars

assets/src/components/AssignOnlyFlatTermSelector/AssignOnlyFlatTermSelector.js

@@ -3,11 +3,6 @@
  * initially, then the functionality of creating non-existing terms was removed from it.
  */
 
-/**
- * External dependencies
- */
-import {unescape as unescapeString} from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,6 +11,7 @@ import {FormTokenField, withFilters} from '@wordpress/components';
 import {useSelect, useDispatch} from '@wordpress/data';
 import {store as coreStore} from '@wordpress/core-data';
 import {useDebounce} from '@wordpress/compose';
+import {decodeEntities} from '@wordpress/html-entities';
 
 const {__, _x, sprintf} = wp.i18n;
 
@@ -38,8 +34,8 @@ const DEFAULT_QUERY = {
 };
 
 const isSameTermName = (termA, termB) =>
-  unescapeString(termA).toLowerCase() ===
-  unescapeString(termB).toLowerCase();
+  decodeEntities(termA).toLowerCase() ===
+  decodeEntities(termB).toLowerCase();
 
 const termNamesToIds = (names, terms) => names.map(
   termName => terms.find(term => isSameTermName(term.name, termName)).id
@@ -100,7 +96,7 @@ export const AssignOnlyFlatTermSelector = ({slug}) => {
   useEffect(() => {
     if (hasResolvedTerms) {
       const newValues = (terms ?? []).map(term =>
-        unescapeString(term.name)
+        decodeEntities(term.name)
       );
 
       setValues(newValues);
@@ -109,7 +105,7 @@ export const AssignOnlyFlatTermSelector = ({slug}) => {
 
   const suggestions = useMemo(() => {
     return (searchResults ?? []).map(term =>
-      unescapeString(term.name)
+      decodeEntities(term.name)
     );
   }, [searchResults]);
 

assets/src/components/ColorPaletteControl/ColorPaletteControl.js

@@ -1,4 +1,3 @@
-import {isEmpty} from 'lodash';
 import classnames from 'classnames';
 import {withInstanceId} from '@wordpress/compose';
 import {BaseControl, ColorPalette} from '@wordpress/components';
@@ -9,7 +8,7 @@ function ColorPaletteControl({label, className, value, help, instanceId, onChang
   // eslint-disable-next-line no-shadow
   const optionsAsColors = options.map(({value, ...props}) => ({color: value, ...props}));
 
-  return !isEmpty(options) && (
+  return options.length > 0 && (
     <BaseControl label={label} id={id} help={help}
       className={classnames(className, 'components-color-palette-control')}>
       <ColorPalette

assets/src/components/TermSelector/TermSelector.js

@@ -1,11 +1,6 @@
 // This component is based on the one used by WordPress for categories (without the hierarchical aspect, since we don't need it):
 // https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
 
-/**
- * External dependencies
- */
-import {find, get, unescape as unescapeString} from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,6 +14,7 @@ import {
 import {useDispatch, useSelect} from '@wordpress/data';
 import {useDebounce} from '@wordpress/compose';
 import {store as coreStore} from '@wordpress/core-data';
+import {decodeEntities} from '@wordpress/html-entities';
 
 const {__, _n, _x, sprintf} = wp.i18n;
 const {speak} = wp.a11y;
@@ -83,7 +79,7 @@ export function sortBySelected(termsTree, terms) {
  * @return {Object} Term object.
  */
 export function findTerm(terms, name) {
-  return find(terms, term => term.name.toLowerCase() === name.toLowerCase());
+  return terms.find(terms, term => term.name.toLowerCase() === name.toLowerCase());
 }
 
 /**
@@ -141,28 +137,19 @@ export function TermSelector({slug}) {
       const {getCurrentPost, getEditedPostAttribute} = select('core/editor');
       const {getTaxonomy, getEntityRecords, isResolving, canUser} = select(coreStore);
       const _taxonomy = getTaxonomy(slug);
+      const post = getCurrentPost();
 
       return {
         isUserAdmin: canUser('create', 'users') ?? false,
         hasCreateAction: _taxonomy ?
-          get(
-            getCurrentPost(),
-            [
-              '_links',
-              'wp:action-create-' + _taxonomy.rest_base,
-            ],
-            false
-          ) :
+          post._links?.[
+            'wp:action-create-' + _taxonomy.rest_base
+          ] ?? false :
           false,
         hasAssignAction: _taxonomy ?
-          get(
-            getCurrentPost(),
-            [
-              '_links',
-              'wp:action-assign-' + _taxonomy.rest_base,
-            ],
-            false
-          ) :
+          post._links?.[
+            'wp:action-assign-' + _taxonomy.rest_base
+          ] ?? false :
           false,
         terms: _taxonomy ?
           getEditedPostAttribute(_taxonomy.rest_base) :
@@ -259,14 +246,11 @@ export function TermSelector({slug}) {
       name: formName,
     });
 
+    const defaultName = slug === 'category' ? __('Category') : __('Term');
     const termAddedMessage = sprintf(
       /* translators: %s: taxonomy name */
       _x('%s added', 'term'),
-      get(
-        taxonomy,
-        ['labels', 'singular_name'],
-        slug === 'post_tag' ? __('Tag') : __('Term')
-      )
+      taxonomy?.labels?.singular_name ?? defaultName
     );
     speak(termAddedMessage, 'assertive');
     setAdding(false);
@@ -306,7 +290,7 @@ export function TermSelector({slug}) {
               const termId = parseInt(term.id, 10);
               onChange(termId);
             }}
-            label={unescapeString(term.name)}
+            label={decodeEntities(term.name)}
           />
         </div>
       );
@@ -318,11 +302,8 @@ export function TermSelector({slug}) {
     fallbackIsTag,
     fallbackIsNotTag
   ) =>
-    get(
-      taxonomy,
-      ['labels', labelProperty],
-      slug === 'post_tag' ? fallbackIsTag : fallbackIsNotTag
-    );
+    taxonomy?.labels?.[labelProperty] ??
+    (slug === 'post_tag' ? fallbackIsTag : fallbackIsNotTag);
   const newTermButtonLabel = labelWithFallback(
     'add_new_item',
     __('Add new tag'),
@@ -334,12 +315,8 @@ export function TermSelector({slug}) {
     __('Add new term')
   );
   const newTermSubmitLabel = newTermButtonLabel;
-  const filterLabel = get(
-    taxonomy,
-    ['labels', 'search_items'],
-    __('Search Terms')
-  );
-  const groupLabel = get(taxonomy, ['name'], __('Terms'));
+  const filterLabel = taxonomy?.labels?.search_items ?? __('Search Terms');
+  const groupLabel = taxonomy?.name ?? __('Terms');
   const showFilter = availableTerms.length >= MIN_TERMS_COUNT_FOR_FILTER;
 
   return (

package.json

@@ -29,8 +29,6 @@
     "dotenv": "^16.3.1",
     "eslint-plugin-react": "^7.20.3",
     "file-loader": "^6.2.0",
-    "lodash": "^4.17.21",
-    "lodash.assign": "^4.2.0",
     "mini-css-extract-plugin": "^0.7.0",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "playwright": "^1.37.1",