Update webpack to v5

Update webpack and packages
Update webpack config to match requirements

.circleci/config.yml

@@ -79,7 +79,7 @@ jobs:
 
   frontend-tests:
     docker:
-      - image: greenpeaceinternational/p4-unit-tests:node16.19.0
+      - image: greenpeaceinternational/p4-unit-tests:node16.20.2-update-eslint
         auth:
           <<: *docker_auth
     steps:
@@ -246,6 +246,7 @@ jobs:
             --test-instance $(cat /tmp/workspace/test-instance)
 
   create-zip:
+    resource_class: large
     docker:
       - image: cimg/node:16.19
         auth:
@@ -278,8 +279,8 @@ jobs:
           name: Zip file size sanity check
           command: |
             ls -lh /tmp/workspace/planet4-master-theme.zip
-            if [ $(wc -c </tmp/workspace/planet4-master-theme.zip) -ge 9000000 ]; then
-              echo "Zip file size exceeds 9MB, probably something went wrong."
+            if [ $(wc -c </tmp/workspace/planet4-master-theme.zip) -ge 20000000 ]; then
+              echo "Zip file size exceeds 20MB, probably something went wrong."
               exit 1
             fi
       - persist_to_workspace:

.eslintrc.json

@@ -56,6 +56,7 @@
     "react/jsx-indent": "off",
     "react/jsx-indent-props": "off",
     "react-hooks/rules-of-hooks": "off",
+    "prettier/prettier": "off",
     "@wordpress/dependency-group": "off",
     "operator-linebreak": [
       "error",

assets/src/blocks/Columns/ColumnsEditor.js

@@ -13,7 +13,7 @@ import {Columns} from './Columns';
 import {MAX_COLUMNS_AMOUNT, MIN_COLUMNS_AMOUNT} from './ColumnConstants';
 import {getStyleFromClassName} from '../../functions/getStyleFromClassName';
 
-const {__} = wp.i18n;
+const {__, sprintf} = wp.i18n;
 
 const renderEdit = (attributes, toAttribute, setAttributes, isSelected) => {
   const {columns} = attributes;
@@ -61,8 +61,10 @@ const renderEdit = (attributes, toAttribute, setAttributes, isSelected) => {
             return (
               <div key={`column-${index}`}>
                 <URLInput
-                  label={__('Column %s link', 'planet4-blocks-backend').replace('%s', index + 1)}
-                  placeholder={__('Enter link for column %s', 'planet4-blocks-backend').replace('%s', index + 1)}
+                  // translators: %s: column index
+                  label={sprintf(__('Column %s link', 'planet4-blocks-backend'), index + 1)}
+                  // translators: %s: column index
+                  placeholder={sprintf(__('Enter link for column %s', 'planet4-blocks-backend'), index + 1)}
                   value={cta_link}
                   onChange={toAttribute('cta_link', index)}
                 />

assets/src/blocks/ENForm/CountrySelector.js

@@ -1,15 +1,13 @@
-export const CountrySelector = attributes => {
-  const {
-    name = 'country-selector',
-    id = null,
-    default_text = '',
-    class_name = '',
-    error_message = '',
-    required = false,
-    onInputChange = null,
-    onBlur = null,
-  } = attributes;
-
+export const CountrySelector = ({
+  name = 'country-selector',
+  id = null,
+  default_text = '',
+  class_name = '',
+  error_message = '',
+  required = false,
+  onInputChange = null,
+  onBlur = null,
+}) => {
   const options = [
     <option key="default" value="" disabled={true}>{ default_text }</option>,
     ...countries.map(c => {

assets/src/blocks/ENForm/ENFormBlock.js

@@ -8,37 +8,6 @@ const {__} = wp.i18n;
 
 export const BLOCK_NAME = 'planet4-blocks/enform';
 
-export const attributes = {
-  en_page_id: {type: 'integer'},
-  enform_goal: {type: 'string'},
-  en_form_style: {type: 'string', default: 'side-style'},
-  title: {type: 'string'},
-  description: {type: 'string'},
-  campaign_logo: {type: 'boolean'},
-  content_title: {type: 'string'},
-  content_title_size: {type: 'string', default: 'h1'},
-  content_description: {type: 'string'},
-  button_text: {type: 'string'},
-  text_below_button: {type: 'string'},
-  thankyou_title: {type: 'string'},
-  thankyou_subtitle: {type: 'string'},
-  thankyou_donate_message: {type: 'string'},
-  thankyou_social_media_message: {type: 'string'},
-  donate_button_checkbox: {type: 'boolean'},
-  donate_text: {type: 'string', default: __('Donate', 'planet4-engagingnetworks')},
-  thankyou_url: {type: 'string'},
-  custom_donate_url: {type: 'string'},
-  background: {type: 'integer'},
-  background_image_src: {type: 'string', default: ''},
-  background_image_srcset: {type: 'string'},
-  background_image_sizes: {type: 'string'},
-  background_image_focus: {type: 'string', default: '50% 50%'},
-  en_form_id: {type: 'integer'},
-  en_form_fields: {type: 'array', default: []},
-  social: {type: 'object', default: {}},
-  social_accounts: {type: 'object', default: {}},
-};
-
 export const registerENForm = () => {
   const {registerBlockType} = wp.blocks;
   const {RawHTML} = wp.element;
@@ -55,7 +24,36 @@ export const registerENForm = () => {
       {name: 'full-width', label: 'Page body/text size width'},
       {name: 'side-style', label: 'Form on the side', isDefault: true},
     ],
-    attributes,
+    attributes: {
+      en_page_id: {type: 'integer'},
+      enform_goal: {type: 'string'},
+      en_form_style: {type: 'string', default: 'side-style'},
+      title: {type: 'string'},
+      description: {type: 'string'},
+      campaign_logo: {type: 'boolean'},
+      content_title: {type: 'string'},
+      content_title_size: {type: 'string', default: 'h1'},
+      content_description: {type: 'string'},
+      button_text: {type: 'string'},
+      text_below_button: {type: 'string'},
+      thankyou_title: {type: 'string'},
+      thankyou_subtitle: {type: 'string'},
+      thankyou_donate_message: {type: 'string'},
+      thankyou_social_media_message: {type: 'string'},
+      donate_button_checkbox: {type: 'boolean'},
+      donate_text: {type: 'string', default: __('Donate', 'planet4-engagingnetworks')},
+      thankyou_url: {type: 'string'},
+      custom_donate_url: {type: 'string'},
+      background: {type: 'integer'},
+      background_image_src: {type: 'string', default: ''},
+      background_image_srcset: {type: 'string'},
+      background_image_sizes: {type: 'string'},
+      background_image_focus: {type: 'string', default: '50% 50%'},
+      en_form_id: {type: 'integer'},
+      en_form_fields: {type: 'array', default: []},
+      social: {type: 'object', default: {}},
+      social_accounts: {type: 'object', default: {}},
+    },
     edit: ENFormEditor,
     save: props => {
       // Sort attributes in a predictable order

assets/src/blocks/ENForm/deprecated/ENFormV2.js

@@ -1,8 +1,39 @@
-import {BLOCK_NAME, attributes} from '../ENFormBlock';
+import {BLOCK_NAME} from '../ENFormBlock';
 import {frontendRendered} from '../../../functions/frontendRendered';
 
+const {__} = wp.i18n;
+
 export const ENFormV2 = {
-  attributes,
+  attributes: {
+    en_page_id: {type: 'integer'},
+    enform_goal: {type: 'string'},
+    en_form_style: {type: 'string', default: 'side-style'},
+    title: {type: 'string'},
+    description: {type: 'string'},
+    campaign_logo: {type: 'boolean'},
+    content_title: {type: 'string'},
+    content_title_size: {type: 'string', default: 'h1'},
+    content_description: {type: 'string'},
+    button_text: {type: 'string'},
+    text_below_button: {type: 'string'},
+    thankyou_title: {type: 'string'},
+    thankyou_subtitle: {type: 'string'},
+    thankyou_donate_message: {type: 'string'},
+    thankyou_social_media_message: {type: 'string'},
+    donate_button_checkbox: {type: 'boolean'},
+    donate_text: {type: 'string', default: __('Donate', 'planet4-engagingnetworks')},
+    thankyou_url: {type: 'string'},
+    custom_donate_url: {type: 'string'},
+    background: {type: 'integer'},
+    background_image_src: {type: 'string', default: ''},
+    background_image_srcset: {type: 'string'},
+    background_image_sizes: {type: 'string'},
+    background_image_focus: {type: 'string', default: '50% 50%'},
+    en_form_id: {type: 'integer'},
+    en_form_fields: {type: 'array', default: []},
+    social: {type: 'object', default: {}},
+    social_accounts: {type: 'object', default: {}},
+  },
   save: props => {
     // Sort attributes in a predictable order
     const ordered_attrs = Object.fromEntries(Object.entries(props.attributes).sort());

assets/src/blocks/Spreadsheet/SpreadsheetEditor.js

@@ -54,20 +54,20 @@ export const SpreadsheetEditor = ({
           <div className="sidebar-blocks-help">
             <ul>
               <li>
-                {/* eslint-disable-next-line no-restricted-syntax */}
+                {/* eslint-disable-next-line no-restricted-syntax, @wordpress/i18n-no-collapsible-whitespace */}
                 { __(`From Your Google Spreadsheet Table choose File -> Publish on web.
                 No need to choose the output format, any of them will work.
                 A pop-up window will show up, click on the Publish button and then OK when the confirmation message is displayed.
                 Copy the URL that is highlighted and paste it in this block.`, 'planet4-blocks-backend') }
               </li>
               <li>
-                {/* eslint-disable-next-line no-restricted-syntax */}
+                {/* eslint-disable-next-line no-restricted-syntax, @wordpress/i18n-no-collapsible-whitespace */}
                 { __(`If you make changes to the sheet after publishing
                   then these changes do not always immediately get reflected,
                   even when "Automatically republish when changes are made" is checked.`, 'planet4-blocks-backend') }
               </li>
               <li>
-                {/* eslint-disable-next-line no-restricted-syntax */}
+                {/* eslint-disable-next-line no-restricted-syntax, @wordpress/i18n-no-collapsible-whitespace */}
                 { __(`You can force an update by unpublishing and republishing the sheet.
                   This will not change the sheet's public url.`, 'planet4-blocks-backend') }
               </li>

assets/src/js/Components/ArchivePicker/ArchivePickerToolbar.js

@@ -23,9 +23,8 @@ export default function ArchivePickerToolbar() {
       {!bulkSelect && <h3 className="archive-picker-title">{__('Greenpeace Media', 'planet4-master-theme-backend')}</h3>}
       <nav className={classNames('nav-bulk-select', {'bulk-enabled': bulkSelect})}>
         {(bulkSelect && processingIds.length) ? (
-          <span className="info">{
-            sprintf(__('Processing %d images', 'planet4-master-theme-backend'), processingIds.length)
-          }</span>
+          // translators: images count
+          <span className="info">{sprintf(__('Processing %d images', 'planet4-master-theme-backend'), processingIds.length)}</span>
         ) : null}
         {bulkSelect && (
           <button

assets/src/js/Components/ArchivePicker/SingleSidebar.js

@@ -62,13 +62,13 @@ export default function SingleSidebar({image}) {
         <div className="info">
           {(image && view === ADMIN_VIEW) && (
             <>
-              {processingIds.includes(image.id) && !image.wordpress_id && __('Processing...', 'planet4-master-theme-backend')}
+              {processingIds.includes(image.id) && !image.wordpress_id && __('Processing…', 'planet4-master-theme-backend')}
               {showAddedMessage && image.wordpress_id && __('Added to Library', 'planet4-master-theme-backend')}
             </>
           )}
           {(image && view === EDITOR_VIEW) && (
             <>
-              {processing && __('Processing...', 'planet4-master-theme-backend')}
+              {processing && __('Processing…', 'planet4-master-theme-backend')}
               {imageAdded && __('Added!', 'planet4-master-theme-backend')}
               {error && __('Error Adding Image to Post!!!', 'planet4-master-theme-backend')}
             </>
@@ -96,7 +96,10 @@ export default function SingleSidebar({image}) {
                   className="sidebar-action"
                   href={wpImageLink}
                 >
-                  {sprintf(__('Wordpress image #%s', 'planet4-master-theme-backend'), image.wordpress_id)}
+                  {
+                    // translators: 1: image ID
+                    sprintf(__('Wordpress image #%s', 'planet4-master-theme-backend'), image.wordpress_id)
+                  }
                 </a>
               ) : (
                 <button
@@ -141,7 +144,10 @@ export default function SingleSidebar({image}) {
               className="sidebar-action"
               href={wpImageLink}
             >
-              {sprintf(__('Wordpress image #%s', 'planet4-master-theme-backend'), image.wordpress_id)}
+              {
+                // translators: 1: image ID
+                sprintf(__('Wordpress image #%s', 'planet4-master-theme-backend'), image.wordpress_id)
+              }
             </a>
           )}
           <dl className={'picker-sidebar-fields'}>

assets/src/js/external_links.js

@@ -1,4 +1,4 @@
-const {__} = wp.i18n;
+const {__, sprintf} = wp.i18n;
 
 export const setupExternalLinks = () => {
   const siteURL = window.location.host;
@@ -23,6 +23,10 @@ export const setupExternalLinks = () => {
     const url = new URL(link.href);
     const domain = url.hostname.replace('www.', '');
 
-    link.title = __('This link will lead you to ' + domain, 'planet4-master-theme');
+    link.title = sprintf(
+      // translators: 1: URL domain
+      __('This link will lead you to %1$s', 'planet4-master-theme'),
+      domain
+    );
   });
 };

assets/src/js/menu_editor.js

@@ -166,6 +166,7 @@ const menuEditorRestrictions = () => {
           errors,
           children,
           subLevelConf.maxItems,
+          // translators: %s: sub menu title
           sprintf(__('Sub menu "%s"', 'planet4-master-theme-backend'), title)
         );
       }
@@ -176,6 +177,7 @@ const menuEditorRestrictions = () => {
         errors.push({
           target: item.id,
           message: sprintf(
+            // translators: 1: item label, 2: max char count, 3: current char count
             __(
               'This item label "%1$s" should not be longer than %2$s characters (currently %3$s).',
               'planet4-master-theme-backend'
@@ -205,13 +207,13 @@ const menuEditorRestrictions = () => {
   /**
    * Gets the current conf.
    *
-   * @return {Object} The current conf
+   * @return {Object|null} The current conf
    */
   const getCurrentConf = () => {
     const location = getCurrentLocation();
     const conf = p4_menu_config[location] || null;
     if (!conf) {
-      return;
+      return null;
     }
 
     return {...{maxItems: 5, maxChars: 18, maxDepth: 1}, ...conf};
@@ -220,8 +222,8 @@ const menuEditorRestrictions = () => {
   /**
    * Get item children
    *
-   * @param {NodeElement} item
-   * @return {NodeElement[]|null} Children list of this item
+   * @param {HTMLElement} item
+   * @return {HTMLElement[]|null} Children list of this item
    */
   const getItemChildren = item => {
     const depth = getItemDepth(item);
@@ -247,7 +249,7 @@ const menuEditorRestrictions = () => {
   /**
    * Get the depth of the item
    *
-   * @param {NodeElement} item The item
+   * @param {HTMLElement} item The item
    * @return {number} Depth of the item in the menu
    */
   const getItemDepth = item => {
@@ -271,9 +273,9 @@ const menuEditorRestrictions = () => {
   /**
    * Check menu items' depth and show an error message if needed
    *
-   * @param {NodeElement} item The menu item
+   * @param {HTMLElement} item     The menu item
    * @param {number}      maxDepth The maximum allowed depth
-   * @param {Array}       errors The errors to be displayed
+   * @param {Array}       errors   The errors to be displayed
    */
   const checkDepth = (item, maxDepth, errors) => {
     const depth = getItemDepth(item);
@@ -283,6 +285,7 @@ const menuEditorRestrictions = () => {
       errors.push({
         target: item.id,
         message: sprintf(
+          // translators: 1: item title, 2: item depth
           __(
             'Menus should have a depth of maximum 1 (currently item "%1$s" is at depth %2$s and therefore will not be displayed).',
             'planet4-master-theme-backend'
@@ -296,13 +299,14 @@ const menuEditorRestrictions = () => {
   /**
    * Mark errors for too many items in a menu/submenu
    *
-   * @param {Array} errors    Errors
-   * @param {NodeList} items     Items
-   * @param {number}   maxItems  Max number of items
-   * @param {string}   menuName  Menu name for the message
+   * @param {Array}    errors   Errors
+   * @param {NodeList} items    Items
+   * @param {number}   maxItems Max number of items
+   * @param {string}   menuName Menu name for the message
    */
   const markItemsOverflow = (errors, items, maxItems, menuName) => {
     errors.push({message: sprintf(
+      // translators: 1: menu name, 2: max item count, 3: current item count
       __(
         '%1$s should not contain more than %2$s items at this level (currently %3$s).',
         'planet4-master-theme-backend'
@@ -373,7 +377,7 @@ const menuEditorRestrictions = () => {
   /**
    * Get the errors container, create it if needed
    *
-   * @return {NodeElement} The errors container
+   * @return {HTMLElement} The errors container
    */
   const getErrorsContainer = () => {
     let errorsContainer = menuEditorFooter.querySelector('.errors-list');