@plone/volto 18.0.0-alpha.5 → 18.0.0-alpha.6

package/CHANGELOG.md

@@ -17,6 +17,40 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.6 (2024-01-02)
+
+### Feature
+
+- Added support for custom CSS properties in the `StyleWrapper`. @sneridagh [#5581](https://github.com/plone/volto/issues/5581)
+
+### Bugfix
+
+- Use a textarea in the form for editing an existing comment. @Ravi-kumar9347 [#5265](https://github.com/plone/volto/issues/5265)
+- The hamburger icon to open the mobile/tablet navigation is now hidden if there are no navigation items. @Aarav238 [#5353](https://github.com/plone/volto/issues/5353)
+- Fix preview image component @steffenri [#5379](https://github.com/plone/volto/issues/5379)
+- Fix autopopulated value of facet when settings the value for another one. @iFlameing [#5432](https://github.com/plone/volto/issues/5432)
+- Fix sitemap for multilingual sites
+  [erral] [#5501](https://github.com/plone/volto/issues/5501)
+- Replace createRef with useRef in SidebarPopup
+  [razvanMiu] [#5519](https://github.com/plone/volto/issues/5519)
+- Fixed the project generator's ESLint configuration, added code quality checks to the CI to ensure a generated project can run these checks, and added documentation for how to reconfigure ESLint in projects. @sneridagh [#5530](https://github.com/plone/volto/issues/5530)
+- Fixed edge case error in Unauthorised page and Login route behavior @sneridagh [#5536](https://github.com/plone/volto/issues/5536)
+- changed typo of pnp to pnpm. @ujjwaleee26 [#5537](https://github.com/plone/volto/issues/5537)
+
+### Internal
+
+- Added Cypress tests to verify that the modal dialog for deleting linked items pops up correctly. @Molochem [#5529](https://github.com/plone/volto/issues/5529)
+- Fix stylelint violations @sneridagh [#5544](https://github.com/plone/volto/issues/5544)
+- Update Plone to 6.0.9 @sneridagh [#5562](https://github.com/plone/volto/issues/5562)
+
+### Documentation
+
+- Removed outdated acceptance tests docs @sneridagh [#5533](https://github.com/plone/volto/issues/5533)
+- Add `how-to-restrict-blocks` to `recipes/index.md`, avoiding Sphinx warning. @stevepiercy [#5546](https://github.com/plone/volto/issues/5546)
+- Point developers to correct installation documentation, replaced yarn commands with pnpm, and correct some misspellings. We also now use includes to keep instructions consistent within Volto and in the main Plone 6 documentation. Finally the `NVM_VERSION` substitution now works. @ujjwaleee26 @stevepiercy [#5556](https://github.com/plone/volto/issues/5556)
+- Fix redirects. @stevepiercy [#5563](https://github.com/plone/volto/issues/5563)
+- Fix redirect for `nvm.fish`. @stevepiercy [#5569](https://github.com/plone/volto/issues/5569)
+
 ## 18.0.0-alpha.5 (2023-12-13)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.5",
+  "version": "18.0.0-alpha.6",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -189,7 +189,7 @@
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
     "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -312,9 +312,9 @@
     "webpack-node-externals": "3.0.0",
     "xmlrpc": "1.3.2",
     "yarnhook": "0.5.1",
-    "@plone/registry": "1.1.0",
-    "@plone/scripts": "3.1.0",
-    "@plone/volto-slate": "18.0.0-alpha.5"
+    "@plone/registry": "1.2.0",
+    "@plone/volto-slate": "18.0.0-alpha.5",
+    "@plone/scripts": "3.1.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",

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

@@ -3,6 +3,7 @@ import { Icon } from '@plone/volto/components';
 import {
   blockHasValue,
   buildStyleClassNamesFromData,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -57,7 +58,8 @@ const EditBlockWrapper = (props) => {
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const styles = buildStyleClassNamesFromData(data.styles);
+  const classNames = buildStyleClassNamesFromData(data.styles);
+  const style = buildStyleObjectFromData(data.styles);
 
   return (
     <div
@@ -66,9 +68,10 @@ const EditBlockWrapper = (props) => {
       // Right now, we can have the alignment information in the styles property or in the
       // block data root, we inject the classname here for having control over the whole
       // Block Edit wrapper
-      className={cx(`block-editor-${data['@type']}`, styles, {
+      className={cx(`block-editor-${data['@type']}`, classNames, {
         [data.align]: data.align,
       })}
+      style={style}
     >
       <div style={{ position: 'relative' }}>
         <div

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

@@ -3,10 +3,12 @@ import cx from 'classnames';
 import {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 
 const StyleWrapper = (props) => {
-  let classNames = [];
+  let classNames,
+    style = [];
   const { children, content, data = {}, block } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
@@ -16,11 +18,15 @@ const StyleWrapper = (props) => {
     data,
     classNames,
   });
+
+  style = buildStyleObjectFromData(data.styles);
+
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
         className: cx([child.props.className, ...classNames]),
+        style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);
     }

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

@@ -5,7 +5,7 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const GridBlockView = (props) => {
-  const { data, path, className } = props;
+  const { data, path, className, style } = props;
   const metadata = props.metadata || props.properties;
   const columns = data.blocks_layout.items;
   const blocksConfig =
@@ -22,6 +22,7 @@ const GridBlockView = (props) => {
         three: columns?.length === 3,
         four: columns?.length === 4,
       })}
+      style={style}
     >
       {data.headline && <h2 className="headline">{data.headline}</h2>}
 

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

@@ -9,7 +9,7 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-export const View = ({ className, data, detached, properties }) => {
+export const View = ({ className, data, detached, properties, style }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -25,6 +25,7 @@ export const View = ({ className, data, detached, properties }) => {
         data.align,
         className,
       )}
+      style={style}
     >
       {data.url && (
         <>

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

@@ -6,11 +6,12 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
-  const { data, path, pathname, className } = props;
+  const { data, path, pathname, className, style } = props;
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
+      style={style}
     >
       <ListingBody {...props} path={path ?? pathname} />
     </div>

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -96,9 +96,21 @@ function normalizeState({
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
 
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
   const params = {
     query: [
-      ...(query.query || []),
+      ...(queryWithoutFacet || []),
       ...(facetSettings || []).map((facet) => {
         if (!facet?.field) return null;
 
@@ -261,14 +273,34 @@ const withSearch = (options) => (WrappedComponent) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const configuredFacets =
       data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
     const [facets, setFacets] = React.useState(
       Object.assign(
         {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
         // support for simple filters like ?Subject=something
         // TODO: since the move to hash params this is no longer working.
         // We'd have to treat the location.search and manage it just like the
@@ -288,8 +320,17 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const previousUrlQuery = usePrevious(urlQuery);
 
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
     React.useEffect(() => {
-      if (!isEqual(urlQuery, previousUrlQuery)) {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
         setFacets(
           Object.assign(
             {},
@@ -319,6 +360,7 @@ const withSearch = (options) => (WrappedComponent) => {
       locationSearchData,
       multiFacets,
       previousUrlQuery,
+      preventOverrideOfFacetState,
     ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode } = props;
+  const { className, data, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -27,7 +27,7 @@ const TeaserDefaultTemplate = (props) => {
   const { openExternalLinkInNewTab } = config.settings;
 
   return (
-    <div className={cx('block teaser', className)}>
+    <div className={cx('block teaser', className)} style={style}>
       <>
         {!href && isEditMode && (
           <Message>

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -9,7 +9,7 @@ const DEFAULT_TIMEOUT = 500;
 const SidebarPopup = (props) => {
   const { children, open, onClose, overlay } = props;
 
-  const asideElement = React.createRef();
+  const asideElement = React.useRef();
 
   const handleClickOutside = (e) => {
     if (asideElement && doesNodeContainClick(asideElement.current, e)) return;

package/src/components/theme/Comments/CommentEditModal.jsx

@@ -60,6 +60,7 @@ const CommentEditModal = (props) => {
             text: {
               title: intl.formatMessage(messages.comment),
               type: 'string',
+              widget: 'textarea',
               description: '',
             },
           },

package/src/components/theme/Login/Login.jsx

@@ -77,8 +77,9 @@ const Login = (props) => {
     qs.parse(props.location?.search ?? location.search).return_url ||
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
+
   useEffect(() => {
-    if (token && !props.isLogout) {
+    if (token && !(props.isLogout || location?.state?.isLogout)) {
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -108,7 +109,16 @@ const Login = (props) => {
         dispatch(resetLoginRequest());
       }
     };
-  }, [dispatch, token, error, intl, history, returnUrl, props.isLogout]);
+  }, [
+    dispatch,
+    token,
+    error,
+    intl,
+    history,
+    returnUrl,
+    props.isLogout,
+    location?.state?.isLogout,
+  ]);
 
   const onLogin = (event) => {
     dispatch(

package/src/components/theme/Navigation/Navigation.jsx

@@ -48,40 +48,42 @@ const Navigation = (props) => {
     }
     setisMobileMenuOpen(false);
   };
-
   return (
     <nav className="navigation" id="navigation" aria-label="Site">
-      <div className="hamburger-wrapper mobile tablet only">
-        <button
-          className={cx('hamburger hamburger--spin', {
-            'is-active': isMobileMenuOpen,
-          })}
-          aria-label={
-            isMobileMenuOpen
-              ? intl.formatMessage(messages.closeMobileMenu, {
-                  type: type,
-                })
-              : intl.formatMessage(messages.openMobileMenu, {
-                  type: type,
-                })
-          }
-          title={
-            isMobileMenuOpen
-              ? intl.formatMessage(messages.closeMobileMenu, {
-                  type: type,
-                })
-              : intl.formatMessage(messages.openMobileMenu, {
-                  type: type,
-                })
-          }
-          type="button"
-          onClick={toggleMobileMenu}
-        >
-          <span className="hamburger-box">
-            <span className="hamburger-inner" />
-          </span>
-        </button>
-      </div>
+      {items?.length ? (
+        <div className="hamburger-wrapper mobile tablet only">
+          <button
+            className={cx('hamburger hamburger--spin', {
+              'is-active': isMobileMenuOpen,
+            })}
+            aria-label={
+              isMobileMenuOpen
+                ? intl.formatMessage(messages.closeMobileMenu, {
+                    type: type,
+                  })
+                : intl.formatMessage(messages.openMobileMenu, {
+                    type: type,
+                  })
+            }
+            title={
+              isMobileMenuOpen
+                ? intl.formatMessage(messages.closeMobileMenu, {
+                    type: type,
+                  })
+                : intl.formatMessage(messages.openMobileMenu, {
+                    type: type,
+                  })
+            }
+            type="button"
+            onClick={toggleMobileMenu}
+          >
+            <span className="hamburger-box">
+              <span className="hamburger-inner" />
+            </span>
+          </button>
+        </div>
+      ) : null}
+
       <Menu
         stackable
         pointing

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -11,12 +11,17 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
   const Image = config.getComponent({ name: 'Image' }).component;
 
   const image = (
-    <Image item={item} image_field={image_field} alt={alt} {...rest} />
+    <Image
+      item={item}
+      image_field={image_field || item.image_field}
+      alt={alt}
+      {...rest}
+    />
   );
 
   if (!image && !showDefault) return null;
 
-  if (image) {
+  if (image_field || item?.image_field) {
     return image;
   } else {
     return (

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -33,16 +33,16 @@ export function getSitemapPath(pathname = '', lang) {
 function Sitemap(props) {
   const {
     location: { pathname },
-    language,
+    lang,
     getNavigation,
   } = props;
 
   useEffect(() => {
     const { settings } = config;
-    const lang = settings.isMultilingual ? `${toBackendLang(language)}` : null;
-    const path = getSitemapPath(pathname, lang);
+    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
+    const path = getSitemapPath(pathname, language);
     getNavigation(path, 4);
-  }, [pathname, language, getNavigation]);
+  }, [pathname, lang, getNavigation]);
 
   const renderItems = (items) => {
     return (

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

@@ -3,6 +3,7 @@ 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 { __test__ as Sitemap, getSitemapPath } from './Sitemap';
 
@@ -55,6 +56,57 @@ describe('Sitemap', () => {
   });
 });
 
+describe('Sitemap in a multilingual site', () => {
+  beforeEach(() => {
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es'];
+  });
+  it('renders a sitemap component', () => {
+    const store = mockStore({
+      navigation: {
+        url: 'http://localhost:8080/Plone/en/@navigation',
+        items: [
+          {
+            url: 'http://localhost:8080/Plone/en/page-1',
+            description: '',
+            items: [
+              {
+                url: 'http://localhost:8080/Plone/en/page-1/page-1-2',
+                description: '',
+                title: 'Page 1-2',
+              },
+              {
+                url: 'http://localhost:8080/Plone/en/page-1/page-1-3',
+                description: '',
+                title: 'Page 1-3',
+              },
+            ],
+            title: 'Page 1-3',
+          },
+          {
+            url: 'http://localhost:8080/Plone/en/page-2',
+            description: '',
+            title: 'Page 2',
+          },
+        ],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Sitemap location={{ pathname: '/en/' }} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
+
 describe('getSitemapPath', () => {
   it('accepts empty path', () => {
     expect(getSitemapPath('', null)).toBe('');

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -1,8 +1,3 @@
-/**
- * @module components/theme/Unauthorized/Unauthorized
- */
-
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
@@ -11,11 +6,6 @@ import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 import { getBaseUrl } from '@plone/volto/helpers';
 
-/**
- * unauthorized function.
- * @function Unauthorized
- * @returns {string} Markup of the unauthorized page.
- */
 const Unauthorized = () => {
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
@@ -32,7 +22,18 @@ const Unauthorized = () => {
           defaultMessage="You are trying to access a protected resource, please {login} first."
           values={{
             login: (
-              <Link to={`${getBaseUrl(location.pathname)}/login`}>
+              <Link
+                to={{
+                  pathname: `${getBaseUrl(location.pathname)}/login`,
+                  state: {
+                    // This is needed to cover the use case of being logged in in
+                    // another backend (eg. in development), having a token for
+                    // localhost and try to use it, the login route has to know that
+                    // it's the same as it comes from a logout
+                    isLogout: true,
+                  },
+                }}
+              >
                 <FormattedMessage id="log in" defaultMessage="log in" />
               </Link>
             ),

package/src/helpers/Blocks/Blocks.js

@@ -563,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',
@@ -571,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,
@@ -602,6 +603,60 @@ 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, `${prefix}${k}--`),
+          //     );
+          //   }
+          //   return [styleDataToStyleObject(k, v, prefix)];
+          // })(),
+          ...(isObject(v)
+            ? Object.entries(buildStyleObjectFromData(v, `${prefix}${k}--`))
+            : [styleDataToStyleObject(k, v, prefix)]),
+        ],
+        [],
+      )
+      .filter((v) => !!v),
+  );
+};
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *

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

@@ -18,6 +18,7 @@ import {
   applySchemaDefaults,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   blocksFormGenerator,
   findBlocks,
@@ -1066,6 +1067,62 @@ describe('Blocks', () => {
       };
       expect(buildStyleClassNamesFromData(styles)).toEqual([]);
     });
+
+    it('It does not output any className for style converter values', () => {
+      const styles = {
+        color: 'red',
+        '--background-color': '#FFF',
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual(['has--color--red']);
+    });
+
+    it.skip('It does not output any className for unknown converter values', () => {
+      const styles = {
+        color: 'red',
+        'backgroundColor:style': '#FFF',
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual(['has--color--red']);
+    });
+  });
+
+  describe('buildStyleObjectFromData', () => {
+    it('Understands style converter for style values, no styles found', () => {
+      const styles = {
+        color: 'red',
+        backgroundColor: '#FFF',
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({});
+    });
+
+    it('Understands style converter for style values', () => {
+      const styles = {
+        color: 'red',
+        '--background-color': '#FFF',
+      };
+      expect(buildStyleObjectFromData(styles)).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',
+          },
+        },
+      };
+      expect(buildStyleObjectFromData(styles)).toEqual({
+        '--color': 'red',
+        '--nested--foo': 'white',
+        '--nested--level2--foo': '#fff',
+      });
+    });
   });
 
   describe('getPreviousNextBlock', () => {

package/src/helpers/index.js

@@ -58,6 +58,7 @@ export {
   blocksFormGenerator,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';

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

@@ -784,10 +784,12 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     // reseting the default Accordion behavior
     display: initial;
   }
+
   .ui.form .ui.input input {
     //reset for semantic-ui outline:none
     border-width: @1px;
     border-color: transparent;
+
     &:focus {
       border-color: @focusedFormBorderColor;
     }

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

@@ -131,9 +131,9 @@
     padding: 0;
     border: 0;
     background: transparent;
-    text-align: initial;
     // we want buttons to have same font as the page font stack
     font-family: @pageFont;
+    text-align: initial;
 
     &:focus {
       outline: none;
@@ -201,6 +201,7 @@
       .item:focus-visible {
         outline: auto;
       }
+
       .item:first-child {
         margin-left: 45px;
       }