@plone/volto 16.30.2 → 16.31.0

package/.changelog.draft

@@ -1,11 +1,8 @@
-## 16.30.2 (2024-01-24)
+## 16.31.0 (2024-02-26)
 
-### Bugfix
+### Feature
 
-- Removed git merge conflicts from french, english and brazilian volto.po locale files. @ichim-david [#5682](https://github.com/plone/volto/issues/5682)
-
-### Internal
-
-- Update versions of deps for Plone 5 @sneridagh [#5686](https://github.com/plone/volto/issues/5686)
+- Allow editor to edit metadata during bulk upload. @iFlameing [#5549](https://github.com/plone/volto/issues/5549)
+- Add global form state. @robgietema [#5721](https://github.com/plone/volto/issues/5721)
 
 

package/CHANGELOG.md

@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 16.31.0 (2024-02-26)
+
+### Feature
+
+- Allow editor to edit metadata during bulk upload. @iFlameing [#5549](https://github.com/plone/volto/issues/5549)
+- Add global form state. @robgietema [#5721](https://github.com/plone/volto/issues/5721)
+
+## 16.30.3 (2024-02-15)
+
+### Bugfix
+
+- Fix `links-to-item` should be a protected route. @iFlameing [#5666](https://github.com/plone/volto/issues/5666)
+- Fixed listing SSR rendering by sending `subrequestId` instead of `id` only within `getAsyncData`, similar to calling `getQueryStringResults` directly. @ichim-david [#5688](https://github.com/plone/volto/issues/5688)
+- Add extra wait calls to listing block tests to avoid sporadic failures. @ichim-david [#5753](https://github.com/plone/volto/issues/5753)
+
 ## 16.30.2 (2024-01-24)
 
 ### Bugfix

package/cypress/support/commands.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import '@testing-library/cypress/add-commands';
 import { getIfExists } from '../helpers';
 import { ploneAuth } from './constants';
@@ -38,6 +39,30 @@ Cypress.Commands.add('isInViewport', (element) => {
   });
 });
 
+// --- isInHTML ----------------------------------------------------------
+Cypress.Commands.add('isInHTML', ({ parent = 'body', content }) => {
+  cy.url().then((currentUrl) => {
+    // sometimes the cy command is called when the url is still at content/edit
+    // we want to query the html markup of the content, not the edit form
+    const url =
+      currentUrl.indexOf('/edit') !== -1
+        ? currentUrl.split('/edit')[0]
+        : currentUrl;
+    cy.request({
+      method: 'GET',
+      url: url,
+    }).then((response) => {
+      const html = Cypress.$(response.body);
+      if (content.startsWith('.') || content.startsWith('#')) {
+        return expect(html.find(parent)).to.have.descendants(content);
+      } else {
+        // check if parent contains the content text string in its HTML output
+        return expect(html.find(parent)).to.contain(content);
+      }
+    });
+  });
+});
+
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', (usr, pass) => {
   let api_url, user, password;
@@ -698,7 +723,7 @@ Cypress.Commands.add('clearSlate', (selector) => {
   return cy
     .get(selector)
     .focus()
-    .click()
+    .click({ force: true }) // fix sporadic failure this element is currently animating
     .wait(1000)
     .type('{selectAll}')
     .wait(1000)
@@ -801,7 +826,6 @@ function getTextNode(el, match) {
     return walk.nextNode();
   }
 
-  const nodes = [];
   let node;
   while ((node = walk.nextNode())) {
     if (node.wholeText.includes(match)) {
@@ -830,7 +854,7 @@ function createHtmlPasteEvent(htmlContent) {
 
 Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
   let block;
-  block = cy.getSlate(createNewSlate).type(`/${blockName}{enter}`);
+  block = cy.getSlate(createNewSlate).click().type(`/${blockName}{enter}`);
   return block;
 });
 
@@ -884,5 +908,38 @@ Cypress.Commands.add('configureListingWith', (contentType) => {
     '.querystring-widget .fields:first-of-type > .field .react-select__menu .react-select__option',
   )
     .contains(contentType)
+
     .click();
 });
+
+Cypress.Commands.add(
+  'addLocationQuerystring',
+  (option = 'Relative path', value) => {
+    cy.get('.block-editor-listing').click();
+    cy.get('.querystring-widget .fields').contains('Add criteria').click();
+    cy.get('.querystring-widget .react-select__menu .react-select__option')
+      .contains('Location')
+      .click();
+
+    cy.get('.querystring-widget .fields').contains('Absolute path').click();
+    cy.get(
+      '.querystring-widget .fields .react-select__menu .react-select__option',
+    )
+      .contains(option)
+      .click();
+    if (value) {
+      cy.get('.querystring-widget .fields .input')
+        .click()
+        .type(`${value}{enter}`);
+    }
+  },
+);
+
+Cypress.Commands.add('queryCounter', (path, steps, number = 1) => {
+  cy.intercept(path, cy.spy().as('counterName'));
+  steps.forEach((element) => {
+    element();
+  });
+
+  cy.get('@counterName').its('callCount').should('equal', number);
+});

package/locales/ca/LC_MESSAGES/volto.po

@@ -1,6 +1,3 @@
-# Translation of plone.pot to Catalan
-# Ramon Navarro Bosch <bloodbare a plone.org>, 2021
-# Víctor Fernández de Alba <victor a plone.org>, 2021
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/de/LC_MESSAGES/volto.po

@@ -1,4 +1,3 @@
-# Translation of plone.pot to German
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/es/LC_MESSAGES/volto.po

@@ -1,7 +1,3 @@
-# Gettext Message File for Plone
-# Translators:
-# Leonardo J. Caballero G. <leonardocaballero@gmail.com>, 2019, 2022, 2023.
-# Mikel Larreategi <mlarreategi@codesyntax.com>, 2021, 2022.
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/fi/LC_MESSAGES/volto.po

@@ -1,9 +1,3 @@
-# 
-# Translators:
-# Petri Savolainen <petri.savolainen@iki.fi>, 2020
-# Asko Soukka <asko.soukka@iki.fi>, 2020
-# Rikupekka Oksanen <rioksane@gmail.com>, 2022
-# 
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/fr/LC_MESSAGES/volto.po

@@ -1,13 +1,3 @@
-# Translation of plone.pot to French
-# French Translation Team <plone-i18n@lists.sourceforge.net>, 2003-2006.
-# Sebastien Douche <sdouche@gmail.com>, 2005-2007.
-# Encolpe Degoute <encolpe.degoute@ingeniweb.com>, 2006, 2007, 2008.
-# Gilles Lenfant <gilles.lenfant@ingeniweb.com>, 2008.
-# Encolpe Degoute <encolpe@gmail.com>, 2008.
-# Vincent Fretin <vincent.fretin@gmail.com>, 2009.
-# Kevin Deldycke <kevin@deldycke.com>, 2009.
-# JeanMichel FRANCOIS <toutpt@gmail.com>, 2010.
-# Denis Bitouzé <denis.bitouze@univ-littoral.fr>, 2019.
 msgid ""
 msgstr ""
 "Project-Id-Version: volto-fr\n"

package/locales/ja/LC_MESSAGES/volto.po

@@ -1,6 +1,3 @@
-# Manabu TERADA <terada@cmscom.jp> 2019
-# Peacock <peacock0803sz@gmail.com> 2019
-# zenich 2021
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/nl/LC_MESSAGES/volto.po

@@ -1,6 +1,3 @@
-# Translators:
-# Rob Gietema, 2017
-# Kim Paulissen, 2022
 msgid ""
 msgstr ""
 "Project-Id-Version: PlonenPOT-Creation-Date: 2017-04-27T19:30:59.079Z\n"

package/locales/pt/LC_MESSAGES/volto.po

@@ -1,6 +1,3 @@
-# Translators:
-# Emanuel de Jesus <emanuel.angelo@gmail.com>, 2019
-# 
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -1,7 +1,3 @@
-# Translators:
-# Léu Almeida <leo@webid.net.br>, 2019
-# Emanuel Angelo, emansije <emanuel.angelo@gmail.com>, 2019
-# Érico Andrei <ericof@plone.org>, 2021
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-11-13T11:51:31.002Z\n"
+"POT-Creation-Date: 2024-02-23T10:42:17.489Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.30.2",
+  "version": "16.31.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/news/5779.bugfix

@@ -0,0 +1 @@
+Fix sidebar form update. @robgietema

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.30.2",
+  "version": "16.31.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { map, remove } from 'lodash';
+import { isEmpty, map, remove } from 'lodash';
 import { Button, Table } from 'semantic-ui-react';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -227,7 +227,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    if (!this.props.data.table) {
+    if (!this.props.data.table || isEmpty(this.props.data.table)) {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         table: initialTable,
@@ -243,7 +243,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.data.table) {
+    if (!nextProps.data.table || isEmpty(nextProps.data.table)) {
       this.props.onChangeBlock(nextProps.block, {
         ...nextProps.data,
         table: initialTable,
@@ -528,10 +528,7 @@ class Edit extends Component {
                 icon
                 basic
                 onClick={this.onDeleteRow}
-                disabled={
-                  this.props.data.table &&
-                  this.props.data.table.rows.length === 1
-                }
+                disabled={this.props.data.table?.rows?.length === 1}
                 title={this.props.intl.formatMessage(messages.deleteRow)}
                 aria-label={this.props.intl.formatMessage(messages.deleteRow)}
               >
@@ -569,10 +566,7 @@ class Edit extends Component {
                 icon
                 basic
                 onClick={this.onDeleteCol}
-                disabled={
-                  this.props.data.table &&
-                  this.props.data.table.rows[0].cells.length === 1
-                }
+                disabled={this.props.data.table?.rows?.[0].cells.length === 1}
                 title={this.props.intl.formatMessage(messages.deleteCol)}
                 aria-label={this.props.intl.formatMessage(messages.deleteCol)}
               >

package/src/actions/form/form.js

@@ -0,0 +1,19 @@
+/**
+ * Form actions.
+ * @module actions/form/form
+ */
+
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Set form data function.
+ * @function setFormData
+ * @param {Object} data New form data.
+ * @returns {Object} Set sidebar action.
+ */
+export function setFormData(data) {
+  return {
+    type: SET_FORM_DATA,
+    data,
+  };
+}

package/src/actions/form/form.test.js

@@ -0,0 +1,14 @@
+import { setFormData } from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+describe('Form action', () => {
+  describe('setFormData', () => {
+    it('should create an action to set the form data', () => {
+      const data = { foo: 'bar' };
+      const action = setFormData(data);
+
+      expect(action.type).toEqual(SET_FORM_DATA);
+      expect(action.data).toEqual(data);
+    });
+  });
+});

package/src/actions/index.js

@@ -150,6 +150,7 @@ export {
 export { getQuerystring } from '@plone/volto/actions/querystring/querystring';
 export { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 export { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
+export { setFormData } from '@plone/volto/actions/form/form';
 export {
   deleteLinkTranslation,
   getTranslationLocator,

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

@@ -359,6 +359,7 @@ class Add extends Component {
             onSelectForm={() => {
               this.setState({ formSelected: 'addForm' });
             }}
+            global
           />
           {this.state.isClient && (
             <Portal node={document.getElementById('toolbar')}>

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,14 +1,29 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
+import qs from 'query-string';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const getCurrentPage = (location, id) => {
+  const pageQueryParam = qs.parse(location.search);
+  switch (Object.keys(pageQueryParam).length) {
+    case 0:
+      return 1;
+    case 1:
+      // when there is only one query param, it could be the simple page number or the sluggified block id
+      return pageQueryParam['page'] || pageQueryParam[slugify(`page-${id}`)];
+    default:
+      return pageQueryParam[slugify(`page-${id}`)];
+  }
+};
+
+export default function getListingBlockAsyncData(props) {
+  const { data, path, location, id, dispatch, blocksConfig, content } = props;
 
-export default function getListingBlockAsyncData({
-  dispatch,
-  data,
-  path,
-  blocksConfig,
-}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
+  const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+  const currentPage = getCurrentPage(location, id);
+
   return [
     dispatch(
       getQueryStringResults(
@@ -19,7 +34,8 @@ export default function getListingBlockAsyncData({
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        data.block,
+        subrequestID,
+        currentPage,
       ),
     ),
   ];

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -17,6 +17,7 @@ import {
   Modal,
   Table,
   Segment,
+  Input,
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
@@ -150,7 +151,27 @@ class ContentsUploadModal extends Component {
   }
 
   /**
-   * Submit handler
+   * Name change handler
+   * @method onChangeFileName
+   * @returns {undefined}
+   */
+
+  onChangeFileName(e, index) {
+    let copyOfFiles = [...this.state.files];
+    let originalFile = this.state.files[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    this.setState({
+      files: copyOfFiles,
+    });
+  }
+
+  /**
+   * Submit handlers
    * @method onSubmit
    * @returns {undefined}
    */
@@ -187,7 +208,7 @@ class ContentsUploadModal extends Component {
   render() {
     return (
       this.props.open && (
-        <Modal open={this.props.open}>
+        <Modal className="contents-upload-modal" open={this.props.open}>
           <Header>
             <FormattedMessage id="Upload files" defaultMessage="Upload files" />
           </Header>
@@ -269,8 +290,14 @@ class ContentsUploadModal extends Component {
                 </Table.Header>
                 <Table.Body>
                   {map(this.state.files, (file, index) => (
-                    <Table.Row className="upload-row" key={file.name}>
-                      <Table.Cell>{file.name}</Table.Cell>
+                    <Table.Row className="upload-row" key={index}>
+                      <Table.Cell>
+                        <Input
+                          className="file-name"
+                          value={file.name}
+                          onChange={(e) => this.onChangeFileName(e, index)}
+                        />
+                      </Table.Cell>
                       <Table.Cell>
                         {file.lastModifiedDate && (
                           <FormattedRelativeDate date={file.lastModifiedDate} />

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

@@ -307,6 +307,7 @@ class Edit extends Component {
         onSelectForm={() => {
           this.setState({ formSelected: 'editForm' });
         }}
+        global
       />
     );
 

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

@@ -16,6 +16,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import {
   findIndex,
   isEmpty,
+  isEqual,
   keys,
   map,
   mapValues,
@@ -40,7 +41,7 @@ import {
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
 import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
-import { setSidebarTab } from '@plone/volto/actions';
+import { setSidebarTab, setFormData } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
 
@@ -69,6 +70,7 @@ class Form extends Component {
       required: PropTypes.arrayOf(PropTypes.string),
     }),
     formData: PropTypes.objectOf(PropTypes.any),
+    globalData: PropTypes.objectOf(PropTypes.any),
     pathname: PropTypes.string,
     onSubmit: PropTypes.func,
     onCancel: PropTypes.func,
@@ -93,6 +95,7 @@ class Form extends Component {
     requestError: PropTypes.string,
     allowedBlocks: PropTypes.arrayOf(PropTypes.string),
     showRestricted: PropTypes.bool,
+    global: PropTypes.bool,
   };
 
   /**
@@ -123,6 +126,7 @@ class Form extends Component {
     editable: true,
     requestError: null,
     allowedBlocks: null,
+    global: false,
   };
 
   /**
@@ -198,6 +202,12 @@ class Form extends Component {
       }
     }
 
+    // Sync state to global state
+    if (this.props.global) {
+      this.props.setFormData(formData);
+    }
+
+    // Set initial state
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),
@@ -244,14 +254,18 @@ class Form extends Component {
     }
 
     if (this.props.onChangeFormData) {
-      if (
-        // TODO: use fast-deep-equal
-        JSON.stringify(prevState?.formData) !==
-        JSON.stringify(this.state.formData)
-      ) {
+      if (!isEqual(prevState?.formData, this.state.formData)) {
         this.props.onChangeFormData(this.state.formData);
       }
     }
+    if (
+      this.props.global &&
+      !isEqual(this.props.globalData, prevProps.globalData)
+    ) {
+      this.setState({
+        formData: this.props.globalData,
+      });
+    }
   }
 
   /**
@@ -325,15 +339,18 @@ class Form extends Component {
   onChangeField(id, value) {
     this.setState((prevState) => {
       const { errors, formData } = prevState;
+      const newFormData = {
+        ...formData,
+        // We need to catch also when the value equals false this fixes #888
+        [id]: value || (value !== undefined && isBoolean(value)) ? value : null,
+      };
       delete errors[id];
+      if (this.props.global) {
+        this.props.setFormData(newFormData);
+      }
       return {
         errors,
-        formData: {
-          ...formData,
-          // We need to catch also when the value equals false this fixes #888
-          [id]:
-            value || (value !== undefined && isBoolean(value)) ? value : null,
-        },
+        formData: newFormData,
         // Changing the form data re-renders the select widget which causes the
         // focus to get lost. To circumvent this, we set the focus back to
         // the input.
@@ -355,14 +372,13 @@ class Form extends Component {
   onSelectBlock(id, isMultipleSelection, event) {
     let multiSelected = [];
     let selected = id;
+    const formData = this.state.formData;
 
     if (isMultipleSelection) {
       selected = null;
-      const blocksLayoutFieldname = getBlocksLayoutFieldname(
-        this.state.formData,
-      );
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
 
-      const blocks_layout = this.state.formData[blocksLayoutFieldname].items;
+      const blocks_layout = formData[blocksLayoutFieldname].items;
 
       if (event.shiftKey) {
         const anchor =
@@ -422,6 +438,9 @@ class Form extends Component {
       this.setState({
         formData: this.props.formData,
       });
+      if (this.props.global) {
+        this.props.setFormData(this.props.formData);
+      }
     }
     this.props.onCancel(event);
   }
@@ -433,6 +452,8 @@ class Form extends Component {
    * @returns {undefined}
    */
   onSubmit(event) {
+    const formData = this.state.formData;
+
     if (event) {
       event.preventDefault();
     }
@@ -440,7 +461,7 @@ class Form extends Component {
     const errors = this.props.schema
       ? FormValidation.validateFieldsPerFieldset({
           schema: this.props.schema,
-          formData: this.state.formData,
+          formData,
           formatMessage: this.props.intl.formatMessage,
         })
       : {};
@@ -475,12 +496,15 @@ class Form extends Component {
       if (this.props.isEditForm) {
         this.props.onSubmit(this.getOnlyFormModifiedValues());
       } else {
-        this.props.onSubmit(this.state.formData);
+        this.props.onSubmit(formData);
       }
       if (this.props.resetAfterSubmit) {
         this.setState({
           formData: this.props.formData,
         });
+        if (this.props.global) {
+          this.props.setFormData(this.props.formData);
+        }
       }
     }
   }
@@ -495,15 +519,15 @@ class Form extends Component {
    * @returns {undefined}
    */
   getOnlyFormModifiedValues = () => {
+    const formData = this.state.formData;
+
     const fieldsModified = Object.keys(
-      difference(this.state.formData, this.state.initialFormData),
+      difference(formData, this.state.initialFormData),
     );
     return {
-      ...pickBy(this.state.formData, (value, key) =>
-        fieldsModified.includes(key),
-      ),
-      ...(this.state.formData['@static_behaviors'] && {
-        '@static_behaviors': this.state.formData['@static_behaviors'],
+      ...pickBy(formData, (value, key) => fieldsModified.includes(key)),
+      ...(formData['@static_behaviors'] && {
+        '@static_behaviors': formData['@static_behaviors'],
       }),
     };
   };
@@ -549,7 +573,7 @@ class Form extends Component {
       navRoot,
       type,
     } = this.props;
-    const { formData } = this.state;
+    const formData = this.state.formData;
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
@@ -560,17 +584,21 @@ class Form extends Component {
       this.state.isClient && (
         <Container>
           <BlocksToolbar
-            formData={this.state.formData}
+            formData={formData}
             selectedBlock={this.state.selected}
             selectedBlocks={this.state.multiSelected}
-            onChangeBlocks={(newBlockData) =>
+            onChangeBlocks={(newBlockData) => {
+              const newFormData = {
+                ...formData,
+                ...newBlockData,
+              };
               this.setState({
-                formData: {
-                  ...formData,
-                  ...newBlockData,
-                },
-              })
-            }
+                formData: newFormData,
+              });
+              if (this.props.global) {
+                this.props.setFormData(newFormData);
+              }
+            }}
             onSetSelectedBlocks={(blockIds) =>
               this.setState({ multiSelected: blockIds })
             }
@@ -578,22 +606,31 @@ class Form extends Component {
           />
           <UndoToolbar
             state={{
-              formData: this.state.formData,
+              formData,
               selected: this.state.selected,
               multiSelected: this.state.multiSelected,
             }}
             enableHotKeys
-            onUndoRedo={({ state }) => this.setState(state)}
+            onUndoRedo={({ state }) => {
+              if (this.props.global) {
+                this.props.setFormData(state.formData);
+              }
+              return this.setState(state);
+            }}
           />
           <BlocksForm
-            onChangeFormData={(newFormData) =>
+            onChangeFormData={(newData) => {
+              const newFormData = {
+                ...formData,
+                ...newData,
+              };
               this.setState({
-                formData: {
-                  ...formData,
-                  ...newFormData,
-                },
-              })
-            }
+                formData: newFormData,
+              });
+              if (this.props.global) {
+                this.props.setFormData(newFormData);
+              }
+            }}
             onChangeField={this.onChangeField}
             onSelectBlock={this.onSelectBlock}
             properties={formData}
@@ -633,9 +670,9 @@ class Form extends Component {
                           {...schema.properties[field]}
                           id={field}
                           fieldSet={item.title.toLowerCase()}
-                          formData={this.state.formData}
+                          formData={formData}
                           focus={this.state.inFocus[field]}
-                          value={this.state.formData?.[field]}
+                          value={formData?.[field]}
                           required={schema.required.indexOf(field) !== -1}
                           onChange={this.onChangeField}
                           onBlur={this.onBlurField}
@@ -698,10 +735,10 @@ class Form extends Component {
                             {...schema.properties[field]}
                             isDisabled={!this.props.editable}
                             id={field}
-                            formData={this.state.formData}
+                            formData={formData}
                             fieldSet={item.title.toLowerCase()}
                             focus={this.state.inFocus[field]}
-                            value={this.state.formData?.[field]}
+                            value={formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}
                             onBlur={this.onBlurField}
@@ -749,7 +786,7 @@ class Form extends Component {
                     <Field
                       {...schema.properties[field]}
                       id={field}
-                      value={this.state.formData?.[field]}
+                      value={formData?.[field]}
                       required={schema.required.indexOf(field) !== -1}
                       onChange={this.onChangeField}
                       onBlur={this.onBlurField}
@@ -810,5 +847,12 @@ class Form extends Component {
 const FormIntl = injectIntl(Form, { forwardRef: true });
 
 export default compose(
-  connect(null, { setSidebarTab }, null, { forwardRef: true }),
+  connect(
+    (state, props) => ({
+      globalData: state.form?.global,
+    }),
+    { setSidebarTab, setFormData },
+    null,
+    { forwardRef: true },
+  ),
 )(FormIntl);

package/src/components/theme/App/App.jsx

@@ -242,6 +242,7 @@ export const fetchContent = async ({ store, location }) => {
         id,
         data,
         blocksConfig,
+        content,
       });
       if (!p?.length) {
         throw new Error(

package/src/constants/ActionTypes.js

@@ -138,3 +138,4 @@ export const REMOVE_ALIASES = 'REMOVE_ALIASES';
 export const GET_USERSCHEMA = 'GET_USERSCHEMA';
 export const GET_UPGRADE = 'GET_UPGRADE';
 export const POST_UPGRADE = 'POST_UPGRADE';
+export const SET_FORM_DATA = 'SET_FORM_DATA';

package/src/reducers/form/form.js

@@ -4,7 +4,11 @@
  * @module reducers/form/form
  */
 
-const initialState = {};
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  global: {},
+};
 
 /**
  * Form reducer.
@@ -12,6 +16,14 @@ const initialState = {};
  * @param {Object} state Current state.
  * @returns {Object} New state.
  */
-export default function form(state = initialState) {
-  return state;
+export default function form(state = initialState, action = {}) {
+  switch (action.type) {
+    case SET_FORM_DATA:
+      return {
+        ...state,
+        global: action.data,
+      };
+    default:
+      return state;
+  }
 }

package/src/reducers/form/form.test.js

@@ -1,7 +1,19 @@
 import form from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
 
 describe('Form reducer', () => {
   it('should return the initial state', () => {
-    expect(form()).toEqual({});
+    expect(form()).toEqual({ global: {} });
+  });
+
+  it('should handle SET_FORM_DATA', () => {
+    expect(
+      form(undefined, {
+        type: SET_FORM_DATA,
+        data: { foo: 'bar' },
+      }),
+    ).toEqual({
+      global: { foo: 'bar' },
+    });
   });
 });

package/theme/themes/pastanaga/extras/contents.less

@@ -209,3 +209,14 @@
   align-items: center;
   margin-top: 2rem;
 }
+
+/* Contents Upload Modal */
+.contents-upload-modal {
+  .file-name {
+    width: 75%;
+
+    input {
+      padding: 0.67857143em 1em;
+    }
+  }
+}