@plone/volto 19.2.0 → 19.3.0

package/CHANGELOG.md

@@ -17,6 +17,20 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.3.0 (2026-07-22)
+
+### Feature
+
+- Add the `apiSuffix` setting and `RAZZLE_API_SUFFIX` environment variable to configure the API traversal suffix. 
+
+### Bugfix
+
+- Silence the Node 24 `DEP0169` (`url.parse()`) and `DEP0060` (`util._extend`) deprecation warnings shown when running/building a Volto project. Volto's own server code (`server.jsx`, `devproxy.js`) now uses the WHATWG `URL` API, and pnpm patches update the archived `react-dev-utils` (build/dev-server) and `http-proxy` (dev proxy `util._extend`) dependencies. @sneridagh 
+
+### Internal
+
+- Remove unused react-medium-image-zoom @Tishasoumya-02 
+
 ## 19.2.0 (2026-07-20)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.2.0",
+  "version": "19.3.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -142,7 +142,6 @@
     "react-intersection-observer": "9.1.0",
     "react-intl": "3.12.1",
     "react-intl-redux": "2.3.0",
-    "react-medium-image-zoom": "3.0.15",
     "react-popper": "^2.3.0",
     "react-redux": "8.1.2",
     "react-router": "5.2.0",
@@ -176,10 +175,10 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
-    "@plone/components": "4.2.1",
-    "@plone/scripts": "4.0.1",
+    "@plone/registry": "3.0.1",
     "@plone/volto-slate": "19.0.4",
-    "@plone/registry": "3.0.1"
+    "@plone/scripts": "4.0.1",
+    "@plone/components": "4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -287,11 +286,11 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
+    "@plone/babel-preset-razzle": "^1.0.1",
     "@plone/razzle-dev-utils": "1.0.0",
     "@plone/razzle": "1.0.0",
-    "@plone/types": "2.0.0",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/babel-preset-razzle": "^1.0.1"
+    "@plone/types": "2.0.1"
   },
   "scripts": {
     "analyze": "BUNDLE_ANALYZE=true razzle build",

package/src/config/index.js

@@ -102,6 +102,8 @@ let config = {
     internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
     subpathPrefix: process.env.RAZZLE_SUBPATH_PREFIX || '',
     websockets: process.env.RAZZLE_WEBSOCKETS || false,
+    // Overrides the API traversal suffix. An empty string disables it.
+    apiSuffix: process.env.RAZZLE_API_SUFFIX,
     // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)

package/src/express-middleware/devproxy.js

@@ -7,7 +7,6 @@ import {
   responseInterceptor,
 } from 'http-proxy-middleware';
 import querystring from 'querystring';
-import { parse as parseUrl } from 'url';
 
 const filter = function (pathname, req) {
   // Check if pathname is defined, there are some corner cases that pathname is null
@@ -31,8 +30,9 @@ function getEnv() {
     return _env;
   }
 
-  const apiPathURL = parseUrl(config.settings.apiPath);
-  const proxyURL = parseUrl(config.settings.devProxyToApiPath);
+  // Use the WHATWG URL API instead of the deprecated `url.parse()` (DEP0169).
+  const apiPathURL = new URL(config.settings.apiPath);
+  const proxyURL = new URL(config.settings.devProxyToApiPath);
   const serverURL = `${proxyURL.protocol}//${proxyURL.host}`;
   const instancePath = proxyURL.pathname;
 

package/src/helpers/Api/APIResourceWithAuth.js

@@ -6,7 +6,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
+import { getApiSuffix, stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers
@@ -17,7 +17,7 @@ import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = getApiSuffix();
     let apiPath = '';
 
     if (settings.internalApiPath && __SERVER__) {

package/src/helpers/Api/Api.js

@@ -8,6 +8,7 @@ import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 import {
+  getApiSuffix,
   stripQuerystring,
   stripSubpathPrefix,
 } from '@plone/volto/helpers/Url/Url';
@@ -22,7 +23,7 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 export function formatUrl(path) {
   const { settings } = config;
-  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = getApiSuffix();
 
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 

package/src/helpers/Api/Api.plone.rest.test.js

@@ -15,6 +15,7 @@ vi.mock('superagent', () => ({
 }));
 
 beforeAll(() => {
+  config.settings.apiSuffix = undefined;
   config.settings.legacyTraverse = false;
 });
 
@@ -41,4 +42,10 @@ describe('Api', () => {
     const promise = api.get('https://example.com');
     expect(promise.request.url).toBe('https://example.com');
   });
+  it('uses the configured API suffix', () => {
+    config.settings.apiSuffix = '/custom-api';
+    const promise = api.get('/test');
+    expect(promise.request.url).toBe(`${settings.apiPath}/custom-api/test`);
+    config.settings.apiSuffix = undefined;
+  });
 });

package/src/helpers/Api/PloneBackendAPIResourceWithAuth.js

@@ -1,7 +1,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
+import { getApiSuffix, stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource from Plone Backend (/++api++) with authenticated (if token exist) API headers
@@ -12,7 +12,7 @@ import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 export const getPloneBackendAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = getApiSuffix();
     let apiPath = '';
 
     if (settings.internalApiPath && __SERVER__) {

package/src/helpers/Api/PloneBackendAPIResourceWithAuth.test.js

@@ -30,6 +30,7 @@ describe('getPloneBackendAPIResourceWithAuth', () => {
       apiPath: 'http://localhost:3000',
       devProxyToApiPath: 'http://localhost:8080/Plone',
       internalApiPath: undefined,
+      apiSuffix: undefined,
     });
   });
 
@@ -57,4 +58,15 @@ describe('getPloneBackendAPIResourceWithAuth', () => {
       'http://localhost:8080/Plone/@portrait/admin',
     );
   });
+
+  it('uses apiSuffix in preference to legacyTraverse in development', async () => {
+    config.settings.legacyTraverse = true;
+    config.settings.apiSuffix = '/custom-api';
+
+    await getPloneBackendAPIResourceWithAuth(request);
+
+    expect(superagent.get).toHaveBeenCalledWith(
+      'http://localhost:8080/Plone/custom-api/@portrait/admin',
+    );
+  });
 });

package/src/helpers/Sitemap/Sitemap.js

@@ -6,7 +6,7 @@
 import superagent from 'superagent';
 import map from 'lodash/map';
 import zlib from 'zlib';
-import { toPublicURL } from '@plone/volto/helpers/Url/Url';
+import { getApiSuffix, toPublicURL } from '@plone/volto/helpers/Url/Url';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 
 import config from '@plone/volto/registry';
@@ -22,7 +22,7 @@ export const SITEMAP_BATCH_SIZE = 5000;
 export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = getApiSuffix();
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
       `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_start=${start}&b_size=${
@@ -64,7 +64,7 @@ export const generateSitemap = (_req, start = 0, size = undefined) =>
 export const generateSitemapIndex = (_req, gzip = false) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = getApiSuffix();
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
       `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,

package/src/helpers/Url/Url.js

@@ -182,6 +182,17 @@ export function addAppURL(url) {
     : `${settings.apiPath}${url}`;
 }
 
+/**
+ * Get the API traversal suffix.
+ *
+ * An explicitly configured apiSuffix takes precedence over legacyTraverse.
+ * @returns {string} API traversal suffix.
+ */
+export function getApiSuffix() {
+  const { settings } = config;
+  return settings.apiSuffix ?? (settings.legacyTraverse ? '' : '/++api++');
+}
+
 /**
  * Given a URL expands it to the backend URL
  * Useful when you have to actually call the backend from the
@@ -193,7 +204,7 @@ export function addAppURL(url) {
  */
 export function expandToBackendURL(path) {
   const { settings } = config;
-  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = getApiSuffix();
   let adjustedPath;
   if (path.startsWith('http://') || path.startsWith('https://')) {
     // flattenToAppURL first if we get a full URL

package/src/helpers/Url/Url.test.js

@@ -24,6 +24,7 @@ import {
 } from './Url';
 
 beforeEach(() => {
+  config.settings.apiSuffix = undefined;
   config.settings.legacyTraverse = false;
 });
 
@@ -372,6 +373,20 @@ describe('Url', () => {
       const href = `https://plone.org/api/ca/my-page`;
       expect(expandToBackendURL(href)).toBe('https://plone.org/api/ca/my-page');
     });
+    it('uses apiSuffix in preference to legacyTraverse', () => {
+      settings.apiPath = 'https://plone.org/api';
+      settings.legacyTraverse = true;
+      settings.apiSuffix = '/custom-api';
+      const href = `https://plone.org/api/ca/my-page`;
+      expect(expandToBackendURL(href)).toBe(
+        'https://plone.org/api/custom-api/ca/my-page',
+      );
+    });
+    it('allows apiSuffix to disable the suffix', () => {
+      settings.apiSuffix = '';
+      const href = `/ca/my-page`;
+      expect(expandToBackendURL(href)).toBe('https://plone.org/api/ca/my-page');
+    });
     it('expandToBackendURL test full URL - deployed seamless', () => {
       settings.apiPath = 'https://plone.org';
       const href = `https://plone.org/ca/my-page`;

package/src/server.jsx

@@ -7,7 +7,6 @@ import { Provider } from 'react-intl-redux';
 import express from 'express';
 import { renderToString } from 'react-dom/server';
 import { createMemoryHistory } from 'history';
-import { parse as parseUrl } from 'url';
 import keys from 'lodash/keys';
 import locale from 'locale';
 import { detect } from 'detect-browser';
@@ -247,7 +246,25 @@ server.get('/*', (req, res) => {
   });
 
   const url = req.originalUrl || req.url;
-  const location = parseUrl(url);
+  // Parse the request URL without the deprecated `url.parse()` (DEP0169).
+  // `req.url` is always an origin-form path here, so a plain string split
+  // reproduces the exact `url.parse()` shape (including raw, non-encoded
+  // query strings) that downstream async-connected components rely on.
+  const hashIndex = url.indexOf('#');
+  const withoutHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
+  const hash = hashIndex === -1 ? null : url.slice(hashIndex);
+  const queryIndex = withoutHash.indexOf('?');
+  const pathname =
+    queryIndex === -1 ? withoutHash : withoutHash.slice(0, queryIndex);
+  const search = queryIndex === -1 ? null : withoutHash.slice(queryIndex);
+  const location = {
+    pathname,
+    search,
+    query: search ? search.slice(1) : null,
+    hash,
+    path: withoutHash,
+    href: url,
+  };
 
   loadOnServer({ store, location, routes, api })
     .then(() => {

package/src/start-client.jsx

@@ -77,6 +77,9 @@ export default function client() {
   if (window.env.RAZZLE_INTERNAL_API_PATH) {
     config.settings.internalApiPath = window.env.RAZZLE_INTERNAL_API_PATH;
   }
+  if (typeof window.env.RAZZLE_API_SUFFIX !== 'undefined') {
+    config.settings.apiSuffix = window.env.RAZZLE_API_SUFFIX;
+  }
   // TODO: To be removed when the use of the legacy traverse is deprecated.
   if (window.env.RAZZLE_LEGACY_TRAVERSE) {
     config.settings.legacyTraverse = true;

package/types/helpers/Url/Url.d.ts

@@ -54,6 +54,13 @@ export function flattenHTMLToAppURL(html: string): string;
  * @returns {string} New URL with app
  */
 export function addAppURL(url: string): string;
+/**
+ * Get the API traversal suffix.
+ *
+ * An explicitly configured apiSuffix takes precedence over legacyTraverse.
+ * @returns {string} API traversal suffix.
+ */
+export function getApiSuffix(): string;
 /**
  * Given a URL expands it to the backend URL
  * Useful when you have to actually call the backend from the