Update theme packages

.github/workflows/npm-check.yml

@@ -8,9 +8,9 @@ jobs:
         steps:
             -   uses: actions/checkout@v1
 
-            -   uses: actions/setup-node@v2
+            -   uses: actions/setup-node@v4
                 with:
-                    node-version: '14'
+                    node-version: '20'
                     cache: 'npm'
                     cache-dependency-path: '**/package-lock.json'
 

.github/workflows/phpcs-check.yml

@@ -14,7 +14,7 @@ jobs:
 
       - name: Cache Composer packages
         id: composer-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: vendor
           key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}

.nvmrc

@@ -1 +1 @@
-v14
+v22

CHANGELOG.MD

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- Update Node, webpack & dependency versions
+
 ## [1.72.0] - 2026-04-12
 
 - TMS-1260: Add missing alt-text for enlargened images in image-block

assets/scripts/toggle.js

@@ -22,7 +22,7 @@ export default class Toggle {
         const toggleTrigger = $( event.currentTarget );
         const toggleTarget = $( '#' + toggleTrigger.attr( 'aria-controls' ) );
         const ariaExpandedState = toggleTrigger.attr( 'aria-expanded' ) === 'false';
-        const duration = typeof toggleTrigger.data( 'duration' ) !== undefined ? toggleTrigger.data( 'duration' ) : 400;
+        const duration = typeof toggleTrigger.data( 'duration' ) !== 'undefined' ? toggleTrigger.data( 'duration' ) : 400;
 
         if ( toggleTarget.hasClass( 'is-hidden' ) ) {
             toggleTarget.css( 'display', 'none' );

package.json

@@ -7,48 +7,49 @@
   "dependencies": {
     "@accessible360/accessible-slick": "^1.0.1",
     "@babel/polyfill": "^7.12.1",
-    "@wordpress/keycodes": "^3.3.1",
+    "@wordpress/keycodes": "^3.58.0",
     "hyphenopoly": "^3.4.0",
     "indicate": "^2.4.0",
     "micromodal": "^0.4.6",
     "modaal": "^0.4.4",
     "normalize.css": "^8.0.1",
-    "sass": "^1.49.0"
+    "sass": "^1.99.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
+    "@babel/core": "^7.29.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/register": "^7.14.5",
-    "@wordpress/eslint-plugin": "^9.2.0",
-    "ajv": "^6.12.6",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.3",
-    "browser-sync": "^2.28.3",
-    "browser-sync-webpack-plugin": "^2.3.0",
-    "bulma": "^0.9.3",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/register": "^7.28.6",
+    "@wordpress/eslint-plugin": "^14.0.0",
+    "ajv": "^6.14.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^9.1.3",
+    "browser-sync": "^2.29.3",
+    "browser-sync-webpack-plugin": "^2.4.0",
+    "bulma": "^0.9.4",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.5",
+    "css-loader": "^7.1.2",
     "css-mqpacker": "^7.0.0",
-    "cssnano": "^4.1.11",
-    "eslint": "^7.32.0",
-    "eslint-loader": "^4.0.2",
+    "cssnano": "^7.0.6",
+    "eslint": "^8.57.0",
+    "eslint-webpack-plugin": "^4.2.0",
     "file-loader": "^6.2.0",
-    "image-webpack-loader": "^7.0.1",
+    "image-webpack-loader": "^8.1.0",
     "lint-staged": "^11.2.6",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.6.0",
+    "lodash": "^4.18.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss-font-magician": "^2.3.1",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^7.3.1",
-    "style-loader": "^2.0.0",
+    "postcss-loader": "^8.1.1",
+    "sass-loader": "^14.2.1",
+    "style-loader": "^3.3.4",
     "svg-sprite-loader": "^6.0.11",
-    "svgo": "^1.3.2",
-    "svgo-loader": "^2.2.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.9.1"
+    "svgo": "^3.3.2",
+    "svgo-loader": "^3.0.3",
+    "typescript": "4.9.5",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^5.1.4"
   },
   "scripts": {
     "lint": "eslint assets/scripts",

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );
+const ESLintPlugin = require( 'eslint-webpack-plugin' );
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const SpriteLoaderPlugin = require( 'svg-sprite-loader/plugin' );
@@ -39,20 +40,6 @@ const entryPoints = {
 // All loaders to use on assets.
 const allModules = {
     rules: [
-        {
-            enforce: 'pre',
-            test: /\.js$/,
-            exclude: /node_modules/,
-            use: {
-                loader: 'eslint-loader',
-                options: {
-                    configFile: '.eslintrc.json',
-                    fix: false,
-                    failOnWarning: false,
-                    failOnError: true,
-                },
-            },
-        },
         {
             test: /\.js$/,
             exclude: /node_modules/,
@@ -95,8 +82,9 @@ const allModules = {
         {
             test: /\.(gif|jpe?g|png|svg)(\?[a-z0-9=\.]+)?$/,
             exclude: [ /assets\/fonts/, /assets\/icons/, /node_modules/ ],
+            type: 'asset/resource',
+            generator: { filename: '[name][ext]' },
             use: [
-                'file-loader?name=[name].[ext]',
                 {
                     loader: 'image-webpack-loader',
                     options: {
@@ -113,7 +101,10 @@ const allModules = {
         {
             test: /\.(eot|svg|ttf|woff(2)?)(\?[a-z0-9=\.]+)?$/,
             exclude: [ /assets\/images/, /assets\/icons/, /node_modules/ ],
-            use: 'file-loader?name=[name].[ext]',
+            type: 'asset/resource',
+            generator: {
+                filename: '[name][ext]',
+            },
         },
         {
             test: /assets\/icons\/.*\.svg(\?[a-z0-9=\.]+)?$/,
@@ -130,8 +121,8 @@ const allModules = {
                     loader: 'svgo-loader',
                     options: {
                         plugins: [
-                            { removeTitle: true },
-                            { removeAttrs: { attrs: [ 'path:fill', 'path:class' ] } },
+                            { name: 'removeTitle' },
+                            { name: 'removeAttrs', params: { attrs: [ 'path:fill', 'path:class' ] } },
                         ],
                     },
                 },
@@ -167,6 +158,14 @@ const allPlugins = [
         ],
     } ),
 
+    // Lint JS files.
+    new ESLintPlugin( {
+        extensions: [ 'js' ],
+        failOnError: true,
+        failOnWarning: false,
+        fix: false,
+    } ),
+
     // Use BrowserSync.
     new BrowserSyncPlugin(
         {
@@ -196,9 +195,7 @@ if ( isProduction ) {
 
         // Optimize for production build.
         new TerserPlugin( {
-            cache: true,
             parallel: true,
-            sourceMap: true,
             terserOptions: {
                 output: {
                     comments: false,
@@ -220,11 +217,10 @@ if ( isProduction ) {
 
 module.exports = [
     {
-        node: {
-            fs: 'empty', // <- prevent "fs not found"
-        },
-
         resolve: {
+            fallback: {
+                fs: false, // prevent "fs not found"
+            },
             alias: {
                 scripts: path.resolve( __dirname, 'assets', 'scripts' ),
                 styles: path.resolve( __dirname, 'assets', 'styles' ),