PLANET-7393: Update webpack to v5 (#2188)

* Update webpack to v5 Update webpack and packages Update webpack config to match requirements Update Webpack, SASS and React (scripts and DOM) Add larger CI resource class for zip creation Disable ESLint rule for 'regenerator-runtime/runtime' Fix specs Fix linting errors Follow up SASS compatibilites --------- Co-authored-by: Maud Leray <[email protected]> Co-authored-by: Nikos Roussos <[email protected]> Co-authored-by: Dan Tovbein <[email protected]>
greenpeace · Dec 19, 2024 · c493618 · c493618
1 parent c366ce8
commit c493618
Show file tree

Hide file tree

Showing 31 changed files with 19,717 additions and 38,928 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -256,6 +256,7 @@ jobs:
             --test-instance $(cat /tmp/workspace/test-instance)
 
   create-zip:
+    resource_class: xlarge
     docker:
       - image: cimg/node:18.20.4
         auth:
@@ -288,8 +289,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:

diff --git a/.eslintrc.json b/.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",

diff --git a/assets/src/blocks/Articles/ArticlePreview.js b/assets/src/blocks/Articles/ArticlePreview.js
@@ -2,7 +2,7 @@ import {Component} from '@wordpress/element';
 import {unescape} from '../../functions/unescape';
 import {IMAGE_SIZES} from './imageSizes';
 
-const {__} = wp.i18n;
+const {__, sprintf} = wp.i18n;
 export class ArticlePreview extends Component {
   getPageTypesTags(pageType, link) {
     const {isCampaign} = this.props;
@@ -175,7 +175,10 @@ export class ArticlePreview extends Component {
 
             {reading_time &&
               <span className="article-list-item-readtime">
-                { __('%d min read', 'planet4-blocks').replace('%d', reading_time) }
+                {
+                  // translators: article reading time
+                  sprintf(__('%d min read', 'planet4-blocks'), reading_time)
+                }
               </span>
             }
           </p>

diff --git a/assets/src/blocks/Columns/ColumnsEditor.js b/assets/src/blocks/Columns/ColumnsEditor.js
@@ -8,7 +8,7 @@ const {useSelect} = wp.data;
 const {InspectorControls, RichText} = wp.blockEditor;
 const {CheckboxControl, PanelBody, RangeControl} = wp.components;
 const {useEffect} = wp.element;
-const {__} = wp.i18n;
+const {__, sprintf} = wp.i18n;
 
 const renderEdit = (attributes, toAttribute, setAttributes, isSelected) => {
   const {columns} = attributes;
@@ -56,8 +56,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)}
                 />

diff --git a/assets/src/blocks/Covers/TakeActionCovers.js b/assets/src/blocks/Covers/TakeActionCovers.js
@@ -42,13 +42,15 @@ export const TakeActionCovers = ({
             data-ga-action="Card"
             data-ga-label="n/a"
             href={buttonLink}
+            // translators: cover title
             aria-label={sprintf(__('Take action cover, link to %s', 'planet4-blocks'), title)}
           />
           <a
             data-ga-category="Take Action Covers"
             data-ga-action="Image"
             data-ga-label="n/a"
             href={buttonLink}
+            // translators: cover title
             aria-label={sprintf(__('Take action cover, link to %s', 'planet4-blocks'), title)}
           >
             {isExample ?

diff --git a/assets/src/blocks/Spreadsheet/SpreadsheetEditor.js b/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>

diff --git a/assets/src/frontendIndex.js b/assets/src/frontendIndex.js
@@ -1,3 +1,6 @@
+// This ESLint error is disabled since 'regenerator-runtime/runtime' has already been added by another package.
+// There is no need to explicitly include it in the list of dependencies in the package.json file.
+// eslint-disable-next-line import/no-extraneous-dependencies
 import 'regenerator-runtime/runtime';
 
 import {createRoot} from 'react-dom/client';

diff --git a/assets/src/js/Components/ArchivePicker/ArchivePickerToolbar.js b/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

diff --git a/assets/src/js/Components/ArchivePicker/SingleSidebar.js b/assets/src/js/Components/ArchivePicker/SingleSidebar.js
@@ -64,13 +64,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')}
             </>
@@ -98,7 +98,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
@@ -162,7 +165,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'}>

diff --git a/assets/src/js/external_links.js b/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
+    );
   });
 };
diff --git a/assets/src/js/menu_editor.js b/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');

diff --git a/assets/src/scss/blocks/CarouselHeader/CarouselHeaderStyle.scss b/assets/src/scss/blocks/CarouselHeader/CarouselHeaderStyle.scss
@@ -335,6 +335,8 @@ $medium-image-height: 600px;
     }
 
     .carousel-captions-wrapper {
+      overflow: hidden;
+
       @include medium-and-up {
         width: #{460 + ($text-slide-offset * 2)};
       }
@@ -346,8 +348,6 @@ $medium-image-height: 600px;
       @include x-large-and-up {
         width: #{480 + ($text-slide-offset * 2)};
       }
-
-      overflow: hidden;
     }
 
     .caption-overlay {

diff --git a/assets/src/scss/blocks/Gallery/styles/GalleryCarousel.scss b/assets/src/scss/blocks/Gallery/styles/GalleryCarousel.scss
@@ -124,6 +124,7 @@
 
   ol.carousel-indicators {
     top: 180px;
+    list-style: none;
 
     @include medium-and-up {
       top: 380px;

diff --git a/assets/src/scss/blocks/SocialMedia/SocialMediaStyle.scss b/assets/src/scss/blocks/SocialMedia/SocialMediaStyle.scss
@@ -1,6 +1,6 @@
-@import "./assets/src/scss/base/colors";
-@import "./assets/src/scss/base/variables";
-@import "./assets/src/scss/base/mixins";
+@import "../../base/colors";
+@import "../../base/variables";
+@import "../../base/mixins";
 
 .social-media-block {
   z-index: 3;

diff --git a/assets/src/scss/blocks/Timeline/TimelineStyle.scss b/assets/src/scss/blocks/Timeline/TimelineStyle.scss
@@ -1,6 +1,6 @@
-@import "./assets/src/scss/base/colors";
-@import "./assets/src/scss/base/variables";
-@import "./assets/src/scss/base/mixins";
+@import "../../base/colors";
+@import "../../base/variables";
+@import "../../base/mixins";
 
 .timeline-block {
   height: 600px;

diff --git a/assets/src/scss/bootstrap-build.scss b/assets/src/scss/bootstrap-build.scss
@@ -21,8 +21,8 @@ Text Domain: planet4-master-theme
 @import "vendors/bootstrap";
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
-// The maps's file is required from bootstrap 5.2 and higher
-// @import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/variables-dark";
+@import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 

diff --git a/assets/src/scss/components/_blockquote.scss b/assets/src/scss/components/_blockquote.scss
@@ -21,9 +21,15 @@ blockquote > p {
   @include blockquote;
 }
 
+blockquote {
+  & > h5, & > h6 {
+    font-family: var(--body--font-family);
+
+    @include blockquote;
+  }
+}
+
 blockquote > h5 {
-  @include blockquote;
-  font-family: var(--body--font-family);
   font-size: $font-size-xxl;
 
   @include medium-and-up {
@@ -32,8 +38,6 @@ blockquote > h5 {
 }
 
 blockquote > h6 {
-  @include blockquote;
-  font-family: var(--body--font-family);
   font-size: $font-size-xl;
 
   @include medium-and-up {