@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.30

package/src/config/Blocks.jsx

@@ -1,22 +1,19 @@
 import { defineMessages } from 'react-intl';
+import { cloneDeep } from 'lodash';
 
 import ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View';
 import ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View';
 import ViewToCBlock from '@plone/volto/components/manage/Blocks/ToC/View';
-import ViewTextBlock from '@plone/volto/components/manage/Blocks/Text/View';
 import ViewImageBlock from '@plone/volto/components/manage/Blocks/Image/View';
 import ViewLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/View';
 import ViewListingBlock from '@plone/volto/components/manage/Blocks/Listing/View';
 import ViewVideoBlock from '@plone/volto/components/manage/Blocks/Video/View';
-import ViewHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/View';
 import ViewMapBlock from '@plone/volto/components/manage/Blocks/Maps/View';
 import ViewHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/View';
-import ViewTableBlock from '@plone/volto/components/manage/Blocks/Table/View';
 
 import EditTitleBlock from '@plone/volto/components/manage/Blocks/Title/Edit';
 import EditDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/Edit';
 import EditToCBlock from '@plone/volto/components/manage/Blocks/ToC/Edit';
-import EditTextBlock from '@plone/volto/components/manage/Blocks/Text/Edit';
 import EditImageBlock from '@plone/volto/components/manage/Blocks/Image/Edit';
 import EditLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/Edit';
 import EditListingBlock from '@plone/volto/components/manage/Blocks/Listing/Edit';
@@ -25,20 +22,15 @@ import GalleryNoResultsComponent from '@plone/volto/components/manage/Blocks/Lis
 import DefaultListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/DefaultTemplate';
 import SummaryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/SummaryTemplate';
 import EditVideoBlock from '@plone/volto/components/manage/Blocks/Video/Edit';
-import EditHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit';
 import EditMapBlock from '@plone/volto/components/manage/Blocks/Maps/Edit';
 import EditHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/Edit';
-import EditTableBlock from '@plone/volto/components/manage/Blocks/Table/Edit';
 
 import descriptionSVG from '@plone/volto/icons/description.svg';
 import titleSVG from '@plone/volto/icons/text.svg';
-import textSVG from '@plone/volto/icons/subtext.svg';
 import cameraSVG from '@plone/volto/icons/camera.svg';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import codeSVG from '@plone/volto/icons/code.svg';
-import heroSVG from '@plone/volto/icons/hero.svg';
-import tableSVG from '@plone/volto/icons/table.svg';
 import listingBlockSVG from '@plone/volto/icons/content-listing.svg';
 import tocSVG from '@plone/volto/icons/list-bullet.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
@@ -47,7 +39,6 @@ import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
-import TextSettingsSchema from '@plone/volto/components/manage/Blocks/Text/Schema';
 import ImageSettingsSchema from '@plone/volto/components/manage/Blocks/Image/LayoutSchema';
 import ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema';
 
@@ -79,7 +70,6 @@ import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/
 import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
-import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
 import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/schema';
 
@@ -191,6 +181,63 @@ defineMessages({
     id: 'toggleFacet',
     defaultMessage: 'Toggle',
   },
+  // BBB Table messages
+  Table: {
+    id: 'Table',
+    defaultMessage: 'Table',
+  },
+  cell: {
+    id: 'Cell',
+    defaultMessage: 'Cell',
+  },
+  insertRowBefore: {
+    id: 'Insert row before',
+    defaultMessage: 'Insert row before',
+  },
+  insertRowAfter: {
+    id: 'Insert row after',
+    defaultMessage: 'Insert row after',
+  },
+  deleteRow: {
+    id: 'Delete row',
+    defaultMessage: 'Delete row',
+  },
+  insertColBefore: {
+    id: 'Insert col before',
+    defaultMessage: 'Insert col before',
+  },
+  insertColAfter: {
+    id: 'Insert col after',
+    defaultMessage: 'Insert col after',
+  },
+  deleteCol: {
+    id: 'Delete col',
+    defaultMessage: 'Delete col',
+  },
+  fixed: {
+    id: 'Fixed width table cells',
+    defaultMessage: 'Fixed width columns',
+  },
+  compact: {
+    id: 'Make the table compact',
+    defaultMessage: 'Reduce cell padding',
+  },
+  basic: {
+    id: 'Reduce complexity',
+    defaultMessage: 'Minimalistic table design',
+  },
+  celled: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Add border to inner columns',
+  },
+  striped: {
+    id: 'Stripe alternate rows with color',
+    defaultMessage: 'Alternate row background color',
+  },
+  headerCell: {
+    id: 'Header cell',
+    defaultMessage: 'Header cell',
+  },
 });
 
 const groupBlocksOrder = [
@@ -230,25 +277,6 @@ const blocksConfig = {
     blockHasOwnFocusManagement: true,
     sidebarTab: 0,
   },
-  text: {
-    id: 'text',
-    title: 'Text',
-    icon: textSVG,
-    group: 'text',
-    view: ViewTextBlock,
-    edit: EditTextBlock,
-    schema: TextSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 0,
-    blockHasValue: (data) => {
-      const isEmpty =
-        !data.text ||
-        (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
-      return !isEmpty;
-    },
-  },
   image: {
     id: 'image',
     title: 'Image',
@@ -335,21 +363,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 1,
   },
-  hero: {
-    id: 'hero',
-    title: 'Hero',
-    icon: heroSVG,
-    group: 'common',
-    view: ViewHeroImageLeftBlock,
-    edit: EditHeroImageLeftBlock,
-    schema: BlockSettingsSchema,
-    blockSchema: HeroImageLeftBlockSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
-
   maps: {
     id: 'maps',
     title: 'Maps',
@@ -374,19 +387,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 0,
   },
-  table: {
-    id: 'table',
-    title: 'Table',
-    icon: tableSVG,
-    group: 'common',
-    view: ViewTableBlock,
-    edit: EditTableBlock,
-    schema: BlockSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
   search: {
     id: 'search',
     title: 'Search',
@@ -451,7 +451,7 @@ const blocksConfig = {
           },
           {
             id: 'daterangeFacet',
-            title: 'Date range',
+            title: 'Date Range',
             view: DateRangeFacet,
             isDefault: false,
             stateToValue: DateRangeFacet.stateToValue,
@@ -519,15 +519,11 @@ const blocksConfig = {
 // for the grid block, since we need to modify how the inner teaser
 // block behave in it (= no schemaEnhancer fields for teasers inside a grid)
 // Afterwards, it can be further customized in add-ons using the same technique.
-blocksConfig.gridBlock.blocksConfig = { ...blocksConfig };
-blocksConfig.gridBlock.blocksConfig.teaser = {
-  ...blocksConfig.teaser,
-  schemaEnhancer: gridTeaserDisableStylingSchema,
-};
-blocksConfig.gridBlock.blocksConfig.image = {
-  ...blocksConfig.image,
-  schemaEnhancer: gridImageDisableSizeAndPositionHandlersSchema,
-};
+blocksConfig.gridBlock.blocksConfig = cloneDeep(blocksConfig);
+blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
+  gridTeaserDisableStylingSchema;
+blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
+  gridImageDisableSizeAndPositionHandlersSchema;
 
 const requiredBlocks = ['title'];
 

package/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(

package/src/config/Loadables.jsx

@@ -35,26 +35,4 @@ export const loadables = {
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
-
-  // draftjs libs
-  immutableLib: loadable.lib(() => import('immutable')),
-  draftJs: loadable.lib(() => import('draft-js')),
-  draftJsLibIsSoftNewlineEvent: loadable.lib(() =>
-    import('draft-js/lib/isSoftNewlineEvent'),
-  ),
-  draftJsFilters: loadable.lib(() => import('draftjs-filters')),
-  draftJsInlineToolbarPlugin: loadable.lib(() =>
-    import('draft-js-inline-toolbar-plugin'),
-  ),
-  draftJsImportHtml: loadable.lib(() => import('draft-js-import-html')),
-  draftJsBlockBreakoutPlugin: loadable.lib(() =>
-    import('draft-js-block-breakout-plugin'),
-  ),
-  draftJsCreateInlineStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createInlineStyleButton'),
-  ),
-  draftJsCreateBlockStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createBlockStyleButton'),
-  ),
-  draftJsPluginsUtils: loadable.lib(() => import('draft-js-plugins-utils')),
 };

package/src/config/Views.jsx

@@ -18,8 +18,8 @@ import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorize
 import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
 import ServerError from '@plone/volto/components/theme/Error/ServerError';
 
-const EventView = loadable(() =>
-  import('@plone/volto/components/theme/View/EventView'),
+const EventView = loadable(
+  () => import('@plone/volto/components/theme/View/EventView'),
 );
 
 defineMessages({

package/src/config/Widgets.jsx

@@ -1,40 +1,36 @@
-// 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,
+  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 +51,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: {
@@ -76,7 +63,6 @@ export const widgetMapping = {
     site_logo: RegistryImageWidget,
   },
   widget: {
-    richtext: WysiwygWidget,
     textarea: TextareaWidget,
     datetime: DatetimeWidget,
     date: DatetimeWidget,

package/src/config/index.js

@@ -1,7 +1,3 @@
-/**
- * Config.
- * @module config
- */
 import { parse as parseUrl } from 'url';
 import { defaultWidget, widgetMapping } from './Widgets';
 import {
@@ -31,8 +27,6 @@ import {
   filterControlPanelsSchema,
 } from './ControlPanels';
 
-import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
-
 import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
@@ -79,7 +73,7 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
-      // Added here for documentation purposes, addded at the end because it
+      // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
@@ -116,8 +110,6 @@ let config = {
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
     nonContentRoutes,
-    richtextEditorSettings, // Part of draftjs support, to be removed
-    richtextViewSettings, // Part of draftjs support, to be removed
     imageObjects: ['Image'],
     reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
@@ -149,15 +141,6 @@ let config = {
         'reactBeautifulDnd',
         // 'diffLib',
       ],
-      draftEditor: [
-        'immutableLib',
-        'draftJs',
-        'draftJsLibIsSoftNewlineEvent',
-        'draftJsFilters',
-        'draftJsInlineToolbarPlugin',
-        'draftJsImportHtml',
-        'draftJsBlockBreakoutPlugin',
-      ],
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
@@ -227,6 +210,7 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
+  slots: {},
   components,
 };
 
@@ -254,5 +238,6 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
+ConfigRegistry.slots = config.slots;
 
 applyAddonConfiguration(ConfigRegistry);

package/src/constants/ActionTypes.js

@@ -82,6 +82,9 @@ export const REVERT_HISTORY = 'REVERT_HISTORY';
 export const REVERT_TRANSACTIONS = 'REVERT_TRANSACTIONS';
 export const SEARCH_CONTENT = 'SEARCH_CONTENT';
 export const SET_SIDEBAR_TAB = 'SET_SIDEBAR_TAB';
+export const SET_METADATA_FIELDSETS = 'SET_METADATA_FIELDSETS';
+export const SET_METADATA_FOCUS = 'SET_METADATA_FOCUS';
+export const RESET_METADATA_FOCUS = 'RESET_METADATA_FOCUS';
 export const TRANSITION_WORKFLOW = 'TRANSITION_WORKFLOW';
 export const UNINSTALL_ADDON = 'UNINSTALL_ADDON';
 export const UPDATE_CONTENT = 'UPDATE_CONTENT';
@@ -141,3 +144,4 @@ export const POST_UPGRADE = 'POST_UPGRADE';
 export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
 export const GET_SITE = 'GET_SITE';
 export const GET_NAVROOT = 'GET_NAVROOT';
+export const SET_FORM_DATA = 'SET_FORM_DATA';

package/src/helpers/AsyncConnect/AsyncConnect.test.js

@@ -12,8 +12,6 @@ import { AsyncConnectWithContext, AsyncConnect } from './AsyncConnect'; // , Asy
 import { asyncConnect, loadOnServer } from './';
 import { matchAllRoutes } from './utils';
 
-import '@testing-library/jest-dom/extend-expect';
-
 describe('<ReduxAsyncConnect />', () => {
   const initialEmptyState = {
     router: {

package/src/helpers/AsyncConnect/index.js

@@ -90,6 +90,16 @@ const applyExtenders = (asyncItems, pathname) => {
  * with the "object promises" and that's our "object promises" (which it calls
  * internally "asyncItems").
  */
+/**
+ * Higher-order function that enhances a React component with asynchronous data fetching and Redux integration.
+ *
+ * @param {Array} asyncItems - An array of async items to fetch.
+ * @param {Function} [mapStateToProps] - A function that maps the Redux state to component props.
+ * @param {Function} [mapDispatchToProps] - A function that maps Redux dispatch to component props.
+ * @param {Function} [mergeProps] - A function that merges the props from mapStateToProps, mapDispatchToProps, and the component's own props.
+ * @param {Object} [options] - Additional options for configuring the async connect behavior.
+ * @returns {Function} - A function that takes a React component and returns an enhanced component with async connect functionality.
+ */
 export function asyncConnect(
   asyncItems,
   mapStateToProps,

package/src/helpers/Blocks/Blocks.js

@@ -483,26 +483,26 @@ export function applySchemaDefaults({ data = {}, schema, intl }) {
             [currentField]: schema.properties[currentField].default,
           }
         : intl &&
-          schema.properties[currentField].schema &&
-          !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
-        ? {
-            ...accumulator,
-            [currentField]: {
-              ...applySchemaDefaults({
-                data: { ...data[currentField], ...accumulator[currentField] },
-                schema:
-                  typeof schema.properties[currentField].schema === 'function'
-                    ? schema.properties[currentField].schema({
-                        data: accumulator[currentField],
-                        formData: accumulator[currentField],
-                        intl,
-                      })
-                    : schema.properties[currentField].schema,
-                intl,
-              }),
-            },
-          }
-        : accumulator;
+            schema.properties[currentField].schema &&
+            !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
+          ? {
+              ...accumulator,
+              [currentField]: {
+                ...applySchemaDefaults({
+                  data: { ...data[currentField], ...accumulator[currentField] },
+                  schema:
+                    typeof schema.properties[currentField].schema === 'function'
+                      ? schema.properties[currentField].schema({
+                          data: accumulator[currentField],
+                          formData: accumulator[currentField],
+                          intl,
+                        })
+                      : schema.properties[currentField].schema,
+                  intl,
+                }),
+              },
+            }
+          : accumulator;
     }, {}),
     data,
   );
@@ -517,7 +517,10 @@ export function applySchemaDefaults({ data = {}, schema, intl }) {
  * @param {Object} params An object with data, intl and anything else
  * @return {Object} Derived data, with the defaults extracted from the schema
  */
-export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
+export function applyBlockDefaults(
+  { data, intl, navRoot, contentType, ...rest },
+  blocksConfig,
+) {
   // We pay attention to not break on a missing (invalid) block.
   const block_type = data?.['@type'];
   const { blockSchema } =
@@ -528,7 +531,13 @@ export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
     typeof blockSchema === 'function'
       ? blockSchema({ data, intl, ...rest })
       : blockSchema;
-  schema = applySchemaEnhancer({ schema, formData: data, intl });
+  schema = applySchemaEnhancer({
+    schema,
+    formData: data,
+    intl,
+    navRoot,
+    contentType,
+  });
 
   return applySchemaDefaults({ data, schema, intl });
 }
@@ -554,7 +563,7 @@ export const styleToClassName = (key, value, prefix = '') => {
 };
 
 export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
-  // styles has the form:
+  // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
   //   backgroundColor: '#AABBCC',
@@ -562,6 +571,7 @@ export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
   // Returns: ['has--color--red', 'has--backgroundColor--AABBCC']
 
   return Object.entries(obj)
+    .filter(([k, v]) => !k.startsWith('--'))
     .reduce(
       (acc, [k, v]) => [
         ...acc,
@@ -593,6 +603,68 @@ export const buildStyleClassNamesExtenders = ({
   );
 };
 
+/**
+ * Converts a name+value style pair (ex: color/red) to a pair of [k, v],
+ * such as ["color", "red"] so it can be converted back to an object.
+ * For now, only covering the 'CSSProperty' use case.
+ */
+export const styleDataToStyleObject = (key, value, prefix = '') => {
+  if (prefix) {
+    return [`--${prefix}${key.replace('--', '')}`, value];
+  } else {
+    return [key, value];
+  }
+};
+
+/**
+ * Generate styles object from data
+ *
+ * @function buildStyleObjectFromData
+ * @param {Object} obj A style wrapper object data
+ * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
+ * @return {Object} The style object ready to be passed as prop
+ */
+export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
+  // style wrapper object has the form:
+  // const styles = {
+  //   color: 'red',
+  //   '--background-color': '#AABBCC',
+  // }
+  // Returns: {'--background-color: '#AABBCC'}
+
+  return Object.fromEntries(
+    Object.entries(obj)
+      .filter(([k, v]) => k.startsWith('--') || isObject(v))
+      .reduce(
+        (acc, [k, v]) => [
+          ...acc,
+          // Kept for easy debugging
+          // ...(() => {
+          //   if (isObject(v)) {
+          //     return Object.entries(
+          //       buildStyleObjectFromData(
+          //         v,
+          //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
+          //       ),
+          //     );
+          //   }
+          //   return [styleDataToStyleObject(k, v, prefix)];
+          // })(),
+          ...(isObject(v)
+            ? Object.entries(
+                buildStyleObjectFromData(
+                  v,
+                  `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
+                ),
+              )
+            : [styleDataToStyleObject(k, v, prefix)]),
+        ],
+        [],
+      )
+      .filter((v) => !!v),
+  );
+};
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *
@@ -629,10 +701,13 @@ export function findBlocks(blocks, types, result = []) {
 
   Object.keys(blocks).forEach((blockId) => {
     const block = blocks[blockId];
+    // check blocks from data as well since some add-ons use that
+    // such as @eeacms/volto-tabs-block
+    const child_blocks = block.blocks || block.data?.blocks;
     if (types.includes(block['@type'])) {
       result.push(blockId);
-    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
-      findBlocks(block.blocks, types, result);
+    } else if (containerBlockTypes.includes(block['@type']) || child_blocks) {
+      findBlocks(child_blocks, types, result);
     }
   });