From de9dcbd914be20e719b11ae5d7e038067a82140d Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Sat, 7 Oct 2023 10:36:27 +0200
Subject: [PATCH 01/27] Added @loadable/component typings

---
 package.json |  1 +
 yarn.lock    | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/package.json b/package.json
index aa78d8c787..ad9a5c9fd0 100644
--- a/package.json
+++ b/package.json
@@ -412,6 +412,7 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
+    "@types/loadable__component": "5.13.5",
     "@types/react-test-renderer": "18.0.1",
     "@typescript-eslint/eslint-plugin": "6.7.0",
     "@typescript-eslint/parser": "6.7.0",
diff --git a/yarn.lock b/yarn.lock
index 425cb10f6c..9b59e6c09b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3307,6 +3307,7 @@ __metadata:
     "@testing-library/jest-dom": 5.16.4
     "@testing-library/react": 12.1.5
     "@testing-library/react-hooks": 8.0.1
+    "@types/loadable__component": 5.13.5
     "@types/react-test-renderer": 18.0.1
     "@typescript-eslint/eslint-plugin": 6.7.0
     "@typescript-eslint/parser": 6.7.0
@@ -5319,6 +5320,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/loadable__component@npm:5.13.5":
+  version: 5.13.5
+  resolution: "@types/loadable__component@npm:5.13.5"
+  dependencies:
+    "@types/react": "*"
+  checksum: 9ff5c96931bbc1eeb7ba776890ca576a3a96c8f236538ce29380d6d4b28643d14a50bac5524be0859ade3620e47ec41a68af1d9e17c2cec6d3271424b144ac21
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.14.149, @types/lodash@npm:^4.14.167":
   version: 4.14.191
   resolution: "@types/lodash@npm:4.14.191"

From 661c130ad664154c3d73084434f4552ae956b6d7 Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <martina.bustacchini@redturtle.it>
Date: Sat, 7 Oct 2023 17:28:10 +0200
Subject: [PATCH 02/27] wip: lazyload Form components and Diff view, still need
 to fix most tests

---
 .../src/components/Blocks/TestBlock/Data.jsx  |  2 +-
 .../src/blocks/Table/TableBlockEdit.jsx       |  3 ++-
 .../blocks/Text/DefaultTextBlockEditor.jsx    |  8 ++-----
 .../src/elementEditor/PluginEditor.jsx        |  3 ++-
 src/components/index.js                       | 17 ++++++--------
 .../manage/Blocks/Block/DefaultEdit.jsx       |  2 +-
 .../manage/Blocks/Block/Settings.jsx          |  2 +-
 .../manage/Blocks/Container/Data.jsx          |  2 +-
 .../manage/Blocks/Container/Edit.jsx          |  4 ++--
 .../manage/Blocks/HeroImageLeft/Data.jsx      |  2 +-
 .../manage/Blocks/Image/ImageSidebar.jsx      |  3 ++-
 .../manage/Blocks/Listing/ListingData.jsx     |  3 ++-
 .../manage/Blocks/Maps/MapsSidebar.jsx        |  2 +-
 .../manage/Blocks/Search/SearchBlockEdit.jsx  |  3 ++-
 src/components/manage/Blocks/Table/Edit.jsx   |  3 ++-
 src/components/manage/Blocks/Teaser/Data.jsx  |  3 ++-
 src/components/manage/Blocks/ToC/Edit.jsx     |  2 +-
 .../manage/Blocks/Video/VideoSidebar.jsx      |  2 +-
 .../Contents/ContentsPropertiesModal.jsx      |  2 +-
 .../manage/Contents/ContentsRenameModal.jsx   |  2 +-
 .../manage/Contents/ContentsTagsModal.jsx     |  2 +-
 .../manage/Contents/ContentsWorkflowModal.jsx |  2 +-
 .../manage/Controlpanels/ContentTypes.jsx     |  2 +-
 .../Groups/GroupsControlpanel.jsx             |  2 +-
 .../manage/Controlpanels/Rules/AddRule.jsx    |  3 ++-
 .../Controlpanels/Rules/AddRule.test.jsx      |  3 +++
 .../manage/Controlpanels/Rules/EditRule.jsx   |  3 ++-
 .../Rules/components/VariableModal.jsx        |  2 +-
 .../Controlpanels/Users/RenderUsers.jsx       |  3 ++-
 .../Controlpanels/Users/UsersControlpanel.jsx |  2 +-
 src/components/manage/Diff/Diff.jsx           |  2 +-
 src/components/manage/Form/BlockDataForm.jsx  |  2 +-
 src/components/manage/Form/Form.jsx           |  6 +++--
 src/components/manage/Form/Form.test.jsx      |  5 ++--
 src/components/manage/Form/InlineForm.jsx     |  3 ++-
 src/components/manage/Form/ModalForm.jsx      |  3 ++-
 src/components/manage/Form/index.tsx          | 23 +++++++++++++++++++
 .../manage/Multilingual/TranslationObject.jsx |  4 +++-
 .../manage/Widgets/ObjectWidget.jsx           |  3 +--
 .../manage/Widgets/SchemaWidget.jsx           |  7 ++----
 .../theme/Comments/CommentEditModal.jsx       |  2 +-
 41 files changed, 93 insertions(+), 61 deletions(-)
 create mode 100644 src/components/manage/Form/index.tsx

diff --git a/packages/coresandbox/src/components/Blocks/TestBlock/Data.jsx b/packages/coresandbox/src/components/Blocks/TestBlock/Data.jsx
index e6d83a7416..8371ba5a1d 100644
--- a/packages/coresandbox/src/components/Blocks/TestBlock/Data.jsx
+++ b/packages/coresandbox/src/components/Blocks/TestBlock/Data.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const TestBlockData = (props) => {
   const { block, blocksConfig, data, onChangeBlock } = props;
diff --git a/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx b/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx
index 478ba15be9..9120f059a7 100644
--- a/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx
+++ b/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx
@@ -11,7 +11,8 @@ import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { BlockDataForm, Icon, SidebarPortal } from '@plone/volto/components';
+import { Icon, SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableSchema from './schema';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
diff --git a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
index 4bdcf09756..f76a9e47f4 100644
--- a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
+++ b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
@@ -12,11 +12,7 @@ import {
   validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  BlockDataForm,
-  SidebarPortal,
-  BlockChooserButton,
-} from '@plone/volto/components';
+import { SidebarPortal, BlockChooserButton } from '@plone/volto/components';
 
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
@@ -34,7 +30,7 @@ import { handleKey } from './keyboard';
 import TextBlockSchema from './schema';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import './css/editor.css';
 
 // TODO: refactor dropzone to separate component wrapper
diff --git a/packages/volto-slate/src/elementEditor/PluginEditor.jsx b/packages/volto-slate/src/elementEditor/PluginEditor.jsx
index b7f866e7b7..b349eec03e 100644
--- a/packages/volto-slate/src/elementEditor/PluginEditor.jsx
+++ b/packages/volto-slate/src/elementEditor/PluginEditor.jsx
@@ -3,9 +3,10 @@ import { isEqual } from 'lodash';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { ReactEditor } from 'slate-react';
-import { Icon as VoltoIcon, BlockDataForm } from '@plone/volto/components';
+import { Icon as VoltoIcon } from '@plone/volto/components';
 import { setPluginOptions } from '@plone/volto-slate/actions';
 import BaseSchemaProvider from './SchemaProvider';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import briefcaseSVG from '@plone/volto/icons/briefcase.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
diff --git a/src/components/index.js b/src/components/index.js
index 31f733f367..e2dc8aa1b3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -101,10 +101,11 @@ export { default as UpgradeControlPanel } from '@plone/volto/components/manage/C
 export { default as ModerateComments } from '@plone/volto/components/manage/Controlpanels/ModerateComments';
 export { default as VersionOverview } from '@plone/volto/components/manage/Controlpanels/VersionOverview';
 export { default as Delete } from '@plone/volto/components/manage/Delete/Delete';
-export { default as Diff } from '@plone/volto/components/manage/Diff/Diff';
+export const Diff = loadable(() =>
+  import('@plone/volto/components/manage/Diff/Diff'),
+);
 export { default as Display } from '@plone/volto/components/manage/Display/Display';
 export { default as Edit } from '@plone/volto/components/manage/Edit/Edit';
-export { default as ModalForm } from '@plone/volto/components/manage/Form/ModalForm';
 export { default as History } from '@plone/volto/components/manage/History/History';
 export { default as Sharing } from '@plone/volto/components/manage/Sharing/Sharing';
 export { default as Rules } from '@plone/volto/components/manage/Rules/Rules';
@@ -126,10 +127,10 @@ export { default as ManageTranslations } from '@plone/volto/components/manage/Mu
 
 // Potentially could ve removed from index, since they are internal components and
 // we don't want them to end up in the main chunk
-export { default as Form } from '@plone/volto/components/manage/Form/Form';
-export { default as BlocksToolbar } from '@plone/volto/components/manage/Form/BlocksToolbar';
-export { default as UndoToolbar } from '@plone/volto/components/manage/Form/UndoToolbar';
-export { default as Field } from '@plone/volto/components/manage/Form/Field';
+export const Form = loadable(() =>
+  import('@plone/volto/components/manage/Form/Form'),
+);
+
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
 export { default as CommentEditModal } from '@plone/volto/components/theme/Comments/CommentEditModal';
 export { default as ContentsBreadcrumbs } from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
@@ -142,11 +143,7 @@ export { default as ContentsWorkflowModal } from '@plone/volto/components/manage
 export { default as ContentsTagsModal } from '@plone/volto/components/manage/Contents/ContentsTagsModal';
 export { default as RenderUsers } from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 export { default as RenderGroups } from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
-export { default as DiffField } from '@plone/volto/components/manage/Diff/DiffField';
 export { default as DragDropList } from '@plone/volto/components/manage/DragDropList/DragDropList';
-export { default as InlineForm } from '@plone/volto/components/manage/Form/InlineForm';
-export { default as BlocksForm } from '@plone/volto/components/manage/Blocks/Block/BlocksForm';
-export { default as BlockDataForm } from '@plone/volto/components/manage/Form/BlockDataForm';
 
 export { default as FormFieldWrapper } from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 export { default as ArrayWidget } from '@plone/volto/components/manage/Widgets/ArrayWidget';
diff --git a/src/components/manage/Blocks/Block/DefaultEdit.jsx b/src/components/manage/Blocks/Block/DefaultEdit.jsx
index 7b736fb551..35a1764f3b 100644
--- a/src/components/manage/Blocks/Block/DefaultEdit.jsx
+++ b/src/components/manage/Blocks/Block/DefaultEdit.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { useIntl } from 'react-intl';
 import { SidebarPortal } from '@plone/volto/components';
-import { BlockDataForm } from '@plone/volto/components';
 import DefaultBlockView from './DefaultView';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const DefaultBlockEdit = (props) => {
   const { blocksConfig = config.blocks.blocksConfig } = props;
diff --git a/src/components/manage/Blocks/Block/Settings.jsx b/src/components/manage/Blocks/Block/Settings.jsx
index c9b4503c5e..70c00327b3 100644
--- a/src/components/manage/Blocks/Block/Settings.jsx
+++ b/src/components/manage/Blocks/Block/Settings.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const Settings = ({ data, block, onChangeBlock, schema }) => {
   return (
diff --git a/src/components/manage/Blocks/Container/Data.jsx b/src/components/manage/Blocks/Container/Data.jsx
index 5068c0f865..f31aef24fa 100644
--- a/src/components/manage/Blocks/Container/Data.jsx
+++ b/src/components/manage/Blocks/Container/Data.jsx
@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ContainerData = (props) => {
   const { block, blocksConfig, data, onChangeBlock } = props;
diff --git a/src/components/manage/Blocks/Container/Edit.jsx b/src/components/manage/Blocks/Container/Edit.jsx
index df72ef7228..42f332d22f 100644
--- a/src/components/manage/Blocks/Container/Edit.jsx
+++ b/src/components/manage/Blocks/Container/Edit.jsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { pickBy } from 'lodash';
-import { BlocksForm, SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import ContainerData from './Data';
 import DefaultEditBlockWrapper from './EditBlockWrapper';
 import SimpleContainerToolbar from './SimpleContainerToolbar';
 import { v4 as uuid } from 'uuid';
 import { blocksFormGenerator } from '@plone/volto/helpers';
-
+import { BlocksForm } from '@plone/volto/components/manage/Form';
 import DefaultTemplateChooser from '@plone/volto/components/manage/TemplateChooser/TemplateChooser';
 
 import config from '@plone/volto/registry';
diff --git a/src/components/manage/Blocks/HeroImageLeft/Data.jsx b/src/components/manage/Blocks/HeroImageLeft/Data.jsx
index 074692add7..a479f7f2ae 100644
--- a/src/components/manage/Blocks/HeroImageLeft/Data.jsx
+++ b/src/components/manage/Blocks/HeroImageLeft/Data.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import schemaHero from './schema.js';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const HeroImageLeftBlockData = (props) => {
   const { block, data, onChangeBlock } = props;
diff --git a/src/components/manage/Blocks/Image/ImageSidebar.jsx b/src/components/manage/Blocks/Image/ImageSidebar.jsx
index 10b4505e41..b4f05427d7 100644
--- a/src/components/manage/Blocks/Image/ImageSidebar.jsx
+++ b/src/components/manage/Blocks/Image/ImageSidebar.jsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Segment, Button } from 'semantic-ui-react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { BlockDataForm, Icon, Image } from '@plone/volto/components';
+import { Icon, Image } from '@plone/volto/components';
 import { ImageSchema } from './schema';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
diff --git a/src/components/manage/Blocks/Listing/ListingData.jsx b/src/components/manage/Blocks/Listing/ListingData.jsx
index 9da934e986..af4c18fd8e 100644
--- a/src/components/manage/Blocks/Listing/ListingData.jsx
+++ b/src/components/manage/Blocks/Listing/ListingData.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+
 import config from '@plone/volto/registry';
 
 const ListingData = (props) => {
diff --git a/src/components/manage/Blocks/Maps/MapsSidebar.jsx b/src/components/manage/Blocks/Maps/MapsSidebar.jsx
index 708bd80d63..8a3b0085c9 100644
--- a/src/components/manage/Blocks/Maps/MapsSidebar.jsx
+++ b/src/components/manage/Blocks/Maps/MapsSidebar.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { MapsSchema } from './schema';
-import { BlockDataForm } from '@plone/volto/components';
 import { useIntl, defineMessages } from 'react-intl';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import { Icon } from '@plone/volto/components';
 import { Segment } from 'semantic-ui-react';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   Maps: {
diff --git a/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
index 0a3f222e9b..93a20fb6b8 100644
--- a/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
+++ b/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
-import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
 import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -11,6 +11,7 @@ import { SearchBlockViewComponent } from './SearchBlockView';
 import Schema from './schema';
 import { withSearch, withQueryString } from './hocs';
 import { cloneDeep } from 'lodash';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   template: {
diff --git a/src/components/manage/Blocks/Table/Edit.jsx b/src/components/manage/Blocks/Table/Edit.jsx
index dee0234118..ac7c9221f5 100644
--- a/src/components/manage/Blocks/Table/Edit.jsx
+++ b/src/components/manage/Blocks/Table/Edit.jsx
@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Cell from '@plone/volto/components/manage/Blocks/Table/Cell';
-import { Field, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
@@ -22,6 +22,7 @@ import colBeforeSVG from '@plone/volto/icons/column-before.svg';
 import colAfterSVG from '@plone/volto/icons/column-after.svg';
 import rowDeleteSVG from '@plone/volto/icons/row-delete.svg';
 import colDeleteSVG from '@plone/volto/icons/column-delete.svg';
+import { Field } from '@plone/volto/components/manage/Form';
 
 const getId = () => Math.floor(Math.random() * Math.pow(2, 24)).toString(32);
 
diff --git a/src/components/manage/Blocks/Teaser/Data.jsx b/src/components/manage/Blocks/Teaser/Data.jsx
index def9d23928..2acae29ff4 100644
--- a/src/components/manage/Blocks/Teaser/Data.jsx
+++ b/src/components/manage/Blocks/Teaser/Data.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
-import { BlockDataForm, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
 import { isEmpty } from 'lodash';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import trashSVG from '@plone/volto/icons/delete.svg';
 
diff --git a/src/components/manage/Blocks/ToC/Edit.jsx b/src/components/manage/Blocks/ToC/Edit.jsx
index fa31414fb6..76a2c655ab 100644
--- a/src/components/manage/Blocks/ToC/Edit.jsx
+++ b/src/components/manage/Blocks/ToC/Edit.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import { SidebarPortal } from '@plone/volto/components';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import TableOfContentsSchema from './Schema';
 import View from './View';
diff --git a/src/components/manage/Blocks/Video/VideoSidebar.jsx b/src/components/manage/Blocks/Video/VideoSidebar.jsx
index a80a31ed79..ee2ccc973b 100644
--- a/src/components/manage/Blocks/Video/VideoSidebar.jsx
+++ b/src/components/manage/Blocks/Video/VideoSidebar.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { VideoBlockSchema } from './schema';
-import { BlockDataForm } from '@plone/volto/components';
 import { Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   Video: {
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.jsx b/src/components/manage/Contents/ContentsPropertiesModal.jsx
index 2c7d3a3b28..6179502a79 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.jsx
@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   properties: {
diff --git a/src/components/manage/Contents/ContentsRenameModal.jsx b/src/components/manage/Contents/ContentsRenameModal.jsx
index dde32df8f0..0719e13263 100644
--- a/src/components/manage/Contents/ContentsRenameModal.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.jsx
@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   renameItems: {
diff --git a/src/components/manage/Contents/ContentsTagsModal.jsx b/src/components/manage/Contents/ContentsTagsModal.jsx
index 042c5ec5b0..bc594a8dac 100644
--- a/src/components/manage/Contents/ContentsTagsModal.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.jsx
@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   default: {
diff --git a/src/components/manage/Contents/ContentsWorkflowModal.jsx b/src/components/manage/Contents/ContentsWorkflowModal.jsx
index d5ac0ba2cd..2f2b6fafe7 100644
--- a/src/components/manage/Contents/ContentsWorkflowModal.jsx
+++ b/src/components/manage/Contents/ContentsWorkflowModal.jsx
@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { getWorkflow, transitionWorkflow } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   default: {
diff --git a/src/components/manage/Controlpanels/ContentTypes.jsx b/src/components/manage/Controlpanels/ContentTypes.jsx
index 4c386c4bce..f744754007 100644
--- a/src/components/manage/Controlpanels/ContentTypes.jsx
+++ b/src/components/manage/Controlpanels/ContentTypes.jsx
@@ -17,7 +17,6 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import {
   Error,
   Icon,
-  ModalForm,
   Toolbar,
   Toast,
   ContentTypesActions,
@@ -31,6 +30,7 @@ import { getId } from '@plone/volto/helpers';
 
 import addSVG from '@plone/volto/icons/add-document.svg';
 import backSVG from '@plone/volto/icons/back.svg';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {
diff --git a/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx b/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
index 95505c9030..d9eaf2f9f2 100644
--- a/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
+++ b/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
@@ -13,7 +13,6 @@ import {
 } from '@plone/volto/actions';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
   RenderGroups,
@@ -44,6 +43,7 @@ import {
   Segment,
   Table,
 } from 'semantic-ui-react';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 /**
  * GroupsControlpanel class.
diff --git a/src/components/manage/Controlpanels/Rules/AddRule.jsx b/src/components/manage/Controlpanels/Rules/AddRule.jsx
index 31df68dbc0..9841f96258 100644
--- a/src/components/manage/Controlpanels/Rules/AddRule.jsx
+++ b/src/components/manage/Controlpanels/Rules/AddRule.jsx
@@ -19,9 +19,10 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar } from '@plone/volto/components';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 
 import { getContentRulesEvents, addNewRule } from '@plone/volto/actions';
 
diff --git a/src/components/manage/Controlpanels/Rules/AddRule.test.jsx b/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
index 982d8798f6..bd100aca17 100644
--- a/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
+++ b/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
@@ -12,6 +12,9 @@ const mockStore = configureMockStore(middlewares);
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
+jest.mock('@plone/volto/components/manage/Form', () => ({
+  Field: jest.fn(() => <div className="Field" />),
+}));
 
 describe('AddRule', () => {
   it('renders rules add interface', () => {
diff --git a/src/components/manage/Controlpanels/Rules/EditRule.jsx b/src/components/manage/Controlpanels/Rules/EditRule.jsx
index 025e53993d..66edd3051c 100644
--- a/src/components/manage/Controlpanels/Rules/EditRule.jsx
+++ b/src/components/manage/Controlpanels/Rules/EditRule.jsx
@@ -20,7 +20,7 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar } from '@plone/volto/components';
 import {
   getControlPanelRule,
   editRule,
@@ -28,6 +28,7 @@ import {
 } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
diff --git a/src/components/manage/Controlpanels/Rules/components/VariableModal.jsx b/src/components/manage/Controlpanels/Rules/components/VariableModal.jsx
index 53a65d5a38..20c31454f8 100644
--- a/src/components/manage/Controlpanels/Rules/components/VariableModal.jsx
+++ b/src/components/manage/Controlpanels/Rules/components/VariableModal.jsx
@@ -6,7 +6,7 @@ import { getVocabulary } from '@plone/volto/actions';
 import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
 
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const setSchema = (name, choices = '') => {
   switch (name) {
diff --git a/src/components/manage/Controlpanels/Users/RenderUsers.jsx b/src/components/manage/Controlpanels/Users/RenderUsers.jsx
index 82cfa252e3..e4554c92c5 100644
--- a/src/components/manage/Controlpanels/Users/RenderUsers.jsx
+++ b/src/components/manage/Controlpanels/Users/RenderUsers.jsx
@@ -8,13 +8,14 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import editSVG from '@plone/volto/icons/editing.svg';
-import { Icon, ModalForm, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
 import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { messages } from '@plone/volto/helpers';
 import { toast } from 'react-toastify';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 /**
  * UsersControlpanelUser class.
diff --git a/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx b/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
index a8f8e6687b..fdaa22b888 100644
--- a/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
+++ b/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
@@ -15,7 +15,6 @@ import {
 } from '@plone/volto/actions';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
   RenderUsers,
@@ -45,6 +44,7 @@ import {
   Segment,
   Table,
 } from 'semantic-ui-react';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 /**
  * UsersControlpanel class.
diff --git a/src/components/manage/Diff/Diff.jsx b/src/components/manage/Diff/Diff.jsx
index c7302970cf..c68dced8d1 100644
--- a/src/components/manage/Diff/Diff.jsx
+++ b/src/components/manage/Diff/Diff.jsx
@@ -23,12 +23,12 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import {
-  DiffField,
   FormattedDate,
   Icon,
   Toolbar,
   Unauthorized,
 } from '@plone/volto/components';
+import DiffField from '@plone/volto/components/manage/Diff/DiffField';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
diff --git a/src/components/manage/Form/BlockDataForm.jsx b/src/components/manage/Form/BlockDataForm.jsx
index 907cc27d6e..4dcc052ddb 100644
--- a/src/components/manage/Form/BlockDataForm.jsx
+++ b/src/components/manage/Form/BlockDataForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { InlineForm } from '@plone/volto/components';
 import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
+import { InlineForm } from '@plone/volto/components/manage/Form';
 
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
diff --git a/src/components/manage/Form/Form.jsx b/src/components/manage/Form/Form.jsx
index f5258bc36c..619a1959f7 100644
--- a/src/components/manage/Form/Form.jsx
+++ b/src/components/manage/Form/Form.jsx
@@ -3,7 +3,7 @@
  * @module components/manage/Form/Form
  */
 
-import { BlocksForm, Field, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
 import {
   difference,
   FormValidation,
@@ -39,9 +39,11 @@ import {
 } from 'semantic-ui-react';
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
-import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
+import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
+import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import { setSidebarTab } from '@plone/volto/actions';
 import { compose } from 'redux';
+import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 
 /**
diff --git a/src/components/manage/Form/Form.test.jsx b/src/components/manage/Form/Form.test.jsx
index 16e2362b65..ecefaf3302 100644
--- a/src/components/manage/Form/Form.test.jsx
+++ b/src/components/manage/Form/Form.test.jsx
@@ -2,14 +2,15 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
 import Form from './Form';
 
 const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-jest.mock('./Field', () => jest.fn(() => <div className="Field" />));
+jest.mock('@plone/volto/components/manage/Form', () => ({
+  Field: jest.fn(() => <div className="Field" />),
+}));
 
 describe('Form', () => {
   it('renders a form component', () => {
diff --git a/src/components/manage/Form/InlineForm.jsx b/src/components/manage/Form/InlineForm.jsx
index dff1936913..be02a57cc9 100644
--- a/src/components/manage/Form/InlineForm.jsx
+++ b/src/components/manage/Form/InlineForm.jsx
@@ -11,8 +11,9 @@ import {
   removeFromArray,
   arrayRange,
 } from '@plone/volto/helpers/Utils/Utils';
-import { Field, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
+import { Field } from '@plone/volto/components/manage/Form';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
diff --git a/src/components/manage/Form/ModalForm.jsx b/src/components/manage/Form/ModalForm.jsx
index 2ab262688e..1bc9771f57 100644
--- a/src/components/manage/Form/ModalForm.jsx
+++ b/src/components/manage/Form/ModalForm.jsx
@@ -18,7 +18,8 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { FormValidation } from '@plone/volto/helpers';
-import { Field, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
diff --git a/src/components/manage/Form/index.tsx b/src/components/manage/Form/index.tsx
new file mode 100644
index 0000000000..4b64427c7e
--- /dev/null
+++ b/src/components/manage/Form/index.tsx
@@ -0,0 +1,23 @@
+import loadable from '@loadable/component';
+
+export const Field = loadable(
+  () => import('@plone/volto/components/manage/Form/Field'),
+);
+export const InlineForm = loadable(
+  () => import('@plone/volto/components/manage/Form/InlineForm'),
+);
+export const ModalForm = loadable(
+  () => import('@plone/volto/components/manage/Form/ModalForm'),
+);
+export const UndoToolbar = loadable(
+  () => import('@plone/volto/components/manage/Form/UndoToolbar'),
+);
+export const BlocksToolbar = loadable(
+  () => import('@plone/volto/components/manage/Form/BlocksToolbar'),
+);
+export const BlockDataForm = loadable(
+  () => import('@plone/volto/components/manage/Form/BlockDataForm'),
+);
+export const BlocksForm = loadable(
+  () => import('@plone/volto/components/manage/Blocks/Block/BlocksForm'),
+);
diff --git a/src/components/manage/Multilingual/TranslationObject.jsx b/src/components/manage/Multilingual/TranslationObject.jsx
index 42ece601fb..f077f9f80d 100644
--- a/src/components/manage/Multilingual/TranslationObject.jsx
+++ b/src/components/manage/Multilingual/TranslationObject.jsx
@@ -8,7 +8,7 @@ import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
-import { Form, Field } from '@plone/volto/components';
+import { Form } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
 import {
@@ -19,6 +19,8 @@ import {
   toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
+import { Field } from '@plone/volto/components/manage/Form';
+
 const messages = defineMessages({
   document: {
     id: 'Document',
diff --git a/src/components/manage/Widgets/ObjectWidget.jsx b/src/components/manage/Widgets/ObjectWidget.jsx
index 2228416805..9d9960afcb 100644
--- a/src/components/manage/Widgets/ObjectWidget.jsx
+++ b/src/components/manage/Widgets/ObjectWidget.jsx
@@ -6,8 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tab } from 'semantic-ui-react';
-
-import Field from '@plone/volto/components/manage/Form/Field';
+import { Field } from '@plone/volto/components/manage/Form';
 
 /**
  * Renders a field set. Passes some of the values in the schema to the Field
diff --git a/src/components/manage/Widgets/SchemaWidget.jsx b/src/components/manage/Widgets/SchemaWidget.jsx
index 45accd6775..2456188ffe 100644
--- a/src/components/manage/Widgets/SchemaWidget.jsx
+++ b/src/components/manage/Widgets/SchemaWidget.jsx
@@ -14,11 +14,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
 
-import {
-  Field,
-  ModalForm,
-  SchemaWidgetFieldset,
-} from '@plone/volto/components';
+import { SchemaWidgetFieldset } from '@plone/volto/components';
+import { Field, ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {
diff --git a/src/components/theme/Comments/CommentEditModal.jsx b/src/components/theme/Comments/CommentEditModal.jsx
index 848fe3a4da..8223b734a3 100644
--- a/src/components/theme/Comments/CommentEditModal.jsx
+++ b/src/components/theme/Comments/CommentEditModal.jsx
@@ -5,7 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateComment } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   editComment: {

From acb34774042f88f765526e619ea1ee23c459400e Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Sat, 7 Oct 2023 17:45:38 +0200
Subject: [PATCH 03/27] Code split Contents, RelationsCP, UsersCP, RulesCP

---
 src/components/index.js                       | 18 -------
 src/components/manage/Actions/Actions.jsx     |  3 +-
 .../manage/Actions/Actions.test.jsx           |  6 +--
 src/components/manage/Contents/Contents.jsx   | 16 +++---
 .../Contents/ContentsIndexHeader.test.jsx     |  2 +-
 src/components/manage/Contents/index.tsx      |  9 ++++
 .../Relations/RelationsListing.jsx            |  4 +-
 .../Relations/RelationsMatrix.jsx             |  4 +-
 .../Users/UserGroupMembershipMatrix.jsx       |  2 +-
 .../Controlpanels/Users/UsersControlpanel.jsx |  2 +-
 src/components/manage/Controlpanels/index.tsx | 54 +++++++++++++++++++
 src/components/manage/Rules/index.tsx         |  5 ++
 src/routes.js                                 | 20 +++----
 13 files changed, 99 insertions(+), 46 deletions(-)
 create mode 100644 src/components/manage/Contents/index.tsx
 create mode 100644 src/components/manage/Controlpanels/index.tsx
 create mode 100644 src/components/manage/Rules/index.tsx

diff --git a/src/components/index.js b/src/components/index.js
index 31f733f367..8af43e3ef1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -77,7 +77,6 @@ export { default as Actions } from '@plone/volto/components/manage/Actions/Actio
 export { default as Add } from '@plone/volto/components/manage/Add/Add';
 export { default as AddonsControlpanel } from '@plone/volto/components/manage/Controlpanels/AddonsControlpanel';
 export { default as UndoControlpanel } from '@plone/volto/components/manage/Controlpanels/UndoControlpanel';
-export { default as Contents } from '@plone/volto/components/manage/Contents/Contents';
 export { default as Circle } from '@plone/volto/components/manage/Contents/circle';
 export { default as DatabaseInformation } from '@plone/volto/components/manage/Controlpanels/DatabaseInformation';
 export { default as Controlpanel } from '@plone/volto/components/manage/Controlpanels/Controlpanel';
@@ -88,14 +87,7 @@ export { default as ContentType } from '@plone/volto/components/manage/Controlpa
 export { default as ContentTypeLayout } from '@plone/volto/components/manage/Controlpanels/ContentTypeLayout';
 export { default as ContentTypeSchema } from '@plone/volto/components/manage/Controlpanels/ContentTypeSchema';
 export { default as ContentTypesActions } from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
-export { default as UsersControlpanel } from '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel';
-export { default as UserGroupMembershipControlPanel } from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel';
-export { default as Relations } from '@plone/volto/components/manage/Controlpanels/Relations/Relations';
 export { default as GroupsControlpanel } from '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel';
-export { default as RulesControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/Rules';
-export { default as AddRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/AddRule';
-export { default as EditRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/EditRule';
-export { default as ConfigureRuleControlpanel } from '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule';
 export { default as UpgradeControlPanel } from '@plone/volto/components/manage/Controlpanels/UpgradeControlPanel';
 
 export { default as ModerateComments } from '@plone/volto/components/manage/Controlpanels/ModerateComments';
@@ -107,7 +99,6 @@ export { default as Edit } from '@plone/volto/components/manage/Edit/Edit';
 export { default as ModalForm } from '@plone/volto/components/manage/Form/ModalForm';
 export { default as History } from '@plone/volto/components/manage/History/History';
 export { default as Sharing } from '@plone/volto/components/manage/Sharing/Sharing';
-export { default as Rules } from '@plone/volto/components/manage/Rules/Rules';
 export { default as Aliases } from '@plone/volto/components/manage/Aliases/Aliases';
 export { default as LinksToItem } from '@plone/volto/components/manage/LinksToItem/LinksToItem';
 export { default as Workflow } from '@plone/volto/components/manage/Workflow/Workflow';
@@ -132,15 +123,6 @@ export { default as UndoToolbar } from '@plone/volto/components/manage/Form/Undo
 export { default as Field } from '@plone/volto/components/manage/Form/Field';
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
 export { default as CommentEditModal } from '@plone/volto/components/theme/Comments/CommentEditModal';
-export { default as ContentsBreadcrumbs } from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
-export { default as ContentsIndexHeader } from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
-export { default as ContentsItem } from '@plone/volto/components/manage/Contents/ContentsItem';
-export { default as ContentsUploadModal } from '@plone/volto/components/manage/Contents/ContentsUploadModal';
-export { default as ContentsPropertiesModal } from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
-export { default as ContentsRenameModal } from '@plone/volto/components/manage/Contents/ContentsRenameModal';
-export { default as ContentsWorkflowModal } from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
-export { default as ContentsTagsModal } from '@plone/volto/components/manage/Contents/ContentsTagsModal';
-export { default as RenderUsers } from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 export { default as RenderGroups } from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
 export { default as DiffField } from '@plone/volto/components/manage/Diff/DiffField';
 export { default as DragDropList } from '@plone/volto/components/manage/DragDropList/DragDropList';
diff --git a/src/components/manage/Actions/Actions.jsx b/src/components/manage/Actions/Actions.jsx
index 765ba01c20..9d063146c6 100644
--- a/src/components/manage/Actions/Actions.jsx
+++ b/src/components/manage/Actions/Actions.jsx
@@ -8,7 +8,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { cut, copy, copyContent, moveContent } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
-import { ContentsRenameModal, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { ContentsRenameModal } from '@plone/volto/components/manage/Contents';
 
 const messages = defineMessages({
   cut: {
diff --git a/src/components/manage/Actions/Actions.test.jsx b/src/components/manage/Actions/Actions.test.jsx
index ba2032f6a1..c4620d163e 100644
--- a/src/components/manage/Actions/Actions.test.jsx
+++ b/src/components/manage/Actions/Actions.test.jsx
@@ -8,9 +8,9 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('../Contents/ContentsRenameModal', () =>
-  jest.fn(() => <div className="RenameModal" />),
-);
+jest.mock('@plone/volto/components/manage/Contents', () => ({
+  ContentsRenameModal: jest.fn(() => <div className="RenameModal" />),
+}));
 
 describe('Actions', () => {
   it('renders an actions component', () => {
diff --git a/src/components/manage/Contents/Contents.jsx b/src/components/manage/Contents/Contents.jsx
index e4ce494288..7745e5dac1 100644
--- a/src/components/manage/Contents/Contents.jsx
+++ b/src/components/manage/Contents/Contents.jsx
@@ -53,14 +53,6 @@ import {
 } from '@plone/volto/actions';
 import Indexes, { defaultIndexes } from '@plone/volto/constants/Indexes';
 import {
-  ContentsBreadcrumbs,
-  ContentsIndexHeader,
-  ContentsItem,
-  ContentsRenameModal,
-  ContentsUploadModal,
-  ContentsWorkflowModal,
-  ContentsTagsModal,
-  ContentsPropertiesModal,
   Pagination,
   Popup,
   Toolbar,
@@ -68,6 +60,14 @@ import {
   Icon,
   Unauthorized,
 } from '@plone/volto/components';
+import ContentsBreadcrumbs from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
+import ContentsIndexHeader from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
+import ContentsItem from '@plone/volto/components/manage/Contents/ContentsItem';
+import { ContentsRenameModal } from '@plone/volto/components/manage/Contents';
+import ContentsUploadModal from '@plone/volto/components/manage/Contents/ContentsUploadModal';
+import ContentsWorkflowModal from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
+import ContentsTagsModal from '@plone/volto/components/manage/Contents/ContentsTagsModal';
+import ContentsPropertiesModal from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
 
 import { Helmet, getBaseUrl } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
diff --git a/src/components/manage/Contents/ContentsIndexHeader.test.jsx b/src/components/manage/Contents/ContentsIndexHeader.test.jsx
index 6cd1d5b4b8..ab06a45da6 100644
--- a/src/components/manage/Contents/ContentsIndexHeader.test.jsx
+++ b/src/components/manage/Contents/ContentsIndexHeader.test.jsx
@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
 
-import { ContentsIndexHeader } from '@plone/volto/components';
+import ContentsIndexHeader from './ContentsIndexHeader';
 
 const mockStore = configureStore([thunk]);
 
diff --git a/src/components/manage/Contents/index.tsx b/src/components/manage/Contents/index.tsx
new file mode 100644
index 0000000000..4d249568eb
--- /dev/null
+++ b/src/components/manage/Contents/index.tsx
@@ -0,0 +1,9 @@
+import loadable from '@loadable/component';
+
+export const Contents = loadable(
+  () => import('@plone/volto/components/manage/Contents/Contents'),
+);
+
+export const ContentsRenameModal = loadable(
+  () => import('@plone/volto/components/manage/Contents/ContentsRenameModal'),
+);
diff --git a/src/components/manage/Controlpanels/Relations/RelationsListing.jsx b/src/components/manage/Controlpanels/Relations/RelationsListing.jsx
index 1dae5ff0cc..b79ade4571 100644
--- a/src/components/manage/Controlpanels/Relations/RelationsListing.jsx
+++ b/src/components/manage/Controlpanels/Relations/RelationsListing.jsx
@@ -15,7 +15,7 @@ import {
   searchContent,
 } from '@plone/volto/actions';
 
-const ListingTemplate = ({
+const RelationsListing = ({
   relationtype,
   query_source,
   query_target,
@@ -477,4 +477,4 @@ const ListingTemplate = ({
     </>
   );
 };
-export default ListingTemplate;
+export default RelationsListing;
diff --git a/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx b/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx
index e6b09998f6..b4b4a10ac1 100644
--- a/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx
+++ b/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx
@@ -22,8 +22,8 @@ import {
   queryRelations,
   rebuildRelations,
 } from '@plone/volto/actions';
-import RelationsListing from './RelationsListing';
-import BrokenRelations from './BrokenRelations';
+import RelationsListing from '@plone/volto/components/manage/Controlpanels/Relations/RelationsListing';
+import BrokenRelations from '@plone/volto/components/manage/Controlpanels/Relations/BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
diff --git a/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx b/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx
index 6e784c0c06..ca41f24f4f 100644
--- a/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx
+++ b/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx
@@ -7,7 +7,7 @@ import { isEqual } from 'lodash';
 
 import { messages } from '@plone/volto/helpers';
 import { listGroups } from '@plone/volto/actions'; // getRegistry
-import UserGroupMembershipListing from './UserGroupMembershipListing';
+import UserGroupMembershipListing from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipListing';
 
 const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
   const intl = useIntl();
diff --git a/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx b/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
index a8f8e6687b..1ead8d8686 100644
--- a/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
+++ b/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
@@ -18,7 +18,6 @@ import {
   ModalForm,
   Toast,
   Toolbar,
-  RenderUsers,
   Pagination,
   Error,
 } from '@plone/volto/components';
@@ -45,6 +44,7 @@ import {
   Segment,
   Table,
 } from 'semantic-ui-react';
+import RenderUsers from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 
 /**
  * UsersControlpanel class.
diff --git a/src/components/manage/Controlpanels/index.tsx b/src/components/manage/Controlpanels/index.tsx
new file mode 100644
index 0000000000..5487d4e6f7
--- /dev/null
+++ b/src/components/manage/Controlpanels/index.tsx
@@ -0,0 +1,54 @@
+import loadable from '@loadable/component';
+
+// RULES CONTROLPANELS
+
+export const RulesControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/Rules'
+    ),
+);
+
+export const AddRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/AddRule'
+    ),
+);
+
+export const EditRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/EditRule'
+    ),
+);
+
+export const ConfigureRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule'
+    ),
+);
+
+// USERS CONTROLPANELS
+
+export const UsersControlpanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+    ),
+);
+
+export const UserGroupMembershipControlPanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel'
+    ),
+);
+
+// RELATIONS CONTROLPANEL
+
+export const RelationsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/Relations/Relations'),
+);
diff --git a/src/components/manage/Rules/index.tsx b/src/components/manage/Rules/index.tsx
new file mode 100644
index 0000000000..1db608da66
--- /dev/null
+++ b/src/components/manage/Rules/index.tsx
@@ -0,0 +1,5 @@
+import loadable from '@loadable/component';
+
+export const Rules = loadable(
+  () => import('@plone/volto/components/manage/Rules/Rules'),
+);
diff --git a/src/routes.js b/src/routes.js
index a1fb227a57..1908a29b57 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -10,7 +10,6 @@ import {
   Aliases,
   ChangePassword,
   ContactForm,
-  Contents,
   ContentType,
   ContentTypeLayout,
   ContentTypeSchema,
@@ -30,25 +29,28 @@ import {
   ModerateComments,
   NotFound,
   PasswordReset,
-  Relations,
   Register,
-  Rules,
   RequestPasswordReset,
   Search,
   Sharing,
   Sitemap,
   AliasesControlpanel,
   UndoControlpanel,
-  UsersControlpanel,
-  UserGroupMembershipControlPanel,
   GroupsControlpanel,
+  UpgradeControlPanel,
+  PersonalInformation,
+} from '@plone/volto/components';
+import { Contents } from '@plone/volto/components/manage/Contents';
+import { Rules } from '@plone/volto/components/manage/Rules';
+import {
   RulesControlpanel,
   AddRuleControlpanel,
   EditRuleControlpanel,
   ConfigureRuleControlpanel,
-  UpgradeControlPanel,
-  PersonalInformation,
-} from '@plone/volto/components';
+  UsersControlpanel,
+  UserGroupMembershipControlPanel,
+  RelationsControlpanel,
+} from '@plone/volto/components/manage/Controlpanels';
 
 // Deliberatelly use of absolute path of these components, since we do not want them
 // in the components/index.js file.
@@ -228,7 +230,7 @@ export const defaultRoutes = [
   },
   {
     path: '/controlpanel/relations',
-    component: Relations,
+    component: RelationsControlpanel,
   },
   {
     path: '/controlpanel/:id',

From e4433cbc45476b1c650591ffb723fa9642814713 Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <martina.bustacchini@redturtle.it>
Date: Sat, 7 Oct 2023 17:49:54 +0200
Subject: [PATCH 04/27] wip: common webpack bundle name for Form related stuff

---
 src/components/index.js              |  5 +---
 src/components/manage/Form/index.tsx | 41 +++++++++++++++++++++++-----
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index e2dc8aa1b3..625ed5895e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -127,10 +127,7 @@ export { default as ManageTranslations } from '@plone/volto/components/manage/Mu
 
 // Potentially could ve removed from index, since they are internal components and
 // we don't want them to end up in the main chunk
-export const Form = loadable(() =>
-  import('@plone/volto/components/manage/Form/Form'),
-);
-
+export Form from '@plone/volto/components/manage/Form/Form';
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
 export { default as CommentEditModal } from '@plone/volto/components/theme/Comments/CommentEditModal';
 export { default as ContentsBreadcrumbs } from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
diff --git a/src/components/manage/Form/index.tsx b/src/components/manage/Form/index.tsx
index 4b64427c7e..d784862389 100644
--- a/src/components/manage/Form/index.tsx
+++ b/src/components/manage/Form/index.tsx
@@ -1,23 +1,50 @@
 import loadable from '@loadable/component';
 
 export const Field = loadable(
-  () => import('@plone/volto/components/manage/Form/Field'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Field'
+    ),
 );
 export const InlineForm = loadable(
-  () => import('@plone/volto/components/manage/Form/InlineForm'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/InlineForm'
+    ),
 );
 export const ModalForm = loadable(
-  () => import('@plone/volto/components/manage/Form/ModalForm'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/ModalForm'
+    ),
 );
 export const UndoToolbar = loadable(
-  () => import('@plone/volto/components/manage/Form/UndoToolbar'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/UndoToolbar'
+    ),
 );
 export const BlocksToolbar = loadable(
-  () => import('@plone/volto/components/manage/Form/BlocksToolbar'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlocksToolbar'
+    ),
 );
 export const BlockDataForm = loadable(
-  () => import('@plone/volto/components/manage/Form/BlockDataForm'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlockDataForm'
+    ),
 );
 export const BlocksForm = loadable(
-  () => import('@plone/volto/components/manage/Blocks/Block/BlocksForm'),
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Blocks/Block/BlocksForm'
+    ),
+);
+export const Form = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Form'
+    ),
 );

From 734dbcc9a524c4fe493160739c5acfe033513229 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 7 Nov 2023 11:18:29 +0100
Subject: [PATCH 05/27] Code split all controlpanels, form components and
 widgets

---
 .../src/widgets/HtmlSlateWidget.jsx           |   5 +-
 .../src/widgets/ObjectByTypeWidget.jsx        |   3 +-
 .../src/widgets/RichTextWidget.jsx            |   2 +-
 src/components/index.js                       |  50 +--
 .../manage/Actions/Actions.test.jsx           |   4 +-
 .../__snapshots__/Actions.test.jsx.snap       |   2 +-
 src/components/manage/Add/Add.jsx             |   2 +-
 .../manage/Blocks/Block/Settings.test.jsx     |   2 +
 .../__snapshots__/Settings.test.jsx.snap      |  13 +-
 .../manage/Blocks/Image/ImageSidebar.test.jsx |   2 +
 .../__snapshots__/ImageSidebar.test.jsx.snap  | 184 ++++------
 .../Blocks/LeadImage/LeadImageSidebar.jsx     |   7 +-
 .../LeadImage/LeadImageSidebar.test.jsx       |   2 +
 .../LeadImageSidebar.test.jsx.snap            | 202 +----------
 .../manage/Blocks/Maps/MapsSidebar.test.jsx   |   2 +
 .../__snapshots__/MapsSidebar.test.jsx.snap   |  75 ++--
 .../Search/widgets/SelectMetadataField.jsx    |   2 +-
 .../manage/Blocks/Video/VideoSidebar.test.jsx |   2 +
 .../__snapshots__/VideoSidebar.test.jsx.snap  |  76 ++--
 .../Contents/ContentsPropertiesModal.test.jsx |   2 +-
 .../Contents/ContentsRenameModal.test.jsx     |   2 +-
 .../Contents/ContentsTagsModal.test.jsx       |   2 +-
 .../Contents/ContentsWorkflowModal.test.jsx   |   2 +-
 .../manage/Contents/__mocks__/index.tsx       |   5 +
 .../ContentsPropertiesModal.test.jsx.snap     |  50 ++-
 .../ContentsRenameModal.test.jsx.snap         |  29 +-
 .../ContentsTagsModal.test.jsx.snap           |  35 +-
 .../manage/Controlpanels/Aliases.jsx          |   2 +-
 .../manage/Controlpanels/Aliases.test.jsx     |   1 +
 .../manage/Controlpanels/ContentType.jsx      |   3 +-
 .../manage/Controlpanels/ContentType.test.jsx |   2 +-
 .../Controlpanels/ContentTypeLayout.jsx       |  10 +-
 .../Controlpanels/ContentTypeSchema.jsx       |   3 +-
 .../manage/Controlpanels/ContentTypes.jsx     |   9 +-
 .../manage/Controlpanels/Controlpanel.jsx     |   3 +-
 .../Controlpanels/Controlpanel.test.jsx       |   2 +-
 .../manage/Controlpanels/Controlpanels.jsx    |   3 +-
 .../Controlpanels/Controlpanels.test.jsx      |   6 +-
 .../Groups/GroupsControlpanel.jsx             |   2 +-
 .../manage/Controlpanels/ModerateComments.jsx |   8 +-
 .../Controlpanels/ModerateComments.test.jsx   |   4 +-
 .../Controlpanels/Rules/AddRule.test.jsx      |   4 +-
 .../Controlpanels/Rules/EditRule.test.jsx     |   2 +
 .../Rules/__snapshots__/AddRule.test.jsx.snap |  15 +-
 .../__snapshots__/EditRule.test.jsx.snap      |  15 +-
 .../manage/Controlpanels/UndoControlpanel.jsx |   3 +-
 .../Controlpanels/UndoControlpanel.test.jsx   |   2 +-
 .../Controlpanels/UpgradeControlPanel.jsx     |   3 +-
 .../__snapshots__/Aliases.test.jsx.snap       |   6 +-
 .../__snapshots__/ContentType.test.jsx.snap   |   3 +-
 .../__snapshots__/Controlpanel.test.jsx.snap  |   8 +-
 .../UndoControlpanel.test.jsx.snap            |  49 ++-
 src/components/manage/Controlpanels/index.tsx |  98 ++++++
 src/components/manage/Display/Display.jsx     |   3 +-
 .../manage/Display/Display.test.jsx           |   1 +
 .../__snapshots__/Display.test.jsx.snap       |  85 +----
 src/components/manage/Edit/Edit.jsx           |   2 +-
 src/components/manage/Edit/Edit.test.jsx      |   2 +-
 .../Edit/__snapshots__/Edit.test.jsx.snap     |  10 +-
 .../manage/Form/BlockDataForm.test.jsx        |   2 +
 src/components/manage/Form/Form.test.jsx      |   4 +-
 .../manage/Form/InlineForm.test.jsx           |   2 +
 src/components/manage/Form/ModalForm.test.jsx |   2 +-
 .../manage/Form/__mocks__/index.tsx           |  29 ++
 .../__snapshots__/BlockDataForm.test.jsx.snap |  58 +---
 .../Form/__snapshots__/Form.test.jsx.snap     |   1 +
 .../__snapshots__/InlineForm.test.jsx.snap    |  56 +--
 .../manage/Multilingual/TranslationObject.jsx |   2 +-
 .../manage/Preferences/ChangePassword.jsx     |   3 +-
 .../Preferences/ChangePassword.test.jsx       |   2 +
 .../Preferences/PersonalInformation.jsx       |   3 +-
 .../Preferences/PersonalPreferences.jsx       |   3 +-
 .../ChangePassword.test.jsx.snap              | 142 +++-----
 src/components/manage/Widgets/ArrayWidget.jsx |   2 +-
 .../manage/Widgets/ButtonsWidget.jsx          |   2 +-
 .../manage/Widgets/CheckboxWidget.jsx         |   2 +-
 .../manage/Widgets/DatetimeWidget.jsx         |   3 +-
 src/components/manage/Widgets/EmailWidget.jsx |   2 +-
 src/components/manage/Widgets/FileWidget.jsx  |   3 +-
 src/components/manage/Widgets/IdWidget.jsx    |   3 +-
 .../manage/Widgets/ImageSizeWidget.jsx        |   2 +-
 .../manage/Widgets/InternalUrlWidget.jsx      |   3 +-
 .../manage/Widgets/NumberWidget.jsx           |   2 +-
 .../manage/Widgets/ObjectListWidget.jsx       |   3 +-
 .../manage/Widgets/ObjectListWidget.test.js   |   2 +
 .../manage/Widgets/ObjectWidget.test.jsx      |   2 +
 .../manage/Widgets/PasswordWidget.jsx         |   2 +-
 .../manage/Widgets/QuerySortOnWidget.jsx      |   2 +-
 .../RecurrenceWidget/RecurrenceWidget.jsx     |   5 +-
 .../Widgets/RecurrenceWidget/SelectInput.jsx  |  15 +-
 .../manage/Widgets/ReferenceWidget.jsx        |   2 +-
 .../manage/Widgets/RegistryImageWidget.jsx    |   3 +-
 .../manage/Widgets/SchemaWidget.jsx           |   2 +-
 .../manage/Widgets/SelectAutoComplete.jsx     |   2 +-
 .../manage/Widgets/SelectWidget.jsx           |   2 +-
 src/components/manage/Widgets/TextWidget.jsx  |   3 +-
 .../manage/Widgets/TextareaWidget.jsx         |   2 +-
 src/components/manage/Widgets/TokenWidget.jsx |   2 +-
 src/components/manage/Widgets/UrlWidget.jsx   |   3 +-
 .../manage/Widgets/VocabularyTermsWidget.jsx  |  13 +-
 .../Widgets/VocabularyTermsWidget.test.jsx    |   2 +
 .../manage/Widgets/WysiwygWidget.jsx          |   2 +-
 .../manage/Widgets/__mocks__/index.tsx        |  43 +++
 .../ObjectListWidget.test.js.snap             |  12 +-
 .../__snapshots__/ObjectWidget.test.jsx.snap  |  30 +-
 .../VocabularyTermsWidget.test.jsx.snap       |  54 +--
 src/components/manage/Widgets/index.tsx       | 232 +++++++++++++
 src/components/manage/Workflow/Workflow.jsx   |   3 +-
 .../manage/Workflow/Workflow.test.jsx         |   5 +-
 .../__snapshots__/Workflow.test.jsx.snap      | 172 +--------
 .../theme/Comments/CommentEditModal.test.jsx  |   4 +-
 src/components/theme/Comments/Comments.jsx    |   4 +-
 .../theme/Comments/Comments.test.jsx          |   2 +
 .../theme/Comments/__mocks__/index.tsx        |   1 +
 .../CommentEditModal.test.jsx.snap            |  25 +-
 .../__snapshots__/Comments.test.jsx.snap      | 109 ++----
 src/components/theme/Comments/index.tsx       |   5 +
 .../theme/ContactForm/ContactForm.jsx         |   3 +-
 .../theme/ContactForm/ContactForm.test.jsx    |   2 +
 .../__snapshots__/ContactForm.test.jsx.snap   | 327 +++++-------------
 .../theme/PasswordReset/PasswordReset.jsx     |   2 +-
 .../PasswordReset/RequestPasswordReset.jsx    |   2 +-
 .../RequestPasswordReset.test.jsx             |   2 +
 .../RequestPasswordReset.test.jsx.snap        | 128 ++-----
 src/components/theme/Register/Register.jsx    |   3 +-
 .../theme/Register/Register.test.jsx          |   2 +
 .../__snapshots__/Register.test.jsx.snap      | 113 ++----
 src/config/Widgets.jsx                        |  80 ++---
 src/routes.js                                 |  26 +-
 129 files changed, 1245 insertions(+), 1681 deletions(-)
 create mode 100644 src/components/manage/Contents/__mocks__/index.tsx
 create mode 100644 src/components/manage/Form/__mocks__/index.tsx
 create mode 100644 src/components/manage/Widgets/__mocks__/index.tsx
 create mode 100644 src/components/manage/Widgets/index.tsx
 create mode 100644 src/components/theme/Comments/__mocks__/index.tsx
 create mode 100644 src/components/theme/Comments/index.tsx

diff --git a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx
index a09859c6da..ba7367ccd9 100644
--- a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx
+++ b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx
@@ -9,7 +9,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { makeEditor } from '@plone/volto-slate/utils';
@@ -25,8 +25,7 @@ import './style.css';
 
 const messages = defineMessages({
   error: {
-    id:
-      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+    id: 'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
     defaultMessage:
       'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
   },
diff --git a/packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx b/packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx
index 7730ddf557..a97f3c28de 100644
--- a/packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx
+++ b/packages/volto-slate/src/widgets/ObjectByTypeWidget.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, Tab } from 'semantic-ui-react';
-import { Icon, ObjectWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { ObjectWidget } from '@plone/volto/components/manage/Widgets';
 
 export const ObjectByTypeWidget = (props) => {
   const { schemas, value = {}, onChange, errors = {}, id } = props;
diff --git a/packages/volto-slate/src/widgets/RichTextWidget.jsx b/packages/volto-slate/src/widgets/RichTextWidget.jsx
index 0428440681..6cc151ebc6 100644
--- a/packages/volto-slate/src/widgets/RichTextWidget.jsx
+++ b/packages/volto-slate/src/widgets/RichTextWidget.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 
 import { createEmptyParagraph, createParagraph } from '../utils/blocks';
diff --git a/src/components/index.js b/src/components/index.js
index aa213e0ba6..3b661ae41b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -75,23 +75,8 @@ export { default as AlbumView } from '@plone/volto/components/theme/View/AlbumVi
 
 export { default as Actions } from '@plone/volto/components/manage/Actions/Actions';
 export { default as Add } from '@plone/volto/components/manage/Add/Add';
-export { default as AddonsControlpanel } from '@plone/volto/components/manage/Controlpanels/AddonsControlpanel';
-export { default as UndoControlpanel } from '@plone/volto/components/manage/Controlpanels/UndoControlpanel';
 export { default as Circle } from '@plone/volto/components/manage/Contents/circle';
-export { default as DatabaseInformation } from '@plone/volto/components/manage/Controlpanels/DatabaseInformation';
-export { default as Controlpanel } from '@plone/volto/components/manage/Controlpanels/Controlpanel';
-export { default as Controlpanels } from '@plone/volto/components/manage/Controlpanels/Controlpanels';
-export { default as AliasesControlpanel } from '@plone/volto/components/manage/Controlpanels/Aliases';
-export { default as ContentTypes } from '@plone/volto/components/manage/Controlpanels/ContentTypes';
-export { default as ContentType } from '@plone/volto/components/manage/Controlpanels/ContentType';
-export { default as ContentTypeLayout } from '@plone/volto/components/manage/Controlpanels/ContentTypeLayout';
-export { default as ContentTypeSchema } from '@plone/volto/components/manage/Controlpanels/ContentTypeSchema';
-export { default as ContentTypesActions } from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
-export { default as GroupsControlpanel } from '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel';
-export { default as UpgradeControlPanel } from '@plone/volto/components/manage/Controlpanels/UpgradeControlPanel';
-
-export { default as ModerateComments } from '@plone/volto/components/manage/Controlpanels/ModerateComments';
-export { default as VersionOverview } from '@plone/volto/components/manage/Controlpanels/VersionOverview';
+
 export { default as Delete } from '@plone/volto/components/manage/Delete/Delete';
 export const Diff = loadable(() =>
   import('@plone/volto/components/manage/Diff/Diff'),
@@ -116,42 +101,9 @@ export { default as Types } from '@plone/volto/components/manage/Toolbar/Types';
 export { default as Toast } from '@plone/volto/components/manage/Toast/Toast';
 export { default as ManageTranslations } from '@plone/volto/components/manage/Multilingual/ManageTranslations';
 
-// Potentially could ve removed from index, since they are internal components and
-// we don't want them to end up in the main chunk
-export Form from '@plone/volto/components/manage/Form/Form';
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
-export { default as CommentEditModal } from '@plone/volto/components/theme/Comments/CommentEditModal';
-export { default as RenderGroups } from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
 export { default as DragDropList } from '@plone/volto/components/manage/DragDropList/DragDropList';
 
-export { default as FormFieldWrapper } from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-export { default as ArrayWidget } from '@plone/volto/components/manage/Widgets/ArrayWidget';
-export { default as CheckboxWidget } from '@plone/volto/components/manage/Widgets/CheckboxWidget';
-
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
-);
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
-);
-
-export { default as FileWidget } from '@plone/volto/components/manage/Widgets/FileWidget';
-export { default as IdWidget } from '@plone/volto/components/manage/Widgets/IdWidget';
-export { default as PasswordWidget } from '@plone/volto/components/manage/Widgets/PasswordWidget';
-export { default as ReferenceWidget } from '@plone/volto/components/manage/Widgets/ReferenceWidget';
-export { default as SchemaWidget } from '@plone/volto/components/manage/Widgets/SchemaWidget';
-export { default as SchemaWidgetFieldset } from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
-export { default as SelectWidget } from '@plone/volto/components/manage/Widgets/SelectWidget';
-export { default as TextareaWidget } from '@plone/volto/components/manage/Widgets/TextareaWidget';
-export { default as TextWidget } from '@plone/volto/components/manage/Widgets/TextWidget';
-export { default as WysiwygWidget } from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-export { default as ObjectBrowserWidget } from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-export { default as ObjectBrowserWidgetMode } from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-export { default as ObjectWidget } from '@plone/volto/components/manage/Widgets/ObjectWidget';
-export { default as ObjectListWidget } from '@plone/volto/components/manage/Widgets/ObjectListWidget';
-
 export { default as EditDefaultBlock } from '@plone/volto/components/manage/Blocks/Block/DefaultEdit';
 export { default as EditDescriptionBlock } from '@plone/volto/components/manage/Blocks/Description/Edit';
 export { default as EditTitleBlock } from '@plone/volto/components/manage/Blocks/Title/Edit';
diff --git a/src/components/manage/Actions/Actions.test.jsx b/src/components/manage/Actions/Actions.test.jsx
index c4620d163e..d66f98dabb 100644
--- a/src/components/manage/Actions/Actions.test.jsx
+++ b/src/components/manage/Actions/Actions.test.jsx
@@ -8,9 +8,7 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Contents', () => ({
-  ContentsRenameModal: jest.fn(() => <div className="RenameModal" />),
-}));
+jest.mock('@plone/volto/components/manage/Contents');
 
 describe('Actions', () => {
   it('renders an actions component', () => {
diff --git a/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap b/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
index 51c4c11017..db5940cde3 100644
--- a/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
+++ b/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
@@ -92,7 +92,7 @@ exports[`Actions renders an actions component 1`] = `
       </span>
     </div>
     <div
-      className="RenameModal"
+      className="ContentsRenameModal"
     />
   </div>
 </div>
diff --git a/src/components/manage/Add/Add.jsx b/src/components/manage/Add/Add.jsx
index 2064fd2854..e7365ebb96 100644
--- a/src/components/manage/Add/Add.jsx
+++ b/src/components/manage/Add/Add.jsx
@@ -18,13 +18,13 @@ import { toast } from 'react-toastify';
 
 import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
 import {
-  Form,
   Icon,
   Toolbar,
   Sidebar,
   Toast,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getBaseUrl,
   hasBlocksData,
diff --git a/src/components/manage/Blocks/Block/Settings.test.jsx b/src/components/manage/Blocks/Block/Settings.test.jsx
index 57b7ea90ca..1ca09661a6 100644
--- a/src/components/manage/Blocks/Block/Settings.test.jsx
+++ b/src/components/manage/Blocks/Block/Settings.test.jsx
@@ -6,6 +6,8 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const withStateManagement =
diff --git a/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap b/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
index d60a35d1da..b6db1609ac 100644
--- a/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
+++ b/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
@@ -3,15 +3,8 @@
 exports[`Settings renders block settings form without schema enhancers 1`] = `
 <div>
   <div
-    class="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        class="ui segment form attached"
-      />
-    </div>
-  </div>
+    data-schema="[object Object]"
+    id="BlockDataForm"
+  />
 </div>
 `;
diff --git a/src/components/manage/Blocks/Image/ImageSidebar.test.jsx b/src/components/manage/Blocks/Image/ImageSidebar.test.jsx
index bc070b1d89..725237aff8 100644
--- a/src/components/manage/Blocks/Image/ImageSidebar.test.jsx
+++ b/src/components/manage/Blocks/Image/ImageSidebar.test.jsx
@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {
diff --git a/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap b/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
index e4e4544a01..01a0f1f537 100644
--- a/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
@@ -58,125 +58,71 @@ Array [
     />
   </div>,
   <div
-    className="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        className="ui segment form attached"
-      >
-        <div
-          className="mocked-default-widget"
-          id="mocked-field-alt"
-        >
-          Alt text
-           - 
-          <a
-            href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Open in a new tab"
-          >
-            Describe the purpose of the image.
-          </a>
-           
-          Leave empty if the image is purely decorative.
-        </div>
-        <div
-          className="mocked-align-widget"
-          id="mocked-field-align"
-        >
-          Alignment
-           - 
-          No description
-        </div>
-        <div
-          className="mocked-default-widget"
-          id="mocked-field-size"
-        >
-          Image size
-           - 
-          No description
-        </div>
-      </div>
-    </div>
-    <div
-      className="accordion ui fluid styled form"
-    >
-      <div
-        id="blockform-fieldset-link_settings"
-      >
-        <div
-          className="active title"
-          onClick={[Function]}
-        >
-          Link settings
-          <svg
-            className="icon"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": undefined,
-              }
-            }
-            onClick={null}
-            style={
-              Object {
-                "fill": "currentColor",
-                "height": "20px",
-                "width": "auto",
-              }
-            }
-            viewBox=""
-            xmlns=""
-          />
-        </div>
-        <div
-          className="content active"
-        >
-          <div
-            aria-hidden={false}
-            className="rah-static rah-static--height-auto"
-            style={
-              Object {
-                "height": "auto",
-                "overflow": "visible",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "WebkitTransition": "opacity 500ms ease 0ms",
-                  "transition": "opacity 500ms ease 0ms",
-                }
-              }
-            >
-              <div
-                className="ui segment attached"
+    data-schema={
+      Object {
+        "fieldsets": Array [
+          Object {
+            "fields": Array [
+              "alt",
+              "align",
+              "size",
+            ],
+            "id": "default",
+            "title": "Default",
+          },
+          Object {
+            "fields": Array [
+              "href",
+              "openLinkInNewTab",
+            ],
+            "id": "link_settings",
+            "title": "Link settings",
+          },
+        ],
+        "properties": Object {
+          "align": Object {
+            "title": "Alignment",
+            "widget": "align",
+          },
+          "alt": Object {
+            "description": <React.Fragment>
+              <a
+                href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Open in a new tab"
               >
-                <div
-                  className="mocked-object_browser-widget"
-                  id="mocked-field-href"
-                >
-                  Link to
-                   - 
-                  No description
-                </div>
-                <div
-                  className="mocked-boolean-widget"
-                  id="mocked-field-openLinkInNewTab"
-                >
-                  Open in a new tab
-                   - 
-                  No description
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
+                Describe the purpose of the image.
+              </a>
+               
+              Leave empty if the image is purely decorative.
+            </React.Fragment>,
+            "title": "Alt text",
+          },
+          "href": Object {
+            "allowExternals": true,
+            "mode": "link",
+            "selectedItemAttrs": Array [
+              "Title",
+              "Description",
+              "hasPreviewImage",
+            ],
+            "title": "Link to",
+            "widget": "object_browser",
+          },
+          "openLinkInNewTab": Object {
+            "title": "Open in a new tab",
+            "type": "boolean",
+          },
+          "size": Object {
+            "title": "Image size",
+            "widget": "image_size",
+          },
+        },
+        "required": Array [],
+      }
+    }
+    id="BlockDataForm"
+  />,
 ]
 `;
diff --git a/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx b/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
index 8998fc1be1..df1ac3e1cc 100644
--- a/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
+++ b/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Accordion, Grid, Segment } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { Icon, Image } from '@plone/volto/components';
 import {
   CheckboxWidget,
-  Icon,
-  Image,
   TextWidget,
-} from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+} from '@plone/volto/components/manage/Widgets';
 import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 import imageSVG from '@plone/volto/icons/image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
diff --git a/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx b/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx
index a606afff4e..6eb8e5e98e 100644
--- a/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx
+++ b/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx
@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import LeadImageSidebar from './LeadImageSidebar';
 
+jest.mock('@plone/volto/components/manage/Widgets');
+
 const mockStore = configureStore();
 
 test('renders a Lead Image block Sidebar component', () => {
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
index 92ec28dabf..07e5ee1607 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
@@ -29,84 +29,8 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
     className="ui segment form sidebar-image-data"
   >
     <div
-      className="inline field text field-wrapper-alt"
-    >
-      <div
-        className="ui grid"
-      >
-        <div
-          className="stretched row"
-        >
-          <div
-            className="four wide column"
-          >
-            <div
-              className="wrapper"
-            >
-              <label
-                htmlFor="field-alt"
-                id="fieldset-undefined-field-label-alt"
-              >
-                Alt text
-              </label>
-            </div>
-          </div>
-          <div
-            className="eight wide column"
-          >
-            <div
-              className="ui icon input"
-            >
-              <input
-                id="field-alt"
-                maxLength={null}
-                minLength={null}
-                name="alt"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                type="text"
-                value="alternate text"
-              />
-              <i
-                aria-hidden="true"
-                attributes={
-                  Object {
-                    "viewBox": "",
-                    "xmlns": "",
-                  }
-                }
-                className="icon"
-                onClick={[Function]}
-              />
-            </div>
-            <button
-              className="field-alt-action-button"
-              onClick={[Function]}
-            >
-              <svg
-                className="icon"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": undefined,
-                  }
-                }
-                onClick={null}
-                style={
-                  Object {
-                    "fill": "currentColor",
-                    "height": "18px",
-                    "width": "auto",
-                  }
-                }
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+      id="TextWidget"
+    />
     <div
       className="inline field"
     >
@@ -284,125 +208,11 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
       className="content active"
     >
       <div
-        className="inline field text field-wrapper-link"
-      >
-        <div
-          className="ui grid"
-        >
-          <div
-            className="stretched row"
-          >
-            <div
-              className="four wide column"
-            >
-              <div
-                className="wrapper"
-              >
-                <label
-                  htmlFor="field-link"
-                  id="fieldset-undefined-field-label-link"
-                >
-                  Link to
-                </label>
-              </div>
-            </div>
-            <div
-              className="eight wide column"
-            >
-              <div
-                className="ui icon input"
-              >
-                <input
-                  id="field-link"
-                  maxLength={null}
-                  minLength={null}
-                  name="link"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onClick={[Function]}
-                  type="text"
-                  value=""
-                />
-                <i
-                  aria-hidden="true"
-                  attributes={
-                    Object {
-                      "viewBox": "",
-                      "xmlns": "",
-                    }
-                  }
-                  className="icon"
-                  onClick={[Function]}
-                />
-              </div>
-              <button
-                className="field-link-action-button"
-                onClick={[Function]}
-              >
-                <svg
-                  className="icon"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "18px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
+        id="TextWidget"
+      />
       <div
-        className="inline field field-wrapper-openLinkInNewTab"
-      >
-        <div
-          className="ui grid"
-        >
-          <div
-            className="stretched row"
-          >
-            <div
-              className="twelve wide column"
-            >
-              <div
-                className="wrapper"
-              >
-                <div
-                  className="ui checkbox"
-                  onChange={[Function]}
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                >
-                  <input
-                    checked={false}
-                    className="hidden"
-                    name="field-openLinkInNewTab"
-                    readOnly={true}
-                    tabIndex={0}
-                    type="checkbox"
-                  />
-                  <label
-                    htmlFor="field-openLinkInNewTab"
-                  >
-                    Open in a new tab
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+        id="CheckboxWidget"
+      />
     </div>
   </div>
 </div>
diff --git a/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx b/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx
index 16f5b7b829..6823f5c3d5 100644
--- a/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx
+++ b/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx
@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {
diff --git a/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap b/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
index df6185bc4e..07d0059cd8 100644
--- a/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
@@ -2,46 +2,37 @@
 
 exports[`renders an Image Block Sidebar component 1`] = `
 <div
-  className="ui form"
->
-  <header
-    className="header pulled"
-  >
-    <h2>
-      Maps
-    </h2>
-  </header>
-  <div
-    id="blockform-fieldset-default"
-  >
-    <div
-      className="ui segment form attached"
-    >
-      <div
-        className="mocked-url-widget"
-        id="mocked-field-url"
-      >
-        Maps URL
-         - 
-        No description
-      </div>
-      <div
-        className="mocked-default-widget"
-        id="mocked-field-title"
-      >
-        Alt text
-         - 
-        No description
-      </div>
-      <div
-        className="mocked-align-widget"
-        id="mocked-field-align"
-      >
-        Alignment
-         - 
-        No description
-      </div>
-    </div>
-  </div>
-</div>
+  data-schema={
+    Object {
+      "block": "Maps",
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "url",
+            "title",
+            "align",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "align": Object {
+          "title": "Alignment",
+          "widget": "align",
+        },
+        "title": Object {
+          "title": "Alt text",
+        },
+        "url": Object {
+          "title": "Maps URL",
+          "widget": "url",
+        },
+      },
+      "required": Array [],
+      "title": "Maps",
+    }
+  }
+  id="BlockDataForm"
+/>
 `;
diff --git a/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx b/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx
index 1d9f8e80d6..79b1feadef 100644
--- a/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx
+++ b/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import withQueryString from './../hocs/withQueryString';
 import { defineMessages } from 'react-intl';
 
diff --git a/src/components/manage/Blocks/Video/VideoSidebar.test.jsx b/src/components/manage/Blocks/Video/VideoSidebar.test.jsx
index ecfabadd68..d40ff249fc 100644
--- a/src/components/manage/Blocks/Video/VideoSidebar.test.jsx
+++ b/src/components/manage/Blocks/Video/VideoSidebar.test.jsx
@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {
diff --git a/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap b/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
index e8bb34c7d6..85d2d87a7a 100644
--- a/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
@@ -2,46 +2,38 @@
 
 exports[`renders an Image Block Sidebar component 1`] = `
 <div
-  className="ui form"
->
-  <header
-    className="header pulled"
-  >
-    <h2>
-      Video
-    </h2>
-  </header>
-  <div
-    id="blockform-fieldset-default"
-  >
-    <div
-      className="ui segment form attached"
-    >
-      <div
-        className="mocked-url-widget"
-        id="mocked-field-url"
-      >
-        Video URL
-         - 
-        No description
-      </div>
-      <div
-        className="mocked-url-widget"
-        id="mocked-field-preview_image"
-      >
-        Preview Image URL
-         - 
-        No description
-      </div>
-      <div
-        className="mocked-align-widget"
-        id="mocked-field-align"
-      >
-        Alignment
-         - 
-        No description
-      </div>
-    </div>
-  </div>
-</div>
+  data-schema={
+    Object {
+      "block": "Video",
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "url",
+            "preview_image",
+            "align",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "align": Object {
+          "title": "Alignment",
+          "widget": "align",
+        },
+        "preview_image": Object {
+          "title": "Preview Image URL",
+          "widget": "url",
+        },
+        "url": Object {
+          "title": "Video URL",
+          "widget": "url",
+        },
+      },
+      "required": Array [],
+      "title": "Video",
+    }
+  }
+  id="BlockDataForm"
+/>
 `;
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
index dd4a2b65bf..29e73bb041 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
@@ -7,7 +7,7 @@ import ContentsPropertiesModal from './ContentsPropertiesModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsPropertiesModal', () => {
   it('renders a contents properties modal component', () => {
diff --git a/src/components/manage/Contents/ContentsRenameModal.test.jsx b/src/components/manage/Contents/ContentsRenameModal.test.jsx
index c93de8f872..7d63a3aa86 100644
--- a/src/components/manage/Contents/ContentsRenameModal.test.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.test.jsx
@@ -7,7 +7,7 @@ import ContentsRenameModal from './ContentsRenameModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsRenameModal', () => {
   it('renders a contents rename modal component', () => {
diff --git a/src/components/manage/Contents/ContentsTagsModal.test.jsx b/src/components/manage/Contents/ContentsTagsModal.test.jsx
index 9d368a3160..976155a8a9 100644
--- a/src/components/manage/Contents/ContentsTagsModal.test.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.test.jsx
@@ -7,7 +7,7 @@ import ContentsTagsModal from './ContentsTagsModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsTagsModal', () => {
   it('renders a contents tags modal component', () => {
diff --git a/src/components/manage/Contents/ContentsWorkflowModal.test.jsx b/src/components/manage/Contents/ContentsWorkflowModal.test.jsx
index 68a90aff16..696107bd8a 100644
--- a/src/components/manage/Contents/ContentsWorkflowModal.test.jsx
+++ b/src/components/manage/Contents/ContentsWorkflowModal.test.jsx
@@ -7,7 +7,7 @@ import ContentsWorkflowModal from './ContentsWorkflowModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsWorkflowModal', () => {
   it('renders a contents workflow modal component', () => {
diff --git a/src/components/manage/Contents/__mocks__/index.tsx b/src/components/manage/Contents/__mocks__/index.tsx
new file mode 100644
index 0000000000..6187049d16
--- /dev/null
+++ b/src/components/manage/Contents/__mocks__/index.tsx
@@ -0,0 +1,5 @@
+export const Contents = jest.fn(() => <div className="Contents" />);
+
+export const ContentsRenameModal = jest.fn(() => (
+  <div className="ContentsRenameModal" />
+));
diff --git a/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap b/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
index 3c382ace86..de30a2856a 100644
--- a/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
+++ b/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
@@ -2,6 +2,54 @@
 
 exports[`ContentsPropertiesModal renders a contents properties modal component 1`] = `
 <div
-  id="modalform"
+  data-schema={
+    Object {
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "effective",
+            "expires",
+            "rights",
+            "creators",
+            "exclude_from_nav",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "creators": Object {
+          "description": "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.",
+          "title": "Creators",
+          "type": "array",
+        },
+        "effective": Object {
+          "description": "If this date is in the future, the content will not show up in listings and searches until this date.",
+          "title": "Publishing Date",
+          "type": "string",
+          "widget": "datetime",
+        },
+        "exclude_from_nav": Object {
+          "description": "If selected, this item will not appear in the navigation tree",
+          "title": "Exclude from navigation",
+          "type": "boolean",
+        },
+        "expires": Object {
+          "description": "When this date is reached, the content will nolonger be visible in listings and searches.",
+          "title": "Expiration Date",
+          "type": "string",
+          "widget": "datetime",
+        },
+        "rights": Object {
+          "description": "Copyright statement or other rights information on this item.",
+          "title": "Rights",
+          "type": "string",
+          "widget": "textarea",
+        },
+      },
+      "required": Array [],
+    }
+  }
+  id="ModalForm"
 />
 `;
diff --git a/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap b/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
index 991517203f..21f69c89d9 100644
--- a/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
+++ b/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
@@ -2,6 +2,33 @@
 
 exports[`ContentsRenameModal renders a contents rename modal component 1`] = `
 <div
-  id="modalform"
+  data-schema={
+    Object {
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "0_title",
+            "0_id",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "0_id": Object {
+          "description": "This name will be displayed in the URL.",
+          "title": "Short name",
+          "type": "id",
+        },
+        "0_title": Object {
+          "description": "",
+          "title": "Title",
+          "type": "string",
+        },
+      },
+      "required": Array [],
+    }
+  }
+  id="ModalForm"
 />
 `;
diff --git a/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap b/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
index 17c6d0619b..7950678889 100644
--- a/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
+++ b/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
@@ -2,6 +2,39 @@
 
 exports[`ContentsTagsModal renders a contents tags modal component 1`] = `
 <div
-  id="modalform"
+  data-schema={
+    Object {
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "tags_to_remove",
+            "tags_to_add",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "tags_to_add": Object {
+          "items": Object {
+            "vocabulary": Object {
+              "@id": "plone.app.vocabularies.Keywords",
+            },
+          },
+          "title": "Tags to add",
+          "type": "array",
+          "widget": "token",
+        },
+        "tags_to_remove": Object {
+          "choices": Array [],
+          "title": "Tags to remove",
+          "type": "array",
+          "widget": "array",
+        },
+      },
+      "required": Array [],
+    }
+  }
+  id="ModalForm"
 />
 `;
diff --git a/src/components/manage/Controlpanels/Aliases.jsx b/src/components/manage/Controlpanels/Aliases.jsx
index 6a927d7ae5..942df568e5 100644
--- a/src/components/manage/Controlpanels/Aliases.jsx
+++ b/src/components/manage/Controlpanels/Aliases.jsx
@@ -26,7 +26,7 @@ import {
   Menu,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
 import { Icon, Toolbar } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
diff --git a/src/components/manage/Controlpanels/Aliases.test.jsx b/src/components/manage/Controlpanels/Aliases.test.jsx
index 661611753f..f12a6a6f9b 100644
--- a/src/components/manage/Controlpanels/Aliases.test.jsx
+++ b/src/components/manage/Controlpanels/Aliases.test.jsx
@@ -10,6 +10,7 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
diff --git a/src/components/manage/Controlpanels/ContentType.jsx b/src/components/manage/Controlpanels/ContentType.jsx
index 097dd488ff..27b94998b5 100644
--- a/src/components/manage/Controlpanels/ContentType.jsx
+++ b/src/components/manage/Controlpanels/ContentType.jsx
@@ -13,7 +13,8 @@ import { Button, Header } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import { last, nth, join } from 'lodash';
-import { Error, Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getControlpanel, updateControlpanel } from '@plone/volto/actions';
 
 import saveSVG from '@plone/volto/icons/save.svg';
diff --git a/src/components/manage/Controlpanels/ContentType.test.jsx b/src/components/manage/Controlpanels/ContentType.test.jsx
index 63aa9fcd68..9d4590f3f7 100644
--- a/src/components/manage/Controlpanels/ContentType.test.jsx
+++ b/src/components/manage/Controlpanels/ContentType.test.jsx
@@ -11,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentType', () => {
   it('renders dexterity content-type component', () => {
diff --git a/src/components/manage/Controlpanels/ContentTypeLayout.jsx b/src/components/manage/Controlpanels/ContentTypeLayout.jsx
index b2754d90ba..8c483572c7 100644
--- a/src/components/manage/Controlpanels/ContentTypeLayout.jsx
+++ b/src/components/manage/Controlpanels/ContentTypeLayout.jsx
@@ -19,14 +19,8 @@ import { Button, Segment } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { nth, join } from 'lodash';
-import {
-  Error,
-  Form,
-  Icon,
-  Toolbar,
-  Sidebar,
-  Toast,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Sidebar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getSchema,
   updateSchema,
diff --git a/src/components/manage/Controlpanels/ContentTypeSchema.jsx b/src/components/manage/Controlpanels/ContentTypeSchema.jsx
index b8ebf1dea0..ccf73d5d3e 100644
--- a/src/components/manage/Controlpanels/ContentTypeSchema.jsx
+++ b/src/components/manage/Controlpanels/ContentTypeSchema.jsx
@@ -6,7 +6,8 @@
 import { getSchema, putSchema } from '@plone/volto/actions';
 import { getParentUrl } from '@plone/volto/helpers';
 import { nth } from 'lodash';
-import { Error, Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Error, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
 import PropTypes from 'prop-types';
diff --git a/src/components/manage/Controlpanels/ContentTypes.jsx b/src/components/manage/Controlpanels/ContentTypes.jsx
index f744754007..bddc7216b6 100644
--- a/src/components/manage/Controlpanels/ContentTypes.jsx
+++ b/src/components/manage/Controlpanels/ContentTypes.jsx
@@ -14,13 +14,8 @@ import { last } from 'lodash';
 import { Confirm, Container, Table, Button, Header } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import {
-  Error,
-  Icon,
-  Toolbar,
-  Toast,
-  ContentTypesActions,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import ContentTypesActions from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
 import {
   getControlpanel,
   postControlpanel,
diff --git a/src/components/manage/Controlpanels/Controlpanel.jsx b/src/components/manage/Controlpanels/Controlpanel.jsx
index a6fc83740f..e3b5a691a6 100644
--- a/src/components/manage/Controlpanels/Controlpanel.jsx
+++ b/src/components/manage/Controlpanels/Controlpanel.jsx
@@ -14,7 +14,8 @@ import { Button, Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updateControlpanel, getControlpanel } from '@plone/volto/actions';
 
 import config from '@plone/volto/registry';
diff --git a/src/components/manage/Controlpanels/Controlpanel.test.jsx b/src/components/manage/Controlpanels/Controlpanel.test.jsx
index d03d87e2d6..519d842a75 100644
--- a/src/components/manage/Controlpanels/Controlpanel.test.jsx
+++ b/src/components/manage/Controlpanels/Controlpanel.test.jsx
@@ -11,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('Controlpanel', () => {
   it('renders a controlpanel component', () => {
diff --git a/src/components/manage/Controlpanels/Controlpanels.jsx b/src/components/manage/Controlpanels/Controlpanels.jsx
index fa8d3e880d..e843df02a5 100644
--- a/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -15,7 +15,8 @@ import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { listControlpanels, getSystemInformation } from '@plone/volto/actions';
-import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
+import { Error, Icon, Toolbar } from '@plone/volto/components';
+import { VersionOverview } from '@plone/volto/components/manage/Controlpanels';
 
 import config from '@plone/volto/registry';
 
diff --git a/src/components/manage/Controlpanels/Controlpanels.test.jsx b/src/components/manage/Controlpanels/Controlpanels.test.jsx
index 23c9d83392..d2ab0eb9c6 100644
--- a/src/components/manage/Controlpanels/Controlpanels.test.jsx
+++ b/src/components/manage/Controlpanels/Controlpanels.test.jsx
@@ -13,9 +13,9 @@ jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
 
-jest.mock('./VersionOverview', () =>
-  jest.fn(() => <div className="VersionOverview" />),
-);
+jest.mock('@plone/volto/components/manage/Controlpanels', () => ({
+  VersionOverview: jest.fn(() => <div className="VersionOverview" />),
+}));
 
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
diff --git a/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx b/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
index d9eaf2f9f2..03b792321c 100644
--- a/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
+++ b/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
@@ -15,10 +15,10 @@ import {
   Icon,
   Toast,
   Toolbar,
-  RenderGroups,
   Pagination,
   Error,
 } from '@plone/volto/components';
+import RenderGroups from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
 import { Link } from 'react-router-dom';
 import { Helmet, messages } from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
diff --git a/src/components/manage/Controlpanels/ModerateComments.jsx b/src/components/manage/Controlpanels/ModerateComments.jsx
index 182ce40ae0..c87bf9ff04 100644
--- a/src/components/manage/Controlpanels/ModerateComments.jsx
+++ b/src/components/manage/Controlpanels/ModerateComments.jsx
@@ -14,12 +14,8 @@ import { Container, Button, Table } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import {
-  CommentEditModal,
-  FormattedRelativeDate,
-  Icon,
-  Toolbar,
-} from '@plone/volto/components';
+import { FormattedRelativeDate, Icon, Toolbar } from '@plone/volto/components';
+import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
diff --git a/src/components/manage/Controlpanels/ModerateComments.test.jsx b/src/components/manage/Controlpanels/ModerateComments.test.jsx
index ff5f785dcd..5a61a4738e 100644
--- a/src/components/manage/Controlpanels/ModerateComments.test.jsx
+++ b/src/components/manage/Controlpanels/ModerateComments.test.jsx
@@ -10,9 +10,7 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('../../theme/Comments/CommentEditModal', () =>
-  jest.fn(() => <div id="modal" />),
-);
+jest.mock('@plone/volto/components/theme/Comments');
 
 describe('ModerateComments', () => {
   it('renders a moderate comments component', () => {
diff --git a/src/components/manage/Controlpanels/Rules/AddRule.test.jsx b/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
index bd100aca17..6e4d1802ea 100644
--- a/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
+++ b/src/components/manage/Controlpanels/Rules/AddRule.test.jsx
@@ -12,9 +12,7 @@ const mockStore = configureMockStore(middlewares);
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('@plone/volto/components/manage/Form', () => ({
-  Field: jest.fn(() => <div className="Field" />),
-}));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('AddRule', () => {
   it('renders rules add interface', () => {
diff --git a/src/components/manage/Controlpanels/Rules/EditRule.test.jsx b/src/components/manage/Controlpanels/Rules/EditRule.test.jsx
index b62949c0bc..625a975e6d 100644
--- a/src/components/manage/Controlpanels/Rules/EditRule.test.jsx
+++ b/src/components/manage/Controlpanels/Rules/EditRule.test.jsx
@@ -13,6 +13,8 @@ jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
 
+jest.mock('@plone/volto/components/manage/Form');
+
 describe('EditRule', () => {
   it('renders rules edit interface', () => {
     const store = mockStore({
diff --git a/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap b/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
index be2bd126a8..98eb33f4a3 100644
--- a/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
+++ b/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
@@ -40,12 +40,9 @@ exports[`AddRule renders rules add interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Title
-                     - 
-                    Please set a descriptive title for the rule.
                   </div>
                 </div>
               </div>
@@ -56,12 +53,9 @@ exports[`AddRule renders rules add interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Description
-                     - 
-                    Enter a short description of the rule and its purpose.
                   </div>
                 </div>
               </div>
@@ -72,12 +66,9 @@ exports[`AddRule renders rules add interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Triggering event
-                     - 
-                    The rule will execute when the following event occurs.
                   </div>
                 </div>
               </div>
diff --git a/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap b/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
index 4920f93180..cfa09a0c33 100644
--- a/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
+++ b/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
@@ -40,12 +40,9 @@ exports[`EditRule renders rules edit interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Title
-                     - 
-                    Please set a descriptive title for the rule.
                   </div>
                 </div>
               </div>
@@ -56,12 +53,9 @@ exports[`EditRule renders rules edit interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Description
-                     - 
-                    Enter a short description of the rule and its purpose.
                   </div>
                 </div>
               </div>
@@ -72,12 +66,9 @@ exports[`EditRule renders rules edit interface 1`] = `
                   className="column"
                 >
                   <div
-                    className="mocked-default-widget"
-                    id="mocked-field-undefined"
+                    className="Field"
                   >
                     Triggering event
-                     - 
-                    The rule will execute when the following event occurs.
                   </div>
                 </div>
               </div>
diff --git a/src/components/manage/Controlpanels/UndoControlpanel.jsx b/src/components/manage/Controlpanels/UndoControlpanel.jsx
index 62bbef85e3..dacc414855 100644
--- a/src/components/manage/Controlpanels/UndoControlpanel.jsx
+++ b/src/components/manage/Controlpanels/UndoControlpanel.jsx
@@ -10,7 +10,8 @@ import { Link } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { Container, Segment, Table, Menu, Input } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar, Form, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import backSVG from '@plone/volto/icons/back.svg';
 import { map } from 'lodash';
 import { Helmet } from '@plone/volto/helpers';
diff --git a/src/components/manage/Controlpanels/UndoControlpanel.test.jsx b/src/components/manage/Controlpanels/UndoControlpanel.test.jsx
index 61d65fcc2c..50df823e0f 100644
--- a/src/components/manage/Controlpanels/UndoControlpanel.test.jsx
+++ b/src/components/manage/Controlpanels/UndoControlpanel.test.jsx
@@ -10,7 +10,7 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('UndoControlpanel', () => {
   it('renders undo controlpanel component', () => {
diff --git a/src/components/manage/Controlpanels/UpgradeControlPanel.jsx b/src/components/manage/Controlpanels/UpgradeControlPanel.jsx
index b415db3597..0c6860022a 100644
--- a/src/components/manage/Controlpanels/UpgradeControlPanel.jsx
+++ b/src/components/manage/Controlpanels/UpgradeControlPanel.jsx
@@ -25,7 +25,8 @@ import {
   runUpgrade,
 } from '@plone/volto/actions';
 import { Helmet } from '@plone/volto/helpers';
-import { Icon, Toast, Toolbar, VersionOverview } from '@plone/volto/components';
+import { Icon, Toast, Toolbar } from '@plone/volto/components';
+import { VersionOverview } from '@plone/volto/components/manage/Controlpanels';
 import backSVG from '@plone/volto/icons/back.svg';
 import { toast } from 'react-toastify';
 
diff --git a/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
index 3faa80d47e..0150be7405 100644
--- a/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
@@ -200,7 +200,11 @@ exports[`Aliases renders an aliases control component 1`] = `
             </div>
             <div
               className="field"
-            />
+            >
+              <div
+                id="DatetimeWidget"
+              />
+            </div>
             <button
               className="ui primary button"
               onClick={[Function]}
diff --git a/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
index ec12264619..690950477a 100644
--- a/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
@@ -11,7 +11,8 @@ exports[`ContentType renders dexterity content-type component 1`] = `
     Page Content Type
   </div>
   <div
-    id="form"
+    data-schema={Object {}}
+    id="Form"
   />
   <div
     id="Portal"
diff --git a/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
index 8d62cd5bef..e1fc093620 100644
--- a/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
@@ -8,7 +8,13 @@ exports[`Controlpanel renders a controlpanel component 1`] = `
     className="ui container"
   >
     <div
-      id="form"
+      data-schema={
+        Object {
+          "fieldsets": Array [],
+          "properties": Object {},
+        }
+      }
+      id="Form"
     />
   </div>
   <div
diff --git a/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap b/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
index 5f3f74bc51..c845bfa2b2 100644
--- a/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
+++ b/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
@@ -17,7 +17,54 @@ exports[`UndoControlpanel renders undo controlpanel component 1`] = `
       className="ui segment"
     >
       <div
-        id="form"
+        data-schema={
+          Object {
+            "fieldsets": Array [
+              Object {
+                "fields": Array [
+                  "sortingTypes",
+                ],
+                "id": "default",
+                "title": "Default",
+              },
+            ],
+            "properties": Object {
+              "sortByDate": Object {
+                "title": "Enter Date and Time",
+                "type": "date",
+              },
+              "sortByPath": Object {
+                "title": "Enter Path",
+                "type": "string",
+              },
+              "sortByUsername": Object {
+                "title": "Enter Username",
+                "type": "string",
+              },
+              "sortingTypes": Object {
+                "choices": Array [
+                  Array [
+                    "User Name",
+                    "User Name",
+                  ],
+                  Array [
+                    "Path",
+                    "Path",
+                  ],
+                  Array [
+                    "Date",
+                    "Date",
+                  ],
+                ],
+                "description": "Sort transactions by User-Name, Path or Date",
+                "title": "Sort by",
+                "type": "string",
+              },
+            },
+            "required": Array [],
+          }
+        }
+        id="Form"
       />
     </div>
     <div
diff --git a/src/components/manage/Controlpanels/index.tsx b/src/components/manage/Controlpanels/index.tsx
index 5487d4e6f7..a93eb36180 100644
--- a/src/components/manage/Controlpanels/index.tsx
+++ b/src/components/manage/Controlpanels/index.tsx
@@ -1,5 +1,21 @@
 import loadable from '@loadable/component';
 
+// CONTROLPANELS
+
+export const Controlpanels = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels'
+    ),
+);
+
+export const Controlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanel'
+    ),
+);
+
 // RULES CONTROLPANELS
 
 export const RulesControlpanel = loadable(
@@ -46,9 +62,91 @@ export const UserGroupMembershipControlPanel = loadable(
     ),
 );
 
+export const GroupsControlpanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+    ),
+);
+
 // RELATIONS CONTROLPANEL
 
 export const RelationsControlpanel = loadable(
   () =>
     import('@plone/volto/components/manage/Controlpanels/Relations/Relations'),
 );
+
+// ALIASES CONTROLPANEL
+
+export const AliasesControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/Aliases'),
+);
+
+// UNDO CONTROLPANEL
+
+export const UndoControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/UndoControlpanel'),
+);
+
+// ADDONS CONTROLPANEL
+
+export const AddonsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/AddonsControlpanel'),
+);
+
+// CONTENT TYPES CONTROLPANEL
+
+export const ContentType = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentType'
+    ),
+);
+
+export const ContentTypeLayout = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeLayout'
+    ),
+);
+
+export const ContentTypeSchema = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeSchema'
+    ),
+);
+
+export const ContentTypes = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypes'
+    ),
+);
+
+// VERSION OVERVIEW
+
+export const VersionOverview = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/VersionOverview'),
+);
+
+// PLONE UPGRADES CONTROLPANELS
+
+export const UpgradeControlPanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/UpgradeControlPanel'),
+);
+
+// MODERATE COMMENTS CONTROLPANEL
+
+export const ModerateComments = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/ModerateComments'),
+);
+
+// DATABASE INFORMATION CONTROLPANELS
+
+export const DatabaseInformation = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/DatabaseInformation'),
+);
diff --git a/src/components/manage/Display/Display.jsx b/src/components/manage/Display/Display.jsx
index e5673a1503..adb0f3ed8d 100644
--- a/src/components/manage/Display/Display.jsx
+++ b/src/components/manage/Display/Display.jsx
@@ -6,7 +6,8 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { getSchema, updateContent, getContent } from '@plone/volto/actions';
 import { getLayoutFieldname } from '@plone/volto/helpers';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import { defineMessages, injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
diff --git a/src/components/manage/Display/Display.test.jsx b/src/components/manage/Display/Display.test.jsx
index 8608ee8891..1ff6193cd5 100644
--- a/src/components/manage/Display/Display.test.jsx
+++ b/src/components/manage/Display/Display.test.jsx
@@ -8,6 +8,7 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
diff --git a/src/components/manage/Display/__snapshots__/Display.test.jsx.snap b/src/components/manage/Display/__snapshots__/Display.test.jsx.snap
index cac362d7e7..776404b320 100644
--- a/src/components/manage/Display/__snapshots__/Display.test.jsx.snap
+++ b/src/components/manage/Display/__snapshots__/Display.test.jsx.snap
@@ -5,88 +5,7 @@ exports[`Display renders a Display component empty in case that there is only on
 exports[`Display renders a Display component with more than one option 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-display-select"
-  >
-    <div
-      class="ui grid"
-    >
-      <div
-        class="stretched row"
-      >
-        <div
-          class="four wide column"
-        >
-          <div
-            class="wrapper"
-          >
-            <label
-              for="field-display-select"
-              id="fieldset-undefined-field-label-display-select"
-            >
-              View
-            </label>
-          </div>
-        </div>
-        <div
-          class="eight wide column"
-        >
-          <div
-            class="react-select-container css-2b097c-container"
-          >
-            <span
-              aria-atomic="false"
-              aria-live="polite"
-              aria-relevant="additions text"
-              class="css-1f43avz-a11yText-A11yText"
-            />
-            <div
-              class="react-select__control css-yjz7n5-control"
-            >
-              <div
-                class="react-select__value-container react-select__value-container--has-value css-86rg1c-ValueContainer"
-              >
-                <div
-                  class="react-select__single-value css-1uccc91-singleValue"
-                >
-                  Summary view
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  class="css-wmatm6-dummyInput-DummyInput"
-                  id="react-select-2-input"
-                  readonly=""
-                  tabindex="0"
-                  value=""
-                />
-              </div>
-              <div
-                class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-              >
-                <span
-                  class="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
-                >
-                  <svg
-                    class="icon"
-                    style="height: 24px; width: auto; fill: #007bc1;"
-                    viewBox=""
-                    xmlns=""
-                  />
-                </div>
-              </div>
-            </div>
-            <input
-              name="display-select"
-              type="hidden"
-              value="summary_view"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    id="FormFieldWrapper"
+  />
 </div>
 `;
diff --git a/src/components/manage/Edit/Edit.jsx b/src/components/manage/Edit/Edit.jsx
index 2cef492420..7d8024c664 100644
--- a/src/components/manage/Edit/Edit.jsx
+++ b/src/components/manage/Edit/Edit.jsx
@@ -18,7 +18,6 @@ import { toast } from 'react-toastify';
 
 import {
   Forbidden,
-  Form,
   Icon,
   Sidebar,
   Toast,
@@ -27,6 +26,7 @@ import {
   CompareLanguages,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   updateContent,
   getContent,
diff --git a/src/components/manage/Edit/Edit.test.jsx b/src/components/manage/Edit/Edit.test.jsx
index 5e28911e95..8bced8ab90 100644
--- a/src/components/manage/Edit/Edit.test.jsx
+++ b/src/components/manage/Edit/Edit.test.jsx
@@ -11,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('Edit', () => {
   it('renders an empty edit component', () => {
diff --git a/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap b/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
index e8df203414..5492ed1718 100644
--- a/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
+++ b/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
@@ -5,7 +5,12 @@ exports[`Edit renders an edit component 1`] = `
   id="page-edit"
 >
   <div
-    className="Form"
+    data-schema={
+      Object {
+        "some": "field",
+      }
+    }
+    id="Form"
   />
   <div
     id="Portal"
@@ -21,7 +26,8 @@ exports[`Edit renders an empty edit component 1`] = `
   id="page-edit"
 >
   <div
-    className="Form"
+    data-schema={null}
+    id="Form"
   />
   <div
     id="Portal"
diff --git a/src/components/manage/Form/BlockDataForm.test.jsx b/src/components/manage/Form/BlockDataForm.test.jsx
index 6c77dc20f7..9eb80f5f77 100644
--- a/src/components/manage/Form/BlockDataForm.test.jsx
+++ b/src/components/manage/Form/BlockDataForm.test.jsx
@@ -6,6 +6,8 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const withStateManagement =
diff --git a/src/components/manage/Form/Form.test.jsx b/src/components/manage/Form/Form.test.jsx
index ecefaf3302..02385900fc 100644
--- a/src/components/manage/Form/Form.test.jsx
+++ b/src/components/manage/Form/Form.test.jsx
@@ -8,9 +8,7 @@ const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-jest.mock('@plone/volto/components/manage/Form', () => ({
-  Field: jest.fn(() => <div className="Field" />),
-}));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('Form', () => {
   it('renders a form component', () => {
diff --git a/src/components/manage/Form/InlineForm.test.jsx b/src/components/manage/Form/InlineForm.test.jsx
index 1ab4b15248..173c15282a 100644
--- a/src/components/manage/Form/InlineForm.test.jsx
+++ b/src/components/manage/Form/InlineForm.test.jsx
@@ -6,6 +6,8 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 function NewBaseWidget(name) {
diff --git a/src/components/manage/Form/ModalForm.test.jsx b/src/components/manage/Form/ModalForm.test.jsx
index 6e491ee79a..5b2a8c1c69 100644
--- a/src/components/manage/Form/ModalForm.test.jsx
+++ b/src/components/manage/Form/ModalForm.test.jsx
@@ -9,7 +9,7 @@ import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-jest.mock('./Field', () => jest.fn(() => <div className="Field" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {
diff --git a/src/components/manage/Form/__mocks__/index.tsx b/src/components/manage/Form/__mocks__/index.tsx
new file mode 100644
index 0000000000..75661113d6
--- /dev/null
+++ b/src/components/manage/Form/__mocks__/index.tsx
@@ -0,0 +1,29 @@
+export const Field = jest.fn((props) => (
+  <div className="Field" id={props.id}>
+    {props.title}
+  </div>
+));
+
+export const InlineForm = jest.fn((props) => (
+  <div id="InlineForm" data-schema={props.schema} />
+));
+
+export const ModalForm = jest.fn((props) => (
+  <div id="ModalForm" data-schema={props.schema} />
+));
+
+export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
+
+export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
+
+export const BlockDataForm = jest.fn((props) => (
+  <div id="BlockDataForm" data-schema={props.schema} />
+));
+
+export const BlocksForm = jest.fn((props) => (
+  <div id="BlocksForm" data-schema={props.schema} />
+));
+
+export const Form = jest.fn((props) => (
+  <div id="Form" data-schema={props.schema} />
+));
diff --git a/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap b/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
index 3c9020a016..8d9413e37e 100644
--- a/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
+++ b/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
@@ -3,69 +3,35 @@
 exports[`BlockDataForm should add variations to schema 1`] = `
 <div>
   <div
-    class="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        class="ui segment form attached"
-      >
-        <div
-          class="SelectWidget"
-        >
-          [["default","Default"],["extra","Extra"]]
-        </div>
-      </div>
-    </div>
-  </div>
+    data-schema="[object Object]"
+    id="InlineForm"
+  />
 </div>
 `;
 
 exports[`BlockDataForm should not add variations to schema when explicitly disabled 1`] = `
 <div>
   <div
-    class="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        class="ui segment form attached"
-      />
-    </div>
-  </div>
+    data-schema="[object Object]"
+    id="InlineForm"
+  />
 </div>
 `;
 
 exports[`BlockDataForm should not add variations to schema when unneeded 1`] = `
 <div>
   <div
-    class="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        class="ui segment form attached"
-      />
-    </div>
-  </div>
+    data-schema="[object Object]"
+    id="InlineForm"
+  />
 </div>
 `;
 
 exports[`BlockDataForm should not add variations when only one variation 1`] = `
 <div>
   <div
-    class="ui form"
-  >
-    <div
-      id="blockform-fieldset-default"
-    >
-      <div
-        class="ui segment form attached"
-      />
-    </div>
-  </div>
+    data-schema="[object Object]"
+    id="InlineForm"
+  />
 </div>
 `;
diff --git a/src/components/manage/Form/__snapshots__/Form.test.jsx.snap b/src/components/manage/Form/__snapshots__/Form.test.jsx.snap
index 1cf0e7b027..2ac50e9818 100644
--- a/src/components/manage/Form/__snapshots__/Form.test.jsx.snap
+++ b/src/components/manage/Form/__snapshots__/Form.test.jsx.snap
@@ -20,6 +20,7 @@ exports[`Form renders a form component 1`] = `
         >
           <div
             className="Field"
+            id="title"
           />
         </div>
         <div
diff --git a/src/components/manage/Form/__snapshots__/InlineForm.test.jsx.snap b/src/components/manage/Form/__snapshots__/InlineForm.test.jsx.snap
index aaec8a7ab3..9793119f6a 100644
--- a/src/components/manage/Form/__snapshots__/InlineForm.test.jsx.snap
+++ b/src/components/manage/Form/__snapshots__/InlineForm.test.jsx.snap
@@ -12,14 +12,10 @@ exports[`Form renders a form component 1`] = `
         class="ui segment form attached"
       >
         <div
-          class="mocked-default-widget"
-          id="mocked-field-title"
+          class="Field"
+          id="title"
         >
           The title
-           - 
-          No description
-           -
-          No value
         </div>
       </div>
     </div>
@@ -39,34 +35,22 @@ exports[`Form renders a form component with defaults in the schema - Checkboxes
         class="ui segment form attached"
       >
         <div
-          class="mocked-boolean-widget"
-          id="mocked-field-theCheckBox"
+          class="Field"
+          id="theCheckBox"
         >
           The checkbox
-           - 
-          No description
-           -
-          No value
         </div>
         <div
-          class="mocked-boolean-widget"
-          id="mocked-field-theTruthyCheckBox"
+          class="Field"
+          id="theTruthyCheckBox"
         >
           The truthy checkbox
-           - 
-          No description
-           -
-          true
         </div>
         <div
-          class="mocked-boolean-widget"
-          id="mocked-field-theFalsyCheckBox"
+          class="Field"
+          id="theFalsyCheckBox"
         >
           The falsy checkbox
-           - 
-          No description
-           -
-          false
         </div>
       </div>
     </div>
@@ -86,14 +70,10 @@ exports[`Form renders a form component with defaults in the schema - Default tex
         class="ui segment form attached"
       >
         <div
-          class="mocked-default-widget"
-          id="mocked-field-title"
+          class="Field"
+          id="title"
         >
           The title
-           - 
-          No description
-           -
-          This is the default
         </div>
       </div>
     </div>
@@ -113,24 +93,16 @@ exports[`Form renders a form component with defaults in the schema - Number fiel
         class="ui segment form attached"
       >
         <div
-          class="mocked-number-widget"
-          id="mocked-field-number"
+          class="Field"
+          id="number"
         >
           The number, default set
-           - 
-          No description
-           -
-          5
         </div>
         <div
-          class="mocked-number-widget"
-          id="mocked-field-numberWithValue"
+          class="Field"
+          id="numberWithValue"
         >
           The number, default with a value
-           - 
-          No description
-           -
-          10
         </div>
       </div>
     </div>
diff --git a/src/components/manage/Multilingual/TranslationObject.jsx b/src/components/manage/Multilingual/TranslationObject.jsx
index f077f9f80d..47a8b4ae85 100644
--- a/src/components/manage/Multilingual/TranslationObject.jsx
+++ b/src/components/manage/Multilingual/TranslationObject.jsx
@@ -8,7 +8,7 @@ import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
 import {
diff --git a/src/components/manage/Preferences/ChangePassword.jsx b/src/components/manage/Preferences/ChangePassword.jsx
index ca817592f6..f48a1c2970 100644
--- a/src/components/manage/Preferences/ChangePassword.jsx
+++ b/src/components/manage/Preferences/ChangePassword.jsx
@@ -15,7 +15,8 @@ import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 
diff --git a/src/components/manage/Preferences/ChangePassword.test.jsx b/src/components/manage/Preferences/ChangePassword.test.jsx
index 0df20b57de..c3ffb53978 100644
--- a/src/components/manage/Preferences/ChangePassword.test.jsx
+++ b/src/components/manage/Preferences/ChangePassword.test.jsx
@@ -9,6 +9,8 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
+
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
diff --git a/src/components/manage/Preferences/PersonalInformation.jsx b/src/components/manage/Preferences/PersonalInformation.jsx
index b222d5b59e..a32233014b 100644
--- a/src/components/manage/Preferences/PersonalInformation.jsx
+++ b/src/components/manage/Preferences/PersonalInformation.jsx
@@ -12,7 +12,8 @@ import { withRouter } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 import { messages } from '@plone/volto/helpers';
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getUser, updateUser, getUserSchema } from '@plone/volto/actions';
 
 /**
diff --git a/src/components/manage/Preferences/PersonalPreferences.jsx b/src/components/manage/Preferences/PersonalPreferences.jsx
index cae87d2a04..605da71837 100644
--- a/src/components/manage/Preferences/PersonalPreferences.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.jsx
@@ -12,7 +12,8 @@ import { withCookies } from 'react-cookie';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
 import { toGettextLang } from '@plone/volto/helpers';
diff --git a/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap b/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
index ef3e37d8c5..7d49a01a87 100644
--- a/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
+++ b/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
@@ -6,106 +6,48 @@ exports[`ChangePassword renders a change password component 1`] = `
   id="page-change-password"
 >
   <div
-    className="ui container"
-  >
-    <form
-      className="ui form"
-      method="post"
-      onSubmit={[Function]}
-    >
-      <fieldset
-        className="invisible"
-      >
-        <div
-          className="ui raised segments"
-        >
-          <div
-            className="ui segment"
-          >
-            <div
-              className="mocked-password-widget"
-              id="mocked-field-oldPassword"
-            >
-              Current password
-               - 
-              Enter your current password.
-            </div>
-            <div
-              className="mocked-password-widget"
-              id="mocked-field-newPassword"
-            >
-              New password
-               - 
-              Enter your new password. Minimum 8 characters.
-            </div>
-            <div
-              className="mocked-password-widget"
-              id="mocked-field-newPasswordRepeat"
-            >
-              Confirm password
-               - 
-              Re-enter the password. Make sure the passwords are identical.
-            </div>
-          </div>
-          <div
-            className="ui clearing segment actions"
-          >
-            <button
-              aria-label="Save"
-              className="ui basic primary right floated button"
-              onClick={[Function]}
-              title="Save"
-              type="submit"
-            >
-              <svg
-                className="icon circled"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": undefined,
-                  }
-                }
-                onClick={null}
-                style={
-                  Object {
-                    "fill": "currentColor",
-                    "height": "30px",
-                    "width": "auto",
-                  }
-                }
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-            <button
-              aria-label="Cancel"
-              className="ui basic secondary right floated button"
-              onClick={[Function]}
-              title="Cancel"
-            >
-              <svg
-                className="icon circled"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": undefined,
-                  }
-                }
-                onClick={null}
-                style={
-                  Object {
-                    "fill": "currentColor",
-                    "height": "30px",
-                    "width": "auto",
-                  }
-                }
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-          </div>
-        </div>
-      </fieldset>
-    </form>
-  </div>
+    data-schema={
+      Object {
+        "fieldsets": Array [
+          Object {
+            "fields": Array [
+              "oldPassword",
+              "newPassword",
+              "newPasswordRepeat",
+            ],
+            "id": "default",
+            "title": "Default",
+          },
+        ],
+        "properties": Object {
+          "newPassword": Object {
+            "description": "Enter your new password. Minimum 8 characters.",
+            "title": "New password",
+            "type": "string",
+            "widget": "password",
+          },
+          "newPasswordRepeat": Object {
+            "description": "Re-enter the password. Make sure the passwords are identical.",
+            "title": "Confirm password",
+            "type": "string",
+            "widget": "password",
+          },
+          "oldPassword": Object {
+            "description": "Enter your current password.",
+            "title": "Current password",
+            "type": "string",
+            "widget": "password",
+          },
+        },
+        "required": Array [
+          "oldPassword",
+          "newPassword",
+          "newPasswordRepeat",
+        ],
+      }
+    }
+    id="Form"
+  />
   <div
     id="Portal"
   />
diff --git a/src/components/manage/Widgets/ArrayWidget.jsx b/src/components/manage/Widgets/ArrayWidget.jsx
index af5d75462e..75d50716f5 100644
--- a/src/components/manage/Widgets/ArrayWidget.jsx
+++ b/src/components/manage/Widgets/ArrayWidget.jsx
@@ -30,7 +30,7 @@ import {
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
diff --git a/src/components/manage/Widgets/ButtonsWidget.jsx b/src/components/manage/Widgets/ButtonsWidget.jsx
index f54e1ef991..6b9b940e69 100644
--- a/src/components/manage/Widgets/ButtonsWidget.jsx
+++ b/src/components/manage/Widgets/ButtonsWidget.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 
diff --git a/src/components/manage/Widgets/CheckboxWidget.jsx b/src/components/manage/Widgets/CheckboxWidget.jsx
index b787a2557b..aeefdaf6d2 100644
--- a/src/components/manage/Widgets/CheckboxWidget.jsx
+++ b/src/components/manage/Widgets/CheckboxWidget.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Checkbox } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * CheckboxWidget component class.
diff --git a/src/components/manage/Widgets/DatetimeWidget.jsx b/src/components/manage/Widgets/DatetimeWidget.jsx
index 6e18090082..17f2efc61d 100644
--- a/src/components/manage/Widgets/DatetimeWidget.jsx
+++ b/src/components/manage/Widgets/DatetimeWidget.jsx
@@ -9,7 +9,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
diff --git a/src/components/manage/Widgets/EmailWidget.jsx b/src/components/manage/Widgets/EmailWidget.jsx
index 1455c75314..cd26034b05 100644
--- a/src/components/manage/Widgets/EmailWidget.jsx
+++ b/src/components/manage/Widgets/EmailWidget.jsx
@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/EmailWidget
  */
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Input } from 'semantic-ui-react';
diff --git a/src/components/manage/Widgets/FileWidget.jsx b/src/components/manage/Widgets/FileWidget.jsx
index 34db736933..edeaf5dc44 100644
--- a/src/components/manage/Widgets/FileWidget.jsx
+++ b/src/components/manage/Widgets/FileWidget.jsx
@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
diff --git a/src/components/manage/Widgets/IdWidget.jsx b/src/components/manage/Widgets/IdWidget.jsx
index bd013bdc09..e6cd9757de 100644
--- a/src/components/manage/Widgets/IdWidget.jsx
+++ b/src/components/manage/Widgets/IdWidget.jsx
@@ -11,7 +11,8 @@ import { Input } from 'semantic-ui-react';
 import { compact, concat, keys, map, union, uniq } from 'lodash';
 
 import { defineMessages, injectIntl } from 'react-intl';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import config from '@plone/volto/registry';
 import { getQuerystring } from '@plone/volto/actions';
 
diff --git a/src/components/manage/Widgets/ImageSizeWidget.jsx b/src/components/manage/Widgets/ImageSizeWidget.jsx
index 32e7b396c0..eba009c7c5 100644
--- a/src/components/manage/Widgets/ImageSizeWidget.jsx
+++ b/src/components/manage/Widgets/ImageSizeWidget.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Grid } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   small: {
diff --git a/src/components/manage/Widgets/InternalUrlWidget.jsx b/src/components/manage/Widgets/InternalUrlWidget.jsx
index a3e6f360e1..520761f1f4 100644
--- a/src/components/manage/Widgets/InternalUrlWidget.jsx
+++ b/src/components/manage/Widgets/InternalUrlWidget.jsx
@@ -7,7 +7,8 @@ import React, { useState } from 'react';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
diff --git a/src/components/manage/Widgets/NumberWidget.jsx b/src/components/manage/Widgets/NumberWidget.jsx
index 98b25b70ba..b598765ce2 100644
--- a/src/components/manage/Widgets/NumberWidget.jsx
+++ b/src/components/manage/Widgets/NumberWidget.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**
diff --git a/src/components/manage/Widgets/ObjectListWidget.jsx b/src/components/manage/Widgets/ObjectListWidget.jsx
index 859d5915bf..2cc78da16e 100644
--- a/src/components/manage/Widgets/ObjectListWidget.jsx
+++ b/src/components/manage/Widgets/ObjectListWidget.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
-import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
diff --git a/src/components/manage/Widgets/ObjectListWidget.test.js b/src/components/manage/Widgets/ObjectListWidget.test.js
index 161549dee1..6bb758e29f 100644
--- a/src/components/manage/Widgets/ObjectListWidget.test.js
+++ b/src/components/manage/Widgets/ObjectListWidget.test.js
@@ -6,6 +6,8 @@ import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
diff --git a/src/components/manage/Widgets/ObjectWidget.test.jsx b/src/components/manage/Widgets/ObjectWidget.test.jsx
index b182d3f2bc..f5baf3babf 100644
--- a/src/components/manage/Widgets/ObjectWidget.test.jsx
+++ b/src/components/manage/Widgets/ObjectWidget.test.jsx
@@ -6,6 +6,8 @@ import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import ObjectWidget from './ObjectWidget';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const LinkSchema = {
diff --git a/src/components/manage/Widgets/PasswordWidget.jsx b/src/components/manage/Widgets/PasswordWidget.jsx
index 233d33e883..a0e2e76d05 100644
--- a/src/components/manage/Widgets/PasswordWidget.jsx
+++ b/src/components/manage/Widgets/PasswordWidget.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**
diff --git a/src/components/manage/Widgets/QuerySortOnWidget.jsx b/src/components/manage/Widgets/QuerySortOnWidget.jsx
index 95e44e59e1..7255b88aba 100644
--- a/src/components/manage/Widgets/QuerySortOnWidget.jsx
+++ b/src/components/manage/Widgets/QuerySortOnWidget.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { toPairs, groupBy, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
diff --git a/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx b/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
index 592f7acc00..83ed8c44fc 100644
--- a/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
+++ b/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
@@ -6,7 +6,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-//import { RRule, RRuleSet, rrulestr } from 'rrule';
 import { connect } from 'react-redux';
 
 import cx from 'classnames';
@@ -22,7 +21,9 @@ import {
   Header,
 } from 'semantic-ui-react';
 
-import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
diff --git a/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx b/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx
index 5142db10c3..a3165c2280 100644
--- a/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx
+++ b/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx
@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
 import { find } from 'lodash';
 import {
   Option,
@@ -13,12 +12,22 @@ import {
   selectTheme,
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 /**
  * SelectInput component class.
  * @function SelectInput
  * @returns {string} Markup of the component.
  */
-const SelectInput = ({ name, disabled, options, value, onChange }) => {
+const SelectInput = ({
+  name,
+  disabled,
+  options,
+  value,
+  onChange,
+  reactSelect,
+}) => {
+  const Select = reactSelect.default;
   const inlineSelectStyles = {
     ...customSelectStyles,
     control: (styles, state) => ({
@@ -78,4 +87,4 @@ SelectInput.defaultProps = {
   onChange: null,
 };
 
-export default SelectInput;
+export default injectLazyLibs('reactSelect')(SelectInput);
diff --git a/src/components/manage/Widgets/ReferenceWidget.jsx b/src/components/manage/Widgets/ReferenceWidget.jsx
index 78fa1b7b8e..9c25c561cb 100644
--- a/src/components/manage/Widgets/ReferenceWidget.jsx
+++ b/src/components/manage/Widgets/ReferenceWidget.jsx
@@ -11,7 +11,7 @@ import { Label, Dropdown, Popup, Icon } from 'semantic-ui-react';
 import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
diff --git a/src/components/manage/Widgets/RegistryImageWidget.jsx b/src/components/manage/Widgets/RegistryImageWidget.jsx
index 4045d66ab3..b33aebac0c 100644
--- a/src/components/manage/Widgets/RegistryImageWidget.jsx
+++ b/src/components/manage/Widgets/RegistryImageWidget.jsx
@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { defineMessages, useIntl } from 'react-intl';
 import { toPublicURL, validateFileUploadSize } from '@plone/volto/helpers';
diff --git a/src/components/manage/Widgets/SchemaWidget.jsx b/src/components/manage/Widgets/SchemaWidget.jsx
index 2456188ffe..0bf9c45d91 100644
--- a/src/components/manage/Widgets/SchemaWidget.jsx
+++ b/src/components/manage/Widgets/SchemaWidget.jsx
@@ -14,7 +14,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
 
-import { SchemaWidgetFieldset } from '@plone/volto/components';
+import SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
 import { Field, ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
diff --git a/src/components/manage/Widgets/SelectAutoComplete.jsx b/src/components/manage/Widgets/SelectAutoComplete.jsx
index 920bd94873..4ba2140992 100644
--- a/src/components/manage/Widgets/SelectAutoComplete.jsx
+++ b/src/components/manage/Widgets/SelectAutoComplete.jsx
@@ -32,7 +32,7 @@ import {
   MenuList,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
diff --git a/src/components/manage/Widgets/SelectWidget.jsx b/src/components/manage/Widgets/SelectWidget.jsx
index 182879130b..64b0cdea69 100644
--- a/src/components/manage/Widgets/SelectWidget.jsx
+++ b/src/components/manage/Widgets/SelectWidget.jsx
@@ -14,7 +14,7 @@ import {
   getVocabFromField,
   getVocabFromItems,
 } from '@plone/volto/helpers';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
 import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 
diff --git a/src/components/manage/Widgets/TextWidget.jsx b/src/components/manage/Widgets/TextWidget.jsx
index e39f7a0051..fe53ed89b1 100644
--- a/src/components/manage/Widgets/TextWidget.jsx
+++ b/src/components/manage/Widgets/TextWidget.jsx
@@ -8,7 +8,8 @@ import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * The simple text widget.
diff --git a/src/components/manage/Widgets/TextareaWidget.jsx b/src/components/manage/Widgets/TextareaWidget.jsx
index 4116c28fcf..bfb9aa2195 100644
--- a/src/components/manage/Widgets/TextareaWidget.jsx
+++ b/src/components/manage/Widgets/TextareaWidget.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Label, TextArea } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * TextareaWidget, a widget for multiple lines text
diff --git a/src/components/manage/Widgets/TokenWidget.jsx b/src/components/manage/Widgets/TokenWidget.jsx
index 13cd304e33..b38de6897d 100644
--- a/src/components/manage/Widgets/TokenWidget.jsx
+++ b/src/components/manage/Widgets/TokenWidget.jsx
@@ -24,7 +24,7 @@ import {
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
diff --git a/src/components/manage/Widgets/UrlWidget.jsx b/src/components/manage/Widgets/UrlWidget.jsx
index 4ec2867635..81e39492db 100644
--- a/src/components/manage/Widgets/UrlWidget.jsx
+++ b/src/components/manage/Widgets/UrlWidget.jsx
@@ -7,7 +7,8 @@ import React, { useState } from 'react';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import {
   addAppURL,
   isInternalURL,
diff --git a/src/components/manage/Widgets/VocabularyTermsWidget.jsx b/src/components/manage/Widgets/VocabularyTermsWidget.jsx
index 797f977976..cfefd80a67 100644
--- a/src/components/manage/Widgets/VocabularyTermsWidget.jsx
+++ b/src/components/manage/Widgets/VocabularyTermsWidget.jsx
@@ -2,7 +2,7 @@
  * VocabularyTermsWidget
  * @module components/manage/Widgets/VocabularyTermsWidget
  * Widget for plone.schema.JSONField field meant for a SimpleVocabulary source
- * 
+ *
 
 VOCABULARY_SCHEMA = json.dumps(
     {
@@ -68,7 +68,7 @@ def TalkTypesVocabulary(context):
 
  * 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,
@@ -90,12 +90,9 @@ import { v4 as uuid } from 'uuid';
 
 import { Button } from 'semantic-ui-react';
 
-import {
-  DragDropList,
-  FormFieldWrapper,
-  Icon,
-  ObjectWidget,
-} from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 import { langmap } from '@plone/volto/helpers';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
diff --git a/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx b/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx
index 1d505fbe27..35b34cc45c 100644
--- a/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx
+++ b/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx
@@ -6,6 +6,8 @@ import { Provider } from 'react-intl-redux';
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
diff --git a/src/components/manage/Widgets/WysiwygWidget.jsx b/src/components/manage/Widgets/WysiwygWidget.jsx
index 3600460830..fcad32a565 100644
--- a/src/components/manage/Widgets/WysiwygWidget.jsx
+++ b/src/components/manage/Widgets/WysiwygWidget.jsx
@@ -16,7 +16,7 @@ import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 import loadable from '@loadable/component';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
diff --git a/src/components/manage/Widgets/__mocks__/index.tsx b/src/components/manage/Widgets/__mocks__/index.tsx
new file mode 100644
index 0000000000..e5e77c0585
--- /dev/null
+++ b/src/components/manage/Widgets/__mocks__/index.tsx
@@ -0,0 +1,43 @@
+export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = jest.fn(() => <div id="FileWidget" />);
+export const IdWidget = jest.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = jest.fn(() => <div id="TextWidget" />);
+export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = jest.fn(() => (
+  <div id="RegistryImageWidget" />
+));
+export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = jest.fn(() => (
+  <div id="ObjectBrowserWidget" />
+));
+export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = jest.fn(() => (
+  <div id="VocabularyTermsWidget" />
+));
+export const SelectMetadataWidget = jest.fn(() => (
+  <div id="SelectMetadataWidget" />
+));
+export const SelectAutoComplete = jest.fn(() => (
+  <div id="SelectAutoComplete" />
+));
+export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);
diff --git a/src/components/manage/Widgets/__snapshots__/ObjectListWidget.test.js.snap b/src/components/manage/Widgets/__snapshots__/ObjectListWidget.test.js.snap
index 9fb5ad7833..e70caaea6a 100644
--- a/src/components/manage/Widgets/__snapshots__/ObjectListWidget.test.js.snap
+++ b/src/components/manage/Widgets/__snapshots__/ObjectListWidget.test.js.snap
@@ -176,10 +176,10 @@ exports[`renders an object list widget component 1`] = `
                   class="ui bottom attached segment active tab"
                 >
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-internal_link-0-my-widget-0"
+                    class="Field"
+                    id="internal_link-0-my-widget-0"
                   >
-                    Internal link - No description
+                    Internal link
                   </div>
                 </div>
               </div>
@@ -271,10 +271,10 @@ exports[`renders an object list widget component 1`] = `
                   class="ui bottom attached segment active tab"
                 >
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-internal_link-0-my-widget-1"
+                    class="Field"
+                    id="internal_link-0-my-widget-1"
                   >
-                    Internal link - No description
+                    Internal link
                   </div>
                 </div>
               </div>
diff --git a/src/components/manage/Widgets/__snapshots__/ObjectWidget.test.jsx.snap b/src/components/manage/Widgets/__snapshots__/ObjectWidget.test.jsx.snap
index 2537d5137c..4030f7b34d 100644
--- a/src/components/manage/Widgets/__snapshots__/ObjectWidget.test.jsx.snap
+++ b/src/components/manage/Widgets/__snapshots__/ObjectWidget.test.jsx.snap
@@ -26,10 +26,10 @@ exports[`renders an object widget component with clicks on each tab in root leve
       class="ui bottom attached segment active tab"
     >
       <div
-        class="mocked-default-widget"
-        id="mocked-field-internal_link-0-my-widget"
+        class="Field"
+        id="internal_link-0-my-widget"
       >
-        Internal link - No description
+        Internal link
       </div>
     </div>
   </div>
@@ -62,10 +62,10 @@ exports[`renders an object widget component with clicks on each tab in root leve
       class="ui bottom attached segment active tab"
     >
       <div
-        class="mocked-default-widget"
-        id="mocked-field-external_link-0-my-widget"
+        class="Field"
+        id="external_link-0-my-widget"
       >
-        External URL (can be relative within this site or absolute if it starts with http:// or https://) - No description
+        External URL (can be relative within this site or absolute if it starts with http:// or https://)
       </div>
     </div>
   </div>
@@ -98,16 +98,16 @@ exports[`renders an object widget component with clicks on each tab in root leve
       class="ui bottom attached segment active tab"
     >
       <div
-        class="mocked-default-widget"
-        id="mocked-field-email_address-0-my-widget"
+        class="Field"
+        id="email_address-0-my-widget"
       >
-        Email address - No description
+        Email address
       </div>
       <div
-        class="mocked-default-widget"
-        id="mocked-field-email_subject-1-my-widget"
+        class="Field"
+        id="email_subject-1-my-widget"
       >
-        Email subject (optional) - No description
+        Email subject (optional)
       </div>
     </div>
   </div>
@@ -142,12 +142,10 @@ exports[`renders an object widget component with invalid field in value 1`] = `
     className="ui bottom attached segment active tab"
   >
     <div
-      className="mocked-default-widget"
-      id="mocked-field-internal_link-0-my-widget"
+      className="Field"
+      id="internal_link-0-my-widget"
     >
       Internal link
-       - 
-      No description
     </div>
   </div>
 </div>
diff --git a/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap b/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
index 7fbf01c87a..263871ddf1 100644
--- a/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
+++ b/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
@@ -118,28 +118,22 @@ exports[`renders a dictionary widget component 1`] = `
                 className="ui drag block inner"
               >
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-en-0-test-dict-talk"
+                  className="Field"
+                  id="en-0-test-dict-talk"
                 >
                   English
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-de-1-test-dict-talk"
+                  className="Field"
+                  id="de-1-test-dict-talk"
                 >
                   Deutsch
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-it-2-test-dict-talk"
+                  className="Field"
+                  id="it-2-test-dict-talk"
                 >
                   Italiano
-                   - 
-                  No description
                 </div>
               </div>
               <div>
@@ -224,28 +218,22 @@ exports[`renders a dictionary widget component 1`] = `
                 className="ui drag block inner"
               >
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-en-0-test-dict-keynote"
+                  className="Field"
+                  id="en-0-test-dict-keynote"
                 >
                   English
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-de-1-test-dict-keynote"
+                  className="Field"
+                  id="de-1-test-dict-keynote"
                 >
                   Deutsch
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-it-2-test-dict-keynote"
+                  className="Field"
+                  id="it-2-test-dict-keynote"
                 >
                   Italiano
-                   - 
-                  No description
                 </div>
               </div>
               <div>
@@ -330,28 +318,22 @@ exports[`renders a dictionary widget component 1`] = `
                 className="ui drag block inner"
               >
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-en-0-test-dict-lightning-talk"
+                  className="Field"
+                  id="en-0-test-dict-lightning-talk"
                 >
                   English
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-de-1-test-dict-lightning-talk"
+                  className="Field"
+                  id="de-1-test-dict-lightning-talk"
                 >
                   Deutsch
-                   - 
-                  No description
                 </div>
                 <div
-                  className="mocked-default-widget"
-                  id="mocked-field-it-2-test-dict-lightning-talk"
+                  className="Field"
+                  id="it-2-test-dict-lightning-talk"
                 >
                   Italiano
-                   - 
-                  No description
                 </div>
               </div>
               <div>
diff --git a/src/components/manage/Widgets/index.tsx b/src/components/manage/Widgets/index.tsx
new file mode 100644
index 0000000000..844847c602
--- /dev/null
+++ b/src/components/manage/Widgets/index.tsx
@@ -0,0 +1,232 @@
+import loadable from '@loadable/component';
+
+export const AlignWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/AlignWidget'
+    ),
+);
+
+export const ButtonsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ButtonsWidget'
+    ),
+);
+
+export const ArrayWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ArrayWidget'
+    ),
+);
+
+export const CheckboxWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/CheckboxWidget'
+    ),
+);
+
+export const FileWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FileWidget'
+    ),
+);
+
+export const IdWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/IdWidget'
+    ),
+);
+
+export const PasswordWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/PasswordWidget'
+    ),
+);
+
+export const QueryWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QueryWidget'
+    ),
+);
+
+export const QuerySortOnWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerySortOnWidget'
+    ),
+);
+
+export const QuerystringWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerystringWidget'
+    ),
+);
+
+export const SchemaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SchemaWidget'
+    ),
+);
+
+export const SelectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectWidget'
+    ),
+);
+
+export const TextareaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextareaWidget'
+    ),
+);
+
+export const TextWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextWidget'
+    ),
+);
+
+export const TokenWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TokenWidget'
+    ),
+);
+
+export const WysiwygWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget'
+    ),
+);
+
+export const UrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
+    ),
+);
+
+export const InternalUrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
+    ),
+);
+
+export const EmailWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/EmailWidget'
+    ),
+);
+
+export const NumberWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/NumberWidget'
+    ),
+);
+
+export const ImageSizeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ImageSizeWidget'
+    ),
+);
+
+export const RegistryImageWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RegistryImageWidget'
+    ),
+);
+
+export const ReferenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ReferenceWidget'
+    ),
+);
+
+export const ObjectBrowserWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectBrowserWidget'
+    ),
+);
+
+export const ObjectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectWidget'
+    ),
+);
+
+export const ObjectListWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectListWidget'
+    ),
+);
+
+export const VocabularyTermsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/VocabularyTermsWidget'
+    ),
+);
+
+export const SelectMetadataWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField'
+    ),
+);
+
+export const SelectAutoComplete = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectAutoComplete'
+    ),
+);
+
+export const ColorPickerWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ColorPickerWidget'
+    ),
+);
+
+export const DatetimeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/DatetimeWidget'
+    ),
+);
+
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
+);
+
+export const FormFieldWrapper = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
+    ),
+);
diff --git a/src/components/manage/Workflow/Workflow.jsx b/src/components/manage/Workflow/Workflow.jsx
index 90996c5a02..5a58334bfa 100644
--- a/src/components/manage/Workflow/Workflow.jsx
+++ b/src/components/manage/Workflow/Workflow.jsx
@@ -6,7 +6,8 @@ import { uniqBy } from 'lodash';
 import { toast } from 'react-toastify';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import {
   flattenToAppURL,
   getWorkflowOptions,
diff --git a/src/components/manage/Workflow/Workflow.test.jsx b/src/components/manage/Workflow/Workflow.test.jsx
index e95d6dfe51..0470c5cfba 100644
--- a/src/components/manage/Workflow/Workflow.test.jsx
+++ b/src/components/manage/Workflow/Workflow.test.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor, render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import config from '@plone/volto/registry';
 
 import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
@@ -46,7 +47,6 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    await waitFor(() => screen.getByText(/Published/));
     expect(container).toMatchSnapshot();
   });
 
@@ -70,7 +70,6 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    await waitFor(() => screen.getByText('Private'));
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/src/components/manage/Workflow/__snapshots__/Workflow.test.jsx.snap b/src/components/manage/Workflow/__snapshots__/Workflow.test.jsx.snap
index f688149c83..3b4897246e 100644
--- a/src/components/manage/Workflow/__snapshots__/Workflow.test.jsx.snap
+++ b/src/components/manage/Workflow/__snapshots__/Workflow.test.jsx.snap
@@ -3,179 +3,15 @@
 exports[`Workflow renders a workflow component 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-state-select"
-  >
-    <div
-      class="ui grid"
-    >
-      <div
-        class="stretched row"
-      >
-        <div
-          class="four wide column"
-        >
-          <div
-            class="wrapper"
-          >
-            <label
-              for="field-state-select"
-              id="fieldset-undefined-field-label-state-select"
-            >
-              State
-            </label>
-          </div>
-        </div>
-        <div
-          class="eight wide column"
-        >
-          <div
-            class="react-select-container css-2b097c-container"
-          >
-            <span
-              aria-atomic="false"
-              aria-live="polite"
-              aria-relevant="additions text"
-              class="css-1f43avz-a11yText-A11yText"
-            />
-            <div
-              class="react-select__control css-yjz7n5-control"
-            >
-              <div
-                class="react-select__value-container react-select__value-container--has-value css-86rg1c-ValueContainer"
-              >
-                <div
-                  class="react-select__single-value css-1uccc91-singleValue"
-                >
-                  <span
-                    style="margin-right: 10px; display: inline-block; background-color: rgb(237, 64, 51); height: 10px; width: 10px; border-radius: 50%;"
-                  />
-                  Private
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  class="css-wmatm6-dummyInput-DummyInput"
-                  id="react-select-3-input"
-                  readonly=""
-                  tabindex="0"
-                  value=""
-                />
-              </div>
-              <div
-                class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-              >
-                <span
-                  class="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
-                >
-                  <svg
-                    class="icon"
-                    style="height: 24px; width: auto; fill: #007bc1;"
-                    viewBox=""
-                    xmlns=""
-                  />
-                </div>
-              </div>
-            </div>
-            <input
-              name="state-select"
-              type="hidden"
-              value="private"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    id="FormFieldWrapper"
+  />
 </div>
 `;
 
 exports[`Workflow renders an empty workflow component 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-state-select"
-  >
-    <div
-      class="ui grid"
-    >
-      <div
-        class="stretched row"
-      >
-        <div
-          class="four wide column"
-        >
-          <div
-            class="wrapper"
-          >
-            <label
-              for="field-state-select"
-              id="fieldset-undefined-field-label-state-select"
-            >
-              State
-            </label>
-          </div>
-        </div>
-        <div
-          class="eight wide column"
-        >
-          <div
-            class="react-select-container react-select--is-disabled css-14jk2my-container"
-          >
-            <span
-              aria-atomic="false"
-              aria-live="polite"
-              aria-relevant="additions text"
-              class="css-1f43avz-a11yText-A11yText"
-            />
-            <div
-              class="react-select__control react-select__control--is-disabled css-1g1dlbm-control"
-            >
-              <div
-                class="react-select__value-container react-select__value-container--has-value css-86rg1c-ValueContainer"
-              >
-                <div
-                  class="react-select__single-value react-select__single-value--is-disabled css-107lb6w-singleValue"
-                >
-                  <span
-                    style="margin-right: 10px; display: inline-block; background-color: rgb(0, 123, 193); height: 10px; width: 10px; border-radius: 50%;"
-                  />
-                  Published
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  class="css-wmatm6-dummyInput-DummyInput"
-                  disabled=""
-                  id="react-select-2-input"
-                  readonly=""
-                  tabindex="0"
-                  value=""
-                />
-              </div>
-              <div
-                class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-              >
-                <span
-                  class="react-select__indicator-separator css-8z7nta-indicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
-                >
-                  <svg
-                    class="icon"
-                    style="height: 24px; width: auto; fill: #007bc1;"
-                    viewBox=""
-                    xmlns=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    id="FormFieldWrapper"
+  />
 </div>
 `;
diff --git a/src/components/theme/Comments/CommentEditModal.test.jsx b/src/components/theme/Comments/CommentEditModal.test.jsx
index 3dd3b12538..334ff63457 100644
--- a/src/components/theme/Comments/CommentEditModal.test.jsx
+++ b/src/components/theme/Comments/CommentEditModal.test.jsx
@@ -7,9 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Form/ModalForm', () =>
-  jest.fn(() => <div id="modalform" />),
-);
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {
diff --git a/src/components/theme/Comments/Comments.jsx b/src/components/theme/Comments/Comments.jsx
index 729195907d..8ffd3556e6 100644
--- a/src/components/theme/Comments/Comments.jsx
+++ b/src/components/theme/Comments/Comments.jsx
@@ -13,7 +13,9 @@ import {
   listComments,
   listMoreComments,
 } from '@plone/volto/actions';
-import { Avatar, CommentEditModal, Form } from '@plone/volto/components';
+import { Avatar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
+import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 import {
   flattenToAppURL,
   getBaseUrl,
diff --git a/src/components/theme/Comments/Comments.test.jsx b/src/components/theme/Comments/Comments.test.jsx
index 3c05f87ada..2de2aa6b04 100644
--- a/src/components/theme/Comments/Comments.test.jsx
+++ b/src/components/theme/Comments/Comments.test.jsx
@@ -15,6 +15,8 @@ jest.mock('moment', () =>
 );
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
diff --git a/src/components/theme/Comments/__mocks__/index.tsx b/src/components/theme/Comments/__mocks__/index.tsx
new file mode 100644
index 0000000000..9436abd49a
--- /dev/null
+++ b/src/components/theme/Comments/__mocks__/index.tsx
@@ -0,0 +1 @@
+export const CommentEditModal = () => <div id="modal" />;
diff --git a/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap b/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
index 0947a1d37b..39adecff93 100644
--- a/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
+++ b/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
@@ -2,6 +2,29 @@
 
 exports[`CommentEditModal renders a comment edit modal component 1`] = `
 <div
-  id="modalform"
+  data-schema={
+    Object {
+      "fieldsets": Array [
+        Object {
+          "fields": Array [
+            "text",
+          ],
+          "id": "default",
+          "title": "Default",
+        },
+      ],
+      "properties": Object {
+        "text": Object {
+          "description": "",
+          "title": "Comment",
+          "type": "string",
+        },
+      },
+      "required": Array [
+        "text",
+      ],
+    }
+  }
+  id="ModalForm"
 />
 `;
diff --git a/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap b/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
index dc55e5f694..f4cc300d95 100644
--- a/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
+++ b/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
@@ -8,90 +8,31 @@ exports[`Comments renders a comments component 1`] = `
     id="comment-add-id"
   >
     <div
-      className="ui container"
-    >
-      <form
-        className="ui form"
-        method="post"
-        onSubmit={[Function]}
-      >
-        <fieldset
-          className="invisible"
-        >
-          <div
-            className="ui raised segments"
-          >
-            <div
-              className="ui segment"
-            >
-              <div
-                className="mocked-textarea-widget"
-                id="mocked-field-comment"
-              >
-                Comment
-                 - 
-                No description
-              </div>
-            </div>
-            <div
-              className="ui clearing segment actions"
-            >
-              <button
-                aria-label="Comment"
-                className="ui basic primary right floated button"
-                onClick={[Function]}
-                title="Comment"
-                type="submit"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-              <button
-                aria-label="Cancel"
-                className="ui basic secondary right floated button"
-                onClick={[Function]}
-                title="Cancel"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
+      data-schema={
+        Object {
+          "fieldsets": Array [
+            Object {
+              "fields": Array [
+                "comment",
+              ],
+              "id": "default",
+              "title": "Default",
+            },
+          ],
+          "properties": Object {
+            "comment": Object {
+              "title": "Comment",
+              "type": "string",
+              "widget": "textarea",
+            },
+          },
+          "required": Array [
+            "comment1",
+          ],
+        }
+      }
+      id="Form"
+    />
   </div>
   <div
     className="ui threaded comments"
diff --git a/src/components/theme/Comments/index.tsx b/src/components/theme/Comments/index.tsx
new file mode 100644
index 0000000000..ae38d87568
--- /dev/null
+++ b/src/components/theme/Comments/index.tsx
@@ -0,0 +1,5 @@
+import loadable from '@loadable/component';
+
+export const CommentEditModal = loadable(
+  () => import('@plone/volto/components/theme/Comments/CommentEditModal'),
+);
diff --git a/src/components/theme/ContactForm/ContactForm.jsx b/src/components/theme/ContactForm/ContactForm.jsx
index bc88659f2b..2486e7f4f1 100644
--- a/src/components/theme/ContactForm/ContactForm.jsx
+++ b/src/components/theme/ContactForm/ContactForm.jsx
@@ -7,7 +7,8 @@ import { toast } from 'react-toastify';
 
 import { emailNotification } from '@plone/volto/actions';
 import { useDispatch, useSelector } from 'react-redux';
-import { Form, Toolbar, Toast } from '@plone/volto/components';
+import { Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getBaseUrl, Helmet, usePrevious } from '@plone/volto/helpers';
 import { useClient } from '@plone/volto/hooks';
 
diff --git a/src/components/theme/ContactForm/ContactForm.test.jsx b/src/components/theme/ContactForm/ContactForm.test.jsx
index ddabf5b5c8..b57c698505 100644
--- a/src/components/theme/ContactForm/ContactForm.test.jsx
+++ b/src/components/theme/ContactForm/ContactForm.test.jsx
@@ -9,6 +9,8 @@ jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 describe('Contact form', () => {
   it('renders a contact form', () => {
diff --git a/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap b/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
index 242fdd5718..c3599e5884 100644
--- a/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
+++ b/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
@@ -27,130 +27,46 @@ exports[`Contact form renders a contact form 1`] = `
       </div>
     </div>
     <div
-      className="ui container"
-    >
-      <form
-        className="ui form"
-        method="post"
-        onSubmit={[Function]}
-      >
-        <fieldset
-          className="invisible"
-        >
-          <div
-            className="ui raised segments"
-          >
-            <div
-              className="ui segment"
-            >
-              <div
-                className="ui segment primary"
-              >
-                <h1
-                  style={
-                    Object {
-                      "fontSize": "16px",
-                    }
-                  }
-                >
-                   
-                  Contact form
-                </h1>
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-name"
-              >
-                Name
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-from"
-              >
-                From
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-subject"
-              >
-                Subject
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-textarea-widget"
-                id="mocked-field-message"
-              >
-                Message
-                 - 
-                No description
-              </div>
-            </div>
-            <div
-              className="ui clearing segment actions"
-            >
-              <button
-                aria-label="Send"
-                className="ui basic primary right floated button"
-                onClick={[Function]}
-                title="Send"
-                type="submit"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-              <button
-                aria-label="Cancel"
-                className="ui basic secondary right floated button"
-                onClick={[Function]}
-                title="Cancel"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
-    <div
-      id="Portal"
+      data-schema={
+        Object {
+          "fieldsets": Array [
+            Object {
+              "fields": Array [
+                "name",
+                "from",
+                "subject",
+                "message",
+              ],
+              "id": "default",
+              "title": "Default",
+            },
+          ],
+          "properties": Object {
+            "from": Object {
+              "title": "From",
+              "type": "email",
+            },
+            "message": Object {
+              "title": "Message",
+              "type": "string",
+              "widget": "textarea",
+            },
+            "name": Object {
+              "title": "Name",
+              "type": "string",
+            },
+            "subject": Object {
+              "title": "Subject",
+              "type": "string",
+            },
+          },
+          "required": Array [
+            "from",
+            "message",
+          ],
+        }
+      }
+      id="Form"
     />
   </div>
 </div>
@@ -186,128 +102,47 @@ exports[`Contact form renders a contact form with error message 1`] = `
       </div>
     </div>
     <div
-      className="ui container"
-    >
-      <form
-        className="ui form"
-        method="post"
-        onSubmit={[Function]}
-      >
-        <fieldset
-          className="invisible"
-        >
-          <div
-            className="ui raised segments"
-          >
-            <div
-              className="ui segment"
-            >
-              <div
-                className="ui segment primary"
-              >
-                <h1
-                  style={
-                    Object {
-                      "fontSize": "16px",
-                    }
-                  }
-                >
-                   
-                  Contact form
-                </h1>
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-name"
-              >
-                Name
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-from"
-              >
-                From
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-subject"
-              >
-                Subject
-                 - 
-                No description
-              </div>
-              <div
-                className="mocked-textarea-widget"
-                id="mocked-field-message"
-              >
-                Message
-                 - 
-                No description
-              </div>
-            </div>
-            <div
-              className="ui clearing segment actions"
-            >
-              <button
-                aria-label="Send"
-                className="ui basic primary right floated button"
-                onClick={[Function]}
-                title="Send"
-                type="submit"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-              <button
-                aria-label="Cancel"
-                className="ui basic secondary right floated button"
-                onClick={[Function]}
-                title="Cancel"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
+      data-schema={
+        Object {
+          "fieldsets": Array [
+            Object {
+              "fields": Array [
+                "name",
+                "from",
+                "subject",
+                "message",
+              ],
+              "id": "default",
+              "title": "Default",
+            },
+          ],
+          "properties": Object {
+            "from": Object {
+              "title": "From",
+              "type": "email",
+            },
+            "message": Object {
+              "title": "Message",
+              "type": "string",
+              "widget": "textarea",
+            },
+            "name": Object {
+              "title": "Name",
+              "type": "string",
+            },
+            "subject": Object {
+              "title": "Subject",
+              "type": "string",
+            },
+          },
+          "required": Array [
+            "from",
+            "message",
+          ],
+        }
+      }
+      id="Form"
+    />
     <div
       id="Portal"
     />
diff --git a/src/components/theme/PasswordReset/PasswordReset.jsx b/src/components/theme/PasswordReset/PasswordReset.jsx
index 4dd1266442..51c70f505d 100644
--- a/src/components/theme/PasswordReset/PasswordReset.jsx
+++ b/src/components/theme/PasswordReset/PasswordReset.jsx
@@ -12,7 +12,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { setInitialPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 
diff --git a/src/components/theme/PasswordReset/RequestPasswordReset.jsx b/src/components/theme/PasswordReset/RequestPasswordReset.jsx
index dedaaee05e..d7cbd87ef1 100644
--- a/src/components/theme/PasswordReset/RequestPasswordReset.jsx
+++ b/src/components/theme/PasswordReset/RequestPasswordReset.jsx
@@ -5,7 +5,7 @@ import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Helmet, usePrevious } from '@plone/volto/helpers';
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { resetPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 
diff --git a/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx b/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
index b1b085c371..6de5bb2cce 100644
--- a/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
+++ b/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx
@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('RequestPasswordReset', () => {
diff --git a/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap b/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
index 0eaf6db99a..2e67521d69 100644
--- a/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
+++ b/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
@@ -8,109 +8,31 @@ exports[`RequestPasswordReset renders a RequestPasswordReset component 1`] = `
     className="ui container"
   >
     <div
-      className="ui container"
-    >
-      <form
-        className="ui form"
-        method="post"
-        onSubmit={[Function]}
-      >
-        <fieldset
-          className="invisible"
-        >
-          <div
-            className="ui raised segments"
-          >
-            <div
-              className="ui segment"
-            >
-              <div
-                className="ui segment primary"
-              >
-                <h1
-                  style={
-                    Object {
-                      "fontSize": "16px",
-                    }
-                  }
-                >
-                   
-                  Forgot your password?
-                </h1>
-              </div>
-              <div
-                className="ui secondary segment"
-              >
-                For security reasons, we store your password encrypted, and cannot mail it to you. If you would like to reset your password, fill out the form below and we will send you an email at the address you gave when you registered to start the process of resetting your password.
-              </div>
-              <div
-                className="mocked-default-widget"
-                id="mocked-field-username"
-              >
-                My user name is
-                 - 
-                No description
-              </div>
-            </div>
-            <div
-              className="ui clearing segment actions"
-            >
-              <button
-                aria-label="Save"
-                className="ui basic primary right floated button"
-                onClick={[Function]}
-                title="Save"
-                type="submit"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-              <button
-                aria-label="Cancel"
-                className="ui basic secondary right floated button"
-                onClick={[Function]}
-                title="Cancel"
-              >
-                <svg
-                  className="icon circled"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "30px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
+      data-schema={
+        Object {
+          "fieldsets": Array [
+            Object {
+              "fields": Array [
+                "username",
+              ],
+              "id": "default",
+              "title": "Default",
+            },
+          ],
+          "properties": Object {
+            "username": Object {
+              "title": "My user name is",
+              "type": "string",
+            },
+          },
+          "required": Array [
+            "username",
+          ],
+          "submitLabel": "Start password reset",
+        }
+      }
+      id="Form"
+    />
   </div>
 </div>
 `;
diff --git a/src/components/theme/Register/Register.jsx b/src/components/theme/Register/Register.jsx
index ce47f9121e..bdad99d411 100644
--- a/src/components/theme/Register/Register.jsx
+++ b/src/components/theme/Register/Register.jsx
@@ -12,7 +12,8 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { createUser } from '@plone/volto/actions';
 
 const messages = defineMessages({
diff --git a/src/components/theme/Register/Register.test.jsx b/src/components/theme/Register/Register.test.jsx
index 6b288fc81d..d573cf4f25 100644
--- a/src/components/theme/Register/Register.test.jsx
+++ b/src/components/theme/Register/Register.test.jsx
@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('Register', () => {
diff --git a/src/components/theme/Register/__snapshots__/Register.test.jsx.snap b/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
index 965e380a54..c664bb7995 100644
--- a/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
+++ b/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
@@ -5,86 +5,37 @@ exports[`Register renders a register component 1`] = `
   id="page-register"
 >
   <div
-    className="ui container"
-  >
-    <form
-      className="ui form"
-      method="post"
-      onSubmit={[Function]}
-    >
-      <fieldset
-        className="invisible"
-      >
-        <div
-          className="ui raised segments"
-        >
-          <div
-            className="ui segment"
-          >
-            <div
-              className="ui segment primary"
-            >
-              <h1
-                style={
-                  Object {
-                    "fontSize": "16px",
-                  }
-                }
-              >
-                 
-                Registration form
-              </h1>
-            </div>
-            <div
-              className="mocked-default-widget"
-              id="mocked-field-fullname"
-            >
-              Full Name
-               - 
-              Enter full name, e.g. John Smith.
-            </div>
-            <div
-              className="mocked-default-widget"
-              id="mocked-field-email"
-            >
-              E-mail
-               - 
-              Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.
-            </div>
-          </div>
-          <div
-            className="ui clearing segment actions"
-          >
-            <button
-              aria-label="Register"
-              className="ui basic primary right floated button"
-              onClick={[Function]}
-              title="Register"
-              type="submit"
-            >
-              <svg
-                className="icon circled"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": undefined,
-                  }
-                }
-                onClick={null}
-                style={
-                  Object {
-                    "fill": "currentColor",
-                    "height": "30px",
-                    "width": "auto",
-                  }
-                }
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-          </div>
-        </div>
-      </fieldset>
-    </form>
-  </div>
+    data-schema={
+      Object {
+        "fieldsets": Array [
+          Object {
+            "fields": Array [
+              "fullname",
+              "email",
+            ],
+            "id": "default",
+            "title": "Default",
+          },
+        ],
+        "properties": Object {
+          "email": Object {
+            "description": "Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.",
+            "title": "E-mail",
+            "type": "string",
+          },
+          "fullname": Object {
+            "description": "Enter full name, e.g. John Smith.",
+            "title": "Full Name",
+            "type": "string",
+          },
+        },
+        "required": Array [
+          "fullname",
+          "email",
+        ],
+      }
+    }
+    id="Form"
+  />
 </div>
 `;
diff --git a/src/config/Widgets.jsx b/src/config/Widgets.jsx
index d51544e244..66eea374c9 100644
--- a/src/config/Widgets.jsx
+++ b/src/config/Widgets.jsx
@@ -1,40 +1,37 @@
-// The Widgets are forced to be imported not from the index but from its own
-// full path due to circular import issues
-
-import loadable from '@loadable/component';
-
-import AlignWidget from '@plone/volto/components/manage/Widgets/AlignWidget';
-import ButtonsWidget from '@plone/volto/components/manage/Widgets/ButtonsWidget';
-import ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
-import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
-import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
-import IdWidget from '@plone/volto/components/manage/Widgets/IdWidget';
-import PasswordWidget from '@plone/volto/components/manage/Widgets/PasswordWidget';
-import QueryWidget from '@plone/volto/components/manage/Widgets/QueryWidget';
-import QuerySortOnWidget from '@plone/volto/components/manage/Widgets/QuerySortOnWidget';
-import QuerystringWidget from '@plone/volto/components/manage/Widgets/QuerystringWidget';
-import SchemaWidget from '@plone/volto/components/manage/Widgets/SchemaWidget';
-import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
-import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
-import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
-import TokenWidget from '@plone/volto/components/manage/Widgets/TokenWidget';
-import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
-import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUrlWidget';
-import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
-import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
-import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
-import RegistryImageWidget from '@plone/volto/components/manage/Widgets/RegistryImageWidget';
-
-import ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
-import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-
-import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
-import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
-import VocabularyTermsWidget from '@plone/volto/components/manage/Widgets/VocabularyTermsWidget';
-import SelectMetadataWidget from '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField';
-import SelectAutoComplete from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
-import ColorPickerWidget from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
+import {
+  AlignWidget,
+  ButtonsWidget,
+  ArrayWidget,
+  CheckboxWidget,
+  FileWidget,
+  IdWidget,
+  PasswordWidget,
+  QueryWidget,
+  QuerySortOnWidget,
+  QuerystringWidget,
+  SchemaWidget,
+  SelectWidget,
+  TextareaWidget,
+  TextWidget,
+  TokenWidget,
+  WysiwygWidget,
+  UrlWidget,
+  InternalUrlWidget,
+  EmailWidget,
+  NumberWidget,
+  ImageSizeWidget,
+  RegistryImageWidget,
+  ReferenceWidget,
+  ObjectBrowserWidget,
+  ObjectWidget,
+  ObjectListWidget,
+  VocabularyTermsWidget,
+  SelectMetadataWidget,
+  SelectAutoComplete,
+  ColorPickerWidget,
+  DatetimeWidget,
+  RecurrenceWidget,
+} from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
 import BooleanViewWidget from '@plone/volto/components/theme/Widgets/BooleanWidget';
@@ -55,15 +52,6 @@ import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
 
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
-);
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
-);
-
 // Widgets mapping
 export const widgetMapping = {
   id: {
diff --git a/src/routes.js b/src/routes.js
index 1908a29b57..5884f2364d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -6,18 +6,10 @@ import debug from 'debug';
 import { compact } from 'lodash';
 import {
   Add,
-  AddonsControlpanel,
   Aliases,
   ChangePassword,
   ContactForm,
-  ContentType,
-  ContentTypeLayout,
-  ContentTypeSchema,
-  ContentTypes,
-  Controlpanel,
-  Controlpanels,
   CreateTranslation,
-  DatabaseInformation,
   Delete,
   Diff,
   Edit,
@@ -26,7 +18,6 @@ import {
   Login,
   Logout,
   ManageTranslations,
-  ModerateComments,
   NotFound,
   PasswordReset,
   Register,
@@ -34,10 +25,6 @@ import {
   Search,
   Sharing,
   Sitemap,
-  AliasesControlpanel,
-  UndoControlpanel,
-  GroupsControlpanel,
-  UpgradeControlPanel,
   PersonalInformation,
 } from '@plone/volto/components';
 import { Contents } from '@plone/volto/components/manage/Contents';
@@ -49,7 +36,20 @@ import {
   ConfigureRuleControlpanel,
   UsersControlpanel,
   UserGroupMembershipControlPanel,
+  GroupsControlpanel,
+  AddonsControlpanel,
+  AliasesControlpanel,
+  ContentType,
+  ContentTypeLayout,
+  ContentTypeSchema,
+  ContentTypes,
+  Controlpanel,
+  Controlpanels,
+  DatabaseInformation,
+  ModerateComments,
   RelationsControlpanel,
+  UndoControlpanel,
+  UpgradeControlPanel,
 } from '@plone/volto/components/manage/Controlpanels';
 
 // Deliberatelly use of absolute path of these components, since we do not want them

From 17b803ed6baa2659d5edf8a18df9d1b2a5389831 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Fri, 17 Nov 2023 18:44:44 +0100
Subject: [PATCH 06/27] added babel-plugin-transform-imports

---
 babel.js                                   |  18 ++
 package.json                               |   1 +
 razzle.config.js                           |  27 ++-
 webpack-plugins/babel-transform-modules.js | 240 +++++++++++++++++++++
 yarn.lock                                  |  47 +++-
 5 files changed, 331 insertions(+), 2 deletions(-)
 create mode 100644 webpack-plugins/babel-transform-modules.js

diff --git a/babel.js b/babel.js
index 2a34da5172..284b8a7936 100644
--- a/babel.js
+++ b/babel.js
@@ -1,3 +1,5 @@
+const transformModulesMapper = require('./webpack-plugins/babel-transform-modules');
+
 module.exports = function (api) {
   api.cache(true);
   const presets = [
@@ -20,6 +22,22 @@ module.exports = function (api) {
         rootPathSuffix: 'src',
       },
     ],
+    // this transform-imports config is read by jest and breaks webpack
+    [
+      'transform-imports',
+      {
+        '@plone/volto/components': {
+          transform: (importName) => {
+            const voltoTransforms =
+              transformModulesMapper['@plone/volto/components'];
+            if (voltoTransforms[importName]) {
+              return voltoTransforms[importName];
+            }
+            return '@plone/volto/components';
+          },
+        },
+      },
+    ],
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
       {
diff --git a/package.json b/package.json
index 4f45ca8989..fc487b2082 100644
--- a/package.json
+++ b/package.json
@@ -260,6 +260,7 @@
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-react-intl": "5.1.17",
     "babel-plugin-root-import": "6.1.0",
+    "babel-plugin-transform-imports": "2.0.0",
     "babel-preset-razzle": "4.2.17",
     "circular-dependency-plugin": "5.2.2",
     "classnames": "2.2.6",
diff --git a/razzle.config.js b/razzle.config.js
index f416a9ad83..9230adcce6 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -14,6 +14,7 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const transformModulesMapper = require('./webpack-plugins/babel-transform-modules');
 
 const fileLoaderFinder = makeLoaderFinder('file-loader');
 
@@ -270,13 +271,37 @@ const defaultModify = ({
 
   let addonsAsExternals = [];
 
-  const { include } = options.webpackOptions.babelRule;
+  const { include, use } = options.webpackOptions.babelRule;
   if (packageJson.name !== '@plone/volto') {
     include.push(fs.realpathSync(`${registry.voltoPath}/src`));
   }
 
   include.push(fs.realpathSync(`${registry.voltoPath}/packages/registry/src`));
 
+  const babelLoader = use.find(
+    (loader) => loader.ident === 'razzle-babel-loader',
+  );
+  if (babelLoader) {
+    babelLoader.options.plugins = [
+      // this transform-imports config is read by webpack and not by jest
+      [
+        'transform-imports',
+        {
+          '@plone/volto/components': {
+            transform: (importName) => {
+              const voltoTransforms =
+                transformModulesMapper['@plone/volto/components'];
+              if (voltoTransforms[importName]) {
+                return voltoTransforms[importName];
+              }
+              return '@plone/volto/components';
+            },
+          },
+        },
+      ],
+    ];
+  }
+
   // Add babel support external (ie. node_modules npm published packages)
   const packagesNames = Object.keys(registry.packages);
   if (registry.packages && packagesNames.length > 0) {
diff --git a/webpack-plugins/babel-transform-modules.js b/webpack-plugins/babel-transform-modules.js
new file mode 100644
index 0000000000..05331091b9
--- /dev/null
+++ b/webpack-plugins/babel-transform-modules.js
@@ -0,0 +1,240 @@
+module.exports = {
+  '@plone/volto/components': {
+    AddonsControlpanel:
+      '@plone/volto/components/manage/Controlpanels/AddonsControlpanel',
+    UndoControlpanel:
+      '@plone/volto/components/manage/Controlpanels/UndoControlpanel',
+    Contents: '@plone/volto/components/manage/Contents/Contents',
+    DatabaseInformation:
+      '@plone/volto/components/manage/Controlpanels/DatabaseInformation',
+    Controlpanel: '@plone/volto/components/manage/Controlpanels/Controlpanel',
+    Controlpanels: '@plone/volto/components/manage/Controlpanels/Controlpanels',
+    AliasesControlpanel: '@plone/volto/components/manage/Controlpanels/Aliases',
+    ContentTypes: '@plone/volto/components/manage/Controlpanels/ContentTypes',
+    ContentType: '@plone/volto/components/manage/Controlpanels/ContentType',
+    ContentTypeLayout:
+      '@plone/volto/components/manage/Controlpanels/ContentTypeLayout',
+    ContentTypeSchema:
+      '@plone/volto/components/manage/Controlpanels/ContentTypeSchema',
+    ContentTypesActions:
+      '@plone/volto/components/manage/Controlpanels/ContentTypesActions',
+    UsersControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel',
+    UserGroupMembershipControlPanel:
+      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel',
+    Relations:
+      '@plone/volto/components/manage/Controlpanels/Relations/Relations',
+    GroupsControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel',
+    RulesControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Rules/Rules',
+    AddRuleControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Rules/AddRule',
+    EditRuleControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Rules/EditRule',
+    ConfigureRuleControlpanel:
+      '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule',
+    UpgradeControlPanel:
+      '@plone/volto/components/manage/Controlpanels/UpgradeControlPanel',
+    ModerateComments:
+      '@plone/volto/components/manage/Controlpanels/ModerateComments',
+    VersionOverview:
+      '@plone/volto/components/manage/Controlpanels/VersionOverview',
+    Diff: '@plone/volto/components/manage/Diff/Diff',
+    ModalForm: '@plone/volto/components/manage/Form/ModalForm',
+    Rules: '@plone/volto/components/manage/Rules/Rules',
+    Form: '@plone/volto/components/manage/Form/Form',
+    BlocksToolbar: '@plone/volto/components/manage/Form/BlocksToolbar',
+    UndoToolbar: '@plone/volto/components/manage/Form/UndoToolbar',
+    Field: '@plone/volto/components/manage/Form/Field',
+    CommentEditModal: '@plone/volto/components/theme/Comments/CommentEditModal',
+    ContentsBreadcrumbs:
+      '@plone/volto/components/manage/Contents/ContentsBreadcrumbs',
+    ContentsIndexHeader:
+      '@plone/volto/components/manage/Contents/ContentsIndexHeader',
+    ContentsItem: '@plone/volto/components/manage/Contents/ContentsItem',
+    ContentsUploadModal:
+      '@plone/volto/components/manage/Contents/ContentsUploadModal',
+    ContentsPropertiesModal:
+      '@plone/volto/components/manage/Contents/ContentsPropertiesModal',
+    ContentsRenameModal:
+      '@plone/volto/components/manage/Contents/ContentsRenameModal',
+    ContentsWorkflowModal:
+      '@plone/volto/components/manage/Contents/ContentsWorkflowModal',
+    ContentsTagsModal:
+      '@plone/volto/components/manage/Contents/ContentsTagsModal',
+    RenderUsers:
+      '@plone/volto/components/manage/Controlpanels/Users/RenderUsers',
+    RenderGroups:
+      '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups',
+    DiffField: '@plone/volto/components/manage/Diff/DiffField',
+    InlineForm: '@plone/volto/components/manage/Form/InlineForm',
+    BlocksForm: '@plone/volto/components/manage/Blocks/Block/BlocksForm',
+    BlockDataForm: '@plone/volto/components/manage/Form/BlockDataForm',
+    FormFieldWrapper: '@plone/volto/components/manage/Widgets/FormFieldWrapper',
+    ArrayWidget: '@plone/volto/components/manage/Widgets/ArrayWidget',
+    CheckboxWidget: '@plone/volto/components/manage/Widgets/CheckboxWidget',
+    DatetimeWidget: '@plone/volto/components/manage/Widgets/DatetimeWidget',
+    RecurrenceWidget:
+      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget',
+    FileWidget: '@plone/volto/components/manage/Widgets/FileWidget',
+    IdWidget: '@plone/volto/components/manage/Widgets/IdWidget',
+    PasswordWidget: '@plone/volto/components/manage/Widgets/PasswordWidget',
+    ReferenceWidget: '@plone/volto/components/manage/Widgets/ReferenceWidget',
+    SchemaWidget: '@plone/volto/components/manage/Widgets/SchemaWidget',
+    SchemaWidgetFieldset:
+      '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset',
+    SelectWidget: '@plone/volto/components/manage/Widgets/SelectWidget',
+    TextareaWidget: '@plone/volto/components/manage/Widgets/TextareaWidget',
+    TextWidget: '@plone/volto/components/manage/Widgets/TextWidget',
+    WysiwygWidget: '@plone/volto/components/manage/Widgets/WysiwygWidget',
+    ObjectBrowserWidget:
+      '@plone/volto/components/manage/Widgets/ObjectBrowserWidget',
+    ObjectBrowserWidgetMode:
+      '@plone/volto/components/manage/Widgets/ObjectBrowserWidget',
+    ObjectWidget: '@plone/volto/components/manage/Widgets/ObjectWidget',
+    ObjectListWidget: '@plone/volto/components/manage/Widgets/ObjectListWidget',
+    AppExtras: '@plone/volto/components/theme/AppExtras/AppExtras',
+    Header: '@plone/volto/components/theme/Header/Header',
+    Logo: '@plone/volto/components/theme/Logo/Logo',
+    Anontools: '@plone/volto/components/theme/Anontools/Anontools',
+    Navigation: '@plone/volto/components/theme/Navigation/Navigation',
+    Breadcrumbs: '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs',
+    SearchWidget: '@plone/volto/components/theme/SearchWidget/SearchWidget',
+    Footer: '@plone/volto/components/theme/Footer/Footer',
+    Title: '@plone/volto/components/theme/Title/Title',
+    DefaultView: '@plone/volto/components/theme/View/DefaultView',
+    Pagination: '@plone/volto/components/theme/Pagination/Pagination',
+    Tags: '@plone/volto/components/theme/Tags/Tags',
+    OutdatedBrowser:
+      '@plone/volto/components/theme/OutdatedBrowser/OutdatedBrowser',
+    LanguageSelector:
+      '@plone/volto/components/theme/LanguageSelector/LanguageSelector',
+    RenderBlocks: '@plone/volto/components/theme/View/RenderBlocks',
+    SkipLinks: '@plone/volto/components/theme/SkipLinks/SkipLinks',
+    EventDetails: '@plone/volto/components/theme/EventDetails/EventDetails',
+    PreviewImage: '@plone/volto/components/theme/PreviewImage/PreviewImage',
+    Error: '@plone/volto/components/theme/Error/Error',
+    ErrorBoundary: '@plone/volto/components/theme/Error/ErrorBoundary',
+    NotFound: '@plone/volto/components/theme/NotFound/NotFound',
+    Forbidden: '@plone/volto/components/theme/Forbidden/Forbidden',
+    Unauthorized: '@plone/volto/components/theme/Unauthorized/Unauthorized',
+    Avatar: '@plone/volto/components/theme/Avatar/Avatar',
+    Icon: '@plone/volto/components/theme/Icon/Icon',
+    Image: '@plone/volto/components/theme/Image/Image',
+    ConditionalLink:
+      '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+    UniversalLink: '@plone/volto/components/manage/UniversalLink/UniversalLink',
+    LinkMore: '@plone/volto/components/manage/LinkMore/LinkMore',
+    ContactForm: '@plone/volto/components/theme/ContactForm/ContactForm',
+    Login: '@plone/volto/components/theme/Login/Login',
+    Logout: '@plone/volto/components/theme/Logout/Logout',
+    Sitemap: '@plone/volto/components/theme/Sitemap/Sitemap',
+    Search: '@plone/volto/components/theme/Search/Search',
+    Comments: '@plone/volto/components/theme/Comments/Comments',
+    SocialSharing: '@plone/volto/components/theme/SocialSharing/SocialSharing',
+    Register: '@plone/volto/components/theme/Register/Register',
+    PasswordReset: '@plone/volto/components/theme/PasswordReset/PasswordReset',
+    RequestPasswordReset:
+      '@plone/volto/components/theme/PasswordReset/RequestPasswordReset',
+    ChangePassword: '@plone/volto/components/manage/Preferences/ChangePassword',
+    PersonalPreferences:
+      '@plone/volto/components/manage/Preferences/PersonalPreferences',
+    PersonalInformation:
+      '@plone/volto/components/manage/Preferences/PersonalInformation',
+    CreateTranslation:
+      '@plone/volto/components/manage/Multilingual/CreateTranslation',
+    TranslationObject:
+      '@plone/volto/components/manage/Multilingual/TranslationObject',
+    CompareLanguages:
+      '@plone/volto/components/manage/Multilingual/CompareLanguages',
+    FileView: '@plone/volto/components/theme/View/FileView',
+    ImageView: '@plone/volto/components/theme/View/ImageView',
+    NewsItemView: '@plone/volto/components/theme/View/NewsItemView',
+    EventView: '@plone/volto/components/theme/View/EventView',
+    ListingView: '@plone/volto/components/theme/View/ListingView',
+    SummaryView: '@plone/volto/components/theme/View/SummaryView',
+    TabularView: '@plone/volto/components/theme/View/TabularView',
+    AlbumView: '@plone/volto/components/theme/View/AlbumView',
+    Actions: '@plone/volto/components/manage/Actions/Actions',
+    Add: '@plone/volto/components/manage/Add/Add',
+    Circle: '@plone/volto/components/manage/Contents/circle',
+    Delete: '@plone/volto/components/manage/Delete/Delete',
+    Display: '@plone/volto/components/manage/Display/Display',
+    Edit: '@plone/volto/components/manage/Edit/Edit',
+    History: '@plone/volto/components/manage/History/History',
+    Sharing: '@plone/volto/components/manage/Sharing/Sharing',
+    Aliases: '@plone/volto/components/manage/Aliases/Aliases',
+    LinksToItem: '@plone/volto/components/manage/LinksToItem/LinksToItem',
+    Workflow: '@plone/volto/components/manage/Workflow/Workflow',
+    Messages: '@plone/volto/components/manage/Messages/Messages',
+    BlockChooser: '@plone/volto/components/manage/BlockChooser/BlockChooser',
+    BlockChooserButton:
+      '@plone/volto/components/manage/BlockChooser/BlockChooserButton',
+    Toolbar: '@plone/volto/components/manage/Toolbar/Toolbar',
+    Sidebar: '@plone/volto/components/manage/Sidebar/Sidebar',
+    SidebarPopup: '@plone/volto/components/manage/Sidebar/SidebarPopup',
+    SidebarPortal: '@plone/volto/components/manage/Sidebar/SidebarPortal',
+    PersonalTools: '@plone/volto/components/manage/Toolbar/PersonalTools',
+    More: '@plone/volto/components/manage/Toolbar/More',
+    Types: '@plone/volto/components/manage/Toolbar/Types',
+    Toast: '@plone/volto/components/manage/Toast/Toast',
+    ManageTranslations:
+      '@plone/volto/components/manage/Multilingual/ManageTranslations',
+    SearchTags: '@plone/volto/components/theme/Search/SearchTags',
+    DragDropList: '@plone/volto/components/manage/DragDropList/DragDropList',
+    EditDefaultBlock: '@plone/volto/components/manage/Blocks/Block/DefaultEdit',
+    EditDescriptionBlock:
+      '@plone/volto/components/manage/Blocks/Description/Edit',
+    EditTitleBlock: '@plone/volto/components/manage/Blocks/Title/Edit',
+    EditToCBlock: '@plone/volto/components/manage/Blocks/ToC/Edit',
+    EditTextBlock: '@plone/volto/components/manage/Blocks/Text/Edit',
+    EditImageBlock: '@plone/volto/components/manage/Blocks/Image/Edit',
+    EditListingBlock: '@plone/volto/components/manage/Blocks/Listing/Edit',
+    EditVideoBlock: '@plone/volto/components/manage/Blocks/Video/Edit',
+    EditBlock: '@plone/volto/components/manage/Blocks/Block/Edit',
+    EditHeroImageLeftBlock:
+      '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit',
+    ViewHeroImageLeftBlock:
+      '@plone/volto/components/manage/Blocks/HeroImageLeft/View',
+    EditMapBlock: '@plone/volto/components/manage/Blocks/Maps/Edit',
+    EditHTMLBlock: '@plone/volto/components/manage/Blocks/HTML/Edit',
+    ViewDefaultBlock: '@plone/volto/components/manage/Blocks/Block/DefaultView',
+    ViewDescriptionBlock:
+      '@plone/volto/components/manage/Blocks/Description/View',
+    ViewTitleBlock: '@plone/volto/components/manage/Blocks/Title/View',
+    ViewToCBlock: '@plone/volto/components/manage/Blocks/ToC/View',
+    ViewTextBlock: '@plone/volto/components/manage/Blocks/Text/View',
+    ViewImageBlock: '@plone/volto/components/manage/Blocks/Image/View',
+    ViewListingBlock: '@plone/volto/components/manage/Blocks/Listing/View',
+    ViewVideoBlock: '@plone/volto/components/manage/Blocks/Video/View',
+    ViewMapBlock: '@plone/volto/components/manage/Blocks/Maps/View',
+    ViewHTMLBlock: '@plone/volto/components/manage/Blocks/HTML/View',
+    ListingBlockBody:
+      '@plone/volto/components/manage/Blocks/Listing/ListingBody',
+    ListingBlockData:
+      '@plone/volto/components/manage/Blocks/Listing/ListingData',
+    ImageSidebar: '@plone/volto/components/manage/Blocks/Image/ImageSidebar',
+    MapsSidebar: '@plone/volto/components/manage/Blocks/Maps/MapsSidebar',
+    VideoSidebar: '@plone/volto/components/manage/Blocks/Video/VideoSidebar',
+    LeadImageSidebar:
+      '@plone/volto/components/manage/Blocks/LeadImage/LeadImageSidebar',
+    Style: '@plone/volto/components/manage/Blocks/Block/Style',
+    BlockSettingsSidebar:
+      '@plone/volto/components/manage/Blocks/Block/Settings',
+    BlockSettingsSchema: '@plone/volto/components/manage/Blocks/Block/Schema',
+    TextSettingsSchema: '@plone/volto/components/manage/Blocks/Text/Schema',
+    ImageSettingsSchema:
+      '@plone/volto/components/manage/Blocks/Image/LayoutSchema',
+    ToCSettingsSchema: '@plone/volto/components/manage/Blocks/ToC/Schema',
+    MaybeWrap: '@plone/volto/components/manage/MaybeWrap/MaybeWrap',
+    ContentMetadataTags:
+      '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags',
+    FormattedDate: '@plone/volto/components/theme/FormattedDate/FormattedDate',
+    FormattedRelativeDate:
+      '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate',
+    Popup: '@plone/volto/components/theme/Popup/Popup',
+    Component: '@plone/volto/components/theme/Component/Component',
+    App: '@plone/volto/components/theme/App/App',
+  },
+};
diff --git a/yarn.lock b/yarn.lock
index 2fb04d2f78..e355a674ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2229,7 +2229,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0":
+"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.4":
   version: 7.23.0
   resolution: "@babel/types@npm:7.23.0"
   dependencies:
@@ -3413,6 +3413,7 @@ __metadata:
     babel-plugin-lodash: 3.3.4
     babel-plugin-react-intl: 5.1.17
     babel-plugin-root-import: 6.1.0
+    babel-plugin-transform-imports: 2.0.0
     babel-preset-razzle: 4.2.17
     bundlewatch: 0.3.3
     circular-dependency-plugin: 5.2.2
@@ -7584,6 +7585,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-transform-imports@npm:2.0.0":
+  version: 2.0.0
+  resolution: "babel-plugin-transform-imports@npm:2.0.0"
+  dependencies:
+    "@babel/types": ^7.4
+    is-valid-path: ^0.1.1
+  checksum: 606112eec95ea5141a5528cd6cf94a6e00ef4127ffc0e3da98819eeec1b275508da958ca6324ce6ef221950a7b7127afd3678862bf62df954940cc17f6071c3a
+  languageName: node
+  linkType: hard
+
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -15138,6 +15149,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-extglob@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-extglob@npm:1.0.0"
+  checksum: 5eea8517feeae5206547c0fc838c1416ec763b30093c286e1965a05f46b74a59ad391f912565f3b67c9c31cab4769ab9c35420e016b608acb47309be8d0d6e94
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.0, is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -15191,6 +15209,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-glob@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-glob@npm:2.0.1"
+  dependencies:
+    is-extglob: ^1.0.0
+  checksum: 089f5f93640072491396a5f075ce73e949a90f35832b782bc49a6b7637d58e392d53cb0b395e059ccab70fcb82ff35d183f6f9ebbcb43227a1e02e3fed5430c9
+  languageName: node
+  linkType: hard
+
 "is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
@@ -15265,6 +15292,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-invalid-path@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "is-invalid-path@npm:0.1.0"
+  dependencies:
+    is-glob: ^2.0.0
+  checksum: 184dd40d9c7a765506e4fdcd7e664f86de68a4d5d429964b160255fe40de1b4323d1b4e6ea76ff87debf788a330e4f27cb1dfe5fc2420405e1c8a16a6ed87092
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -15549,6 +15585,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-valid-path@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "is-valid-path@npm:0.1.1"
+  dependencies:
+    is-invalid-path: ^0.1.0
+  checksum: d6e716a4a999c75e32ff91ff1ea684fc9e69de05747ec4aaae049460beb971c79f474629dd87a5b4b662691f8323c1920f1b6f1dcdcb39b07082f0ff77b71da6
+  languageName: node
+  linkType: hard
+
 "is-weakmap@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-weakmap@npm:2.0.1"

From 2a3b8b7ed385bbf2b48b02a83847920a42f9edf5 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Sat, 16 Dec 2023 18:25:51 +0100
Subject: [PATCH 07/27] Removed babel-plugin-transform-imports and readded
 imports in components index

---
 babel.js                                      |  18 --
 package.json                                  |   1 -
 razzle.config.js                              |  27 +-
 src/components/index.js                       | 103 +++++++-
 src/components/manage/Contents/index.tsx      |  59 ++++-
 src/components/manage/Controlpanels/index.tsx |  18 +-
 webpack-plugins/babel-transform-modules.js    | 240 ------------------
 yarn.lock                                     |  47 +---
 8 files changed, 177 insertions(+), 336 deletions(-)
 delete mode 100644 webpack-plugins/babel-transform-modules.js

diff --git a/babel.js b/babel.js
index 284b8a7936..2a34da5172 100644
--- a/babel.js
+++ b/babel.js
@@ -1,5 +1,3 @@
-const transformModulesMapper = require('./webpack-plugins/babel-transform-modules');
-
 module.exports = function (api) {
   api.cache(true);
   const presets = [
@@ -22,22 +20,6 @@ module.exports = function (api) {
         rootPathSuffix: 'src',
       },
     ],
-    // this transform-imports config is read by jest and breaks webpack
-    [
-      'transform-imports',
-      {
-        '@plone/volto/components': {
-          transform: (importName) => {
-            const voltoTransforms =
-              transformModulesMapper['@plone/volto/components'];
-            if (voltoTransforms[importName]) {
-              return voltoTransforms[importName];
-            }
-            return '@plone/volto/components';
-          },
-        },
-      },
-    ],
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
       {
diff --git a/package.json b/package.json
index e03eee21b3..5eb6eae26f 100644
--- a/package.json
+++ b/package.json
@@ -260,7 +260,6 @@
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-react-intl": "5.1.17",
     "babel-plugin-root-import": "6.1.0",
-    "babel-plugin-transform-imports": "2.0.0",
     "babel-preset-razzle": "4.2.17",
     "circular-dependency-plugin": "5.2.2",
     "classnames": "2.2.6",
diff --git a/razzle.config.js b/razzle.config.js
index 9230adcce6..f416a9ad83 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -14,7 +14,6 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-const transformModulesMapper = require('./webpack-plugins/babel-transform-modules');
 
 const fileLoaderFinder = makeLoaderFinder('file-loader');
 
@@ -271,37 +270,13 @@ const defaultModify = ({
 
   let addonsAsExternals = [];
 
-  const { include, use } = options.webpackOptions.babelRule;
+  const { include } = options.webpackOptions.babelRule;
   if (packageJson.name !== '@plone/volto') {
     include.push(fs.realpathSync(`${registry.voltoPath}/src`));
   }
 
   include.push(fs.realpathSync(`${registry.voltoPath}/packages/registry/src`));
 
-  const babelLoader = use.find(
-    (loader) => loader.ident === 'razzle-babel-loader',
-  );
-  if (babelLoader) {
-    babelLoader.options.plugins = [
-      // this transform-imports config is read by webpack and not by jest
-      [
-        'transform-imports',
-        {
-          '@plone/volto/components': {
-            transform: (importName) => {
-              const voltoTransforms =
-                transformModulesMapper['@plone/volto/components'];
-              if (voltoTransforms[importName]) {
-                return voltoTransforms[importName];
-              }
-              return '@plone/volto/components';
-            },
-          },
-        },
-      ],
-    ];
-  }
-
   // Add babel support external (ie. node_modules npm published packages)
   const packagesNames = Object.keys(registry.packages);
   if (registry.packages && packagesNames.length > 0) {
diff --git a/src/components/index.js b/src/components/index.js
index 3b661ae41b..dca6fd6990 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -75,16 +75,52 @@ export { default as AlbumView } from '@plone/volto/components/theme/View/AlbumVi
 
 export { default as Actions } from '@plone/volto/components/manage/Actions/Actions';
 export { default as Add } from '@plone/volto/components/manage/Add/Add';
+export {
+  Controlpanels,
+  Controlpanel,
+  RulesControlpanel,
+  AddRuleControlpanel,
+  EditRuleControlpanel,
+  ConfigureRuleControlpanel,
+  UsersControlpanel,
+  RenderUsers,
+  UserGroupMembershipControlPanel,
+  GroupsControlpanel,
+  RenderGroups,
+  RelationsControlpanel,
+  AliasesControlpanel,
+  UndoControlpanel,
+  AddonsControlpanel,
+  ContentType,
+  ContentTypeLayout,
+  ContentTypeSchema,
+  ContentTypes,
+  VersionOverview,
+  UpgradeControlPanel,
+  ModerateComments,
+  DatabaseInformation,
+} from '@plone/volto/components/manage/Controlpanels';
+
 export { default as Circle } from '@plone/volto/components/manage/Contents/circle';
 
 export { default as Delete } from '@plone/volto/components/manage/Delete/Delete';
 export const Diff = loadable(() =>
-  import('@plone/volto/components/manage/Diff/Diff'),
+  import(
+    /* webpackChunkName: "Diff" */ '@plone/volto/components/manage/Diff/Diff'
+  ),
+);
+export const DiffField = loadable(() =>
+  import(
+    /* webpackChunkName: "Diff" */ '@plone/volto/components/manage/Diff/DiffField'
+  ),
 );
 export { default as Display } from '@plone/volto/components/manage/Display/Display';
 export { default as Edit } from '@plone/volto/components/manage/Edit/Edit';
 export { default as History } from '@plone/volto/components/manage/History/History';
 export { default as Sharing } from '@plone/volto/components/manage/Sharing/Sharing';
+export const Rules = loadable(() =>
+  import('@plone/volto/components/manage/Rules/Rules'),
+);
 export { default as Aliases } from '@plone/volto/components/manage/Aliases/Aliases';
 export { default as LinksToItem } from '@plone/volto/components/manage/LinksToItem/LinksToItem';
 export { default as Workflow } from '@plone/volto/components/manage/Workflow/Workflow';
@@ -101,9 +137,74 @@ export { default as Types } from '@plone/volto/components/manage/Toolbar/Types';
 export { default as Toast } from '@plone/volto/components/manage/Toast/Toast';
 export { default as ManageTranslations } from '@plone/volto/components/manage/Multilingual/ManageTranslations';
 
+export {
+  Field,
+  InlineForm,
+  ModalForm,
+  UndoToolbar,
+  BlocksToolbar,
+  BlockDataForm,
+  BlocksForm,
+  Form,
+} from '@plone/volto/components/manage/Form';
 export { default as SearchTags } from '@plone/volto/components/theme/Search/SearchTags';
+export { CommentEditModal } from '@plone/volto/components/theme/Comments';
+export {
+  Contents,
+  ContentsBreadcrumbs,
+  ContentsIndexHeader,
+  ContentsItem,
+  ContentsUploadModal,
+  ContentsPropertiesModal,
+  ContentsRenameModal,
+  ContentsWorkflowModal,
+  ContentsTagsModal,
+} from '@plone/volto/components/manage/Contents';
 export { default as DragDropList } from '@plone/volto/components/manage/DragDropList/DragDropList';
 
+export {
+  AlignWidget,
+  ButtonsWidget,
+  ArrayWidget,
+  CheckboxWidget,
+  FileWidget,
+  IdWidget,
+  PasswordWidget,
+  QueryWidget,
+  QuerySortOnWidget,
+  QuerystringWidget,
+  SchemaWidget,
+  SelectWidget,
+  TextareaWidget,
+  TextWidget,
+  TokenWidget,
+  WysiwygWidget,
+  UrlWidget,
+  InternalUrlWidget,
+  EmailWidget,
+  NumberWidget,
+  ImageSizeWidget,
+  RegistryImageWidget,
+  ReferenceWidget,
+  ObjectBrowserWidget,
+  ObjectWidget,
+  ObjectListWidget,
+  VocabularyTermsWidget,
+  SelectMetadataWidget,
+  SelectAutoComplete,
+  ColorPickerWidget,
+  DatetimeWidget,
+  RecurrenceWidget,
+  FormFieldWrapper,
+} from '@plone/volto/components/manage/Widgets';
+
+export const SchemaWidgetFieldset = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/SchemaWidgetFieldset'),
+);
+export const ObjectBrowserWidgetMode = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/ObjectBrowserWidget'),
+);
+
 export { default as EditDefaultBlock } from '@plone/volto/components/manage/Blocks/Block/DefaultEdit';
 export { default as EditDescriptionBlock } from '@plone/volto/components/manage/Blocks/Description/Edit';
 export { default as EditTitleBlock } from '@plone/volto/components/manage/Blocks/Title/Edit';
diff --git a/src/components/manage/Contents/index.tsx b/src/components/manage/Contents/index.tsx
index 4d249568eb..f3df663cd2 100644
--- a/src/components/manage/Contents/index.tsx
+++ b/src/components/manage/Contents/index.tsx
@@ -1,9 +1,64 @@
 import loadable from '@loadable/component';
 
 export const Contents = loadable(
-  () => import('@plone/volto/components/manage/Contents/Contents'),
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/Contents'
+    ),
 );
 
 export const ContentsRenameModal = loadable(
-  () => import('@plone/volto/components/manage/Contents/ContentsRenameModal'),
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsRenameModal'
+    ),
+);
+
+export const ContentsBreadcrumbs = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsBreadcrumbs'
+    ),
+);
+
+export const ContentsIndexHeader = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsIndexHeader'
+    ),
+);
+
+export const ContentsItem = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsItem'
+    ),
+);
+
+export const ContentsUploadModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsUploadModal'
+    ),
+);
+
+export const ContentsPropertiesModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsPropertiesModal'
+    ),
+);
+
+export const ContentsWorkflowModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsWorkflowModal'
+    ),
+);
+
+export const ContentsTagsModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsTagsModal'
+    ),
 );
diff --git a/src/components/manage/Controlpanels/index.tsx b/src/components/manage/Controlpanels/index.tsx
index a93eb36180..2d06131326 100644
--- a/src/components/manage/Controlpanels/index.tsx
+++ b/src/components/manage/Controlpanels/index.tsx
@@ -51,7 +51,14 @@ export const ConfigureRuleControlpanel = loadable(
 export const UsersControlpanel = loadable(
   () =>
     import(
-      '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+    ),
+);
+
+export const RenderUsers = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/RenderUsers'
     ),
 );
 
@@ -65,7 +72,14 @@ export const UserGroupMembershipControlPanel = loadable(
 export const GroupsControlpanel = loadable(
   () =>
     import(
-      '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+    ),
+);
+
+export const RenderGroups = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups'
     ),
 );
 
diff --git a/webpack-plugins/babel-transform-modules.js b/webpack-plugins/babel-transform-modules.js
deleted file mode 100644
index 05331091b9..0000000000
--- a/webpack-plugins/babel-transform-modules.js
+++ /dev/null
@@ -1,240 +0,0 @@
-module.exports = {
-  '@plone/volto/components': {
-    AddonsControlpanel:
-      '@plone/volto/components/manage/Controlpanels/AddonsControlpanel',
-    UndoControlpanel:
-      '@plone/volto/components/manage/Controlpanels/UndoControlpanel',
-    Contents: '@plone/volto/components/manage/Contents/Contents',
-    DatabaseInformation:
-      '@plone/volto/components/manage/Controlpanels/DatabaseInformation',
-    Controlpanel: '@plone/volto/components/manage/Controlpanels/Controlpanel',
-    Controlpanels: '@plone/volto/components/manage/Controlpanels/Controlpanels',
-    AliasesControlpanel: '@plone/volto/components/manage/Controlpanels/Aliases',
-    ContentTypes: '@plone/volto/components/manage/Controlpanels/ContentTypes',
-    ContentType: '@plone/volto/components/manage/Controlpanels/ContentType',
-    ContentTypeLayout:
-      '@plone/volto/components/manage/Controlpanels/ContentTypeLayout',
-    ContentTypeSchema:
-      '@plone/volto/components/manage/Controlpanels/ContentTypeSchema',
-    ContentTypesActions:
-      '@plone/volto/components/manage/Controlpanels/ContentTypesActions',
-    UsersControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel',
-    UserGroupMembershipControlPanel:
-      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel',
-    Relations:
-      '@plone/volto/components/manage/Controlpanels/Relations/Relations',
-    GroupsControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel',
-    RulesControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Rules/Rules',
-    AddRuleControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Rules/AddRule',
-    EditRuleControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Rules/EditRule',
-    ConfigureRuleControlpanel:
-      '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule',
-    UpgradeControlPanel:
-      '@plone/volto/components/manage/Controlpanels/UpgradeControlPanel',
-    ModerateComments:
-      '@plone/volto/components/manage/Controlpanels/ModerateComments',
-    VersionOverview:
-      '@plone/volto/components/manage/Controlpanels/VersionOverview',
-    Diff: '@plone/volto/components/manage/Diff/Diff',
-    ModalForm: '@plone/volto/components/manage/Form/ModalForm',
-    Rules: '@plone/volto/components/manage/Rules/Rules',
-    Form: '@plone/volto/components/manage/Form/Form',
-    BlocksToolbar: '@plone/volto/components/manage/Form/BlocksToolbar',
-    UndoToolbar: '@plone/volto/components/manage/Form/UndoToolbar',
-    Field: '@plone/volto/components/manage/Form/Field',
-    CommentEditModal: '@plone/volto/components/theme/Comments/CommentEditModal',
-    ContentsBreadcrumbs:
-      '@plone/volto/components/manage/Contents/ContentsBreadcrumbs',
-    ContentsIndexHeader:
-      '@plone/volto/components/manage/Contents/ContentsIndexHeader',
-    ContentsItem: '@plone/volto/components/manage/Contents/ContentsItem',
-    ContentsUploadModal:
-      '@plone/volto/components/manage/Contents/ContentsUploadModal',
-    ContentsPropertiesModal:
-      '@plone/volto/components/manage/Contents/ContentsPropertiesModal',
-    ContentsRenameModal:
-      '@plone/volto/components/manage/Contents/ContentsRenameModal',
-    ContentsWorkflowModal:
-      '@plone/volto/components/manage/Contents/ContentsWorkflowModal',
-    ContentsTagsModal:
-      '@plone/volto/components/manage/Contents/ContentsTagsModal',
-    RenderUsers:
-      '@plone/volto/components/manage/Controlpanels/Users/RenderUsers',
-    RenderGroups:
-      '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups',
-    DiffField: '@plone/volto/components/manage/Diff/DiffField',
-    InlineForm: '@plone/volto/components/manage/Form/InlineForm',
-    BlocksForm: '@plone/volto/components/manage/Blocks/Block/BlocksForm',
-    BlockDataForm: '@plone/volto/components/manage/Form/BlockDataForm',
-    FormFieldWrapper: '@plone/volto/components/manage/Widgets/FormFieldWrapper',
-    ArrayWidget: '@plone/volto/components/manage/Widgets/ArrayWidget',
-    CheckboxWidget: '@plone/volto/components/manage/Widgets/CheckboxWidget',
-    DatetimeWidget: '@plone/volto/components/manage/Widgets/DatetimeWidget',
-    RecurrenceWidget:
-      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget',
-    FileWidget: '@plone/volto/components/manage/Widgets/FileWidget',
-    IdWidget: '@plone/volto/components/manage/Widgets/IdWidget',
-    PasswordWidget: '@plone/volto/components/manage/Widgets/PasswordWidget',
-    ReferenceWidget: '@plone/volto/components/manage/Widgets/ReferenceWidget',
-    SchemaWidget: '@plone/volto/components/manage/Widgets/SchemaWidget',
-    SchemaWidgetFieldset:
-      '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset',
-    SelectWidget: '@plone/volto/components/manage/Widgets/SelectWidget',
-    TextareaWidget: '@plone/volto/components/manage/Widgets/TextareaWidget',
-    TextWidget: '@plone/volto/components/manage/Widgets/TextWidget',
-    WysiwygWidget: '@plone/volto/components/manage/Widgets/WysiwygWidget',
-    ObjectBrowserWidget:
-      '@plone/volto/components/manage/Widgets/ObjectBrowserWidget',
-    ObjectBrowserWidgetMode:
-      '@plone/volto/components/manage/Widgets/ObjectBrowserWidget',
-    ObjectWidget: '@plone/volto/components/manage/Widgets/ObjectWidget',
-    ObjectListWidget: '@plone/volto/components/manage/Widgets/ObjectListWidget',
-    AppExtras: '@plone/volto/components/theme/AppExtras/AppExtras',
-    Header: '@plone/volto/components/theme/Header/Header',
-    Logo: '@plone/volto/components/theme/Logo/Logo',
-    Anontools: '@plone/volto/components/theme/Anontools/Anontools',
-    Navigation: '@plone/volto/components/theme/Navigation/Navigation',
-    Breadcrumbs: '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs',
-    SearchWidget: '@plone/volto/components/theme/SearchWidget/SearchWidget',
-    Footer: '@plone/volto/components/theme/Footer/Footer',
-    Title: '@plone/volto/components/theme/Title/Title',
-    DefaultView: '@plone/volto/components/theme/View/DefaultView',
-    Pagination: '@plone/volto/components/theme/Pagination/Pagination',
-    Tags: '@plone/volto/components/theme/Tags/Tags',
-    OutdatedBrowser:
-      '@plone/volto/components/theme/OutdatedBrowser/OutdatedBrowser',
-    LanguageSelector:
-      '@plone/volto/components/theme/LanguageSelector/LanguageSelector',
-    RenderBlocks: '@plone/volto/components/theme/View/RenderBlocks',
-    SkipLinks: '@plone/volto/components/theme/SkipLinks/SkipLinks',
-    EventDetails: '@plone/volto/components/theme/EventDetails/EventDetails',
-    PreviewImage: '@plone/volto/components/theme/PreviewImage/PreviewImage',
-    Error: '@plone/volto/components/theme/Error/Error',
-    ErrorBoundary: '@plone/volto/components/theme/Error/ErrorBoundary',
-    NotFound: '@plone/volto/components/theme/NotFound/NotFound',
-    Forbidden: '@plone/volto/components/theme/Forbidden/Forbidden',
-    Unauthorized: '@plone/volto/components/theme/Unauthorized/Unauthorized',
-    Avatar: '@plone/volto/components/theme/Avatar/Avatar',
-    Icon: '@plone/volto/components/theme/Icon/Icon',
-    Image: '@plone/volto/components/theme/Image/Image',
-    ConditionalLink:
-      '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
-    UniversalLink: '@plone/volto/components/manage/UniversalLink/UniversalLink',
-    LinkMore: '@plone/volto/components/manage/LinkMore/LinkMore',
-    ContactForm: '@plone/volto/components/theme/ContactForm/ContactForm',
-    Login: '@plone/volto/components/theme/Login/Login',
-    Logout: '@plone/volto/components/theme/Logout/Logout',
-    Sitemap: '@plone/volto/components/theme/Sitemap/Sitemap',
-    Search: '@plone/volto/components/theme/Search/Search',
-    Comments: '@plone/volto/components/theme/Comments/Comments',
-    SocialSharing: '@plone/volto/components/theme/SocialSharing/SocialSharing',
-    Register: '@plone/volto/components/theme/Register/Register',
-    PasswordReset: '@plone/volto/components/theme/PasswordReset/PasswordReset',
-    RequestPasswordReset:
-      '@plone/volto/components/theme/PasswordReset/RequestPasswordReset',
-    ChangePassword: '@plone/volto/components/manage/Preferences/ChangePassword',
-    PersonalPreferences:
-      '@plone/volto/components/manage/Preferences/PersonalPreferences',
-    PersonalInformation:
-      '@plone/volto/components/manage/Preferences/PersonalInformation',
-    CreateTranslation:
-      '@plone/volto/components/manage/Multilingual/CreateTranslation',
-    TranslationObject:
-      '@plone/volto/components/manage/Multilingual/TranslationObject',
-    CompareLanguages:
-      '@plone/volto/components/manage/Multilingual/CompareLanguages',
-    FileView: '@plone/volto/components/theme/View/FileView',
-    ImageView: '@plone/volto/components/theme/View/ImageView',
-    NewsItemView: '@plone/volto/components/theme/View/NewsItemView',
-    EventView: '@plone/volto/components/theme/View/EventView',
-    ListingView: '@plone/volto/components/theme/View/ListingView',
-    SummaryView: '@plone/volto/components/theme/View/SummaryView',
-    TabularView: '@plone/volto/components/theme/View/TabularView',
-    AlbumView: '@plone/volto/components/theme/View/AlbumView',
-    Actions: '@plone/volto/components/manage/Actions/Actions',
-    Add: '@plone/volto/components/manage/Add/Add',
-    Circle: '@plone/volto/components/manage/Contents/circle',
-    Delete: '@plone/volto/components/manage/Delete/Delete',
-    Display: '@plone/volto/components/manage/Display/Display',
-    Edit: '@plone/volto/components/manage/Edit/Edit',
-    History: '@plone/volto/components/manage/History/History',
-    Sharing: '@plone/volto/components/manage/Sharing/Sharing',
-    Aliases: '@plone/volto/components/manage/Aliases/Aliases',
-    LinksToItem: '@plone/volto/components/manage/LinksToItem/LinksToItem',
-    Workflow: '@plone/volto/components/manage/Workflow/Workflow',
-    Messages: '@plone/volto/components/manage/Messages/Messages',
-    BlockChooser: '@plone/volto/components/manage/BlockChooser/BlockChooser',
-    BlockChooserButton:
-      '@plone/volto/components/manage/BlockChooser/BlockChooserButton',
-    Toolbar: '@plone/volto/components/manage/Toolbar/Toolbar',
-    Sidebar: '@plone/volto/components/manage/Sidebar/Sidebar',
-    SidebarPopup: '@plone/volto/components/manage/Sidebar/SidebarPopup',
-    SidebarPortal: '@plone/volto/components/manage/Sidebar/SidebarPortal',
-    PersonalTools: '@plone/volto/components/manage/Toolbar/PersonalTools',
-    More: '@plone/volto/components/manage/Toolbar/More',
-    Types: '@plone/volto/components/manage/Toolbar/Types',
-    Toast: '@plone/volto/components/manage/Toast/Toast',
-    ManageTranslations:
-      '@plone/volto/components/manage/Multilingual/ManageTranslations',
-    SearchTags: '@plone/volto/components/theme/Search/SearchTags',
-    DragDropList: '@plone/volto/components/manage/DragDropList/DragDropList',
-    EditDefaultBlock: '@plone/volto/components/manage/Blocks/Block/DefaultEdit',
-    EditDescriptionBlock:
-      '@plone/volto/components/manage/Blocks/Description/Edit',
-    EditTitleBlock: '@plone/volto/components/manage/Blocks/Title/Edit',
-    EditToCBlock: '@plone/volto/components/manage/Blocks/ToC/Edit',
-    EditTextBlock: '@plone/volto/components/manage/Blocks/Text/Edit',
-    EditImageBlock: '@plone/volto/components/manage/Blocks/Image/Edit',
-    EditListingBlock: '@plone/volto/components/manage/Blocks/Listing/Edit',
-    EditVideoBlock: '@plone/volto/components/manage/Blocks/Video/Edit',
-    EditBlock: '@plone/volto/components/manage/Blocks/Block/Edit',
-    EditHeroImageLeftBlock:
-      '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit',
-    ViewHeroImageLeftBlock:
-      '@plone/volto/components/manage/Blocks/HeroImageLeft/View',
-    EditMapBlock: '@plone/volto/components/manage/Blocks/Maps/Edit',
-    EditHTMLBlock: '@plone/volto/components/manage/Blocks/HTML/Edit',
-    ViewDefaultBlock: '@plone/volto/components/manage/Blocks/Block/DefaultView',
-    ViewDescriptionBlock:
-      '@plone/volto/components/manage/Blocks/Description/View',
-    ViewTitleBlock: '@plone/volto/components/manage/Blocks/Title/View',
-    ViewToCBlock: '@plone/volto/components/manage/Blocks/ToC/View',
-    ViewTextBlock: '@plone/volto/components/manage/Blocks/Text/View',
-    ViewImageBlock: '@plone/volto/components/manage/Blocks/Image/View',
-    ViewListingBlock: '@plone/volto/components/manage/Blocks/Listing/View',
-    ViewVideoBlock: '@plone/volto/components/manage/Blocks/Video/View',
-    ViewMapBlock: '@plone/volto/components/manage/Blocks/Maps/View',
-    ViewHTMLBlock: '@plone/volto/components/manage/Blocks/HTML/View',
-    ListingBlockBody:
-      '@plone/volto/components/manage/Blocks/Listing/ListingBody',
-    ListingBlockData:
-      '@plone/volto/components/manage/Blocks/Listing/ListingData',
-    ImageSidebar: '@plone/volto/components/manage/Blocks/Image/ImageSidebar',
-    MapsSidebar: '@plone/volto/components/manage/Blocks/Maps/MapsSidebar',
-    VideoSidebar: '@plone/volto/components/manage/Blocks/Video/VideoSidebar',
-    LeadImageSidebar:
-      '@plone/volto/components/manage/Blocks/LeadImage/LeadImageSidebar',
-    Style: '@plone/volto/components/manage/Blocks/Block/Style',
-    BlockSettingsSidebar:
-      '@plone/volto/components/manage/Blocks/Block/Settings',
-    BlockSettingsSchema: '@plone/volto/components/manage/Blocks/Block/Schema',
-    TextSettingsSchema: '@plone/volto/components/manage/Blocks/Text/Schema',
-    ImageSettingsSchema:
-      '@plone/volto/components/manage/Blocks/Image/LayoutSchema',
-    ToCSettingsSchema: '@plone/volto/components/manage/Blocks/ToC/Schema',
-    MaybeWrap: '@plone/volto/components/manage/MaybeWrap/MaybeWrap',
-    ContentMetadataTags:
-      '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags',
-    FormattedDate: '@plone/volto/components/theme/FormattedDate/FormattedDate',
-    FormattedRelativeDate:
-      '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate',
-    Popup: '@plone/volto/components/theme/Popup/Popup',
-    Component: '@plone/volto/components/theme/Component/Component',
-    App: '@plone/volto/components/theme/App/App',
-  },
-};
diff --git a/yarn.lock b/yarn.lock
index a4648959c1..bc78f09e52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2229,7 +2229,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.4":
+"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/types@npm:7.23.0"
   dependencies:
@@ -3420,7 +3420,6 @@ __metadata:
     babel-plugin-lodash: 3.3.4
     babel-plugin-react-intl: 5.1.17
     babel-plugin-root-import: 6.1.0
-    babel-plugin-transform-imports: 2.0.0
     babel-preset-razzle: 4.2.17
     bundlewatch: 0.3.3
     circular-dependency-plugin: 5.2.2
@@ -7592,16 +7591,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-imports@npm:2.0.0":
-  version: 2.0.0
-  resolution: "babel-plugin-transform-imports@npm:2.0.0"
-  dependencies:
-    "@babel/types": ^7.4
-    is-valid-path: ^0.1.1
-  checksum: 606112eec95ea5141a5528cd6cf94a6e00ef4127ffc0e3da98819eeec1b275508da958ca6324ce6ef221950a7b7127afd3678862bf62df954940cc17f6071c3a
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -15163,13 +15152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extglob@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-extglob@npm:1.0.0"
-  checksum: 5eea8517feeae5206547c0fc838c1416ec763b30093c286e1965a05f46b74a59ad391f912565f3b67c9c31cab4769ab9c35420e016b608acb47309be8d0d6e94
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.0, is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -15223,15 +15205,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "is-glob@npm:2.0.1"
-  dependencies:
-    is-extglob: ^1.0.0
-  checksum: 089f5f93640072491396a5f075ce73e949a90f35832b782bc49a6b7637d58e392d53cb0b395e059ccab70fcb82ff35d183f6f9ebbcb43227a1e02e3fed5430c9
-  languageName: node
-  linkType: hard
-
 "is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
@@ -15306,15 +15279,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-invalid-path@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "is-invalid-path@npm:0.1.0"
-  dependencies:
-    is-glob: ^2.0.0
-  checksum: 184dd40d9c7a765506e4fdcd7e664f86de68a4d5d429964b160255fe40de1b4323d1b4e6ea76ff87debf788a330e4f27cb1dfe5fc2420405e1c8a16a6ed87092
-  languageName: node
-  linkType: hard
-
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -15599,15 +15563,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-valid-path@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "is-valid-path@npm:0.1.1"
-  dependencies:
-    is-invalid-path: ^0.1.0
-  checksum: d6e716a4a999c75e32ff91ff1ea684fc9e69de05747ec4aaae049460beb971c79f474629dd87a5b4b662691f8323c1920f1b6f1dcdcb39b07082f0ff77b71da6
-  languageName: node
-  linkType: hard
-
 "is-weakmap@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-weakmap@npm:2.0.1"

From b1f39f7418c17b24363cc8d9d59cf14da8f30ae9 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Wed, 20 Dec 2023 00:23:06 +0100
Subject: [PATCH 08/27] fix chunk name clash

---
 src/components/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index dca6fd6990..304401e901 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -106,12 +106,12 @@ export { default as Circle } from '@plone/volto/components/manage/Contents/circl
 export { default as Delete } from '@plone/volto/components/manage/Delete/Delete';
 export const Diff = loadable(() =>
   import(
-    /* webpackChunkName: "Diff" */ '@plone/volto/components/manage/Diff/Diff'
+    /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/Diff'
   ),
 );
 export const DiffField = loadable(() =>
   import(
-    /* webpackChunkName: "Diff" */ '@plone/volto/components/manage/Diff/DiffField'
+    /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/DiffField'
   ),
 );
 export { default as Display } from '@plone/volto/components/manage/Display/Display';

From 5a0c0fc1f310c3b3615619fbe02703bd6a79cde1 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Sat, 23 Dec 2023 03:10:52 +0100
Subject: [PATCH 09/27] reinstalled @types/loadable__component

---
 packages/volto/package.json | 1 +
 pnpm-lock.yaml              | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/volto/package.json b/packages/volto/package.json
index 633198545e..3bacc58794 100644
--- a/packages/volto/package.json
+++ b/packages/volto/package.json
@@ -361,6 +361,7 @@
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "^29.5.8",
+    "@types/loadable__component": "^5.13.8",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17",
     "@types/react-test-renderer": "18.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d135d51c1..0bf6f91371 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1724,6 +1724,9 @@ importers:
       '@types/jest':
         specifier: ^29.5.8
         version: 29.5.8
+      '@types/loadable__component':
+        specifier: ^5.13.8
+        version: 5.13.8
       '@types/react':
         specifier: ^17.0.52
         version: 17.0.70
@@ -13445,6 +13448,12 @@ packages:
       '@types/node': 20.9.0
     dev: false
 
+  /@types/loadable__component@5.13.8:
+    resolution: {integrity: sha512-0FF/WihuPkR5IFOHiBzC95bSACvgQNUQCuNy1WF8F/lCBBHgS2SxarIk4CTjWM10A72ovpmXZDRcuAXZNS+/kQ==}
+    dependencies:
+      '@types/react': 18.2.27
+    dev: true
+
   /@types/lodash@4.14.201:
     resolution: {integrity: sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==}
 

From 8717f1ee5630eba6dad549da9aa04c8e587677d3 Mon Sep 17 00:00:00 2001
From: Mauro Amico <mauro.amico@gmail.com>
Date: Mon, 15 Jan 2024 23:25:44 +0100
Subject: [PATCH 10/27] fix(test): edit comment

---
 .../theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap b/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
index 39adecff93..859045c22f 100644
--- a/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
+++ b/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
@@ -18,6 +18,7 @@ exports[`CommentEditModal renders a comment edit modal component 1`] = `
           "description": "",
           "title": "Comment",
           "type": "string",
+          "widget": "textarea",
         },
       },
       "required": Array [

From 799348ec77532f60fd7df326bea311f995ea7f9f Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 16 Jan 2024 11:12:09 +0100
Subject: [PATCH 11/27] Cleanup and news item

---
 .../volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx  | 3 ++-
 packages/volto-slate/src/elementEditor/PluginEditor.jsx     | 2 +-
 packages/volto/.eslintignore                                | 1 -
 packages/volto/.storybook/main.js                           | 4 ++--
 packages/volto/news/5295.internal                           | 1 +
 .../src/components/manage/Blocks/Block/DefaultEdit.jsx      | 2 +-
 .../volto/src/components/manage/Blocks/Container/Edit.jsx   | 3 ++-
 .../src/components/manage/Blocks/Image/ImageSidebar.jsx     | 2 +-
 .../components/manage/Blocks/LeadImage/LeadImageSidebar.jsx | 2 +-
 .../volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx | 2 +-
 .../src/components/manage/Blocks/Search/SearchBlockEdit.jsx | 2 +-
 packages/volto/src/components/manage/Blocks/Table/Edit.jsx  | 2 +-
 packages/volto/src/components/manage/Blocks/Teaser/Data.jsx | 2 +-
 .../src/components/manage/Blocks/Video/VideoSidebar.jsx     | 2 +-
 .../manage/Controlpanels/Groups/GroupsControlpanel.jsx      | 2 +-
 .../src/components/manage/Controlpanels/Rules/AddRule.jsx   | 5 ++---
 .../src/components/manage/Controlpanels/Rules/EditRule.jsx  | 5 ++---
 .../components/manage/Controlpanels/Users/RenderUsers.jsx   | 2 +-
 .../manage/Controlpanels/Users/UsersControlpanel.jsx        | 4 ++--
 packages/volto/src/components/manage/Form/BlockDataForm.jsx | 2 +-
 packages/volto/src/components/manage/Form/Form.jsx          | 6 +++---
 packages/volto/src/components/manage/Form/Form.test.jsx     | 1 +
 packages/volto/src/components/manage/Form/InlineForm.jsx    | 2 +-
 .../components/manage/Multilingual/TranslationObject.jsx    | 3 +--
 24 files changed, 31 insertions(+), 31 deletions(-)
 create mode 100644 packages/volto/news/5295.internal

diff --git a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
index 08e362b7b9..eeb1450dd9 100644
--- a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
+++ b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
@@ -13,6 +13,7 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { SidebarPortal, BlockChooserButton } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
@@ -30,7 +31,7 @@ import { handleKey } from './keyboard';
 import TextBlockSchema from './schema';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { BlockDataForm } from '@plone/volto/components/manage/Form';
+
 import './css/editor.css';
 
 // TODO: refactor dropzone to separate component wrapper
diff --git a/packages/volto-slate/src/elementEditor/PluginEditor.jsx b/packages/volto-slate/src/elementEditor/PluginEditor.jsx
index b349eec03e..e33b87ec27 100644
--- a/packages/volto-slate/src/elementEditor/PluginEditor.jsx
+++ b/packages/volto-slate/src/elementEditor/PluginEditor.jsx
@@ -4,9 +4,9 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { ReactEditor } from 'slate-react';
 import { Icon as VoltoIcon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { setPluginOptions } from '@plone/volto-slate/actions';
 import BaseSchemaProvider from './SchemaProvider';
-import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import briefcaseSVG from '@plone/volto/icons/briefcase.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
diff --git a/packages/volto/.eslintignore b/packages/volto/.eslintignore
index c9897e24cb..a7c47537dc 100644
--- a/packages/volto/.eslintignore
+++ b/packages/volto/.eslintignore
@@ -1,2 +1 @@
 types/
-!.storybook
diff --git a/packages/volto/.storybook/main.js b/packages/volto/.storybook/main.js
index 30439831b6..76d33e53d4 100644
--- a/packages/volto/.storybook/main.js
+++ b/packages/volto/.storybook/main.js
@@ -1,8 +1,8 @@
 const webpack = require('webpack');
 const fs = require('fs');
 const path = require('path');
-// const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
-// const fileLoaderFinder = makeLoaderFinder('file-loader');
+const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+const fileLoaderFinder = makeLoaderFinder('file-loader');
 const projectRootPath = path.resolve('.');
 const lessPlugin = require('../webpack-plugins/webpack-less-plugin');
 const createConfig = require('../node_modules/razzle/config/createConfigAsync.js');
diff --git a/packages/volto/news/5295.internal b/packages/volto/news/5295.internal
new file mode 100644
index 0000000000..c6a8273fb7
--- /dev/null
+++ b/packages/volto/news/5295.internal
@@ -0,0 +1 @@
+Reduced JavaScript bundle size of the production build. Code split several internal modules: Controlpanels, Form, Widgets among other small ones. @pnicolli @deodorhunter
diff --git a/packages/volto/src/components/manage/Blocks/Block/DefaultEdit.jsx b/packages/volto/src/components/manage/Blocks/Block/DefaultEdit.jsx
index d72befa574..f8fab927af 100644
--- a/packages/volto/src/components/manage/Blocks/Block/DefaultEdit.jsx
+++ b/packages/volto/src/components/manage/Blocks/Block/DefaultEdit.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { useIntl } from 'react-intl';
 import { SidebarPortal } from '@plone/volto/components';
-import DefaultBlockView from './DefaultView';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import DefaultBlockView from './DefaultView';
 
 const DefaultBlockEdit = (props) => {
   const { blocksConfig = config.blocks.blocksConfig } = props;
diff --git a/packages/volto/src/components/manage/Blocks/Container/Edit.jsx b/packages/volto/src/components/manage/Blocks/Container/Edit.jsx
index 42f332d22f..6c7fa892cb 100644
--- a/packages/volto/src/components/manage/Blocks/Container/Edit.jsx
+++ b/packages/volto/src/components/manage/Blocks/Container/Edit.jsx
@@ -2,13 +2,14 @@ import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { SidebarPortal } from '@plone/volto/components';
+import { BlocksForm } from '@plone/volto/components/manage/Form';
 import PropTypes from 'prop-types';
 import ContainerData from './Data';
 import DefaultEditBlockWrapper from './EditBlockWrapper';
 import SimpleContainerToolbar from './SimpleContainerToolbar';
 import { v4 as uuid } from 'uuid';
 import { blocksFormGenerator } from '@plone/volto/helpers';
-import { BlocksForm } from '@plone/volto/components/manage/Form';
+
 import DefaultTemplateChooser from '@plone/volto/components/manage/TemplateChooser/TemplateChooser';
 
 import config from '@plone/volto/registry';
diff --git a/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx b/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx
index f76cd0954e..435492d5fc 100644
--- a/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx
+++ b/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx
@@ -4,8 +4,8 @@ import { Segment, Button } from 'semantic-ui-react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import { Icon, Image } from '@plone/volto/components';
-import { ImageSchema } from './schema';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { ImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
diff --git a/packages/volto/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx b/packages/volto/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
index df1ac3e1cc..5a126ec2cc 100644
--- a/packages/volto/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
+++ b/packages/volto/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx
@@ -8,8 +8,8 @@ import {
   CheckboxWidget,
   TextWidget,
 } from '@plone/volto/components/manage/Widgets';
-import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
 
 import imageSVG from '@plone/volto/icons/image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
diff --git a/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx b/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx
index 3907884daf..1bc2179f0b 100644
--- a/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx
+++ b/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx
@@ -3,8 +3,8 @@ import { MapsSchema } from './schema';
 import { useIntl, defineMessages } from 'react-intl';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import { Icon } from '@plone/volto/components';
-import { Segment } from 'semantic-ui-react';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { Segment } from 'semantic-ui-react';
 
 const messages = defineMessages({
   Maps: {
diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
index 517ea1ab21..136a354fa6 100644
--- a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
+++ b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -3,6 +3,7 @@ import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
 import { SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -11,7 +12,6 @@ import { SearchBlockViewComponent } from './SearchBlockView';
 import Schema from './schema';
 import { withSearch, withQueryString } from './hocs';
 import { cloneDeep } from 'lodash';
-import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   template: {
diff --git a/packages/volto/src/components/manage/Blocks/Table/Edit.jsx b/packages/volto/src/components/manage/Blocks/Table/Edit.jsx
index ac7c9221f5..cd6abc807e 100644
--- a/packages/volto/src/components/manage/Blocks/Table/Edit.jsx
+++ b/packages/volto/src/components/manage/Blocks/Table/Edit.jsx
@@ -14,6 +14,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Cell from '@plone/volto/components/manage/Blocks/Table/Cell';
 import { Icon } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
@@ -22,7 +23,6 @@ import colBeforeSVG from '@plone/volto/icons/column-before.svg';
 import colAfterSVG from '@plone/volto/icons/column-after.svg';
 import rowDeleteSVG from '@plone/volto/icons/row-delete.svg';
 import colDeleteSVG from '@plone/volto/icons/column-delete.svg';
-import { Field } from '@plone/volto/components/manage/Form';
 
 const getId = () => Math.floor(Math.random() * Math.pow(2, 24)).toString(32);
 
diff --git a/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx b/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx
index 182f0021e2..dace245b5d 100644
--- a/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx
+++ b/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
-import { isEmpty } from 'lodash';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { isEmpty } from 'lodash';
 
 import trashSVG from '@plone/volto/icons/delete.svg';
 
diff --git a/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx b/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx
index 056b2050be..1a5b110f44 100644
--- a/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx
+++ b/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx
@@ -3,8 +3,8 @@ import { VideoBlockSchema } from './schema';
 import { Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
-import videoSVG from '@plone/volto/icons/videocamera.svg';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import videoSVG from '@plone/volto/icons/videocamera.svg';
 
 const messages = defineMessages({
   Video: {
diff --git a/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx b/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
index 03b792321c..da54e323dd 100644
--- a/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
@@ -19,6 +19,7 @@ import {
   Error,
 } from '@plone/volto/components';
 import RenderGroups from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { Link } from 'react-router-dom';
 import { Helmet, messages } from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -43,7 +44,6 @@ import {
   Segment,
   Table,
 } from 'semantic-ui-react';
-import { ModalForm } from '@plone/volto/components/manage/Form';
 
 /**
  * GroupsControlpanel class.
diff --git a/packages/volto/src/components/manage/Controlpanels/Rules/AddRule.jsx b/packages/volto/src/components/manage/Controlpanels/Rules/AddRule.jsx
index 9841f96258..460b126ab1 100644
--- a/packages/volto/src/components/manage/Controlpanels/Rules/AddRule.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Rules/AddRule.jsx
@@ -19,10 +19,9 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar } from '@plone/volto/components';
-import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
 import { Field } from '@plone/volto/components/manage/Form';
+import { toast } from 'react-toastify';
 
 import { getContentRulesEvents, addNewRule } from '@plone/volto/actions';
 
diff --git a/packages/volto/src/components/manage/Controlpanels/Rules/EditRule.jsx b/packages/volto/src/components/manage/Controlpanels/Rules/EditRule.jsx
index 66edd3051c..0f615f1fa8 100644
--- a/packages/volto/src/components/manage/Controlpanels/Rules/EditRule.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Rules/EditRule.jsx
@@ -20,15 +20,14 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon, Toolbar } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import {
   getControlPanelRule,
   editRule,
   getContentRulesEvents,
 } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
-import { Field } from '@plone/volto/components/manage/Form';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
diff --git a/packages/volto/src/components/manage/Controlpanels/Users/RenderUsers.jsx b/packages/volto/src/components/manage/Controlpanels/Users/RenderUsers.jsx
index e4554c92c5..c1abfe3fd2 100644
--- a/packages/volto/src/components/manage/Controlpanels/Users/RenderUsers.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Users/RenderUsers.jsx
@@ -9,13 +9,13 @@ import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import editSVG from '@plone/volto/icons/editing.svg';
 import { Icon, Toast } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { messages } from '@plone/volto/helpers';
 import { toast } from 'react-toastify';
-import { ModalForm } from '@plone/volto/components/manage/Form';
 
 /**
  * UsersControlpanelUser class.
diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
index 04a2135265..8ca8983841 100644
--- a/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
@@ -20,6 +20,8 @@ import {
   Pagination,
   Error,
 } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
+import RenderUsers from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 import { Link } from 'react-router-dom';
 import { Helmet, messages } from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -43,8 +45,6 @@ import {
   Segment,
   Table,
 } from 'semantic-ui-react';
-import { ModalForm } from '@plone/volto/components/manage/Form';
-import RenderUsers from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 
 /**
  * UsersControlpanel class.
diff --git a/packages/volto/src/components/manage/Form/BlockDataForm.jsx b/packages/volto/src/components/manage/Form/BlockDataForm.jsx
index 4dcc052ddb..4814f021e7 100644
--- a/packages/volto/src/components/manage/Form/BlockDataForm.jsx
+++ b/packages/volto/src/components/manage/Form/BlockDataForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 import { InlineForm } from '@plone/volto/components/manage/Form';
+import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
diff --git a/packages/volto/src/components/manage/Form/Form.jsx b/packages/volto/src/components/manage/Form/Form.jsx
index 5c355c5f27..d766d1f307 100644
--- a/packages/volto/src/components/manage/Form/Form.jsx
+++ b/packages/volto/src/components/manage/Form/Form.jsx
@@ -4,6 +4,9 @@
  */
 
 import { Icon, Toast } from '@plone/volto/components';
+import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
+import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
+import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import {
   difference,
   FormValidation,
@@ -39,11 +42,8 @@ import {
 } from 'semantic-ui-react';
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
-import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
-import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import { setSidebarTab } from '@plone/volto/actions';
 import { compose } from 'redux';
-import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 
 /**
diff --git a/packages/volto/src/components/manage/Form/Form.test.jsx b/packages/volto/src/components/manage/Form/Form.test.jsx
index 02385900fc..f797bfead0 100644
--- a/packages/volto/src/components/manage/Form/Form.test.jsx
+++ b/packages/volto/src/components/manage/Form/Form.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+
 import Form from './Form';
 
 const mockStore = configureStore();
diff --git a/packages/volto/src/components/manage/Form/InlineForm.jsx b/packages/volto/src/components/manage/Form/InlineForm.jsx
index be02a57cc9..40c2e51ab9 100644
--- a/packages/volto/src/components/manage/Form/InlineForm.jsx
+++ b/packages/volto/src/components/manage/Form/InlineForm.jsx
@@ -12,8 +12,8 @@ import {
   arrayRange,
 } from '@plone/volto/helpers/Utils/Utils';
 import { Icon } from '@plone/volto/components';
-import { applySchemaDefaults } from '@plone/volto/helpers';
 import { Field } from '@plone/volto/components/manage/Form';
+import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
diff --git a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
index fa5bcef227..8f9a9572cc 100644
--- a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
+++ b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
@@ -3,7 +3,7 @@ import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
-import { Form } from '@plone/volto/components/manage/Form';
+import { Form, Field } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
 import {
@@ -14,7 +14,6 @@ import {
   toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
-import { Field } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   document: {

From ce863563cdcd04670ad51ddf1992210f6baecb91 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 16 Jan 2024 11:30:22 +0100
Subject: [PATCH 12/27] Added volto-slate news item

---
 packages/volto-slate/news/5295.internal | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/volto-slate/news/5295.internal

diff --git a/packages/volto-slate/news/5295.internal b/packages/volto-slate/news/5295.internal
new file mode 100644
index 0000000000..146a3378a2
--- /dev/null
+++ b/packages/volto-slate/news/5295.internal
@@ -0,0 +1 @@
+Update imports to work with the new code split components in Volto. @pnicolli

From d221aadac763fab0c89c6936459d826469e751dc Mon Sep 17 00:00:00 2001
From: Mauro Amico <mauro.amico@gmail.com>
Date: Tue, 16 Jan 2024 15:44:41 +0100
Subject: [PATCH 13/27] fix: remove loadable where component is composed

---
 .../src/components/manage/Widgets/index.tsx   | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/index.tsx b/packages/volto/src/components/manage/Widgets/index.tsx
index 844847c602..d41dfc80f8 100644
--- a/packages/volto/src/components/manage/Widgets/index.tsx
+++ b/packages/volto/src/components/manage/Widgets/index.tsx
@@ -1,5 +1,16 @@
 import loadable from '@loadable/component';
 
+import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
+// TODO: No overload matches this call error in TypeScript
+// export const UrlWidget = loadable(
+//   () =>
+//     import(
+//       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
+//     ),
+// );
+
+import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUrlWidget';
+
 export const AlignWidget = loadable(
   () =>
     import(
@@ -111,20 +122,15 @@ export const WysiwygWidget = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget'
     ),
 );
-
-export const UrlWidget = loadable(
-  () =>
-    import(
-      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
-    ),
-);
-
-export const InternalUrlWidget = loadable(
-  () =>
-    import(
-      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
-    ),
-);
+export { UrlWidget };
+export { InternalUrlWidget };
+// TODO: No overload matches this call error in TypeScript
+// export const InternalUrlWidget = loadable(
+//   () =>
+//     import(
+//       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
+//     ),
+// );
 
 export const EmailWidget = loadable(
   () =>

From f48fb47fc1d0263b32460a62d13314225805e97d Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Mon, 29 Jan 2024 12:26:51 +0100
Subject: [PATCH 14/27] Revert "fix: remove loadable where component is
 composed"

This reverts commit d221aadac763fab0c89c6936459d826469e751dc.
---
 .../src/components/manage/Widgets/index.tsx   | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/index.tsx b/packages/volto/src/components/manage/Widgets/index.tsx
index d41dfc80f8..844847c602 100644
--- a/packages/volto/src/components/manage/Widgets/index.tsx
+++ b/packages/volto/src/components/manage/Widgets/index.tsx
@@ -1,16 +1,5 @@
 import loadable from '@loadable/component';
 
-import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
-// TODO: No overload matches this call error in TypeScript
-// export const UrlWidget = loadable(
-//   () =>
-//     import(
-//       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
-//     ),
-// );
-
-import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUrlWidget';
-
 export const AlignWidget = loadable(
   () =>
     import(
@@ -122,15 +111,20 @@ export const WysiwygWidget = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget'
     ),
 );
-export { UrlWidget };
-export { InternalUrlWidget };
-// TODO: No overload matches this call error in TypeScript
-// export const InternalUrlWidget = loadable(
-//   () =>
-//     import(
-//       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
-//     ),
-// );
+
+export const UrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
+    ),
+);
+
+export const InternalUrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
+    ),
+);
 
 export const EmailWidget = loadable(
   () =>

From 0bc13f2d9853d8cada2439d3855544d2478b938a Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Mon, 29 Jan 2024 12:53:47 +0100
Subject: [PATCH 15/27] Removed useless compose

---
 .../volto/src/components/manage/Widgets/InternalUrlWidget.jsx  | 3 +--
 packages/volto/src/components/manage/Widgets/UrlWidget.jsx     | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/InternalUrlWidget.jsx b/packages/volto/src/components/manage/Widgets/InternalUrlWidget.jsx
index 520761f1f4..6f65f8566a 100644
--- a/packages/volto/src/components/manage/Widgets/InternalUrlWidget.jsx
+++ b/packages/volto/src/components/manage/Widgets/InternalUrlWidget.jsx
@@ -4,7 +4,6 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
@@ -178,4 +177,4 @@ InternalUrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(InternalUrlWidget);
+export default withObjectBrowser(InternalUrlWidget);
diff --git a/packages/volto/src/components/manage/Widgets/UrlWidget.jsx b/packages/volto/src/components/manage/Widgets/UrlWidget.jsx
index 81e39492db..60e7b348bc 100644
--- a/packages/volto/src/components/manage/Widgets/UrlWidget.jsx
+++ b/packages/volto/src/components/manage/Widgets/UrlWidget.jsx
@@ -4,7 +4,6 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
@@ -183,4 +182,4 @@ UrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(UrlWidget);
+export default withObjectBrowser(UrlWidget);

From 2e399a04cea65a37efbfa3fed6a5ba0aac922d93 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Mon, 29 Jan 2024 23:53:29 +0100
Subject: [PATCH 16/27] Fix some cypress tests

---
 packages/volto/cypress/support/e2e.js         |  9 +++
 .../tests/core/controlpanels/upgrade.js       |  2 +-
 .../manage/Controlpanels/Controlpanels.jsx    | 64 +++++--------------
 3 files changed, 25 insertions(+), 50 deletions(-)

diff --git a/packages/volto/cypress/support/e2e.js b/packages/volto/cypress/support/e2e.js
index 4698c07b09..a103bdc2c4 100644
--- a/packages/volto/cypress/support/e2e.js
+++ b/packages/volto/cypress/support/e2e.js
@@ -5,6 +5,15 @@ import './commands';
 import { setupGuillotina, tearDownGuillotina } from './guillotina';
 import { setup, teardown } from './reset-fixture';
 
+Cypress.on('uncaught:exception', (err) => {
+  // We are getting this error in Cypress tests but we don't use ResizeObserver ourselves
+  if (/ResizeObserver loop/.test(err.message)) {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false;
+  }
+});
+
 before(function () {
   if (Cypress.env('API') === 'guillotina') {
     tearDownGuillotina({ allowFail: true });
diff --git a/packages/volto/cypress/tests/core/controlpanels/upgrade.js b/packages/volto/cypress/tests/core/controlpanels/upgrade.js
index 20dd2fbbb9..3926b0fd71 100644
--- a/packages/volto/cypress/tests/core/controlpanels/upgrade.js
+++ b/packages/volto/cypress/tests/core/controlpanels/upgrade.js
@@ -39,7 +39,7 @@ describe('Upgrade Site Tests', () => {
       body: {
         ...getUpgradeNeedsUpgrade,
       },
-    }).as('getSystemNeedsUpdate');
+    }).as('getUpgradeNeedsUpgrade');
     cy.navigate('controlpanel');
     cy.wait('@getSystemNeedsUpdate');
 
diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
index 41c40341d0..bd5b5164b0 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -3,15 +3,13 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Portal } from 'react-portal';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
 import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
@@ -100,18 +98,24 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-}) {
+export default function Controlpanels({ location }) {
+  const { pathname } = location;
+  const dispatch = useDispatch();
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
 
   useEffect(() => {
     setIsClient(true);
-  }, []);
+    dispatch(listControlpanels());
+    dispatch(getSystemInformation());
+  }, [dispatch]);
 
   const error = controlpanelsRequest?.error;
 
@@ -282,41 +286,3 @@ function Controlpanels({
     </div>
   );
 }
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Controlpanels.propTypes = {
-  controlpanels: PropTypes.arrayOf(
-    PropTypes.shape({
-      '@id': PropTypes.string,
-      group: PropTypes.string,
-      title: PropTypes.string,
-    }),
-  ).isRequired,
-  pathname: PropTypes.string.isRequired,
-};
-
-export default compose(
-  connect((state, props) => ({
-    controlpanels: state.controlpanels.controlpanels,
-    controlpanelsRequest: state.controlpanels.list,
-    pathname: props.location.pathname,
-    systemInformation: state.controlpanels.systeminformation,
-  })),
-
-  asyncConnect([
-    {
-      key: 'controlpanels',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(listControlpanels()),
-    },
-    {
-      key: 'systemInformation',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(getSystemInformation()),
-    },
-  ]),
-)(Controlpanels);

From 2121682ef42713ec26d6592d0f5527ca85da9608 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 2 Apr 2024 12:40:46 +0200
Subject: [PATCH 17/27] restore new deps

---
 packages/volto/package.json |  1 +
 pnpm-lock.yaml              | 76 +++++++++++++++++++++++++++----------
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/packages/volto/package.json b/packages/volto/package.json
index bb11c50826..232f79ff6d 100644
--- a/packages/volto/package.json
+++ b/packages/volto/package.json
@@ -301,6 +301,7 @@
     "@testing-library/react": "14.2.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "^29.5.8",
+    "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce9cad2a66..b3e686aeb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1911,6 +1911,9 @@ importers:
       '@types/jest':
         specifier: ^29.5.8
         version: 29.5.8
+      '@types/loadable__component':
+        specifier: ^5.13.9
+        version: 5.13.9
       '@types/lodash':
         specifier: ^4.14.201
         version: 4.14.201
@@ -3074,6 +3077,16 @@ packages:
       '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
 
+  /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.3):
+    resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
     engines: {node: '>=6.9.0'}
@@ -3145,6 +3158,16 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.3):
+    resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
     engines: {node: '>=6.9.0'}
@@ -3783,6 +3806,20 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.23.3):
+    resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.3)
+      '@babel/types': 7.23.9
+    dev: true
+
   /@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.23.9):
     resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==}
     engines: {node: '>=6.9.0'}
@@ -7937,8 +7974,8 @@ packages:
       react-refresh: 0.14.0
       schema-utils: 3.3.0
       source-map: 0.7.4
-      webpack: 5.90.1
-      webpack-dev-server: 4.11.1(debug@4.3.2)(webpack@5.76.1)
+      webpack: 5.90.1(esbuild@0.19.9)
+      webpack-dev-server: 4.11.1(debug@4.3.2)(webpack@5.90.1)
     dev: true
 
   /@pnpm/config.env-replace@1.1.0:
@@ -10014,12 +10051,6 @@ packages:
       '@sinonjs/commons': 3.0.0
     dev: true
 
-  /@sinonjs/fake-timers@11.2.2:
-    resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
-    dependencies:
-      '@sinonjs/commons': 3.0.0
-    dev: true
-
   /@sinonjs/fake-timers@6.0.1:
     resolution: {integrity: sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==}
     dependencies:
@@ -13569,10 +13600,10 @@ packages:
       '@types/node': 20.9.0
     dev: false
 
-  /@types/loadable__component@5.13.8:
-    resolution: {integrity: sha512-0FF/WihuPkR5IFOHiBzC95bSACvgQNUQCuNy1WF8F/lCBBHgS2SxarIk4CTjWM10A72ovpmXZDRcuAXZNS+/kQ==}
+  /@types/loadable__component@5.13.9:
+    resolution: {integrity: sha512-QWOtIkwZqHNdQj3nixQ8oyihQiTMKZLk/DNuvNxMSbTfxf47w+kqcbnxlUeBgAxdOtW0Dh48dTAIp83iJKtnrQ==}
     dependencies:
-      '@types/react': 18.2.27
+      '@types/react': 18.2.60
     dev: true
 
   /@types/lodash@4.14.201:
@@ -20966,7 +20997,7 @@ packages:
     peerDependencies:
       eslint-plugin-import: '>=1.4.0'
     dependencies:
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
     dev: true
 
   /eslint-import-resolver-babel-plugin-root-import@1.1.1(babel-plugin-root-import@6.1.0)(eslint-plugin-import@2.29.1):
@@ -20977,7 +21008,7 @@ packages:
     dependencies:
       babel-plugin-root-import: 6.1.0
       eslint-import-resolver-node: 0.2.3
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
       json5: 0.5.1
     transitivePeerDependencies:
       - supports-color
@@ -21070,7 +21101,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.4.2)
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.49.0
       eslint-import-resolver-node: 0.3.9
@@ -21237,8 +21268,8 @@ packages:
       '@babel/plugin-transform-react-jsx': ^7.14.9
       eslint: ^8.1.0
     dependencies:
-      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9)
-      '@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.23.9)
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.3)
+      '@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.23.3)
       eslint: 8.49.0
       lodash: 4.17.21
       string-natural-compare: 3.0.1
@@ -21324,7 +21355,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.2.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.4.2)
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
@@ -31020,6 +31051,9 @@ packages:
     resolution: {integrity: sha512-W+gxAq7aQ9dJIg/XLKGcRT0cvnStFAQHPaI0pvD0U2l6IVLueUAm3nwN7lkY62zZNmlvNx6jNtE4wlbS+CyqSg==}
     engines: {node: '>= 12.0.0'}
     hasBin: true
+    peerDependenciesMeta:
+      '@parcel/core':
+        optional: true
     dependencies:
       '@parcel/config-default': 2.12.0(@parcel/core@2.12.0)(postcss@8.4.35)(typescript@5.4.2)
       '@parcel/core': 2.12.0
@@ -36707,7 +36741,7 @@ packages:
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.90.1
+      webpack: 5.90.1(esbuild@0.19.9)
     dev: true
 
   /style-loader@3.3.1(webpack@5.76.1):
@@ -36776,7 +36810,7 @@ packages:
     peerDependencies:
       stylelint: '>=11'
     dependencies:
-      stylelint: 16.2.1(typescript@5.2.2)
+      stylelint: 16.2.1(typescript@5.4.2)
       stylelint-order: 6.0.4(stylelint@16.2.1)
     dev: true
 
@@ -36820,7 +36854,7 @@ packages:
     dependencies:
       postcss: 8.4.35
       postcss-sorting: 8.0.2(postcss@8.4.35)
-      stylelint: 16.2.1(typescript@5.2.2)
+      stylelint: 16.2.1(typescript@5.4.2)
     dev: true
 
   /stylelint-prettier@4.0.2(prettier@3.0.3)(stylelint@15.10.3):
@@ -36844,7 +36878,7 @@ packages:
     dependencies:
       prettier: 3.2.5
       prettier-linter-helpers: 1.0.0
-      stylelint: 16.2.1(typescript@5.2.2)
+      stylelint: 16.2.1(typescript@5.4.2)
     dev: true
 
   /stylelint-scss@4.7.0(stylelint@15.10.3):

From 8cd2b524ad0460c2da6d5dfbaa5df6b667eee262 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 2 Apr 2024 18:26:24 +0200
Subject: [PATCH 18/27] unit tests

---
 .../__snapshots__/Settings.test.jsx.snap      |  12 +-
 .../__snapshots__/ImageSidebar.test.jsx.snap  | 112 +++++-----
 .../__snapshots__/MapsSidebar.test.jsx.snap   |  58 +++--
 .../__snapshots__/VideoSidebar.test.jsx.snap  |  60 +++---
 .../ContentsPropertiesModal.test.jsx.snap     | 100 ++++-----
 .../ContentsRenameModal.test.jsx.snap         |  50 +++--
 .../ContentsTagsModal.test.jsx.snap           |  62 +++---
 .../manage/Controlpanels/Controlpanels.jsx    |  64 ++++--
 .../Rules/__snapshots__/AddRule.test.jsx.snap |  72 +++++--
 .../__snapshots__/EditRule.test.jsx.snap      |  72 +++++--
 .../__snapshots__/Aliases.test.jsx.snap       |   6 +-
 .../__snapshots__/ContentType.test.jsx.snap   |  15 +-
 .../__snapshots__/Controlpanel.test.jsx.snap  |  18 +-
 .../UndoControlpanel.test.jsx.snap            | 103 ++++-----
 .../Edit/__snapshots__/Edit.test.jsx.snap     |  30 +--
 .../manage/Form/__mocks__/index.tsx           |  59 ++++-
 .../__snapshots__/BlockDataForm.test.jsx.snap |  66 +++++-
 .../ChangePassword.test.jsx.snap              |  85 ++++----
 .../VocabularyTermsWidget.test.jsx.snap       | 203 ++++--------------
 .../CommentEditModal.test.jsx.snap            |  44 ++--
 .../__snapshots__/Comments.test.jsx.snap      |  44 ++--
 .../__snapshots__/ContactForm.test.jsx.snap   | 193 +++++++++--------
 .../RequestPasswordReset.test.jsx.snap        |  44 ++--
 .../__snapshots__/Register.test.jsx.snap      |  56 +++--
 packages/volto/src/config/ControlPanels.js    |   2 +-
 25 files changed, 855 insertions(+), 775 deletions(-)

diff --git a/packages/volto/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap b/packages/volto/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
index b6db1609ac..a629ca9637 100644
--- a/packages/volto/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
+++ b/packages/volto/src/components/manage/Blocks/Block/__snapshots__/Settings.test.jsx.snap
@@ -3,7 +3,17 @@
 exports[`Settings renders block settings form without schema enhancers 1`] = `
 <div>
   <div
-    data-schema="[object Object]"
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"title\\": \\"Default\\",
+      \\"id\\": \\"default\\",
+      \\"fields\\": []
+    }
+  ],
+  \\"properties\\": {},
+  \\"required\\": []
+}"
     id="BlockDataForm"
   />
 </div>
diff --git a/packages/volto/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap b/packages/volto/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
index 01a0f1f537..ebfafbc06e 100644
--- a/packages/volto/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
+++ b/packages/volto/src/components/manage/Blocks/Image/__snapshots__/ImageSidebar.test.jsx.snap
@@ -58,70 +58,56 @@ Array [
     />
   </div>,
   <div
-    data-schema={
-      Object {
-        "fieldsets": Array [
-          Object {
-            "fields": Array [
-              "alt",
-              "align",
-              "size",
-            ],
-            "id": "default",
-            "title": "Default",
-          },
-          Object {
-            "fields": Array [
-              "href",
-              "openLinkInNewTab",
-            ],
-            "id": "link_settings",
-            "title": "Link settings",
-          },
-        ],
-        "properties": Object {
-          "align": Object {
-            "title": "Alignment",
-            "widget": "align",
-          },
-          "alt": Object {
-            "description": <React.Fragment>
-              <a
-                href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
-                rel="noopener noreferrer"
-                target="_blank"
-                title="Open in a new tab"
-              >
-                Describe the purpose of the image.
-              </a>
-               
-              Leave empty if the image is purely decorative.
-            </React.Fragment>,
-            "title": "Alt text",
-          },
-          "href": Object {
-            "allowExternals": true,
-            "mode": "link",
-            "selectedItemAttrs": Array [
-              "Title",
-              "Description",
-              "hasPreviewImage",
-            ],
-            "title": "Link to",
-            "widget": "object_browser",
-          },
-          "openLinkInNewTab": Object {
-            "title": "Open in a new tab",
-            "type": "boolean",
-          },
-          "size": Object {
-            "title": "Image size",
-            "widget": "image_size",
-          },
-        },
-        "required": Array [],
-      }
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"alt\\",
+        \\"align\\",
+        \\"size\\"
+      ]
+    },
+    {
+      \\"id\\": \\"link_settings\\",
+      \\"title\\": \\"Link settings\\",
+      \\"fields\\": [
+        \\"href\\",
+        \\"openLinkInNewTab\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"alt\\": {
+      \\"title\\": \\"Alt text\\"
+    },
+    \\"align\\": {
+      \\"title\\": \\"Alignment\\",
+      \\"widget\\": \\"align\\"
+    },
+    \\"size\\": {
+      \\"title\\": \\"Image size\\",
+      \\"widget\\": \\"image_size\\"
+    },
+    \\"href\\": {
+      \\"title\\": \\"Link to\\",
+      \\"widget\\": \\"object_browser\\",
+      \\"mode\\": \\"link\\",
+      \\"selectedItemAttrs\\": [
+        \\"Title\\",
+        \\"Description\\",
+        \\"hasPreviewImage\\"
+      ],
+      \\"allowExternals\\": true
+    },
+    \\"openLinkInNewTab\\": {
+      \\"title\\": \\"Open in a new tab\\",
+      \\"type\\": \\"boolean\\"
     }
+  },
+  \\"required\\": []
+}"
     id="BlockDataForm"
   />,
 ]
diff --git a/packages/volto/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap b/packages/volto/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
index 07d0059cd8..fe58961939 100644
--- a/packages/volto/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
+++ b/packages/volto/src/components/manage/Blocks/Maps/__snapshots__/MapsSidebar.test.jsx.snap
@@ -2,37 +2,35 @@
 
 exports[`renders an Image Block Sidebar component 1`] = `
 <div
-  data-schema={
-    Object {
-      "block": "Maps",
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "url",
-            "title",
-            "align",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "align": Object {
-          "title": "Alignment",
-          "widget": "align",
-        },
-        "title": Object {
-          "title": "Alt text",
-        },
-        "url": Object {
-          "title": "Maps URL",
-          "widget": "url",
-        },
-      },
-      "required": Array [],
-      "title": "Maps",
+  data-schema="{
+  \\"title\\": \\"Maps\\",
+  \\"block\\": \\"Maps\\",
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"url\\",
+        \\"title\\",
+        \\"align\\"
+      ]
     }
-  }
+  ],
+  \\"properties\\": {
+    \\"url\\": {
+      \\"title\\": \\"Maps URL\\",
+      \\"widget\\": \\"url\\"
+    },
+    \\"title\\": {
+      \\"title\\": \\"Alt text\\"
+    },
+    \\"align\\": {
+      \\"title\\": \\"Alignment\\",
+      \\"widget\\": \\"align\\"
+    }
+  },
+  \\"required\\": []
+}"
   id="BlockDataForm"
 />
 `;
diff --git a/packages/volto/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap b/packages/volto/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
index 85d2d87a7a..2c5dec104c 100644
--- a/packages/volto/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
+++ b/packages/volto/src/components/manage/Blocks/Video/__snapshots__/VideoSidebar.test.jsx.snap
@@ -2,38 +2,36 @@
 
 exports[`renders an Image Block Sidebar component 1`] = `
 <div
-  data-schema={
-    Object {
-      "block": "Video",
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "url",
-            "preview_image",
-            "align",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "align": Object {
-          "title": "Alignment",
-          "widget": "align",
-        },
-        "preview_image": Object {
-          "title": "Preview Image URL",
-          "widget": "url",
-        },
-        "url": Object {
-          "title": "Video URL",
-          "widget": "url",
-        },
-      },
-      "required": Array [],
-      "title": "Video",
+  data-schema="{
+  \\"title\\": \\"Video\\",
+  \\"block\\": \\"Video\\",
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"url\\",
+        \\"preview_image\\",
+        \\"align\\"
+      ]
     }
-  }
+  ],
+  \\"properties\\": {
+    \\"url\\": {
+      \\"title\\": \\"Video URL\\",
+      \\"widget\\": \\"url\\"
+    },
+    \\"preview_image\\": {
+      \\"title\\": \\"Preview Image URL\\",
+      \\"widget\\": \\"url\\"
+    },
+    \\"align\\": {
+      \\"title\\": \\"Alignment\\",
+      \\"widget\\": \\"align\\"
+    }
+  },
+  \\"required\\": []
+}"
   id="BlockDataForm"
 />
 `;
diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
index de30a2856a..94d1ada1f8 100644
--- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
+++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsPropertiesModal.test.jsx.snap
@@ -1,55 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContentsPropertiesModal renders a contents properties modal component 1`] = `
-<div
-  data-schema={
-    Object {
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "effective",
-            "expires",
-            "rights",
-            "creators",
-            "exclude_from_nav",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "creators": Object {
-          "description": "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.",
-          "title": "Creators",
-          "type": "array",
-        },
-        "effective": Object {
-          "description": "If this date is in the future, the content will not show up in listings and searches until this date.",
-          "title": "Publishing Date",
-          "type": "string",
-          "widget": "datetime",
-        },
-        "exclude_from_nav": Object {
-          "description": "If selected, this item will not appear in the navigation tree",
-          "title": "Exclude from navigation",
-          "type": "boolean",
-        },
-        "expires": Object {
-          "description": "When this date is reached, the content will nolonger be visible in listings and searches.",
-          "title": "Expiration Date",
-          "type": "string",
-          "widget": "datetime",
-        },
-        "rights": Object {
-          "description": "Copyright statement or other rights information on this item.",
-          "title": "Rights",
-          "type": "string",
-          "widget": "textarea",
-        },
-      },
-      "required": Array [],
+<div>
+  <div
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"effective\\",
+        \\"expires\\",
+        \\"rights\\",
+        \\"creators\\",
+        \\"exclude_from_nav\\"
+      ]
     }
-  }
-  id="ModalForm"
-/>
+  ],
+  \\"properties\\": {
+    \\"effective\\": {
+      \\"description\\": \\"If this date is in the future, the content will not show up in listings and searches until this date.\\",
+      \\"title\\": \\"Publishing Date\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"datetime\\"
+    },
+    \\"expires\\": {
+      \\"description\\": \\"When this date is reached, the content will nolonger be visible in listings and searches.\\",
+      \\"title\\": \\"Expiration Date\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"datetime\\"
+    },
+    \\"rights\\": {
+      \\"description\\": \\"Copyright statement or other rights information on this item.\\",
+      \\"title\\": \\"Rights\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"textarea\\"
+    },
+    \\"creators\\": {
+      \\"description\\": \\"Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.\\",
+      \\"title\\": \\"Creators\\",
+      \\"type\\": \\"array\\"
+    },
+    \\"exclude_from_nav\\": {
+      \\"description\\": \\"If selected, this item will not appear in the navigation tree\\",
+      \\"title\\": \\"Exclude from navigation\\",
+      \\"type\\": \\"boolean\\"
+    }
+  },
+  \\"required\\": []
+}"
+    id="ModalForm"
+  />
+</div>
 `;
diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
index 21f69c89d9..8398312a17 100644
--- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
+++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsRenameModal.test.jsx.snap
@@ -2,33 +2,31 @@
 
 exports[`ContentsRenameModal renders a contents rename modal component 1`] = `
 <div
-  data-schema={
-    Object {
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "0_title",
-            "0_id",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "0_id": Object {
-          "description": "This name will be displayed in the URL.",
-          "title": "Short name",
-          "type": "id",
-        },
-        "0_title": Object {
-          "description": "",
-          "title": "Title",
-          "type": "string",
-        },
-      },
-      "required": Array [],
+  data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"0_title\\",
+        \\"0_id\\"
+      ]
     }
-  }
+  ],
+  \\"properties\\": {
+    \\"0_title\\": {
+      \\"title\\": \\"Title\\",
+      \\"type\\": \\"string\\",
+      \\"description\\": \\"\\"
+    },
+    \\"0_id\\": {
+      \\"title\\": \\"Short name\\",
+      \\"type\\": \\"id\\",
+      \\"description\\": \\"This name will be displayed in the URL.\\"
+    }
+  },
+  \\"required\\": []
+}"
   id="ModalForm"
 />
 `;
diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
index 7950678889..b39ee1a3a4 100644
--- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
+++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsTagsModal.test.jsx.snap
@@ -2,39 +2,37 @@
 
 exports[`ContentsTagsModal renders a contents tags modal component 1`] = `
 <div
-  data-schema={
-    Object {
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "tags_to_remove",
-            "tags_to_add",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "tags_to_add": Object {
-          "items": Object {
-            "vocabulary": Object {
-              "@id": "plone.app.vocabularies.Keywords",
-            },
-          },
-          "title": "Tags to add",
-          "type": "array",
-          "widget": "token",
-        },
-        "tags_to_remove": Object {
-          "choices": Array [],
-          "title": "Tags to remove",
-          "type": "array",
-          "widget": "array",
-        },
-      },
-      "required": Array [],
+  data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"tags_to_remove\\",
+        \\"tags_to_add\\"
+      ]
     }
-  }
+  ],
+  \\"properties\\": {
+    \\"tags_to_remove\\": {
+      \\"type\\": \\"array\\",
+      \\"widget\\": \\"array\\",
+      \\"title\\": \\"Tags to remove\\",
+      \\"choices\\": []
+    },
+    \\"tags_to_add\\": {
+      \\"type\\": \\"array\\",
+      \\"widget\\": \\"token\\",
+      \\"title\\": \\"Tags to add\\",
+      \\"items\\": {
+        \\"vocabulary\\": {
+          \\"@id\\": \\"plone.app.vocabularies.Keywords\\"
+        }
+      }
+    }
+  },
+  \\"required\\": []
+}"
   id="ModalForm"
 />
 `;
diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
index 27fdbd9290..e43cef310c 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -3,13 +3,15 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, asyncConnect } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
+import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
 import { createPortal } from 'react-dom';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
 import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
@@ -98,24 +100,18 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-export default function Controlpanels({ location }) {
-  const { pathname } = location;
-  const dispatch = useDispatch();
+function Controlpanels({
+  controlpanels,
+  controlpanelsRequest,
+  systemInformation,
+  pathname,
+}) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
-  const controlpanels = useSelector(
-    (state) => state.controlpanels.controlpanels,
-  );
-  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
-  const systemInformation = useSelector(
-    (state) => state.controlpanels.systeminformation,
-  );
 
   useEffect(() => {
     setIsClient(true);
-    dispatch(listControlpanels());
-    dispatch(getSystemInformation());
-  }, [dispatch]);
+  }, []);
 
   const error = controlpanelsRequest?.error;
 
@@ -286,3 +282,41 @@ export default function Controlpanels({ location }) {
     </div>
   );
 }
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Controlpanels.propTypes = {
+  controlpanels: PropTypes.arrayOf(
+    PropTypes.shape({
+      '@id': PropTypes.string,
+      group: PropTypes.string,
+      title: PropTypes.string,
+    }),
+  ).isRequired,
+  pathname: PropTypes.string.isRequired,
+};
+
+export default compose(
+  connect((state, props) => ({
+    controlpanels: state.controlpanels.controlpanels,
+    controlpanelsRequest: state.controlpanels.list,
+    pathname: props.location.pathname,
+    systemInformation: state.controlpanels.systeminformation,
+  })),
+
+  asyncConnect([
+    {
+      key: 'controlpanels',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listControlpanels()),
+    },
+    {
+      key: 'systemInformation',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(getSystemInformation()),
+    },
+  ]),
+)(Controlpanels);
diff --git a/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
index fe2b5f4ccb..ab499ca1d9 100644
--- a/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/AddRule.test.jsx.snap
@@ -37,9 +37,39 @@ exports[`AddRule renders rules add interface 1`] = `
                   class="stretched row"
                 >
                   <div
-                    className="Field"
+                    class="column"
                   >
-                    Title
+                    <div
+                      class="Field"
+                    >
+                      Title
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="stretched row"
+                >
+                  <div
+                    class="column"
+                  >
+                    <div
+                      class="Field"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="stretched row"
+                >
+                  <div
+                    class="column"
+                  >
+                    <div
+                      class="Field"
+                    >
+                      Triggering event
+                    </div>
                   </div>
                 </div>
               </div>
@@ -54,15 +84,16 @@ exports[`AddRule renders rules add interface 1`] = `
               <div
                 class="ui checkbox"
               >
-                <div
-                  className="column"
-                >
-                  <div
-                    className="Field"
-                  >
-                    Description
-                  </div>
-                </div>
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  type="checkbox"
+                  value=""
+                />
+                <label>
+                  Enabled
+                </label>
               </div>
               <p
                 style="color: rgb(135, 143, 147); padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.9rem;"
@@ -80,15 +111,16 @@ exports[`AddRule renders rules add interface 1`] = `
               <div
                 class="ui checkbox"
               >
-                <div
-                  className="column"
-                >
-                  <div
-                    className="Field"
-                  >
-                    Triggering event
-                  </div>
-                </div>
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  type="checkbox"
+                  value=""
+                />
+                <label>
+                  Stop Executing rules
+                </label>
               </div>
               <p
                 style="color: rgb(135, 143, 147); padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.9rem;"
diff --git a/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
index c0909de9ac..5e55ca65e5 100644
--- a/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/Rules/__snapshots__/EditRule.test.jsx.snap
@@ -37,9 +37,39 @@ exports[`EditRule renders rules edit interface 1`] = `
                   class="stretched row"
                 >
                   <div
-                    className="Field"
+                    class="column"
                   >
-                    Title
+                    <div
+                      class="Field"
+                    >
+                      Title
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="stretched row"
+                >
+                  <div
+                    class="column"
+                  >
+                    <div
+                      class="Field"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="stretched row"
+                >
+                  <div
+                    class="column"
+                  >
+                    <div
+                      class="Field"
+                    >
+                      Triggering event
+                    </div>
                   </div>
                 </div>
               </div>
@@ -54,15 +84,16 @@ exports[`EditRule renders rules edit interface 1`] = `
               <div
                 class="ui checkbox"
               >
-                <div
-                  className="column"
-                >
-                  <div
-                    className="Field"
-                  >
-                    Description
-                  </div>
-                </div>
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  type="checkbox"
+                  value=""
+                />
+                <label>
+                  Enabled
+                </label>
               </div>
               <p
                 style="color: rgb(135, 143, 147); padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.9rem;"
@@ -80,15 +111,16 @@ exports[`EditRule renders rules edit interface 1`] = `
               <div
                 class="ui checkbox"
               >
-                <div
-                  className="column"
-                >
-                  <div
-                    className="Field"
-                  >
-                    Triggering event
-                  </div>
-                </div>
+                <input
+                  class="hidden"
+                  readonly=""
+                  tabindex="0"
+                  type="checkbox"
+                  value=""
+                />
+                <label>
+                  Stop Executing rules
+                </label>
               </div>
               <p
                 style="color: rgb(135, 143, 147); padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.9rem;"
diff --git a/packages/volto/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
index 79e00ac7e7..2a16d8f8f2 100644
--- a/packages/volto/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/__snapshots__/Aliases.test.jsx.snap
@@ -180,7 +180,11 @@ exports[`Aliases renders an aliases control component 1`] = `
               </div>
               <div
                 class="field"
-              />
+              >
+                <div
+                  id="DatetimeWidget"
+                />
+              </div>
               <button
                 class="ui primary button"
               >
diff --git a/packages/volto/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
index 83bf6812b6..1303a5bb04 100644
--- a/packages/volto/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/__snapshots__/ContentType.test.jsx.snap
@@ -12,15 +12,16 @@ exports[`ContentType renders dexterity content-type component 1`] = `
       Page Content Type
     </div>
     <div
-      id="form"
+      data-schema="{}"
+      id="Form"
     />
   </div>
   <div
-    data-schema={Object {}}
-    id="Form"
-  />
-  <div
-    id="Portal"
-  />
+    id="toolbar"
+  >
+    <div
+      id="Portal"
+    />
+  </div>
 </div>
 `;
diff --git a/packages/volto/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
index 0deb138ce2..2467ec704c 100644
--- a/packages/volto/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/__snapshots__/Controlpanel.test.jsx.snap
@@ -6,14 +6,16 @@ exports[`Controlpanel renders a controlpanel component 1`] = `
     id="page-controlpanel"
   >
     <div
-      data-schema={
-        Object {
-          "fieldsets": Array [],
-          "properties": Object {},
-        }
-      }
-      id="Form"
-    />
+      class="ui container"
+    >
+      <div
+        data-schema="{
+  \\"fieldsets\\": [],
+  \\"properties\\": {}
+}"
+        id="Form"
+      />
+    </div>
   </div>
   <div
     id="toolbar"
diff --git a/packages/volto/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap b/packages/volto/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
index b0cc8db668..dc7569f0bb 100644
--- a/packages/volto/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
+++ b/packages/volto/src/components/manage/Controlpanels/__snapshots__/UndoControlpanel.test.jsx.snap
@@ -10,61 +10,7 @@ exports[`UndoControlpanel renders undo controlpanel component 1`] = `
       class="ui raised segments"
     >
       <div
-        data-schema={
-          Object {
-            "fieldsets": Array [
-              Object {
-                "fields": Array [
-                  "sortingTypes",
-                ],
-                "id": "default",
-                "title": "Default",
-              },
-            ],
-            "properties": Object {
-              "sortByDate": Object {
-                "title": "Enter Date and Time",
-                "type": "date",
-              },
-              "sortByPath": Object {
-                "title": "Enter Path",
-                "type": "string",
-              },
-              "sortByUsername": Object {
-                "title": "Enter Username",
-                "type": "string",
-              },
-              "sortingTypes": Object {
-                "choices": Array [
-                  Array [
-                    "User Name",
-                    "User Name",
-                  ],
-                  Array [
-                    "Path",
-                    "Path",
-                  ],
-                  Array [
-                    "Date",
-                    "Date",
-                  ],
-                ],
-                "description": "Sort transactions by User-Name, Path or Date",
-                "title": "Sort by",
-                "type": "string",
-              },
-            },
-            "required": Array [],
-          }
-        }
-        id="Form"
-      />
-    </div>
-    <div
-      className="ui raised segments"
-    >
-      <div
-        className="ui segment primary"
+        class="ui segment primary"
       >
         Undo Controlpanel
       </div>
@@ -72,7 +18,52 @@ exports[`UndoControlpanel renders undo controlpanel component 1`] = `
         class="ui segment"
       >
         <div
-          id="form"
+          data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"sortingTypes\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"sortingTypes\\": {
+      \\"title\\": \\"Sort by\\",
+      \\"description\\": \\"Sort transactions by User-Name, Path or Date\\",
+      \\"type\\": \\"string\\",
+      \\"choices\\": [
+        [
+          \\"User Name\\",
+          \\"User Name\\"
+        ],
+        [
+          \\"Path\\",
+          \\"Path\\"
+        ],
+        [
+          \\"Date\\",
+          \\"Date\\"
+        ]
+      ]
+    },
+    \\"sortByUsername\\": {
+      \\"title\\": \\"Enter Username\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"sortByPath\\": {
+      \\"title\\": \\"Enter Path\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"sortByDate\\": {
+      \\"title\\": \\"Enter Date and Time\\",
+      \\"type\\": \\"date\\"
+    }
+  },
+  \\"required\\": []
+}"
+          id="Form"
         />
       </div>
       <div
diff --git a/packages/volto/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap b/packages/volto/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
index 079fdf6790..aa41134ae8 100644
--- a/packages/volto/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
+++ b/packages/volto/src/components/manage/Edit/__snapshots__/Edit.test.jsx.snap
@@ -3,18 +3,20 @@
 exports[`Edit renders an edit component 1`] = `
 <div>
   <div
-    data-schema={
-      Object {
-        "some": "field",
-      }
-    }
-    id="Form"
-  />
+    id="toolbar"
+  >
+    <div
+      id="Portal"
+    />
+  </div>
   <div
     id="page-edit"
   >
     <div
-      class="Form"
+      data-schema="{
+  \\"some\\": \\"field\\"
+}"
+      id="Form"
     />
   </div>
   <div
@@ -30,14 +32,18 @@ exports[`Edit renders an edit component 1`] = `
 exports[`Edit renders an empty edit component 1`] = `
 <div>
   <div
-    data-schema={null}
-    id="Form"
-  />
+    id="toolbar"
+  >
+    <div
+      id="Portal"
+    />
+  </div>
   <div
     id="page-edit"
   >
     <div
-      class="Form"
+      data-schema="null"
+      id="Form"
     />
   </div>
   <div
diff --git a/packages/volto/src/components/manage/Form/__mocks__/index.tsx b/packages/volto/src/components/manage/Form/__mocks__/index.tsx
index 75661113d6..a77ae62741 100644
--- a/packages/volto/src/components/manage/Form/__mocks__/index.tsx
+++ b/packages/volto/src/components/manage/Form/__mocks__/index.tsx
@@ -1,3 +1,28 @@
+import type { JSONSchema } from '@plone/types';
+import type { Ref } from 'react';
+const { forwardRef } = jest.requireActual('react');
+
+// Field descriptions can contain react elements and those are not JSON stringifiable
+const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
+  if (!schema || !schema.properties) return schema;
+  return {
+    ...schema,
+    properties: Object.entries(schema.properties).reduce<Record<string, any>>(
+      (acc, [key, value]) => {
+        acc[key] = {
+          ...value,
+          description:
+            typeof value.description === 'string'
+              ? value.description
+              : undefined,
+        };
+        return acc;
+      },
+      {},
+    ),
+  };
+};
+
 export const Field = jest.fn((props) => (
   <div className="Field" id={props.id}>
     {props.title}
@@ -5,11 +30,17 @@ export const Field = jest.fn((props) => (
 ));
 
 export const InlineForm = jest.fn((props) => (
-  <div id="InlineForm" data-schema={props.schema} />
+  <div
+    id="InlineForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
 ));
 
 export const ModalForm = jest.fn((props) => (
-  <div id="ModalForm" data-schema={props.schema} />
+  <div
+    id="ModalForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
 ));
 
 export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
@@ -17,13 +48,27 @@ export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
 export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
 
 export const BlockDataForm = jest.fn((props) => (
-  <div id="BlockDataForm" data-schema={props.schema} />
+  <div
+    id="BlockDataForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
 ));
 
 export const BlocksForm = jest.fn((props) => (
-  <div id="BlocksForm" data-schema={props.schema} />
+  <div
+    id="BlocksForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
 ));
 
-export const Form = jest.fn((props) => (
-  <div id="Form" data-schema={props.schema} />
-));
+const MockForm = forwardRef(
+  (props: { schema: JSONSchema | null }, ref: Ref<any>) => (
+    <div
+      id="Form"
+      data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+      ref={ref}
+    />
+  ),
+);
+
+export const Form = jest.fn((props) => <MockForm {...props} />);
diff --git a/packages/volto/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap b/packages/volto/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
index 8d9413e37e..49b491c652 100644
--- a/packages/volto/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
+++ b/packages/volto/src/components/manage/Form/__snapshots__/BlockDataForm.test.jsx.snap
@@ -3,7 +3,35 @@
 exports[`BlockDataForm should add variations to schema 1`] = `
 <div>
   <div
-    data-schema="[object Object]"
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"title\\": \\"Default\\",
+      \\"id\\": \\"default\\",
+      \\"fields\\": [
+        \\"variation\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"variation\\": {
+      \\"title\\": \\"Variation\\",
+      \\"choices\\": [
+        [
+          \\"default\\",
+          \\"Default\\"
+        ],
+        [
+          \\"extra\\",
+          \\"Extra\\"
+        ]
+      ],
+      \\"noValueOption\\": false,
+      \\"default\\": \\"default\\"
+    }
+  },
+  \\"required\\": []
+}"
     id="InlineForm"
   />
 </div>
@@ -12,7 +40,17 @@ exports[`BlockDataForm should add variations to schema 1`] = `
 exports[`BlockDataForm should not add variations to schema when explicitly disabled 1`] = `
 <div>
   <div
-    data-schema="[object Object]"
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"title\\": \\"Default\\",
+      \\"id\\": \\"default\\",
+      \\"fields\\": []
+    }
+  ],
+  \\"properties\\": {},
+  \\"required\\": []
+}"
     id="InlineForm"
   />
 </div>
@@ -21,7 +59,17 @@ exports[`BlockDataForm should not add variations to schema when explicitly disab
 exports[`BlockDataForm should not add variations to schema when unneeded 1`] = `
 <div>
   <div
-    data-schema="[object Object]"
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"title\\": \\"Default\\",
+      \\"id\\": \\"default\\",
+      \\"fields\\": []
+    }
+  ],
+  \\"properties\\": {},
+  \\"required\\": []
+}"
     id="InlineForm"
   />
 </div>
@@ -30,7 +78,17 @@ exports[`BlockDataForm should not add variations to schema when unneeded 1`] = `
 exports[`BlockDataForm should not add variations when only one variation 1`] = `
 <div>
   <div
-    data-schema="[object Object]"
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"title\\": \\"Default\\",
+      \\"id\\": \\"default\\",
+      \\"fields\\": []
+    }
+  ],
+  \\"properties\\": {},
+  \\"required\\": []
+}"
     id="InlineForm"
   />
 </div>
diff --git a/packages/volto/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap b/packages/volto/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
index 54f523961f..7fd5e2166a 100644
--- a/packages/volto/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
+++ b/packages/volto/src/components/manage/Preferences/__snapshots__/ChangePassword.test.jsx.snap
@@ -3,48 +3,51 @@
 exports[`ChangePassword renders a change password component 1`] = `
 <div>
   <div
-    data-schema={
-      Object {
-        "fieldsets": Array [
-          Object {
-            "fields": Array [
-              "oldPassword",
-              "newPassword",
-              "newPasswordRepeat",
-            ],
-            "id": "default",
-            "title": "Default",
-          },
-        ],
-        "properties": Object {
-          "newPassword": Object {
-            "description": "Enter your new password. Minimum 8 characters.",
-            "title": "New password",
-            "type": "string",
-            "widget": "password",
-          },
-          "newPasswordRepeat": Object {
-            "description": "Re-enter the password. Make sure the passwords are identical.",
-            "title": "Confirm password",
-            "type": "string",
-            "widget": "password",
-          },
-          "oldPassword": Object {
-            "description": "Enter your current password.",
-            "title": "Current password",
-            "type": "string",
-            "widget": "password",
-          },
-        },
-        "required": Array [
-          "oldPassword",
-          "newPassword",
-          "newPasswordRepeat",
-        ],
-      }
+    class="ui container"
+    id="page-change-password"
+  >
+    <div
+      data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"oldPassword\\",
+        \\"newPassword\\",
+        \\"newPasswordRepeat\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"oldPassword\\": {
+      \\"description\\": \\"Enter your current password.\\",
+      \\"title\\": \\"Current password\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"password\\"
+    },
+    \\"newPassword\\": {
+      \\"description\\": \\"Enter your new password. Minimum 8 characters.\\",
+      \\"title\\": \\"New password\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"password\\"
+    },
+    \\"newPasswordRepeat\\": {
+      \\"description\\": \\"Re-enter the password. Make sure the passwords are identical.\\",
+      \\"title\\": \\"Confirm password\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"password\\"
     }
-    id="Form"
-  />
+  },
+  \\"required\\": [
+    \\"oldPassword\\",
+    \\"newPassword\\",
+    \\"newPasswordRepeat\\"
+  ]
+}"
+      id="Form"
+    />
+  </div>
   <div
     id="toolbar"
   >
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
index 16c1a74c7c..ecf1148dde 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
@@ -35,85 +35,14 @@ exports[`renders a dictionary widget component 1`] = `
               aria-label="Vocabulary term"
               class="ui button"
             >
-              <div
-                aria-describedby="rbd-hidden-text-0-hidden-text-0"
-                className="draghandlewrapper"
-                data-rbd-drag-handle-context-id="0"
-                data-rbd-drag-handle-draggable-id="talk"
-                draggable={false}
-                onDragStart={[Function]}
-                role="button"
-                tabIndex={0}
-              >
-                <svg
-                  className="icon"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "18px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </div>
-              <div
-                className="ui drag block inner"
-              >
-                <div
-                  className="Field"
-                  id="en-0-test-dict-talk"
-                >
-                  English
-                </div>
-                <div
-                  className="Field"
-                  id="de-1-test-dict-talk"
-                >
-                  Deutsch
-                </div>
-                <div
-                  className="Field"
-                  id="it-2-test-dict-talk"
-                >
-                  Italiano
-                </div>
-              </div>
-              <div>
-                <button
-                  aria-label="Remove term #talk"
-                  className="ui basic icon button delete-button"
-                  onClick={[Function]}
-                  title="Remove term"
-                >
-                  <svg
-                    className="icon"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": undefined,
-                      }
-                    }
-                    onClick={null}
-                    style={
-                      Object {
-                        "fill": "#e40166",
-                        "height": "20px",
-                        "width": "auto",
-                      }
-                    }
-                    viewBox=""
-                    xmlns=""
-                  />
-                </button>
-              </div>
-            </div>
+              <svg
+                class="icon"
+                style="height: 18px; width: auto; fill: currentColor;"
+                viewBox=""
+                xmlns=""
+              />
+              Add term
+            </button>
           </div>
           <div
             data-rbd-droppable-context-id="0"
@@ -129,30 +58,13 @@ exports[`renders a dictionary widget component 1`] = `
                 style="align-items: center; display: flex;"
               >
                 <div
-                  className="Field"
-                  id="en-0-test-dict-keynote"
-                >
-                  English
-                </div>
-                <div
-                  className="Field"
-                  id="de-1-test-dict-keynote"
-                >
-                  Deutsch
-                </div>
-                <div
-                  className="Field"
-                  id="it-2-test-dict-keynote"
-                >
-                  Italiano
-                </div>
-              </div>
-              <div>
-                <button
-                  aria-label="Remove term #keynote"
-                  className="ui basic icon button delete-button"
-                  onClick={[Function]}
-                  title="Remove term"
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="draghandlewrapper"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="talk"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
                 >
                   <svg
                     class="icon"
@@ -165,28 +77,22 @@ exports[`renders a dictionary widget component 1`] = `
                   class="ui drag block inner"
                 >
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-en-0-test-dict-talk"
+                    class="Field"
+                    id="en-0-test-dict-talk"
                   >
                     English
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-de-1-test-dict-talk"
+                    class="Field"
+                    id="de-1-test-dict-talk"
                   >
                     Deutsch
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-it-2-test-dict-talk"
+                    class="Field"
+                    id="it-2-test-dict-talk"
                   >
                     Italiano
-                     -
-                    No description
                   </div>
                 </div>
                 <div>
@@ -214,30 +120,13 @@ exports[`renders a dictionary widget component 1`] = `
                 style="align-items: center; display: flex;"
               >
                 <div
-                  className="Field"
-                  id="en-0-test-dict-lightning-talk"
-                >
-                  English
-                </div>
-                <div
-                  className="Field"
-                  id="de-1-test-dict-lightning-talk"
-                >
-                  Deutsch
-                </div>
-                <div
-                  className="Field"
-                  id="it-2-test-dict-lightning-talk"
-                >
-                  Italiano
-                </div>
-              </div>
-              <div>
-                <button
-                  aria-label="Remove term #lightning-talk"
-                  className="ui basic icon button delete-button"
-                  onClick={[Function]}
-                  title="Remove term"
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="draghandlewrapper"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="keynote"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
                 >
                   <svg
                     class="icon"
@@ -250,28 +139,22 @@ exports[`renders a dictionary widget component 1`] = `
                   class="ui drag block inner"
                 >
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-en-0-test-dict-keynote"
+                    class="Field"
+                    id="en-0-test-dict-keynote"
                   >
                     English
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-de-1-test-dict-keynote"
+                    class="Field"
+                    id="de-1-test-dict-keynote"
                   >
                     Deutsch
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-it-2-test-dict-keynote"
+                    class="Field"
+                    id="it-2-test-dict-keynote"
                   >
                     Italiano
-                     -
-                    No description
                   </div>
                 </div>
                 <div>
@@ -318,28 +201,22 @@ exports[`renders a dictionary widget component 1`] = `
                   class="ui drag block inner"
                 >
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-en-0-test-dict-lightning-talk"
+                    class="Field"
+                    id="en-0-test-dict-lightning-talk"
                   >
                     English
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-de-1-test-dict-lightning-talk"
+                    class="Field"
+                    id="de-1-test-dict-lightning-talk"
                   >
                     Deutsch
-                     -
-                    No description
                   </div>
                   <div
-                    class="mocked-default-widget"
-                    id="mocked-field-it-2-test-dict-lightning-talk"
+                    class="Field"
+                    id="it-2-test-dict-lightning-talk"
                   >
                     Italiano
-                     -
-                    No description
                   </div>
                 </div>
                 <div>
diff --git a/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap b/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
index 859045c22f..69a7999859 100644
--- a/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
+++ b/packages/volto/src/components/theme/Comments/__snapshots__/CommentEditModal.test.jsx.snap
@@ -2,30 +2,28 @@
 
 exports[`CommentEditModal renders a comment edit modal component 1`] = `
 <div
-  data-schema={
-    Object {
-      "fieldsets": Array [
-        Object {
-          "fields": Array [
-            "text",
-          ],
-          "id": "default",
-          "title": "Default",
-        },
-      ],
-      "properties": Object {
-        "text": Object {
-          "description": "",
-          "title": "Comment",
-          "type": "string",
-          "widget": "textarea",
-        },
-      },
-      "required": Array [
-        "text",
-      ],
+  data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"text\\"
+      ]
     }
-  }
+  ],
+  \\"properties\\": {
+    \\"text\\": {
+      \\"title\\": \\"Comment\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"textarea\\",
+      \\"description\\": \\"\\"
+    }
+  },
+  \\"required\\": [
+    \\"text\\"
+  ]
+}"
   id="ModalForm"
 />
 `;
diff --git a/packages/volto/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap b/packages/volto/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
index 59c9d3664e..d242bec191 100644
--- a/packages/volto/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
+++ b/packages/volto/src/components/theme/Comments/__snapshots__/Comments.test.jsx.snap
@@ -8,29 +8,27 @@ exports[`Comments renders a comments component 1`] = `
     id="comment-add-id"
   >
     <div
-      data-schema={
-        Object {
-          "fieldsets": Array [
-            Object {
-              "fields": Array [
-                "comment",
-              ],
-              "id": "default",
-              "title": "Default",
-            },
-          ],
-          "properties": Object {
-            "comment": Object {
-              "title": "Comment",
-              "type": "string",
-              "widget": "textarea",
-            },
-          },
-          "required": Array [
-            "comment1",
-          ],
-        }
-      }
+      data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"fields\\": [
+        \\"comment\\"
+      ],
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\"
+    }
+  ],
+  \\"properties\\": {
+    \\"comment\\": {
+      \\"title\\": \\"Comment\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"textarea\\"
+    }
+  },
+  \\"required\\": [
+    \\"comment1\\"
+  ]
+}"
       id="Form"
     />
   </div>
diff --git a/packages/volto/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap b/packages/volto/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
index 48ed87e1b7..133c932f0a 100644
--- a/packages/volto/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
+++ b/packages/volto/src/components/theme/ContactForm/__snapshots__/ContactForm.test.jsx.snap
@@ -17,53 +17,62 @@ exports[`Contact form renders a contact form 1`] = `
           class="warning icon"
         />
         <div
-          className="header"
+          class="content"
         >
-          Error
+          <div
+            class="header"
+          >
+            Error
+          </div>
         </div>
       </div>
+      <div
+        data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"fields\\": [
+        \\"name\\",
+        \\"from\\",
+        \\"subject\\",
+        \\"message\\"
+      ],
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\"
+    }
+  ],
+  \\"properties\\": {
+    \\"name\\": {
+      \\"title\\": \\"Name\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"from\\": {
+      \\"title\\": \\"From\\",
+      \\"type\\": \\"email\\"
+    },
+    \\"subject\\": {
+      \\"title\\": \\"Subject\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"message\\": {
+      \\"title\\": \\"Message\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"textarea\\"
+    }
+  },
+  \\"required\\": [
+    \\"from\\",
+    \\"message\\"
+  ]
+}"
+        id="Form"
+      />
     </div>
+  </div>
+  <div
+    id="toolbar"
+  >
     <div
-      data-schema={
-        Object {
-          "fieldsets": Array [
-            Object {
-              "fields": Array [
-                "name",
-                "from",
-                "subject",
-                "message",
-              ],
-              "id": "default",
-              "title": "Default",
-            },
-          ],
-          "properties": Object {
-            "from": Object {
-              "title": "From",
-              "type": "email",
-            },
-            "message": Object {
-              "title": "Message",
-              "type": "string",
-              "widget": "textarea",
-            },
-            "name": Object {
-              "title": "Name",
-              "type": "string",
-            },
-            "subject": Object {
-              "title": "Subject",
-              "type": "string",
-            },
-          },
-          "required": Array [
-            "from",
-            "message",
-          ],
-        }
-      }
-      id="Form"
+      id="Portal"
     />
   </div>
 </div>
@@ -86,57 +95,63 @@ exports[`Contact form renders a contact form with error message 1`] = `
           class="warning icon"
         />
         <div
-          className="header"
+          class="content"
         >
-          Error
+          <div
+            class="header"
+          >
+            Error
+          </div>
+          <p>
+            Error foo
+          </p>
         </div>
-        <p>
-          Error foo
-        </p>
       </div>
+      <div
+        data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"fields\\": [
+        \\"name\\",
+        \\"from\\",
+        \\"subject\\",
+        \\"message\\"
+      ],
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\"
+    }
+  ],
+  \\"properties\\": {
+    \\"name\\": {
+      \\"title\\": \\"Name\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"from\\": {
+      \\"title\\": \\"From\\",
+      \\"type\\": \\"email\\"
+    },
+    \\"subject\\": {
+      \\"title\\": \\"Subject\\",
+      \\"type\\": \\"string\\"
+    },
+    \\"message\\": {
+      \\"title\\": \\"Message\\",
+      \\"type\\": \\"string\\",
+      \\"widget\\": \\"textarea\\"
+    }
+  },
+  \\"required\\": [
+    \\"from\\",
+    \\"message\\"
+  ]
+}"
+        id="Form"
+      />
     </div>
-    <div
-      data-schema={
-        Object {
-          "fieldsets": Array [
-            Object {
-              "fields": Array [
-                "name",
-                "from",
-                "subject",
-                "message",
-              ],
-              "id": "default",
-              "title": "Default",
-            },
-          ],
-          "properties": Object {
-            "from": Object {
-              "title": "From",
-              "type": "email",
-            },
-            "message": Object {
-              "title": "Message",
-              "type": "string",
-              "widget": "textarea",
-            },
-            "name": Object {
-              "title": "Name",
-              "type": "string",
-            },
-            "subject": Object {
-              "title": "Subject",
-              "type": "string",
-            },
-          },
-          "required": Array [
-            "from",
-            "message",
-          ],
-        }
-      }
-      id="Form"
-    />
+  </div>
+  <div
+    id="toolbar"
+  >
     <div
       id="Portal"
     />
diff --git a/packages/volto/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap b/packages/volto/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
index 2e67521d69..c19a375f48 100644
--- a/packages/volto/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
+++ b/packages/volto/src/components/theme/PasswordReset/__snapshots__/RequestPasswordReset.test.jsx.snap
@@ -8,29 +8,27 @@ exports[`RequestPasswordReset renders a RequestPasswordReset component 1`] = `
     className="ui container"
   >
     <div
-      data-schema={
-        Object {
-          "fieldsets": Array [
-            Object {
-              "fields": Array [
-                "username",
-              ],
-              "id": "default",
-              "title": "Default",
-            },
-          ],
-          "properties": Object {
-            "username": Object {
-              "title": "My user name is",
-              "type": "string",
-            },
-          },
-          "required": Array [
-            "username",
-          ],
-          "submitLabel": "Start password reset",
-        }
-      }
+      data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"username\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"username\\": {
+      \\"type\\": \\"string\\",
+      \\"title\\": \\"My user name is\\"
+    }
+  },
+  \\"submitLabel\\": \\"Start password reset\\",
+  \\"required\\": [
+    \\"username\\"
+  ]
+}"
       id="Form"
     />
   </div>
diff --git a/packages/volto/src/components/theme/Register/__snapshots__/Register.test.jsx.snap b/packages/volto/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
index c664bb7995..c75ba527ee 100644
--- a/packages/volto/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
+++ b/packages/volto/src/components/theme/Register/__snapshots__/Register.test.jsx.snap
@@ -5,36 +5,34 @@ exports[`Register renders a register component 1`] = `
   id="page-register"
 >
   <div
-    data-schema={
-      Object {
-        "fieldsets": Array [
-          Object {
-            "fields": Array [
-              "fullname",
-              "email",
-            ],
-            "id": "default",
-            "title": "Default",
-          },
-        ],
-        "properties": Object {
-          "email": Object {
-            "description": "Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.",
-            "title": "E-mail",
-            "type": "string",
-          },
-          "fullname": Object {
-            "description": "Enter full name, e.g. John Smith.",
-            "title": "Full Name",
-            "type": "string",
-          },
-        },
-        "required": Array [
-          "fullname",
-          "email",
-        ],
-      }
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"fullname\\",
+        \\"email\\"
+      ]
     }
+  ],
+  \\"properties\\": {
+    \\"fullname\\": {
+      \\"type\\": \\"string\\",
+      \\"title\\": \\"Full Name\\",
+      \\"description\\": \\"Enter full name, e.g. John Smith.\\"
+    },
+    \\"email\\": {
+      \\"type\\": \\"string\\",
+      \\"title\\": \\"E-mail\\",
+      \\"description\\": \\"Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.\\"
+    }
+  },
+  \\"required\\": [
+    \\"fullname\\",
+    \\"email\\"
+  ]
+}"
     id="Form"
   />
 </div>
diff --git a/packages/volto/src/config/ControlPanels.js b/packages/volto/src/config/ControlPanels.js
index 2f6a763986..31614556b0 100644
--- a/packages/volto/src/config/ControlPanels.js
+++ b/packages/volto/src/config/ControlPanels.js
@@ -44,7 +44,7 @@ export const controlPanelsIcons = {
   relations: relationsSVG,
 };
 
-export const filterControlPanels = (controlpanels) => {
+export const filterControlPanels = (controlpanels = []) => {
   const HIDDEN_CONTROL_PANELS = ['markup', 'content-rules'];
 
   return controlpanels.filter(

From 1350ead2d1535714e266b8ed9b7271035ff5a4e4 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 2 Apr 2024 19:32:01 +0200
Subject: [PATCH 19/27] more tests fixes

---
 .../manage/Controlpanels/Controlpanels.jsx    | 57 +++++++++---------
 ...gable.stories.mdx => Pluggable.stories.js} |  0
 pnpm-lock.yaml                                | 58 ++++---------------
 3 files changed, 39 insertions(+), 76 deletions(-)
 rename packages/volto/src/components/manage/Pluggable/{Pluggable.stories.mdx => Pluggable.stories.js} (100%)

diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
index e43cef310c..81f9435ed1 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -9,9 +9,8 @@ import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
 import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
@@ -100,18 +99,25 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-}) {
+function Controlpanels({ location }) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
+  const dispatch = useDispatch();
+  const { pathname } = location;
+
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
 
   useEffect(() => {
     setIsClient(true);
-  }, []);
+    dispatch(listControlpanels());
+    dispatch(getSystemInformation());
+  }, [dispatch]);
 
   const error = controlpanelsRequest?.error;
 
@@ -299,24 +305,15 @@ Controlpanels.propTypes = {
   pathname: PropTypes.string.isRequired,
 };
 
-export default compose(
-  connect((state, props) => ({
-    controlpanels: state.controlpanels.controlpanels,
-    controlpanelsRequest: state.controlpanels.list,
-    pathname: props.location.pathname,
-    systemInformation: state.controlpanels.systeminformation,
-  })),
-
-  asyncConnect([
-    {
-      key: 'controlpanels',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(listControlpanels()),
-    },
-    {
-      key: 'systemInformation',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(getSystemInformation()),
-    },
-  ]),
-)(Controlpanels);
+export default asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: async ({ location, store: { dispatch } }) =>
+      await dispatch(listControlpanels()),
+  },
+  {
+    key: 'systemInformation',
+    promise: async ({ location, store: { dispatch } }) =>
+      await dispatch(getSystemInformation()),
+  },
+])(Controlpanels);
diff --git a/packages/volto/src/components/manage/Pluggable/Pluggable.stories.mdx b/packages/volto/src/components/manage/Pluggable/Pluggable.stories.js
similarity index 100%
rename from packages/volto/src/components/manage/Pluggable/Pluggable.stories.mdx
rename to packages/volto/src/components/manage/Pluggable/Pluggable.stories.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3e686aeb4..a6d86903ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3077,16 +3077,6 @@ packages:
       '@babel/core': 7.23.9
       '@babel/helper-plugin-utils': 7.22.5
 
-  /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.3):
-    resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==}
     engines: {node: '>=6.9.0'}
@@ -3158,16 +3148,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.3):
-    resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
   /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.9):
     resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==}
     engines: {node: '>=6.9.0'}
@@ -3806,20 +3786,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.23.3):
-    resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.3)
-      '@babel/types': 7.23.9
-    dev: true
-
   /@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.23.9):
     resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==}
     engines: {node: '>=6.9.0'}
@@ -7974,8 +7940,8 @@ packages:
       react-refresh: 0.14.0
       schema-utils: 3.3.0
       source-map: 0.7.4
-      webpack: 5.90.1(esbuild@0.19.9)
-      webpack-dev-server: 4.11.1(debug@4.3.2)(webpack@5.90.1)
+      webpack: 5.90.1
+      webpack-dev-server: 4.11.1(debug@4.3.2)(webpack@5.76.1)
     dev: true
 
   /@pnpm/config.env-replace@1.1.0:
@@ -20997,7 +20963,7 @@ packages:
     peerDependencies:
       eslint-plugin-import: '>=1.4.0'
     dependencies:
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
     dev: true
 
   /eslint-import-resolver-babel-plugin-root-import@1.1.1(babel-plugin-root-import@6.1.0)(eslint-plugin-import@2.29.1):
@@ -21008,7 +20974,7 @@ packages:
     dependencies:
       babel-plugin-root-import: 6.1.0
       eslint-import-resolver-node: 0.2.3
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.49.0)
       json5: 0.5.1
     transitivePeerDependencies:
       - supports-color
@@ -21101,7 +21067,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.4.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.2.2)
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.49.0
       eslint-import-resolver-node: 0.3.9
@@ -21268,8 +21234,8 @@ packages:
       '@babel/plugin-transform-react-jsx': ^7.14.9
       eslint: ^8.1.0
     dependencies:
-      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.3)
-      '@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.23.3)
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9)
+      '@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.23.9)
       eslint: 8.49.0
       lodash: 4.17.21
       string-natural-compare: 3.0.1
@@ -21355,7 +21321,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.4.2)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.49.0)(typescript@5.2.2)
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
@@ -36741,7 +36707,7 @@ packages:
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.90.1(esbuild@0.19.9)
+      webpack: 5.90.1
     dev: true
 
   /style-loader@3.3.1(webpack@5.76.1):
@@ -36810,7 +36776,7 @@ packages:
     peerDependencies:
       stylelint: '>=11'
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.2)
+      stylelint: 16.2.1(typescript@5.2.2)
       stylelint-order: 6.0.4(stylelint@16.2.1)
     dev: true
 
@@ -36854,7 +36820,7 @@ packages:
     dependencies:
       postcss: 8.4.35
       postcss-sorting: 8.0.2(postcss@8.4.35)
-      stylelint: 16.2.1(typescript@5.4.2)
+      stylelint: 16.2.1(typescript@5.2.2)
     dev: true
 
   /stylelint-prettier@4.0.2(prettier@3.0.3)(stylelint@15.10.3):
@@ -36878,7 +36844,7 @@ packages:
     dependencies:
       prettier: 3.2.5
       prettier-linter-helpers: 1.0.0
-      stylelint: 16.2.1(typescript@5.4.2)
+      stylelint: 16.2.1(typescript@5.2.2)
     dev: true
 
   /stylelint-scss@4.7.0(stylelint@15.10.3):

From 89e1cc9a8750e4ae8ef19045cabe0b773ddc1356 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Mon, 8 Apr 2024 19:21:33 +0200
Subject: [PATCH 20/27] wip on controlpanels

---
 .../manage/Controlpanels/Controlpanels.jsx    | 62 +++++++++++--------
 .../Controlpanels/Controlpanels.test.jsx      | 62 ++++++++++---------
 2 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
index 81f9435ed1..1e277146f1 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -9,8 +9,9 @@ import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
 import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
@@ -99,25 +100,22 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({ location }) {
+function Controlpanels({
+  controlpanels,
+  controlpanelsRequest,
+  systemInformation,
+  pathname,
+  listControlpanels,
+  getSystemInformation,
+}) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
-  const dispatch = useDispatch();
-  const { pathname } = location;
-
-  const controlpanels = useSelector(
-    (state) => state.controlpanels.controlpanels,
-  );
-  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
-  const systemInformation = useSelector(
-    (state) => state.controlpanels.systeminformation,
-  );
 
   useEffect(() => {
     setIsClient(true);
-    dispatch(listControlpanels());
-    dispatch(getSystemInformation());
-  }, [dispatch]);
+    listControlpanels();
+    getSystemInformation();
+  }, [listControlpanels, getSystemInformation]);
 
   const error = controlpanelsRequest?.error;
 
@@ -198,6 +196,8 @@ function Controlpanels({ location }) {
   const groups = map(uniqBy(filteredControlPanels, 'group'), 'group');
   const { controlPanelsIcons: icons } = config.settings;
 
+  console.log('controlpanels', controlpanels);
+  console.log('filteredControlPanels', filteredControlPanels);
   return (
     <div className="view-wrapper">
       <Helmet title={intl.formatMessage(messages.sitesetup)} />
@@ -305,15 +305,27 @@ Controlpanels.propTypes = {
   pathname: PropTypes.string.isRequired,
 };
 
-export default asyncConnect([
-  {
-    key: 'controlpanels',
-    promise: async ({ location, store: { dispatch } }) =>
-      await dispatch(listControlpanels()),
-  },
+export default asyncConnect(
+  [
+    {
+      key: 'controlpanels',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listControlpanels()),
+    },
+    {
+      key: 'systemInformation',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(getSystemInformation()),
+    },
+  ],
+  (state, props) => ({
+    controlpanels: state.controlpanels.controlpanels,
+    controlpanelsRequest: state.controlpanels.list,
+    pathname: props.location.pathname,
+    systemInformation: state.controlpanels.systeminformation,
+  }),
   {
-    key: 'systemInformation',
-    promise: async ({ location, store: { dispatch } }) =>
-      await dispatch(getSystemInformation()),
+    listControlpanels,
+    getSystemInformation,
   },
-])(Controlpanels);
+)(Controlpanels);
diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.test.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.test.jsx
index b524998cd5..7455537323 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.test.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.test.jsx
@@ -18,28 +18,30 @@ jest.mock('@plone/volto/components/manage/Controlpanels', () => ({
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
-          group: 'General',
-          title: 'Date and Time',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
-          group: 'General',
-          title: 'Language',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
-          group: 'Content',
-          title: 'Editing',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+            group: 'General',
+            title: 'Date and Time',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
+            group: 'General',
+            title: 'Language',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
+            group: 'Content',
+            title: 'Editing',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
@@ -85,13 +87,15 @@ describe('Controlpanels', () => {
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [

From 4d55d66750b7c0157d6cb4abfa72663d4710a0fb Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 9 Apr 2024 13:10:24 +0200
Subject: [PATCH 21/27] more test fixes, controlpanels view now works correctly

---
 .../tests/core/controlpanels/upgrade.js       |   1 +
 .../manage/Controlpanels/Controlpanels.jsx    |  75 ++--------
 .../components/manage/Controlpanels/index.tsx |  17 ++-
 .../Preferences/PersonalPreferences.test.jsx  |   8 +-
 .../PersonalPreferences.test.jsx.snap         | 136 ++++++++++--------
 5 files changed, 113 insertions(+), 124 deletions(-)

diff --git a/packages/volto/cypress/tests/core/controlpanels/upgrade.js b/packages/volto/cypress/tests/core/controlpanels/upgrade.js
index 3926b0fd71..8b30cf6d5e 100644
--- a/packages/volto/cypress/tests/core/controlpanels/upgrade.js
+++ b/packages/volto/cypress/tests/core/controlpanels/upgrade.js
@@ -44,6 +44,7 @@ describe('Upgrade Site Tests', () => {
     cy.wait('@getSystemNeedsUpdate');
 
     cy.findByText('Please continue with the upgrade.').click();
+    cy.wait('@getUpgradeNeedsUpgrade');
     cy.get('.content-area').contains(
       'The site configuration is outdated and needs to be upgraded.',
     );
diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
index 1e277146f1..e5622d8d25 100644
--- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -3,20 +3,16 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
-import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
-import { Error, Icon, Toolbar } from '@plone/volto/components';
-import { VersionOverview } from '@plone/volto/components/manage/Controlpanels';
+import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
 
@@ -100,22 +96,22 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-  listControlpanels,
-  getSystemInformation,
-}) {
+export default function Controlpanels({ location }) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
 
+  const { pathname } = location;
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
+
   useEffect(() => {
     setIsClient(true);
-    listControlpanels();
-    getSystemInformation();
-  }, [listControlpanels, getSystemInformation]);
+  }, []);
 
   const error = controlpanelsRequest?.error;
 
@@ -196,8 +192,6 @@ function Controlpanels({
   const groups = map(uniqBy(filteredControlPanels, 'group'), 'group');
   const { controlPanelsIcons: icons } = config.settings;
 
-  console.log('controlpanels', controlpanels);
-  console.log('filteredControlPanels', filteredControlPanels);
   return (
     <div className="view-wrapper">
       <Helmet title={intl.formatMessage(messages.sitesetup)} />
@@ -288,44 +282,3 @@ function Controlpanels({
     </div>
   );
 }
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Controlpanels.propTypes = {
-  controlpanels: PropTypes.arrayOf(
-    PropTypes.shape({
-      '@id': PropTypes.string,
-      group: PropTypes.string,
-      title: PropTypes.string,
-    }),
-  ).isRequired,
-  pathname: PropTypes.string.isRequired,
-};
-
-export default asyncConnect(
-  [
-    {
-      key: 'controlpanels',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(listControlpanels()),
-    },
-    {
-      key: 'systemInformation',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(getSystemInformation()),
-    },
-  ],
-  (state, props) => ({
-    controlpanels: state.controlpanels.controlpanels,
-    controlpanelsRequest: state.controlpanels.list,
-    pathname: props.location.pathname,
-    systemInformation: state.controlpanels.systeminformation,
-  }),
-  {
-    listControlpanels,
-    getSystemInformation,
-  },
-)(Controlpanels);
diff --git a/packages/volto/src/components/manage/Controlpanels/index.tsx b/packages/volto/src/components/manage/Controlpanels/index.tsx
index 2d06131326..e545fe0722 100644
--- a/packages/volto/src/components/manage/Controlpanels/index.tsx
+++ b/packages/volto/src/components/manage/Controlpanels/index.tsx
@@ -1,14 +1,29 @@
 import loadable from '@loadable/component';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
+import { asyncConnect } from '@plone/volto/helpers';
 
 // CONTROLPANELS
 
-export const Controlpanels = loadable(
+const LoadableControlpanels = loadable(
   () =>
     import(
       /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels'
     ),
 );
 
+export const Controlpanels = asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(listControlpanels()),
+  },
+  {
+    key: 'systemInformation',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(getSystemInformation()),
+  },
+])(LoadableControlpanels);
+
 export const Controlpanel = loadable(
   () =>
     import(
diff --git a/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx b/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
index 8a72fe0d9f..009c2595c4 100644
--- a/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
+++ b/packages/volto/src/components/manage/Preferences/PersonalPreferences.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
-import { waitFor, render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import PersonalPreferences from './PersonalPreferences';
 
@@ -10,6 +10,7 @@ const mockStore = configureStore();
 
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
@@ -17,7 +18,7 @@ beforeAll(
 );
 
 describe('PersonalPreferences', () => {
-  it('renders a personal preferences component', async () => {
+  it('renders a personal preferences component', () => {
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -47,9 +48,6 @@ describe('PersonalPreferences', () => {
         </MemoryRouter>
       </Provider>,
     );
-    await waitFor(() => {
-      screen.getByTitle('Cancel');
-    });
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/packages/volto/src/components/manage/Preferences/__snapshots__/PersonalPreferences.test.jsx.snap b/packages/volto/src/components/manage/Preferences/__snapshots__/PersonalPreferences.test.jsx.snap
index 8778d4a792..3bf2552cb6 100644
--- a/packages/volto/src/components/manage/Preferences/__snapshots__/PersonalPreferences.test.jsx.snap
+++ b/packages/volto/src/components/manage/Preferences/__snapshots__/PersonalPreferences.test.jsx.snap
@@ -3,62 +3,84 @@
 exports[`PersonalPreferences renders a personal preferences component 1`] = `
 <div>
   <div
-    class="ui container"
-  >
-    <form
-      class="ui form"
-      method="post"
-    >
-      <fieldset
-        class="invisible"
-      >
-        <div
-          class="ui raised segments"
-        >
-          <div
-            class="ui segment"
-          >
-            <div
-              class="mocked-choices-widget"
-              id="mocked-field-language"
-            >
-              Language
-               - 
-              Your preferred language
-            </div>
-          </div>
-          <div
-            class="ui clearing segment actions"
-          >
-            <button
-              aria-label="Save"
-              class="ui basic primary right floated button"
-              title="Save"
-              type="submit"
-            >
-              <svg
-                class="icon circled"
-                style="height: 30px; width: auto; fill: currentColor;"
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-            <button
-              aria-label="Cancel"
-              class="ui basic secondary right floated button"
-              title="Cancel"
-            >
-              <svg
-                class="icon circled"
-                style="height: 30px; width: auto; fill: currentColor;"
-                viewBox=""
-                xmlns=""
-              />
-            </button>
-          </div>
-        </div>
-      </fieldset>
-    </form>
-  </div>
+    data-schema="{
+  \\"fieldsets\\": [
+    {
+      \\"id\\": \\"default\\",
+      \\"title\\": \\"Default\\",
+      \\"fields\\": [
+        \\"language\\"
+      ]
+    }
+  ],
+  \\"properties\\": {
+    \\"language\\": {
+      \\"description\\": \\"Your preferred language\\",
+      \\"title\\": \\"Language\\",
+      \\"type\\": \\"string\\",
+      \\"choices\\": [
+        [
+          \\"ca\\",
+          \\"Català\\"
+        ],
+        [
+          \\"de\\",
+          \\"Deutsch\\"
+        ],
+        [
+          \\"en\\",
+          \\"English\\"
+        ],
+        [
+          \\"es\\",
+          \\"Español\\"
+        ],
+        [
+          \\"eu\\",
+          \\"Euskara\\"
+        ],
+        [
+          \\"fi\\",
+          \\"Suomi\\"
+        ],
+        [
+          \\"fr\\",
+          \\"Français\\"
+        ],
+        [
+          \\"it\\",
+          \\"Italiano\\"
+        ],
+        [
+          \\"nl\\",
+          \\"Nederlands\\"
+        ],
+        [
+          \\"ro\\",
+          \\"Română\\"
+        ],
+        [
+          \\"ja\\",
+          \\"日本語\\"
+        ],
+        [
+          \\"pt\\",
+          \\"Português\\"
+        ],
+        [
+          \\"pt_BR\\",
+          \\"Português (Brasil)\\"
+        ],
+        [
+          \\"zh_CN\\",
+          \\"中文\\"
+        ]
+      ]
+    }
+  },
+  \\"required\\": []
+}"
+    id="Form"
+  />
 </div>
 `;

From 1aaecc5c90fa722226f8ad0c3bff8eb5ed8e5b81 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 9 Apr 2024 17:54:27 +0200
Subject: [PATCH 22/27] added docs

---
 docs/source/contributing/index.md             |  1 +
 .../contributing/performance-guidelines.md    | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 docs/source/contributing/performance-guidelines.md

diff --git a/docs/source/contributing/index.md b/docs/source/contributing/index.md
index 1e914a43a4..6a028d5452 100644
--- a/docs/source/contributing/index.md
+++ b/docs/source/contributing/index.md
@@ -125,6 +125,7 @@ redux
 routing
 icons
 accessibility-guidelines
+performance-guidelines
 typescript
 volto-core-addons
 version-policy
diff --git a/docs/source/contributing/performance-guidelines.md b/docs/source/contributing/performance-guidelines.md
new file mode 100644
index 0000000000..1d193ddadf
--- /dev/null
+++ b/docs/source/contributing/performance-guidelines.md
@@ -0,0 +1,28 @@
+---
+myst:
+  html_meta:
+    'description': 'Performance guidelines in Volto'
+    'property=og:description': 'Performance guidelines in Volto'
+    'property=og:title': 'Performance guidelines'
+    'keywords': 'Volto, Plone, frontend, React, Performance, guidelines'
+---
+
+(performance-guidelines-label)=
+
+# Performance guidelines
+
+## Lazy loading in core
+
+Since Volto 18, several core components use lazy loading to keep the final build size under control.
+
+For example, the Form components are lazy-loaded, which means that the code for the form components is only loaded when the user navigates to a page that contains a form. A new index file has been created at `packages/volto/src/components/manage/Form/index.tsx` that exports the form components with lazy loading. The `export`s in the main components index (`packages/volto/src/components/index.js`) have been updated to export components from the new specific index. The same goes for other components that have been lazy-loaded, i.e. the controlpanels and the widgets.
+
+Several `import` statements have been updated to use the new lazy-loaded components. For example, the `Form` component is now imported from `@plone/volto/components/manage/Form` instead of `@plone/volto/components/manage/Form/Form`. You should keep this in mind and always import components from the specific component index files when available, while avoiding importing components from the main components index file if possible. This should also help reducing the circular dependencies and help the overall build performance in the long run.
+
+### Unit-testing components that use lazy loaded components
+
+If you import a component from a lazy loaded index, you can have issues with rendering these in uni tests. Mocks are provided for lazy-loaded components and are available for you to use. This can be done by using the `jest.mock` function to mock the specific component index. For example, to mock the `Form` component and all other components in the `Form`-specific index, you can use the following code in your test file:
+
+```javascript
+jest.mock('@plone/volto/components/manage/Form');
+```

From 2ec660bdba331cc80fca5f7fedbee1fac2483487 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 16 Apr 2024 12:40:16 +0200
Subject: [PATCH 23/27] fix slate cypress test

---
 packages/volto/cypress/support/commands.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/volto/cypress/support/commands.js b/packages/volto/cypress/support/commands.js
index 0410029d94..6ae8849820 100644
--- a/packages/volto/cypress/support/commands.js
+++ b/packages/volto/cypress/support/commands.js
@@ -702,10 +702,7 @@ Cypress.Commands.add(
   'pasteClipboard',
   { prevSubject: true },
   (query, htmlContent) => {
-    return cy
-      .wrap(query)
-      .type(' {backspace}')
-      .trigger('paste', createHtmlPasteEvent(htmlContent));
+    return cy.wrap(query).trigger('paste', createHtmlPasteEvent(htmlContent));
   },
 );
 

From 713fd297f330542e24b5b8b907e8d4adbfd6762f Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Wed, 17 Apr 2024 17:32:35 +0200
Subject: [PATCH 24/27] rename docs file

---
 ...delines.md => bundle-size-optimization.md} | 10 ++---
 docs/source/contributing/index.md             | 38 ++++++++-----------
 2 files changed, 20 insertions(+), 28 deletions(-)
 rename docs/source/contributing/{performance-guidelines.md => bundle-size-optimization.md} (88%)

diff --git a/docs/source/contributing/performance-guidelines.md b/docs/source/contributing/bundle-size-optimization.md
similarity index 88%
rename from docs/source/contributing/performance-guidelines.md
rename to docs/source/contributing/bundle-size-optimization.md
index 1d193ddadf..553024bb14 100644
--- a/docs/source/contributing/performance-guidelines.md
+++ b/docs/source/contributing/bundle-size-optimization.md
@@ -1,15 +1,15 @@
 ---
 myst:
   html_meta:
-    'description': 'Performance guidelines in Volto'
-    'property=og:description': 'Performance guidelines in Volto'
-    'property=og:title': 'Performance guidelines'
+    'description': 'Bundle size optimization in Volto'
+    'property=og:description': 'Bundle size optimization in Volto'
+    'property=og:title': 'Bundle size optimization'
     'keywords': 'Volto, Plone, frontend, React, Performance, guidelines'
 ---
 
-(performance-guidelines-label)=
+(bundle-size-optimization-label)=
 
-# Performance guidelines
+# Bundle size optimization
 
 ## Lazy loading in core
 
diff --git a/docs/source/contributing/index.md b/docs/source/contributing/index.md
index 6a028d5452..15e4358f5e 100644
--- a/docs/source/contributing/index.md
+++ b/docs/source/contributing/index.md
@@ -1,10 +1,10 @@
 ---
 myst:
   html_meta:
-    "description": "How to contribute to Volto, the frontend for Plone."
-    "property=og:description": "How to contribute to Volto, the frontend for Plone."
-    "property=og:title": "How to contribute to Volto, the frontend for Plone."
-    "keywords": "Plone, Volto, contributing, developer, guidelines"
+    'description': 'How to contribute to Volto, the frontend for Plone.'
+    'property=og:description': 'How to contribute to Volto, the frontend for Plone.'
+    'property=og:title': 'How to contribute to Volto, the frontend for Plone.'
+    'keywords': 'Plone, Volto, contributing, developer, guidelines'
 ---
 
 (contributing-to-volto-label)=
@@ -14,7 +14,6 @@ myst:
 First read {doc}`plone:contributing/index`.
 Volto follows those guidelines with a few specific variations, as described in this chapter.
 
-
 (contributing-reporting-an-issue-or-making-a-feature-request-label)=
 
 ## Report an issue or make a feature request
@@ -26,12 +25,11 @@ When in doubt, create one in the [CMFPlone issue tracker](https://github.com/plo
 
 In your report, please specify a few things:
 
--   What are the steps to reproduce the problem?
--   What do you expect when you follow those steps?
--   What do you observe?
--   Which Plone version are you using?
--   Include relevant screenshots, error messages, and stack traces.
-
+- What are the steps to reproduce the problem?
+- What do you expect when you follow those steps?
+- What do you observe?
+- Which Plone version are you using?
+- Include relevant screenshots, error messages, and stack traces.
 
 (contributing-volto-sign-and-return-the-plone-contributor-agreement-label)=
 
@@ -39,12 +37,12 @@ In your report, please specify a few things:
 
 The Volto Team reviews pull requests only from people with a GitHub account who have signed and returned the {ref}`Plone Contributor Agreement <plone:contributing-sign-and-return-the-plone-contributor-agreement-label>`, and subsequently been assigned to a Plone Team in GitHub.
 
-
 (contributing-branch-policy-label)=
 
 ## Branch policy
 
 ```{include} ./branch-policy.md
+
 ```
 
 (contributing-install-volto-for-development-label)=
@@ -60,7 +58,6 @@ For developing Volto, follow {doc}`developing-core`.
 All text that can be shown in a browser must be translatable.
 Please mark all such strings as translatable as defined in the [i18n guide](../development/i18n.md).
 
-
 (contributing-branch-policy-for-translations-label)=
 
 ### Branch policy for translations
@@ -70,7 +67,6 @@ This means that many translations that may come with those developments will be
 
 When contributing translations, please create a branch from the numbered released branch, and point your pull request to that branch, instead of `main`.
 
-
 (contributing-change-log-entry-label)=
 
 ## Change log entry
@@ -82,14 +78,12 @@ Your attribution must be in the format of `@github_username`.
 For details see {ref}`contributing-change-log-label`.
 ```
 
-
 (contributing-documenting-your-changes-label)=
 
 ## Document breaking changes
 
 If the feature includes a breaking change, you must include instructions for how to upgrade in the [upgrade guide](../upgrade-guide/index.md).
 
-
 (contributing-code-quality-label)=
 
 ## Code quality
@@ -99,11 +93,10 @@ These checks are enforced automatically on every pull request, so you might as w
 
 Specifically:
 
--   {doc}`./linting`
--   {doc}`./testing`
--   {doc}`./acceptance-tests`
--   {doc}`./documentation`
-
+- {doc}`./linting`
+- {doc}`./testing`
+- {doc}`./acceptance-tests`
+- {doc}`./documentation`
 
 (contributing-developer-guidelines-label)=
 
@@ -125,13 +118,12 @@ redux
 routing
 icons
 accessibility-guidelines
-performance-guidelines
+bundle-size-optimization
 typescript
 volto-core-addons
 version-policy
 ```
 
-
 (contributing-final-advice-label)=
 
 ## Final advice

From cfbcac4533346512cbcba8351afe720344b26165 Mon Sep 17 00:00:00 2001
From: Steve Piercy <web@stevepiercy.com>
Date: Wed, 17 Apr 2024 11:25:08 -0600
Subject: [PATCH 25/27] Add introduction and minor grammar, spelling, and style
 fixes

---
 .../contributing/bundle-size-optimization.md  | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/docs/source/contributing/bundle-size-optimization.md b/docs/source/contributing/bundle-size-optimization.md
index 553024bb14..3c0c5c5348 100644
--- a/docs/source/contributing/bundle-size-optimization.md
+++ b/docs/source/contributing/bundle-size-optimization.md
@@ -1,27 +1,41 @@
 ---
 myst:
   html_meta:
-    'description': 'Bundle size optimization in Volto'
-    'property=og:description': 'Bundle size optimization in Volto'
-    'property=og:title': 'Bundle size optimization'
-    'keywords': 'Volto, Plone, frontend, React, Performance, guidelines'
+    "description": "Bundle size optimization in Volto"
+    "property=og:description": "Bundle size optimization in Volto"
+    "property=og:title": "Bundle size optimization"
+    "keywords": "Volto, Plone, frontend, React, Performance, guidelines"
 ---
 
 (bundle-size-optimization-label)=
 
 # Bundle size optimization
 
+This document describes how to optimize the bundle size of components through {term}`lazy loading` to improve page load times.
+Contributors to Volto core should follow the guidelines in this document.
+
+
 ## Lazy loading in core
 
 Since Volto 18, several core components use lazy loading to keep the final build size under control.
 
-For example, the Form components are lazy-loaded, which means that the code for the form components is only loaded when the user navigates to a page that contains a form. A new index file has been created at `packages/volto/src/components/manage/Form/index.tsx` that exports the form components with lazy loading. The `export`s in the main components index (`packages/volto/src/components/index.js`) have been updated to export components from the new specific index. The same goes for other components that have been lazy-loaded, i.e. the controlpanels and the widgets.
+For example, the `Form` components are lazy loaded, which means that the code for the form components is only loaded when the user navigates to a page that contains a form.
+A new index file has been created at `packages/volto/src/components/manage/Form/index.tsx` that exports the form components with lazy loading.
+The `export`s in the main components index (`packages/volto/src/components/index.js`) have been updated to export components from the new specific index.
+The same goes for other components that have been lazy loaded, such as the control panels and widgets.
+
+Several `import` statements have been updated to use the new lazy loaded components.
+For example, the `Form` component is now imported from `@plone/volto/components/manage/Form` instead of `@plone/volto/components/manage/Form/Form`.
+You should keep this in mind, and always import components from the specific component index files when available, while avoiding importing components from the main components index file, if possible.
+This should also help to reduce circular dependencies, and help the overall build performance in the long run.
 
-Several `import` statements have been updated to use the new lazy-loaded components. For example, the `Form` component is now imported from `@plone/volto/components/manage/Form` instead of `@plone/volto/components/manage/Form/Form`. You should keep this in mind and always import components from the specific component index files when available, while avoiding importing components from the main components index file if possible. This should also help reducing the circular dependencies and help the overall build performance in the long run.
 
-### Unit-testing components that use lazy loaded components
+### Unit test components that use lazy loaded components
 
-If you import a component from a lazy loaded index, you can have issues with rendering these in uni tests. Mocks are provided for lazy-loaded components and are available for you to use. This can be done by using the `jest.mock` function to mock the specific component index. For example, to mock the `Form` component and all other components in the `Form`-specific index, you can use the following code in your test file:
+If you import a component from a lazy loaded index, you can have issues with rendering these in unit tests.
+Mocks are provided for lazy loaded components and are available for you to use.
+This can be done by using the `jest.mock` function to mock the specific component index.
+For example, to mock the `Form` component and all other components in the `Form`-specific index, you can use the following code in your test file:
 
 ```javascript
 jest.mock('@plone/volto/components/manage/Form');

From cc1714a3327ed3c9bf71abc485a5f0d3931d33c0 Mon Sep 17 00:00:00 2001
From: Steve Piercy <web@stevepiercy.com>
Date: Wed, 17 Apr 2024 11:27:44 -0600
Subject: [PATCH 26/27] Revert editor changes

---
 docs/source/contributing/index.md | 38 +++++++++++++++++++------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/docs/source/contributing/index.md b/docs/source/contributing/index.md
index 15e4358f5e..cc6b8d03b2 100644
--- a/docs/source/contributing/index.md
+++ b/docs/source/contributing/index.md
@@ -1,10 +1,10 @@
 ---
 myst:
   html_meta:
-    'description': 'How to contribute to Volto, the frontend for Plone.'
-    'property=og:description': 'How to contribute to Volto, the frontend for Plone.'
-    'property=og:title': 'How to contribute to Volto, the frontend for Plone.'
-    'keywords': 'Plone, Volto, contributing, developer, guidelines'
+    "description": "How to contribute to Volto, the frontend for Plone."
+    "property=og:description": "How to contribute to Volto, the frontend for Plone."
+    "property=og:title": "How to contribute to Volto, the frontend for Plone."
+    "keywords": "Plone, Volto, contributing, developer, guidelines"
 ---
 
 (contributing-to-volto-label)=
@@ -14,6 +14,7 @@ myst:
 First read {doc}`plone:contributing/index`.
 Volto follows those guidelines with a few specific variations, as described in this chapter.
 
+
 (contributing-reporting-an-issue-or-making-a-feature-request-label)=
 
 ## Report an issue or make a feature request
@@ -25,11 +26,12 @@ When in doubt, create one in the [CMFPlone issue tracker](https://github.com/plo
 
 In your report, please specify a few things:
 
-- What are the steps to reproduce the problem?
-- What do you expect when you follow those steps?
-- What do you observe?
-- Which Plone version are you using?
-- Include relevant screenshots, error messages, and stack traces.
+-   What are the steps to reproduce the problem?
+-   What do you expect when you follow those steps?
+-   What do you observe?
+-   Which Plone version are you using?
+-   Include relevant screenshots, error messages, and stack traces.
+
 
 (contributing-volto-sign-and-return-the-plone-contributor-agreement-label)=
 
@@ -37,20 +39,22 @@ In your report, please specify a few things:
 
 The Volto Team reviews pull requests only from people with a GitHub account who have signed and returned the {ref}`Plone Contributor Agreement <plone:contributing-sign-and-return-the-plone-contributor-agreement-label>`, and subsequently been assigned to a Plone Team in GitHub.
 
+
 (contributing-branch-policy-label)=
 
 ## Branch policy
 
 ```{include} ./branch-policy.md
-
 ```
 
+
 (contributing-install-volto-for-development-label)=
 
 ## Install Volto for development
 
 For developing Volto, follow {doc}`developing-core`.
 
+
 (contributing-translations-label)=
 
 ## Translations
@@ -58,6 +62,7 @@ For developing Volto, follow {doc}`developing-core`.
 All text that can be shown in a browser must be translatable.
 Please mark all such strings as translatable as defined in the [i18n guide](../development/i18n.md).
 
+
 (contributing-branch-policy-for-translations-label)=
 
 ### Branch policy for translations
@@ -67,6 +72,7 @@ This means that many translations that may come with those developments will be
 
 When contributing translations, please create a branch from the numbered released branch, and point your pull request to that branch, instead of `main`.
 
+
 (contributing-change-log-entry-label)=
 
 ## Change log entry
@@ -78,12 +84,14 @@ Your attribution must be in the format of `@github_username`.
 For details see {ref}`contributing-change-log-label`.
 ```
 
+
 (contributing-documenting-your-changes-label)=
 
 ## Document breaking changes
 
 If the feature includes a breaking change, you must include instructions for how to upgrade in the [upgrade guide](../upgrade-guide/index.md).
 
+
 (contributing-code-quality-label)=
 
 ## Code quality
@@ -93,10 +101,11 @@ These checks are enforced automatically on every pull request, so you might as w
 
 Specifically:
 
-- {doc}`./linting`
-- {doc}`./testing`
-- {doc}`./acceptance-tests`
-- {doc}`./documentation`
+-   {doc}`./linting`
+-   {doc}`./testing`
+-   {doc}`./acceptance-tests`
+-   {doc}`./documentation`
+
 
 (contributing-developer-guidelines-label)=
 
@@ -124,6 +133,7 @@ volto-core-addons
 version-policy
 ```
 
+
 (contributing-final-advice-label)=
 
 ## Final advice

From 5343b27cd5ec9c566babd5976d5eac8916bf18c0 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Thu, 18 Apr 2024 13:08:30 +0200
Subject: [PATCH 27/27] fix more slate tests

---
 .../tests/core/volto-slate/06-block-slate-format-link.js    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/volto/cypress/tests/core/volto-slate/06-block-slate-format-link.js b/packages/volto/cypress/tests/core/volto-slate/06-block-slate-format-link.js
index b34867f541..8e7519ee61 100644
--- a/packages/volto/cypress/tests/core/volto-slate/06-block-slate-format-link.js
+++ b/packages/volto/cypress/tests/core/volto-slate/06-block-slate-format-link.js
@@ -100,7 +100,7 @@ describe('Block Tests: Links', () => {
   it('As editor I can add a link and pressing enter does not add another link in the next block', function () {
     // https://github.com/plone/volto/pull/5186
     cy.get('#toolbar').click();
-    cy.getSlate().type('Colorless green ideas sleep furiously');
+    cy.getSlateEditorAndType('Colorless green ideas sleep furiously');
 
     cy.log('Create a Link');
 
@@ -111,8 +111,8 @@ describe('Block Tests: Links', () => {
       'https://google.com{enter}',
     );
     cy.getSlate().should('have.descendants', 'a.slate-editor-link');
-    cy.getSlate().type('{rightarrow}').type('{enter}');
-    cy.getSlate().type('Hello').type('{enter}');
+    cy.getSlateEditorAndType('{rightarrow}').type('{enter}');
+    cy.getSlateEditorAndType('Hello').type('{enter}');
 
     cy.toolbarSave();