@plone/volto 19.0.0-alpha.31 → 19.0.0-alpha.32

package/CHANGELOG.md

@@ -17,6 +17,12 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.32 (2026-04-30)
+
+### Breaking
+
+- Make form autosave opt-in behind `config.experimental.saveAsDraft.enabled`; enable this flag to preserve the previous save-as-draft behavior. @sneridagh 
+
 ## 19.0.0-alpha.31 (2026-04-28)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.31",
+  "version": "19.0.0-alpha.32",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -183,9 +183,9 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
     "@plone/components": "4.0.0-alpha.7",
-    "@plone/registry": "3.0.0-alpha.11",
+    "@plone/scripts": "4.0.0-alpha.6",
     "@plone/volto-slate": "19.0.0-alpha.15",
-    "@plone/scripts": "4.0.0-alpha.6"
+    "@plone/registry": "3.0.0-alpha.11"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -292,11 +292,11 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.3",
     "webpack-node-externals": "3.0.0",
-    "@plone/babel-preset-razzle": "^1.0.0-alpha.0",
+    "@plone/razzle": "1.0.0-alpha.4",
     "@plone/types": "2.0.0-alpha.17",
-    "@plone/razzle-dev-utils": "1.0.0-alpha.2",
+    "@plone/babel-preset-razzle": "^1.0.0-alpha.0",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/razzle": "1.0.0-alpha.4"
+    "@plone/razzle-dev-utils": "1.0.0-alpha.2"
   },
   "scripts": {
     "analyze": "BUNDLE_ANALYZE=true razzle build",

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

@@ -59,6 +59,8 @@ import { compose } from 'redux';
 import config from '@plone/volto/registry';
 import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
+const noop = () => {};
+
 /**
  * Form container class.
  * @class Form
@@ -117,6 +119,9 @@ class Form extends Component {
     allowedBlocks: PropTypes.arrayOf(PropTypes.string),
     showRestricted: PropTypes.bool,
     global: PropTypes.bool,
+    checkSavedDraft: PropTypes.func,
+    onSaveDraft: PropTypes.func,
+    onCancelDraft: PropTypes.func,
   };
 
   /**
@@ -153,6 +158,9 @@ class Form extends Component {
     requestError: null,
     allowedBlocks: null,
     global: false,
+    checkSavedDraft: noop,
+    onSaveDraft: noop,
+    onCancelDraft: noop,
   };
 
   /**

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

@@ -4,14 +4,47 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import Form from './Form';
+import config from '@plone/volto/registry';
 
 const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
 vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Utils/withSaveAsDraft', async () => {
+  const React = await import('react');
+  const { default: config } = await import('@plone/volto/registry');
+
+  return {
+    default: () => (WrappedComponent) =>
+      React.forwardRef((props, ref) =>
+        config.experimental?.saveAsDraft?.enabled ? (
+          <div data-autosave-wrapper="true">
+            <WrappedComponent
+              {...props}
+              checkSavedDraft={vi.fn()}
+              onSaveDraft={vi.fn()}
+              onCancelDraft={vi.fn()}
+              ref={ref}
+            />
+          </div>
+        ) : (
+          <WrappedComponent {...props} ref={ref} />
+        ),
+      ),
+  };
+});
 
 describe('Form', () => {
+  beforeEach(() => {
+    config.experimental = {
+      ...(config.experimental || {}),
+      saveAsDraft: {
+        enabled: false,
+      },
+    };
+  });
+
   it('renders a form component', () => {
     const store = mockStore({
       intl: {
@@ -49,10 +82,106 @@ describe('Form', () => {
             onCancel={() => {}}
           />
         </MemoryRouter>
-        ,
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('does not wrap the form with autosave when the experimental flag is disabled', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(0);
+  });
+
+  it('wraps the form with autosave when the experimental flag is enabled', () => {
+    config.experimental = {
+      ...config.experimental,
+      saveAsDraft: {
+        enabled: true,
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(1);
+  });
 });

package/src/config/index.js

@@ -189,6 +189,9 @@ let config = {
     addBlockButton: {
       enabled: true,
     },
+    saveAsDraft: {
+      enabled: false,
+    },
   },
   widgets: {},
   views: {},

package/src/helpers/Utils/withSaveAsDraft.jsx

@@ -9,6 +9,7 @@ import checkSVG from '@plone/volto/icons/check.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { useIntl, defineMessages } from 'react-intl';
 import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   autoSaveFound: {
@@ -227,15 +228,38 @@ export default function withSaveAsDraft(options) {
       WrappedComponent,
     )})`;
 
-    if (forwardRef) {
-      return hoistNonReactStatics(
-        React.forwardRef((props, ref) => (
-          <WithSaveAsDraft {...props} forwardedRef={ref} />
-        )),
-        WrappedComponent,
-      );
-    }
+    const DraftWrappedComponent = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => (
+            <WithSaveAsDraft {...props} forwardedRef={ref} />
+          )),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+
+    const WithExperimentalSaveAsDraft = forwardRef
+      ? hoistNonReactStatics(
+          React.forwardRef((props, ref) => {
+            const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+              ? DraftWrappedComponent
+              : WrappedComponent;
+
+            return <ComponentToRender {...props} ref={ref} />;
+          }),
+          WrappedComponent,
+        )
+      : hoistNonReactStatics((props) => {
+          const ComponentToRender = config.experimental?.saveAsDraft?.enabled
+            ? DraftWrappedComponent
+            : WrappedComponent;
+
+          return <ComponentToRender {...props} />;
+        }, WrappedComponent);
+
+    WithExperimentalSaveAsDraft.displayName = `WithExperimentalSaveAsDraft(${getDisplayName(
+      WrappedComponent,
+    )})`;
 
-    return hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+    return WithExperimentalSaveAsDraft;
   };
 }