@plone/volto 18.0.0-alpha.47 → 18.0.0-alpha.48

package/CHANGELOG.md

@@ -17,6 +17,27 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.48 (2024-10-30)
+
+### Breaking
+
+- Wrap Table of Contents block in a `nav` tag, instead of a `div` tag, for better representation improving the block accessibility. @Tishasoumya-02 @ichim-david [#6082](https://github.com/plone/volto/issues/6082)
+
+### Feature
+
+- Enhance the `buildStyleObjectFromData` helper. @sneridagh [#6445](https://github.com/plone/volto/issues/6445)
+
+### Bugfix
+
+- Fix error "Exception: No query supplied" in the listing block, when there is no criteria selected. @tedw87 [#3839](https://github.com/plone/volto/issues/3839)
+- Fixed page changes not being announced to screen reader users. @JeffersonBledsoe [#5288](https://github.com/plone/volto/issues/5288)
+- Fix useSelector is returned a different result when called with the same parameters in IdWidget. @iFlameing [#6449](https://github.com/plone/volto/issues/6449)
+- Moved `applyBlockDefaults` one component up so the style is computed correctly. @sneridagh [#6451](https://github.com/plone/volto/issues/6451)
+
+### Documentation
+
+- Added upgrade guide fix for HMR. @sneridagh [#6446](https://github.com/plone/volto/issues/6446)
+
 ## 18.0.0-alpha.47 (2024-10-27)
 
 ### Breaking

package/locales/ca/LC_MESSAGES/volto.po

@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "Taula"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Taula de continguts"
 

package/locales/de/LC_MESSAGES/volto.po

@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Tabelle"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Inhaltsverzeichnis"
 

package/locales/en/LC_MESSAGES/volto.po

@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

package/locales/es/LC_MESSAGES/volto.po

@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Tabla"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Tabla de contenidos"
 

package/locales/eu/LC_MESSAGES/volto.po

@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Taula"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Edukien taula"
 

package/locales/fi/LC_MESSAGES/volto.po

@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Taulukkoa"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Sisällys"
 

package/locales/fr/LC_MESSAGES/volto.po

@@ -3623,8 +3623,7 @@ msgid "Table"
 msgstr "Table"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Table des matières"
 

package/locales/hi/LC_MESSAGES/volto.po

@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "तालिका"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "सारांश की तालिका"
 

package/locales/it/LC_MESSAGES/volto.po

@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "Tabella"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Indice dei contenuti"
 

package/locales/ja/LC_MESSAGES/volto.po

@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "テーブル"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "目次"
 

package/locales/nl/LC_MESSAGES/volto.po

@@ -3620,8 +3620,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

package/locales/pt/LC_MESSAGES/volto.po

@@ -3621,8 +3621,7 @@ msgid "Table"
 msgstr "Tabela"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "Tabela"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Tabela de conteúdos"
 

package/locales/ro/LC_MESSAGES/volto.po

@@ -3616,8 +3616,7 @@ msgid "Table"
 msgstr "Tabel"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "Cuprins"
 

package/locales/volto.pot

@@ -3618,8 +3618,7 @@ msgid "Table"
 msgstr ""
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr ""
 

package/locales/zh_CN/LC_MESSAGES/volto.po

@@ -3622,8 +3622,7 @@ msgid "Table"
 msgstr "表格"
 
 #. Default: "Table of Contents"
-#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
-#: components/manage/Blocks/ToC/variations/HorizontalMenu
+#: components/manage/Blocks/ToC/View
 msgid "Table of Contents"
 msgstr "表格内容"
 

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.47",
+  "version": "18.0.0-alpha.48",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -239,7 +239,7 @@
     "uuid": "^8.3.2",
     "@plone/registry": "2.0.0-alpha.0",
     "@plone/scripts": "3.7.0",
-    "@plone/volto-slate": "18.0.0-alpha.19"
+    "@plone/volto-slate": "18.0.0-alpha.20"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -359,8 +359,8 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/volto-coresandbox": "1.0.0",
-    "@plone/types": "1.0.0-alpha.21"
+    "@plone/types": "1.0.0-alpha.22",
+    "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {
     "node": "20.9.0"

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

@@ -12,7 +12,6 @@ import cx from 'classnames';
 import { setSidebarTab, setUIState } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
-import { applyBlockDefaults } from '@plone/volto/helpers';
 import { ViewDefaultBlock, EditDefaultBlock } from '@plone/volto/components';
 
 import {
@@ -199,7 +198,7 @@ export class Edit extends Component {
             <Block
               {...this.props}
               blockNode={this.blockNode}
-              data={applyBlockDefaults(this.props)}
+              data={this.props.data}
             />
             {this.props.manage && (
               <SidebarPortal

package/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import {
+  applyBlockDefaults,
   applyBlockInitialValue,
   getBlocksFieldname,
   blockHasValue,
@@ -48,7 +49,7 @@ const EditBlockWrapper = (props) => {
     onInsertBlock,
     onSelectBlock,
     onMutateBlock,
-    data,
+    data: originalData,
     editable,
     properties,
     showBlockChooser,
@@ -56,6 +57,8 @@ const EditBlockWrapper = (props) => {
     contentType,
   } = blockProps;
 
+  const data = applyBlockDefaults({ data: originalData, ...blockProps, intl });
+
   const visible = selected && !hideHandler(data);
 
   const required = isBoolean(data.required)
@@ -69,7 +72,7 @@ const EditBlockWrapper = (props) => {
     data,
     classNames,
   });
-  const style = buildStyleObjectFromData(data.styles);
+  const style = buildStyleObjectFromData(data);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D
   const styleMergedWithDragProps = {

package/src/components/manage/Blocks/Block/StyleWrapper.jsx

@@ -19,7 +19,7 @@ const StyleWrapper = (props) => {
     classNames,
   });
 
-  style = buildStyleObjectFromData(data.styles);
+  style = buildStyleObjectFromData(data);
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {

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

@@ -24,6 +24,14 @@ export default function getListingBlockAsyncData(props) {
   const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
   const currentPage = getCurrentPage(location, id);
 
+  if (!data.querystring) {
+    return [
+      async () => {
+        return null;
+      },
+    ];
+  }
+
   return [
     dispatch(
       getQueryStringResults(

package/src/components/manage/Blocks/ToC/View.jsx

@@ -2,10 +2,9 @@
  * View toc block.
  * @module components/manage/Blocks/ToC/View
  */
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
@@ -86,6 +85,8 @@ export const getBlocksTocEntries = (properties, tocData) => {
  */
 const View = (props) => {
   const { data } = props;
+
+  const title = data.title ? data.title : '';
   const { variation } = props;
   const metadata = props.metadata || props.properties;
   const blocksFieldname = getBlocksFieldname(metadata);
@@ -165,9 +166,19 @@ const View = (props) => {
 
   const Renderer = variation?.view;
   return (
-    <div className={cx('table-of-contents', variation?.id)}>
-      {props.mode === 'edit' && !data.title && !tocEntries.length && (
-        <Message>Table of content</Message>
+    <nav
+      aria-label={title && !data.hide_title ? title : ''}
+      className={cx('table-of-contents', variation?.id)}
+    >
+      {props.mode === 'edit' && !title && !tocEntries.length && (
+        <Message>
+          {
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          }
+        </Message>
       )}
 
       {Renderer ? (
@@ -175,7 +186,7 @@ const View = (props) => {
       ) : (
         <div>View extension not found</div>
       )}
-    </div>
+    </nav>
   );
 };
 
@@ -188,4 +199,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(withBlockExtensions(View));
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -3,11 +3,9 @@
  * @module components/manage/Blocks/ToC/View
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import Slugger from 'github-slugger';
 import { UniversalLink } from '@plone/volto/components';
 import { normalizeString } from '@plone/volto/helpers';
@@ -37,26 +35,10 @@ const RenderListItems = ({ items, data }) => {
   });
 };
 
-/**
- * View toc block class.
- * @class View
- * @extends Component
- */
 const View = ({ data, tocEntries }) => {
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <List
         ordered={data.ordered}
         bulleted={!data.ordered}
@@ -77,4 +59,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Menu, Dropdown } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
 import { normalizeString } from '@plone/volto/helpers';
@@ -26,11 +25,6 @@ const RenderMenuItems = ({ items }) => {
   });
 };
 
-/**
- * View toc block class.
- * @class View
- * @extends Component
- */
 const View = ({ data, tocEntries }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   // When the page is resized to prevent items from the TOC from going out of the viewport,
@@ -159,18 +153,7 @@ const View = ({ data, tocEntries }) => {
 
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <Menu className="responsive-menu">
         <RenderMenuItems items={tocEntries} />
         <Dropdown
@@ -201,4 +184,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;

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

@@ -7,7 +7,7 @@ import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { Input } from 'semantic-ui-react';
-import { compact, concat, keys, map, union, uniq } from 'lodash';
+import { compact, concat, map, union, uniq } from 'lodash';
 
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
@@ -46,8 +46,7 @@ const IdWidget = (props) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const ref = useRef();
-
-  const indexes = useSelector((state) => keys(state.querystring.indexes));
+  const indexes = useSelector((state) => state.querystring.indexes);
 
   const [errors, setError] = useState([]);
   const [reservedIds] = useState(
@@ -62,11 +61,11 @@ const IdWidget = (props) => {
       ),
     ),
   );
-  const fieldValidation = (values) => {
+  const fieldValidation = (value) => {
     const error = [];
 
     // Check reserved id's
-    if (reservedIds.indexOf(values) !== -1) {
+    if (reservedIds.indexOf(value) !== -1) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 
@@ -74,14 +73,14 @@ const IdWidget = (props) => {
     if (
       // eslint-disable-next-line no-control-regex
       !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
-        values,
+        value,
       )
     ) {
       error.push(intl.formatMessage(messages.invalidCharacters));
     }
 
     // Check indexes
-    if (indexes.indexOf(values) !== -1) {
+    if (value in indexes) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 

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

@@ -51,6 +51,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
  * @export
@@ -191,6 +192,7 @@ export class App extends Component {
             </main>
           </Segment>
         </MultilingualRedirector>
+        <RouteAnnouncer />
         <Footer />
         <LockingToastsFactory
           content={this.props.content}

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

@@ -1,9 +1,9 @@
+import config from '@plone/volto/registry';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
@@ -64,5 +64,6 @@ describe('App', () => {
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+    component.unmount();
   });
 });

package/src/components/theme/RouteAnnouncer/RouteAnnouncer.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+  const [pageTitle, setPageTitle] = useState('');
+
+  useEffect(() => {
+    function updatePage(title) {
+      setPageTitle(title);
+      document.activeElement.blur();
+    }
+    function handlePop(event) {
+      const pageTitle = event.target.document.title;
+      updatePage(pageTitle);
+    }
+
+    const observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+              updatePage(node.textContent);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.querySelector('title'), {
+      characterData: true,
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    window.addEventListener('popstate', handlePop);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('popstate', handlePop);
+    };
+  }, []);
+
+  return (
+    <p
+      id="route-announcer"
+      role="alert"
+      // Off-screen element with 'best' browser support
+      style={{
+        border: 0,
+        clip: 'rect(1px 1px 1px 1px)', // IE-style CSS for compatibility
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        width: '1px',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+      }}
+    >
+      {pageTitle}
+    </p>
+  );
+}
+
+export default RouteAnnouncer;

package/src/helpers/Blocks/Blocks.js

@@ -629,11 +629,11 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * Generate styles object from data
  *
  * @function buildStyleObjectFromData
- * @param {Object} obj A style wrapper object data
+ * @param {Object} data A block data object
  * @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 = '') => {
+export const buildStyleObjectFromData = (data = {}, prefix = '') => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
@@ -641,39 +641,79 @@ export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
   // }
   // 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),
-  );
+  function recursiveBuildStyleObjectFromData(obj, prefix) {
+    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(
+                  recursiveBuildStyleObjectFromData(
+                    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),
+    );
+  }
+
+  // If the block has a `@type`, it's a full data block object
+  // Then apply the style enhancers
+  if (data['@type']) {
+    const styleObj = data.styles || {};
+    const stylesFromCSSproperties = recursiveBuildStyleObjectFromData(
+      styleObj,
+      prefix,
+    );
+
+    let stylesFromObjectStyleEnhancers = {};
+    const enhancers = config.getUtilities({
+      type: 'styleWrapperStyleObjectEnhancer',
+    });
+
+    enhancers.forEach(({ method }) => {
+      stylesFromObjectStyleEnhancers = {
+        ...stylesFromObjectStyleEnhancers,
+        ...method(data),
+      };
+    });
+
+    return { ...stylesFromCSSproperties, ...stylesFromObjectStyleEnhancers };
+  } else {
+    return recursiveBuildStyleObjectFromData(data, prefix);
+  }
 };
 
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions, name) {
+  return styleDefinitions.find((color) => color.name === name)?.style;
+}
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *

package/src/helpers/Blocks/Blocks.test.js

@@ -24,6 +24,7 @@ import {
   findBlocks,
   findContainer,
   isBlockContainer,
+  findStyleByName,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1103,38 +1104,68 @@ describe('Blocks', () => {
   });
 
   describe('buildStyleObjectFromData', () => {
+    beforeEach(() => {
+      function blockThemesEnhancer(data) {
+        const blockConfig = config.blocks.blocksConfig[data['@type']];
+        const blockStyleDefinitions =
+          // We look up for the blockThemes in the block's data, then in the global config
+          // We keep data.colors for BBB, but data.themes should be used
+          blockConfig.themes ||
+          blockConfig.colors ||
+          config.blocks.themes ||
+          [];
+        return data.theme
+          ? findStyleByName(blockStyleDefinitions, data.theme)
+          : {};
+      }
+      config.registerUtility({
+        name: 'blockThemesEnhancer',
+        type: 'styleWrapperStyleObjectEnhancer',
+        method: blockThemesEnhancer,
+      });
+    });
+
     it('Understands style converter for style values, no styles found', () => {
-      const styles = {
-        color: 'red',
-        backgroundColor: '#FFF',
+      const data = {
+        '@type': 'text',
+        styles: {
+          color: 'red',
+          backgroundColor: '#FFF',
+        },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({});
+      expect(buildStyleObjectFromData(data)).toEqual({});
     });
 
     it('Understands style converter for style values', () => {
-      const styles = {
-        color: 'red',
-        '--background-color': '#FFF',
+      const data = {
+        '@type': 'text',
+        styles: {
+          color: 'red',
+          '--background-color': '#FFF',
+        },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--background-color': '#FFF',
       });
     });
 
     it('Supports multiple nested levels', () => {
-      const styles = {
-        '--color': 'red',
-        backgroundColor: '#AABBCC',
-        nested: {
-          l1: 'white',
-          '--foo': 'white',
-          level2: {
-            '--foo': '#fff',
-            bar: '#000',
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          nested: {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
           },
         },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
         '--nested--foo': 'white',
         '--nested--level2--foo': '#fff',
@@ -1142,22 +1173,168 @@ describe('Blocks', () => {
     });
 
     it('Supports multiple nested levels and optional inclusion of the name of the level', () => {
-      const styles = {
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          'nested:noprefix': {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
+          },
+        },
+      };
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
-        backgroundColor: '#AABBCC',
-        'nested:noprefix': {
-          l1: 'white',
-          '--foo': 'white',
-          level2: {
-            '--foo': '#fff',
-            bar: '#000',
+        '--foo': 'white',
+        '--level2--foo': '#fff',
+      });
+    });
+
+    it('Supports named theme block - with global config', () => {
+      config.blocks.themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const data = {
+        '@type': 'text',
+        theme: 'primary',
+      };
+      expect(buildStyleObjectFromData(data)).toEqual({
+        '--primary-color': '#000',
+        '--primary-foreground-color': '#fff',
+      });
+    });
+
+    it('Supports named theme block - with local block themes config', () => {
+      config.blocks.themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--secondary-color': '#bbb',
+            '--secondary-foreground-color': '#ddd',
           },
+          name: 'secondary',
+          label: 'Secondary',
         },
+      ];
+      config.blocks.blocksConfig.text.themes = themes;
+      const data = {
+        '@type': 'text',
+        theme: 'secondary',
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+
+      expect(buildStyleObjectFromData(data)).toEqual({
+        '--secondary-color': '#bbb',
+        '--secondary-foreground-color': '#ddd',
+      });
+    });
+
+    it('All together now - named theme block - with local block themes config', () => {
+      config.blocks.blocksThemes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--secondary-color': '#bbb',
+            '--secondary-foreground-color': '#ddd',
+          },
+          name: 'secondary',
+          label: 'Secondary',
+        },
+      ];
+
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          'nested:noprefix': {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
+          },
+        },
+        theme: 'secondary',
+        themes,
+      };
+
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
         '--foo': 'white',
         '--level2--foo': '#fff',
+        '--secondary-color': '#bbb',
+        '--secondary-foreground-color': '#ddd',
       });
     });
   });

package/types/components/manage/Blocks/ToC/View.d.ts

@@ -4,8 +4,5 @@ export function getBlocksTocEntries(properties: any, tocData: any): {
     tocEntries: {};
     tocEntriesLayout: any[];
 };
-declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: React.ComponentType<any>;
-};
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;
-import React from 'react';

package/types/components/manage/Blocks/ToC/variations/DefaultTocRenderer.d.ts

@@ -1,5 +1,10 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
-export default _default;
-import React from 'react';
+export default View;
+declare function View({ data, tocEntries }: {
+    data: any;
+    tocEntries: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace View {
+    namespace propTypes {
+        let properties: any;
+    }
+}

package/types/components/manage/Blocks/ToC/variations/HorizontalMenu.d.ts

@@ -1,5 +1,10 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
-export default _default;
-import React from 'react';
+export default View;
+declare function View({ data, tocEntries }: {
+    data: any;
+    tocEntries: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace View {
+    namespace propTypes {
+        let properties: any;
+    }
+}

package/types/components/manage/Blocks/ToC/variations/index.d.ts

@@ -2,15 +2,27 @@ export default ToCVariations;
 declare const ToCVariations: ({
     id: string;
     title: string;
-    view: import("react").FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-        WrappedComponent: import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>;
+    view: {
+        ({ data, tocEntries }: {
+            data: any;
+            tocEntries: any;
+        }): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            properties: any;
+        };
     };
     isDefault: boolean;
 } | {
     id: string;
     title: string;
-    view: import("react").FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-        WrappedComponent: import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>;
+    view: {
+        ({ data, tocEntries }: {
+            data: any;
+            tocEntries: any;
+        }): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            properties: any;
+        };
     };
     isDefault?: undefined;
 })[];

package/types/components/theme/RouteAnnouncer/RouteAnnouncer.d.ts

@@ -0,0 +1,2 @@
+export default RouteAnnouncer;
+declare function RouteAnnouncer(): import("react/jsx-runtime").JSX.Element;

package/types/helpers/Blocks/Blocks.d.ts

@@ -134,6 +134,15 @@ export function applySchemaDefaults({ data, schema, intl }: {
  * @return {Object} Derived data, with the defaults extracted from the schema
  */
 export function applyBlockDefaults({ data, intl, navRoot, contentType, ...rest }: any, blocksConfig: any): any;
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions: any, name: string): any;
 /**
  * Check if a block is a container block
  * check blocks from data as well since some add-ons use that
@@ -168,7 +177,7 @@ export function styleToClassName(key: any, value: any, prefix?: string): any;
 export function buildStyleClassNamesFromData(obj?: {}, prefix?: string): any;
 export function buildStyleClassNamesExtenders({ block, content, data, classNames, }: any): any[];
 export function styleDataToStyleObject(key: any, value: any, prefix?: string): any[];
-export function buildStyleObjectFromData(obj?: any, prefix?: string): any;
+export function buildStyleObjectFromData(data?: any, prefix?: string): any;
 export function getPreviousNextBlock({ content, block }: any): any[];
 export function getBlocksHierarchy(properties: any): any;
 export function findContainer(formData: object, { containerId }: {