@plone/volto 19.0.0-alpha.1 → 19.0.0-alpha.10

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.1",
+  "version": "19.0.0-alpha.10",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -144,21 +144,25 @@
     "not dead"
   ],
   "engines": {
-    "node": "^20 || ^22"
+    "node": "^22 || ^24"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/utilities": "3.2.2",
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
-    "debug": "4.3.2",
+    "debug": "4.3.4",
     "decorate-component-with-props": "1.2.1",
     "dependency-graph": "0.10.0",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
     "express": "4.19.2",
     "filesize": "6",
+    "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -181,7 +185,7 @@
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
-    "query-string": "7.1.0",
+    "query-string": "^9.0.0",
     "rc-time-picker": "3.7.3",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
@@ -225,9 +229,9 @@
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
     "serialize-javascript": "3.1.0",
-    "slate": "0.100.0",
-    "slate-hyperscript": "0.100.0",
-    "slate-react": "0.98.4",
+    "slate": "0.118.1",
+    "slate-hyperscript": "0.115.0",
+    "slate-react": "0.117.4",
     "superagent": "3.8.2",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
@@ -236,9 +240,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/registry": "3.0.0-alpha.3",
-    "@plone/volto-slate": "19.0.0-alpha.1",
-    "@plone/scripts": "4.0.0-alpha.1"
+    "@plone/scripts": "4.0.0-alpha.3",
+    "@plone/registry": "3.0.0-alpha.7",
+    "@plone/volto-slate": "19.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -251,9 +255,6 @@
     "@babel/plugin-syntax-export-namespace-from": "7.8.3",
     "@babel/runtime": "7.20.6",
     "@babel/types": "7.20.5",
-    "@dnd-kit/core": "6.0.8",
-    "@dnd-kit/sortable": "7.0.2",
-    "@dnd-kit/utilities": "3.2.2",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
     "@jest/globals": "^29.7.0",
     "@loadable/babel-plugin": "5.13.2",
@@ -268,19 +269,21 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-webpack5": "^8.0.4",
     "@storybook/theming": "^8.0.4",
-    "@testing-library/cypress": "10.0.1",
+    "@testing-library/cypress": "10.1.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.0",
+    "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
     "@types/jest": "^29.5.8",
     "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
-    "@types/node": "^22.13.0",
+    "@types/node": "^24",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-intl-redux": "^0.1.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
+    "@types/redux-mock-store": "^1.5.0",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -297,22 +300,22 @@
     "bundlewatch": "0.3.3",
     "circular-dependency-plugin": "5.2.2",
     "css-loader": "5.2.7",
-    "cypress": "13.13.2",
-    "cypress-axe": "1.5.0",
+    "cypress": "15.5.0",
+    "cypress-axe": "1.7.0",
     "cypress-file-upload": "5.0.8",
     "deep-freeze": "0.0.1",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "full-icu": "1.4.0",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
@@ -340,7 +343,7 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^17.1.1",
+    "release-it": "^19.0.4",
     "semver": "^7.5.4",
     "start-server-and-test": "1.14.0",
     "storybook": "^8.0.4",
@@ -363,8 +366,7 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
-    "why": "0.6.2",
-    "@plone/types": "2.0.0-alpha.3",
+    "@plone/types": "2.0.0-alpha.8",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {
@@ -378,7 +380,7 @@
     "build:types": "tsc --project tsconfig.declarations.json",
     "vitest": "vitest",
     "coverage": "vitest run --coverage",
-    "test": "razzle test --maxWorkers=50%",
+    "test": "razzle test --maxWorkers=${MAX_WORKERS:-50%}",
     "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "start:prod": "NODE_ENV=production node build/server.js",
@@ -388,8 +390,8 @@
     "stylelint": "stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
     "stylelint:overrides": "stylelint 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "lint": "eslint --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint": "eslint --max-warnings=0 '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "eslint --fix '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
     "lint:husky": "eslint --max-warnings=0 --fix",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "i18n:ci": "pnpm i18n && git diff -G'^[^\"POT]' --exit-code",

package/razzle.config.js

@@ -414,6 +414,22 @@ const defaultModify = ({
         ]
       : [];
 
+  // If Volto is served under a subpath,
+  // we have to adjust where Webpack assets are served too.
+  const subpathPrefix = process.env.RAZZLE_SUBPATH_PREFIX || '';
+  if (subpathPrefix) {
+    if (target === 'web' && dev) {
+      if (config.devServer.devMiddleware) {
+        config.devServer.devMiddleware.publicPath = subpathPrefix;
+      } else {
+        config.devServer.publicPath += `${subpathPrefix.slice(1)}/`;
+      }
+    }
+    const publicPath = config.output.publicPath;
+    if (publicPath.indexOf(subpathPrefix) === -1) {
+      config.output.publicPath = `${publicPath}${subpathPrefix.slice(1)}/`;
+    }
+  }
   return config;
 };
 

package/src/actions/content/content.js

@@ -164,7 +164,6 @@ export function getContent(
           b_size: settings.defaultPageSize,
         }
       : {},
-    settings.isMultilingual ? { expand: 'translations' } : {},
   );
 
   let qs = Object.keys(query)

package/src/actions/controlpanels/controlpanels.js

@@ -12,6 +12,8 @@ import {
   SYSTEM_INFORMATION,
   DATABASE_INFORMATION,
 } from '@plone/volto/constants/ActionTypes';
+import { getSite } from '@plone/volto/actions/site/site';
+
 /**
  * Get controlpanel function.
  * @function getControlpanel
@@ -86,13 +88,17 @@ export function listControlpanels() {
  * @returns {Object} Update controlpanel action.
  */
 export function updateControlpanel(url, data) {
-  return {
-    type: UPDATE_CONTROLPANEL,
-    request: {
-      op: 'patch',
-      path: url,
-      data,
-    },
+  return (dispatch) => {
+    dispatch({
+      type: UPDATE_CONTROLPANEL,
+      request: {
+        op: 'patch',
+        path: url,
+        data,
+      },
+    }).then(() => {
+      dispatch(getSite());
+    });
   };
 }
 

package/src/actions/controlpanels/controlpanels.test.js

@@ -35,12 +35,18 @@ describe('Controlpanels action', () => {
     it('should create an action to update a controlpanel', () => {
       const url = 'http://localhost';
       const data = 'Hello World!';
-      const action = updateControlpanel(url, data);
 
-      expect(action.type).toEqual(UPDATE_CONTROLPANEL);
-      expect(action.request.op).toEqual('patch');
-      expect(action.request.path).toEqual(url);
-      expect(action.request.data).toEqual(data);
+      const dispatch = vi.fn().mockResolvedValue();
+      updateControlpanel(url, data)(dispatch);
+
+      expect(dispatch).toHaveBeenCalledWith({
+        type: UPDATE_CONTROLPANEL,
+        request: {
+          op: 'patch',
+          path: url,
+          data,
+        },
+      });
     });
   });
 });

package/src/actions/users/users.js

@@ -3,7 +3,7 @@
  * @module actions/users/users
  */
 
-import { stringify } from 'query-string';
+import qs from 'query-string';
 
 import {
   CREATE_USER,
@@ -92,7 +92,7 @@ export function listUsers(options = {}) {
 
   let filterarg =
     groups_filter.length > 0
-      ? stringify(
+      ? qs.stringify(
           { 'groups-filter': groups_filter },
           { arrayFormat: 'colon-list-separator' },
         )

package/src/components/manage/Add/Add.jsx

@@ -223,11 +223,10 @@ class Add extends Component {
         ? keys(this.props.schema.definitions)
         : null,
       '@type': this.props.type,
-      ...(config.settings.isMultilingual &&
-        this.props.location?.state?.translationOf && {
-          translation_of: this.props.location.state.translationOf,
-          language: this.props.location.state.language,
-        }),
+      ...(this.props.location?.state?.translationOf && {
+        translation_of: this.props.location.state.translationOf,
+        language: this.props.location.state.language,
+      }),
     });
   }
 
@@ -348,7 +347,7 @@ class Add extends Component {
         <div id="page-add">
           <Helmet
             title={this.props.intl.formatMessage(messages.add, {
-              type: this.props.type,
+              type: this.props?.schema?.title || this.props.type,
             })}
           />
           <Form

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -187,6 +187,7 @@ export class Edit extends Component {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
               hovered: this.props.hovered === this.props.id,
+              error: !!this.props.blocksErrors?.[this.props.id],
             })}
             style={{ outline: 'none' }}
             ref={this.blockNode}

package/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +116,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

package/src/components/manage/Blocks/Image/Edit.jsx

@@ -20,7 +20,11 @@ function Edit(props) {
 
   const handleChange = React.useCallback(
     async (id, image, { title, image_field, image_scales } = {}) => {
-      const url = image ? image['@id'] || image : '';
+      const url = Array.isArray(image)
+        ? image?.[0]?.['@id']
+        : image
+          ? image['@id'] || image
+          : '';
 
       props.onChangeBlock(props.block, {
         ...props.data,

package/src/components/manage/Blocks/LeadImage/Edit.jsx

@@ -43,13 +43,13 @@ const Edit = (props) => {
       {!hasImage && (
         <Message>
           <center>
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <div className="message-text">{placeholder}</div>
           </center>
         </Message>
       )}
       {hasImage && hasImageData && (
-        <img
+        <Image
           className={className}
           src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
           width={properties.image.width}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -96,7 +96,7 @@ const LeadImageSidebar = ({
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
             {properties.image.data && (
-              <img
+              <Image
                 // TODO understand when this actually happens
                 src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
                 width={properties.image.width}

package/src/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import { Button } from 'semantic-ui-react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import {
+  addSubpathPrefix,
+  flattenToAppURL,
+} from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import galleryLeftSVG from '@plone/volto/icons/left-key.svg';
@@ -81,10 +83,10 @@ const ImageGalleryTemplate = ({ items }) => {
   );
   const imagesInfo = renderItems.map((item) => {
     return {
-      original: `${flattenToAppURL(item['@id'])}/@@images/${
+      original: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/large`,
-      thumbnail: `${flattenToAppURL(item['@id'])}/@@images/${
+      thumbnail: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/thumb`,
     };

package/src/components/manage/Blocks/Maps/Edit.jsx

@@ -11,6 +11,7 @@ import MapsSidebar from '@plone/volto/components/manage/Blocks/Maps/MapsSidebar'
 import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -121,7 +122,7 @@ const Edit = React.memo((props) => {
       ) : (
         <Message>
           <center>
-            <img src={mapsBlockSVG} alt="" />
+            <Image src={mapsBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -42,7 +42,7 @@ const blockPropsAreChanged = (prevProps, nextProps) => {
   return isEqual(prev, next);
 };
 
-const applyDefaults = (data, root) => {
+const applyDefaults = (data, root, blockQuery) => {
   const defaultQuery = [
     {
       i: 'path',
@@ -51,7 +51,8 @@ const applyDefaults = (data, root) => {
     },
   ];
 
-  const searchBySearchableText = data.query.filter(
+  const dataQuery = data?.query?.length ? data.query : [];
+  const searchBySearchableText = dataQuery.filter(
     (item) => item['i'] === 'SearchableText',
   ).length;
 
@@ -66,11 +67,27 @@ const applyDefaults = (data, root) => {
       ? { sort_order: 'descending' }
       : {};
 
+  // We start with the base query from the block.
+  // We enhance it with the query from the facets (filters).
+  // We fall back to the default query.
+  let query = blockQuery?.length ? blockQuery : [];
+  if (!query.length) {
+    query = dataQuery.length ? dataQuery : defaultQuery;
+  } else if (dataQuery.length) {
+    // We have both a base query and a filter.  Combine them.
+    // Items in the filter win over items in the base query.
+    const filterKeys = new Set(dataQuery.map((obj) => obj.i));
+    query = [
+      ...dataQuery,
+      ...blockQuery.filter((item) => !filterKeys.has(item.i)),
+    ];
+  }
+
   return {
     ...data,
     ...sort_on,
     ...sort_order,
-    query: data?.query?.length ? data.query : defaultQuery,
+    query,
   };
 };
 
@@ -93,7 +110,7 @@ const SearchBlockView = (props) => {
   }, [dataListingBodyVariation, mode]);
 
   const root = useSelector((state) => state.breadcrumbs.root);
-  const listingBodyData = applyDefaults(searchData, root);
+  const listingBodyData = applyDefaults(searchData, root, data.query?.query);
 
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
   refreshTeaser: {
     id: 'Refresh source content',
-    defaultMessage: 'Refresh source content',
+    defaultMessage: 'Reset to target',
   },
   invalidTeaser: {
     id: 'Invalid teaser source',
@@ -29,6 +29,16 @@ const messages = defineMessages({
   },
 });
 
+function getImageField(resp) {
+  if (!resp) return null;
+
+  if (resp.preview_image_link) return 'preview_image_link';
+  if (resp.preview_image) return 'preview_image';
+  if (resp.image) return 'image';
+
+  return null;
+}
+
 const TeaserData = (props) => {
   const {
     block,
@@ -58,16 +68,20 @@ const TeaserData = (props) => {
       '@type': resp?.['@type'],
       Description: resp?.description,
       Title: resp.title,
-      hasPreviewImage: resp?.preview_image ? true : false,
+      hasPreviewImage: getImageField(resp) ? true : false,
       head_title: resp.head_title ?? null,
-      image_field: resp?.preview_image
-        ? 'preview_image'
-        : resp?.image
-          ? 'image'
-          : null,
+      image_field: getImageField(resp),
       image_scales: {
         preview_image: [resp?.preview_image],
         image: [resp?.image],
+        preview_image_link: resp?.preview_image_link
+          ? [
+              {
+                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
+                base_path: resp?.preview_image_link?.['@id'],
+              },
+            ]
+          : [],
       },
       title: resp.title,
     };

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -33,7 +33,7 @@ const TeaserDefaultTemplate = (props) => {
         {!href && isEditMode && (
           <Message>
             <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
+              <Image src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>

package/src/components/manage/Blocks/Teaser/schema.js

@@ -22,9 +22,13 @@ const messages = defineMessages({
     id: 'Description',
     defaultMessage: 'Description',
   },
-  head_title: {
+  kicker: {
     id: 'head_title',
-    defaultMessage: 'Head title',
+    defaultMessage: 'Kicker',
+  },
+  kicker_description: {
+    id: 'The kicker is a line of text shown above the title.',
+    defaultMessage: 'The kicker is a line of text shown above the title.',
   },
   teaser: {
     id: 'Teaser',
@@ -88,7 +92,8 @@ export const TeaserSchema = ({ data, intl }) => {
         title: intl.formatMessage(messages.title),
       },
       head_title: {
-        title: intl.formatMessage(messages.head_title),
+        title: intl.formatMessage(messages.kicker),
+        description: intl.formatMessage(messages.kicker_description),
       },
       description: {
         title: intl.formatMessage(messages.description),

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -77,8 +77,14 @@ export const TitleBlockEdit = (props) => {
         ReactEditor.focus(editor);
       } else {
         // nothing is selected, move focus to end
-        ReactEditor.focus(editor);
-        Transforms.select(editor, Editor.end(editor, []));
+        // make sure that the editor is focused
+        setTimeout(() => {
+          const focused = ReactEditor.focus(editor);
+          if (!focused) {
+            ReactEditor.focus(editor);
+            Transforms.select(editor, Editor.end(editor, []));
+          }
+        }, 0);
       }
     }
   }, [prevSelected, selected, editor]);

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -12,6 +12,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -82,7 +83,7 @@ const Edit = (props) => {
       ) : (
         <Message>
           <center>
-            <img src={videoBlockSVG} alt="" />
+            <Image src={videoBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}