@plone/volto 14.0.0-alpha.17 → 14.0.0-alpha.20

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Change Log
 
+## 14.0.0-alpha.20 (2021-10-15)
+
+### Breaking
+
+- Revisited, rethought and refactored Seamless mode Seamless mode @sneridagh
+For more information, please read the deploying guide
+https://docs.voltocms.com/deploying/seamless-mode/
+
+and the upgrade guide
+https://docs.voltocms.com/upgrade-guide/
+
+### Bugfix
+
+- Fixed SelectWidget: when there was a selected value, the selection was lost when the tab was changed. @giuliaghisini
+
+## 14.0.0-alpha.19 (2021-10-15)
+
+### Feature
+
+- Make VocabularyTermsWidget orderable @ksuess
+- Get widget by tagged values @ksuess
+
+## 14.0.0-alpha.18 (2021-10-11)
+
+### Internal
+
+- Re-release last release, since it does not show on NPM @sneridagh
+
 ## 14.0.0-alpha.17 (2021-10-11)
 
 ### Breaking
@@ -8,7 +36,7 @@
 
 ### Bugfix
 
--Add spinner on sharing View Button @iRohitSingh
+- Add spinner on sharing View Button @iRohitSingh
 
 ## 14.0.0-alpha.16 (2021-10-10)
 
@@ -24,7 +52,7 @@
 
 - Adjusted main `Logo` component styling @sneridagh
 
-For a more information, please read the upgrade guide
+For more information, please read the upgrade guide
 https://docs.voltocms.com/upgrade-guide/
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.0.0-alpha.17",
+  "version": "14.0.0-alpha.20",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -73,7 +73,7 @@
     "ci:start-frontend-multilingual": "RAZZLE_TESTING_ADDONS=core-sandbox:multilingualFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:multilingual",
     "ci:start-frontend-workingCopy": "RAZZLE_TESTING_ADDONS=core-sandbox:workingCopyFixture RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 cypress:run:workingCopy",
     "ci:start-project-frontend": "cd my-volto-app && RAZZLE_API_PATH=http://localhost:55001/plone yarn build && start-test start:prod http://localhost:3000 'cd .. && yarn cypress:run'",
-    "ci:start-frontend-guillotina": "RAZZLE_TESTING_ADDONS=volto-guillotina RAZZLE_API_PATH=http://localhost:8081/db/web yarn build && start-test start:prod http://localhost:3000 cypress:run:guillotina",
+    "ci:start-frontend-guillotina": "RAZZLE_TESTING_ADDONS=volto-guillotina RAZZLE_API_PATH=http://localhost:8081/db/web RAZZLE_LEGACY_TRAVERSE=true yarn build && start-test start:prod http://localhost:3000 cypress:run:guillotina",
     "ci:cypress:run": "start-test ci:start-api-plone http-get://localhost:55001/plone ci:start-frontend",
     "ci:cypress:project:run": "start-test ci:start-api-plone http-get://localhost:55001/plone ci:start-project-frontend",
     "ci:cypress:run:core-sandbox": "start-test ci:start-api-plone http-get://localhost:55001/plone ci:start-frontend-core-sandbox",

package/src/components/manage/Form/Field.jsx

@@ -45,6 +45,25 @@ const getWidgetByName = (widget) =>
     ? config.widgets.widget[widget] || getWidgetDefault()
     : null;
 
+/**
+ * Get widget by tagged values
+ * @param {object} widgetOptions
+ * @returns {string} Widget component.
+ * 
+ 
+directives.widget(
+    'fieldname',
+    frontendOptions={
+        "widget": 'specialwidget',
+        "version": 'extra'
+    })
+
+ */
+const getWidgetFromTaggedValues = (widgetOptions) =>
+  typeof widgetOptions?.frontendOptions?.widget === 'string'
+    ? config.widgets.widget[widgetOptions.frontendOptions.widget]
+    : null;
+
 /**
  * Get widget by field's `vocabulary` attribute
  * @method getWidgetByVocabulary
@@ -115,6 +134,7 @@ const getWidgetByType = (type) => config.widgets.type[type] || null;
 const Field = (props, { intl }) => {
   const Widget =
     getWidgetByFieldId(props.id) ||
+    getWidgetFromTaggedValues(props.widgetOptions) ||
     getWidgetByName(props.widget) ||
     getWidgetByChoices(props) ||
     getWidgetByVocabulary(props.vocabulary) ||

package/src/components/manage/Form/Field.test.jsx

@@ -222,4 +222,27 @@ describe('Field', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a widget regarding the priority of tagged value over name', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <>
+          <Field widget="textarea" id="test" />
+          <Field
+            widget="textarea"
+            widgetOptions={{ frontendOptions: { widget: 'richtext' } }}
+            id="test"
+          />
+        </>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -155,11 +155,26 @@ class SelectWidget extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    if (!this.props.choices?.length && this.props.vocabBaseUrl) {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
       this.props.getVocabulary(this.props.vocabBaseUrl);
     }
   }
 
+  componentDidUpdate() {
+    if (
+      !this.state.selectedOption &&
+      this.props.value &&
+      this.props.choices?.length > 0
+    ) {
+      this.setState({
+        selectedOption: normalizeValue(this.props.choices, this.props.value),
+      });
+    }
+  }
+
   /**
    * Initiate search with new query
    * @method loadOptions

package/src/components/manage/Widgets/VocabularyTermsWidget.jsx

@@ -1,41 +1,106 @@
 /**
  * VocabularyTermsWidget
  * @module components/manage/Widgets/VocabularyTermsWidget
- * Widget for dict field
- *   - with value_type TextLine field
- *   - or value_type Dict field for translations
- *
- * values are editable
- * keys are generated
- * Purpose: Use this widget for a dict field (of controlpanel),
- * that acts as a source of a vocabulary for a Choice field.
- * Vocabulary terms should change over time only in title (corresponding dictionary value), not value (corresponding dictionary key),
+ * Widget for plone.schema.JSONField field meant for a SimpleVocabulary source
+ * 
+
+VOCABULARY_SCHEMA = json.dumps(
+    {
+        "type": "object",
+        "properties": {
+            "items": {
+                "type": "array",
+                "items": {
+                    "type": "object",
+                    "properties": {
+                        "token": {"type": "string"},
+                        "titles": {
+                            "type": "object",
+                            "properties": {
+                                "lang": {"type": "string"},
+                                "title": {"type": "string"},
+                            }
+                        },
+                    }
+                }
+            }
+        },
+    }
+)
+
+
+class IPloneconfSettings(Interface):
+
+    types_of_foo = schema.JSONField(
+        title="Types of Foo",
+        description="Available types of a foo",
+        required=False,
+        schema=VOCABULARY_SCHEMA,
+        widget="vocabularyterms",
+        default={"items": [
+            {
+                "token": "talk",
+                "titles": {
+                    "en": "Talk",
+                    "de": "Vortrag",
+                }
+            },
+            {
+                "token": "lightning-talk",
+                "titles": {
+                    "en": "Lightning-Talk",
+                    "de": "kürzerer erleuchtender Vortrag",
+                }
+            },
+        ]},
+        missing_value={"items": []},
+    )
+
+
+@provider(IVocabularyFactory)
+def TalkTypesVocabulary(context):
+    name = "ploneconf.types_of_talk"
+    registry_record_value = api.portal.get_registry_record(name)
+    items = registry_record_value.get('items', [])
+    lang = api.portal.get_current_language()
+    return SimpleVocabulary.fromItems([[item['token'], item['token'], item['titles'][lang]] for item in items])
+
+
+ * titles are editable
+ * tokens are generated
+ * 
+ * Purpose: Use this widget for a controlpanel field
+ * that acts as a source of a vocabulary for a zope.schema.Choice field.
+ * Vocabulary terms should change over time only in title, not value,
  * as vocabulary term values are stored on content type instances.
  *
- * The widget has two versions depending if you apply it (widget='vocabularyterms') to a plone.schema Dict field
- *   - with value_type TextLine field
- *   - or value_type Dict field for translations
- * The latter provides fields for all config.settings.supportedLanguages
+ * Apply widget with `widget='vocabularyterms'`
+ * Future widget directive coming: Apply widget with directive widget
  *
- * See storybook for a demo.
+ * See storybook for a demo: Run
+ * `yarn storybook`
+ * or see https://docs.voltocms.com/storybook/
  */
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { keys, values } from 'lodash';
+import { findIndex, remove } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 
-import { Button, Divider, Grid, Input, Segment } from 'semantic-ui-react';
+import { Button, Segment } from 'semantic-ui-react';
 
-import { FormFieldWrapper, Icon, ObjectWidget } from '@plone/volto/components';
+import {
+  DragDropList,
+  FormFieldWrapper,
+  Icon,
+  ObjectWidget,
+} from '@plone/volto/components';
 import { langmap } from '@plone/volto/helpers';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import addSVG from '@plone/volto/icons/add.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-
-import config from '@plone/volto/registry';
+import dragSVG from '@plone/volto/icons/drag.svg';
 
 const messages = defineMessages({
   title: {
@@ -66,26 +131,36 @@ const messages = defineMessages({
 
 const VocabularyTermsWidget = (props) => {
   const { id, value = {}, onChange } = props;
+  var widgetvalue = value;
   const dispatch = useDispatch();
   const [toFocusId, setToFocusId] = React.useState('');
   const intl = useIntl();
 
-  // sort terms by values
-  // sort terms with translations by defaultLanguage if provided by config
-  const defaultLanguage =
-    config.settings.defaultLanguage ?? config.settings.supportedLanguages[0];
-  const vocabularytokens =
-    props.value_type?.schema?.type === 'string'
-      ? keys(value).sort((a, b) => {
-          return value[a].localeCompare(value[b]);
-        })
-      : keys(value).sort((a, b) => {
-          return defaultLanguage
-            ? value[a][defaultLanguage]?.localeCompare(
-                value[b][defaultLanguage],
-              )
-            : values(value[a])[0].localeCompare(values(value[b])[0]);
-        });
+  React.useEffect(() => {
+    const element = document.getElementById(toFocusId);
+    element && element.focus();
+    setToFocusId('');
+  }, [dispatch, toFocusId]);
+
+  // LEGACY: value from unordered zope.schema.Dict instead of zope.schema.JSONField
+  if (widgetvalue.items === undefined) {
+    widgetvalue = {
+      items: Object.keys(widgetvalue).map((key) => {
+        return {
+          token: key,
+          titles: {
+            en: widgetvalue[key],
+          },
+        };
+      }),
+    };
+  }
+
+  let vocabularyterms = widgetvalue.items;
+
+  let supportedLanguages = Object.keys(
+    vocabularyterms?.map((el) => el.titles)?.pop() || {},
+  );
 
   const TermSchema = {
     title: 'Translation of term',
@@ -93,11 +168,11 @@ const VocabularyTermsWidget = (props) => {
       {
         id: 'default',
         title: 'Email',
-        fields: config.settings.supportedLanguages,
+        fields: supportedLanguages,
       },
     ],
     properties: Object.fromEntries(
-      config.settings.supportedLanguages.map((languageIdentifier) => [
+      supportedLanguages.map((languageIdentifier) => [
         languageIdentifier,
         {
           title: langmap[languageIdentifier]?.nativeName ?? languageIdentifier,
@@ -107,37 +182,40 @@ const VocabularyTermsWidget = (props) => {
     required: [],
   };
 
-  React.useEffect(() => {
-    const element = document.getElementById(toFocusId);
-    element && element.focus();
-  }, [dispatch, toFocusId, value]);
-
-  function onChangeFieldHandler(dictkey, fieldvalue) {
-    onChange(id, { ...value, [dictkey]: fieldvalue });
-    if (typeof fieldvalue === 'string') {
-      setToFocusId(props.id + '-' + dictkey);
-    }
+  function onChangeFieldHandler(token, fieldid, fieldvalue) {
+    let index = findIndex(widgetvalue.items, { token: token });
+    let newitems = widgetvalue.items;
+    newitems.splice(index, 1, {
+      token: token,
+      titles: fieldvalue,
+    });
+    onChange(id, {
+      items: newitems,
+    });
   }
 
   function addTermHandler(e) {
     e.preventDefault();
-    const newdictkey = uuid();
-    if (props.value_type?.schema?.type === 'string') {
-      onChange(id, {
-        ...value,
-        [newdictkey]: '',
-      });
-      setToFocusId(props.id + '-' + newdictkey);
-    } else {
-      onChange(id, {
-        ...value,
-        [newdictkey]: Object.fromEntries(
-          config.settings.supportedLanguages.map((el) => [el, '']),
-        ),
-      });
-    }
+    const newtoken = uuid();
+    let newitems = widgetvalue.items;
+    newitems.push({
+      token: newtoken,
+      titles: Object.fromEntries(supportedLanguages.map((el) => [el, ''])),
+    });
+    onChange(id, {
+      items: newitems,
+    });
+    setToFocusId(`field-${supportedLanguages[0]}-0-${id}-${newtoken}`);
+  }
+
+  function swap(arr, from, to) {
+    arr.splice(from, 1, arr.splice(to, 1, arr[from])[0]);
   }
 
+  let enhancedvocabularyterms = vocabularyterms.map((el) => {
+    return { ...el, '@id': el.token };
+  });
+
   return (
     <FormFieldWrapper {...props} className="dictwidget">
       <Segment basic>
@@ -154,84 +232,93 @@ const VocabularyTermsWidget = (props) => {
           {intl.formatMessage(messages.addTerm)}
         </Button>
       </div>
-      <Grid className="entries-list">
-        {vocabularytokens.map((dictkey, index) => {
-          return (
-            <Grid.Row stretched className="entry-wrapper" key={index}>
-              <Grid.Column width="1">
-                <Button.Group>
-                  <Button
-                    basic
-                    className="cancel"
-                    title={intl.formatMessage(messages.removeTerm)}
-                    aria-label={`${intl.formatMessage(messages.removeTerm)} #${
-                      index + 1
-                    }`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      let dct = { ...value };
-                      delete dct[dictkey];
-                      onChange(id, dct);
-                    }}
-                  >
-                    <Icon name={deleteSVG} size="20px" color="#e40166" />
-                  </Button>
-                </Button.Group>
-              </Grid.Column>
-              <Grid.Column width="10">
-                {typeof value[dictkey] === 'string' ? (
-                  <Input
-                    id={`${props.id}-${dictkey}`}
-                    name={`${props.id}-${dictkey}`}
-                    type="text"
-                    placeholder={intl.formatMessage(messages.termtitlelabel)}
-                    required={true}
-                    value={value[dictkey]}
-                    onChange={(e, target) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onChangeFieldHandler(dictkey, target.value);
-                    }}
-                  />
-                ) : (
-                  <>
-                    <ObjectWidget
-                      id={`${id}-${dictkey}`}
-                      onChange={(id, value) => {
-                        onChangeFieldHandler(dictkey, value);
-                      }}
-                      value={value[dictkey]}
-                      schema={TermSchema}
-                      title="Translation of term"
-                    />
-                    <Divider />
-                  </>
-                )}
-              </Grid.Column>
-              <Grid.Column width="1">
-                {value[dictkey]?.length > 0 && (
-                  <Button.Group>
-                    <Button
-                      basic
-                      className="cancel"
-                      title={intl.formatMessage(messages.clearTermTitle)}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onChangeFieldHandler(dictkey, '');
-                      }}
-                    >
-                      <Icon name={clearSVG} size="20px" />
-                    </Button>
-                  </Button.Group>
-                )}
-              </Grid.Column>
-            </Grid.Row>
+      <DragDropList
+        childList={enhancedvocabularyterms.map((o) => [o['@id'], o])}
+        onMoveItem={(result) => {
+          const { source, destination } = result;
+          if (!destination) {
+            return;
+          }
+          let newitems = widgetvalue.items;
+          swap(newitems, source.index, destination.index);
+          onChange(id, {
+            items: newitems,
+          });
+          return true;
+        }}
+      >
+        {(dragProps) => {
+          const { child, childId, index } = dragProps;
+          let termProps = {
+            index: index,
+            id,
+            vocabularyterms,
+            vterm: child,
+            onChange,
+          };
+          return termsWrapper(
+            dragProps,
+            <ObjectWidget
+              id={`${id}-${child.token}`}
+              key={childId}
+              onChange={(fieldid, fieldvalue) => {
+                onChangeFieldHandler(child.token, fieldid, fieldvalue);
+              }}
+              value={child.titles}
+              schema={TermSchema}
+              title="Translation of term"
+            />,
+            termProps,
           );
-        })}
-      </Grid>
+        }}
+      </DragDropList>
     </FormFieldWrapper>
   );
 };
 
+const termsWrapper = ({ draginfo }, OW, termProps) => (
+  <TermsWrapper draginfo={draginfo} termProps={termProps}>
+    {OW}
+  </TermsWrapper>
+);
+
+const TermsWrapper = (props) => {
+  const intl = useIntl();
+  const { termProps, draginfo, children } = props;
+  const { id, vocabularyterms, vterm, onChange } = termProps;
+
+  return (
+    <div
+      ref={draginfo.innerRef}
+      {...draginfo.draggableProps}
+      className="vocabularyterm"
+    >
+      <div style={{ alignItems: 'center', display: 'flex' }}>
+        <div {...draginfo.dragHandleProps} className="draghandlewrapper">
+          <Icon name={dragSVG} size="18px" />
+        </div>
+        <div className="ui drag block inner">{children}</div>
+        <div>
+          <Button
+            icon
+            basic
+            className="delete-button"
+            title={intl.formatMessage(messages.removeTerm)}
+            aria-label={`${intl.formatMessage(messages.removeTerm)} #${
+              vterm.token
+            }`}
+            onClick={(e) => {
+              e.preventDefault();
+              remove(vocabularyterms, (el) => el.token === vterm.token);
+              onChange(id, { items: vocabularyterms });
+            }}
+          >
+            <Icon name={deleteSVG} size="20px" color="#e40166" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default VocabularyTermsWidget;

package/src/components/manage/Widgets/VocabularyTermsWidget.stories.js

@@ -10,18 +10,26 @@ const customStore = {
   },
 };
 
-const customStoreTranslations = {
-  userSession: { token: '1234' },
-  intl: {
-    locale: 'it',
-    messages: {},
-  },
-};
-
-const WrappedSimple = (args) => {
+const WrappedJSONField = (args) => {
   const [value, setValue] = React.useState({
-    '001': 'manual',
-    '002': 'questions & answers',
+    items: [
+      {
+        token: 'talk',
+        titles: {
+          en: 'Talk',
+          de: 'Vortrag',
+          it: 'Lettura',
+        },
+      },
+      {
+        token: 'lightning-talk',
+        titles: {
+          en: 'Lightning-Talk',
+          de: 'kürzerer erleuchtender Vortrag',
+          it: 'Lightning-Talk',
+        },
+      },
+    ],
   });
   const onChange = (block, value) => setValue(value);
 
@@ -33,15 +41,10 @@ const WrappedSimple = (args) => {
       <div className="ui segment form attached">
         <VocabularyTermsWidget
           {...args}
-          id="Simple"
+          id="simplevocabulary"
           title="Vocabulary terms"
           block="testBlock"
           value={value}
-          value_type={{
-            schema: {
-              type: 'string',
-            },
-          }}
           onChange={onChange}
         />
         <pre>{JSON.stringify(value, null, 4)}</pre>
@@ -50,33 +53,30 @@ const WrappedSimple = (args) => {
   );
 };
 
-const WrappedTranslations = (args) => {
+const WrappedSimple = (args) => {
   const [value, setValue] = React.useState({
-    '001': {
-      en: 'manual',
-      it: 'manuale',
-      de: 'Anleitung',
-    },
-    '002': {
-      en: 'questions & answers',
-      it: 'domande frequenti',
-      de: 'FAQs',
-    },
+    '001': 'manual',
+    '002': 'questions & answers',
   });
   const onChange = (block, value) => setValue(value);
 
   return (
     <Wrapper
       location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStoreTranslations}
+      customStore={customStore}
     >
       <div className="ui segment form attached">
         <VocabularyTermsWidget
           {...args}
-          id="Translations"
+          id="Simple"
           title="Vocabulary terms"
           block="testBlock"
           value={value}
+          value_type={{
+            schema: {
+              type: 'string',
+            },
+          }}
           onChange={onChange}
         />
         <pre>{JSON.stringify(value, null, 4)}</pre>
@@ -97,6 +97,5 @@ export default {
   ],
 };
 
+export const JSONField = () => <WrappedJSONField />;
 export const Simple = () => <WrappedSimple />;
-
-export const Translations = () => <WrappedTranslations />;

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -5,8 +5,15 @@ import { Provider } from 'react-intl-redux';
 
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
+let mockSerial = 0;
 const mockStore = configureStore();
 
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn().mockImplementation(() => `id-${mockSerial++}`),
+  };
+});
+
 test('renders a dictionary widget component', () => {
   const store = mockStore({
     intl: {
@@ -14,6 +21,34 @@ test('renders a dictionary widget component', () => {
       messages: {},
     },
   });
+  let initialValue = {
+    items: [
+      {
+        token: 'talk',
+        titles: {
+          en: 'Talk',
+          de: 'Vortrag',
+          it: 'Lettura',
+        },
+      },
+      {
+        token: 'keynote',
+        titles: {
+          en: 'Keynote',
+          de: 'Keynote',
+          it: 'Keynote',
+        },
+      },
+      {
+        token: 'lightning-talk',
+        titles: {
+          en: 'Lightning-Talk',
+          de: 'kürzerer erleuchtender Vortrag',
+          it: 'Lightning-Talk',
+        },
+      },
+    ],
+  };
   const component = renderer.create(
     <Provider store={store}>
       <VocabularyTermsWidget
@@ -23,10 +58,7 @@ test('renders a dictionary widget component', () => {
         onChange={() => {}}
         onBlur={() => {}}
         onClick={() => {}}
-        value={{
-          manual: 'Manual',
-          ubersicht: 'Übersicht',
-        }}
+        value={initialValue}
       />
     </Provider>,
   );

package/src/config/index.js

@@ -92,6 +92,8 @@ let config = {
     actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'],
     internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
     websockets: process.env.RAZZLE_WEBSOCKETS || false,
+    // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
+    legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     nonContentRoutes,
     extendedBlockRenderMap,
     blockStyleFn,

package/src/express-middleware/devproxy.js

@@ -14,7 +14,7 @@ const filter = function (pathname, req) {
   return (
     __DEVELOPMENT__ &&
     config.settings.devProxyToApiPath &&
-    req.headers.accept === 'application/json'
+    pathname.startsWith('/++api++')
   );
 };
 
@@ -79,9 +79,9 @@ export default function () {
       const { apiPathURL, instancePath } = getEnv();
       const target =
         config.settings.proxyRewriteTarget ||
-        `/VirtualHostBase/http/${apiPathURL.hostname}:${apiPathURL.port}${instancePath}/VirtualHostRoot`;
+        `/VirtualHostBase/http/${apiPathURL.hostname}:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
 
-      return `${target}${path}`;
+      return `${target}${path.replace('/++api++', '')}`;
     },
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
     ...(config.settings?.proxyRewriteTarget?.startsWith('https') && {

package/src/helpers/Api/APIResourceWithAuth.js

@@ -16,16 +16,18 @@ import config from '@plone/volto/registry';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
+    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+
     let apiPath = '';
     if (settings.internalApiPath && __SERVER__) {
       apiPath = settings.internalApiPath;
-    } else if (__DEVELOPMENT__ && config.settings.devProxyToApiPath) {
-      apiPath = config.settings.devProxyToApiPath;
+    } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
+      apiPath = settings.devProxyToApiPath;
     } else {
-      apiPath = config.settings.apiPath;
+      apiPath = settings.apiPath;
     }
     const request = superagent
-      .get(`${apiPath}${req.path}`)
+      .get(`${apiPath}${APISUFIX}${req.path}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
     const authToken = cookie.load('auth_token');

package/src/helpers/Api/Api.js

@@ -17,16 +17,19 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 function formatUrl(path) {
   const { settings } = config;
+  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 
   const adjustedPath = path[0] !== '/' ? `/${path}` : path;
   let apiPath = '';
   if (settings.internalApiPath && __SERVER__) {
     apiPath = settings.internalApiPath;
-  } else if (config.settings.apiPath) {
-    apiPath = config.settings.apiPath;
+  } else if (settings.apiPath) {
+    apiPath = settings.apiPath;
   }
-  return `${apiPath}${adjustedPath}`;
+
+  return `${apiPath}${APISUFIX}${adjustedPath}`;
 }
 
 /**

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

@@ -0,0 +1,41 @@
+import config from '@plone/volto/registry';
+import Api from './Api';
+
+jest.mock('superagent', () => ({
+  get: jest.fn((url) => ({
+    url,
+    query: jest.fn(),
+    set: jest.fn(),
+    type: jest.fn(),
+    send: jest.fn(),
+    end: jest.fn(),
+  })),
+}));
+
+beforeAll(() => {
+  config.settings.legacyTraverse = false;
+});
+
+const api = new Api();
+const { settings } = config;
+
+test('get request', () => {});
+
+describe('Api', () => {
+  it('prefixes relative path', () => {
+    const promise = api.get('');
+    expect(promise.request.url).toBe(`${settings.apiPath}/++api++/`);
+  });
+  it('does not prefix absolute path', () => {
+    const promise = api.get('/test');
+    expect(promise.request.url).toBe(`${settings.apiPath}/++api++/test`);
+  });
+  it('does not change http URL provided as path', () => {
+    const promise = api.get('http://example.com');
+    expect(promise.request.url).toBe('http://example.com');
+  });
+  it('does not change https URL provided as path', () => {
+    const promise = api.get('https://example.com');
+    expect(promise.request.url).toBe('https://example.com');
+  });
+});

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

@@ -18,6 +18,10 @@ jest.mock('superagent', () => ({
   })),
 }));
 
+beforeAll(() => {
+  config.settings.legacyTraverse = true;
+});
+
 const api = new Api();
 const { settings } = config;
 

package/src/server.jsx

@@ -131,6 +131,14 @@ function setupServer(req, res, next) {
       .send(`<!doctype html> ${renderToString(errorPage)}`);
   }
 
+  if (!__DEVELOPMENT__ && !process.env.RAZZLE_API_PATH && req.headers.host) {
+    req.app.locals.detectedHost = `${
+      req.headers['x-forwarded-proto'] || req.protocol
+    }://${req.headers.host}`;
+    config.settings.apiPath = req.app.locals.detectedHost;
+    config.settings.publicURL = req.app.locals.detectedHost;
+  }
+
   req.app.locals = {
     ...req.app.locals,
     store,
@@ -153,16 +161,6 @@ server.get('/*', (req, res) => {
   const url = req.originalUrl || req.url;
   const location = parseUrl(url);
 
-  let apiPathFromHostHeader;
-  // Get the Host header as apiPath just in case that the apiPath is not set
-  if (!config.settings.apiPath && req.headers.host) {
-    apiPathFromHostHeader = `${
-      req.headers['x-forwarded-proto'] || req.protocol
-    }://${req.headers.host}`;
-    config.settings.apiPath = apiPathFromHostHeader;
-    config.settings.publicURL = apiPathFromHostHeader;
-  }
-
   loadOnServer({ store, location, routes, api })
     .then(() => {
       // The content info is in the store at this point thanks to the asynconnect
@@ -208,8 +206,12 @@ server.get('/*', (req, res) => {
                     process.env.NODE_ENV !== 'production'
                   }
                   criticalCss={readCriticalCss(req)}
-                  apiPath={apiPathFromHostHeader || config.settings.apiPath}
-                  publicURL={apiPathFromHostHeader || config.settings.publicURL}
+                  apiPath={
+                    req.app.locals.detectedHost || config.settings.apiPath
+                  }
+                  publicURL={
+                    req.app.locals.detectedHost || config.settings.publicURL
+                  }
                 />,
               )}
             `,
@@ -223,8 +225,12 @@ server.get('/*', (req, res) => {
                   markup={markup}
                   store={store}
                   criticalCss={readCriticalCss(req)}
-                  apiPath={apiPathFromHostHeader || config.settings.apiPath}
-                  publicURL={apiPathFromHostHeader || config.settings.publicURL}
+                  apiPath={
+                    req.app.locals.detectedHost || config.settings.apiPath
+                  }
+                  publicURL={
+                    req.app.locals.detectedHost || config.settings.publicURL
+                  }
                 />,
               )}
             `,

package/src/start-client.jsx

@@ -40,13 +40,18 @@ export default () => {
     window.settings = config.settings;
   }
 
-  // If Host header is present (so window.env.apiPath is)
+  // Setup the client registry from the SSR response values, presents in the `window.env`
+  // variable. This is key for the Seamless mode to work.
   if (window.env.apiPath) {
     config.settings.apiPath = window.env.apiPath;
   }
   if (window.env.publicURL) {
     config.settings.publicURL = window.env.publicURL;
   }
+  // TODO: To be removed when the use of the legacy traverse is deprecated.
+  if (window.env.RAZZLE_LEGACY_TRAVERSE) {
+    config.settings.legacyTraverse = true;
+  }
 
   loadableReady(() => {
     hydrate(