@eeacms/volto-eea-website-theme 3.19.1 → 4.0.1

package/.eslintrc.js

@@ -16,16 +16,16 @@ if (configFile) {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
 }
 
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+const { registry } = AddonRegistry.init(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(registry.packages).map((o) => [
   o,
-  reg.packages[o].modulePath,
+  registry.packages[o].modulePath,
 ]);
 
-const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+const addonExtenders = registry.getEslintExtenders().map((m) => require(m));
 
 const defaultConfig = {
   extends: `${voltoPath}/.eslintrc`,
@@ -34,7 +34,7 @@ const defaultConfig = {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ['@plone/volto-slate', '@plone/volto-slate/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
           ['@root', `${__dirname}/src`],
@@ -48,6 +48,7 @@ const defaultConfig = {
     },
   },
   rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-no-target-blank': [
       'error',
       {

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.0.1](https://github.com/eea/volto-eea-website-theme/compare/4.0.0...4.0.1) - 8 April 2026
+
+#### :hammer_and_wrench: Others
+
+- Add eslint-disable [Miu Razvan - [`4566fb4`](https://github.com/eea/volto-eea-website-theme/commit/4566fb419fe531ff1dc077859e217e01164313ae)]
+- Import routes from @root instead of @plone/volto [Miu Razvan - [`bc239e7`](https://github.com/eea/volto-eea-website-theme/commit/bc239e7a94b5b66c33ab2f6d1321fb7ebc5348ce)]
+## [4.0.0](https://github.com/eea/volto-eea-website-theme/compare/3.19.1...4.0.0) - 7 April 2026
+
+#### :rocket: New Features
+
+- feat: Volto 18 support - refs #301881 [Alin Voinea - [`ef848a8`](https://github.com/eea/volto-eea-website-theme/commit/ef848a8810d4b92942c775aabb31ac239ea57798)]
+
+#### :bug: Bug Fixes
+
+- fix: Replace barrel imports for webpack 5 compatibility - refs #301881 [Teodor Voicu - [`6cdc446`](https://github.com/eea/volto-eea-website-theme/commit/6cdc446889a51c5747a209b77119e25fdf984226)]
+- fix: enforce object browser selection limit and stabilize defaults - refs #301881 [Alin Voinea - [`c3d6b97`](https://github.com/eea/volto-eea-website-theme/commit/c3d6b97ab6b057c692ea2dbe6bc3e4d252c695f7)]
+- fix: make test [Alin V. (Claudiu) - [`69bdf9a`](https://github.com/eea/volto-eea-website-theme/commit/69bdf9a1ef5e72f39ab0d2bde56581f3f642a252)]
+
+#### :house: Internal changes
+
+- chore: Volto 18 eslint update - refs #301881 [Alin Voinea - [`b3d5677`](https://github.com/eea/volto-eea-website-theme/commit/b3d5677106c2de6c4c2e4a48f144d457ac9ce14d)]
+
+#### :hammer_and_wrench: Others
+
+- Release 4.0.0: Volto 18 support [Alin Voinea - [`99c63fe`](https://github.com/eea/volto-eea-website-theme/commit/99c63febd8fc8ce5da73f21e1cddc826c6f0997f)]
+- tests: Fix Sonar Qube tags - refs #297339 [Alin Voinea - [`13a95bf`](https://github.com/eea/volto-eea-website-theme/commit/13a95bf33f8c94232b682c204ae33118911778d7)]
 ### [3.19.1](https://github.com/eea/volto-eea-website-theme/compare/3.19.0...3.19.1) - 24 February 2026
 
 #### :bug: Bug Fixes

package/DEVELOP.md

@@ -26,21 +26,20 @@
 
 ### Or add @eeacms/volto-eea-website-theme to your Volto project
 
-Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
+Before starting make sure your development environment is properly set. See the official Plone documentation for [creating a project with Cookieplone](https://6.docs.plone.org/install/create-project-cookieplone.html) and [installing an add-on in development mode in Volto 18 and 19](https://6.docs.plone.org/volto/development/add-ons/install-an-add-on-dev-18.html).
 
-1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
+For new Volto 18+ projects, use Cookieplone. It includes `mrs-developer` by default.
 
-        npm install -g yo @plone/generator-volto mrs-developer
+1.  Create a new Volto project with Cookieplone
 
-1.  Create new volto app
-
-        yo @plone/volto my-volto-project --addon @eeacms/volto-eea-website-theme --skip-install
-        cd my-volto-project
+        uvx cookieplone project
+        cd project-title
 
 1.  Add the following to `mrs.developer.json`:
 
         {
             "volto-eea-website-theme": {
+                "output": "packages",
                 "url": "https://github.com/eea/volto-eea-website-theme.git",
                 "package": "@eeacms/volto-eea-website-theme",
                 "branch": "develop",
@@ -48,28 +47,31 @@ Before starting make sure your development environment is properly set. See [Vol
             }
         }
 
-1.  Install
+1.  Add `@eeacms/volto-eea-website-theme` to the `addons` key in your project `package.json`
+
+1.  Install or refresh the project setup
 
-        make develop
-        yarn
+        make install
 
-1.  Start backend
+1.  Start backend in one terminal
 
-        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
+        make backend-start
 
-    ...wait for backend to setup and start - `Ready to handle requests`:
+    ...wait for backend to setup and start, ending with `Ready to handle requests`
 
     ...you can also check http://localhost:8080/Plone
 
-1.  Start frontend
+1.  Start frontend in a second terminal
 
-        yarn start
+        make frontend-start
 
 1.  Go to http://localhost:3000
 
 1.  Happy hacking!
 
-        cd src/addons/volto-eea-website-theme/
+        cd packages/volto-eea-website-theme
+
+For legacy Volto 17 projects, keep using the yarn-based workflow from the Volto 17 documentation.
 
 ## Cypress
 
@@ -81,7 +83,7 @@ project where you added `volto-eea-website-theme` to `mrs.developer.json`
 Go to:
 
   ```BASH
-  cd src/addons/volto-eea-website-theme/
+  cd packages/volto-eea-website-theme/
   ```
 
 Start:

package/README.md

@@ -54,6 +54,11 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 Go to http://localhost:3000
 
+`make start` now defaults to Volto 18. To run the same setup against Volto 17, use:
+
+      VOLTO_VERSION=17 make
+      VOLTO_VERSION=17 make start
+
 ### Add volto-eea-website-theme to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -76,21 +81,28 @@ Go to http://localhost:3000
   }
   ```
 
-- If not, create one:
+- If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:
 
   ```
-  npm install -g yo @plone/generator-volto
-  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-website-theme
-  cd my-volto-project
+  uvx cookieplone project
+  cd project-title
   ```
 
-1. Install new add-ons and restart Volto:
+1. Install or update dependencies, then start the project:
 
    ```
-   yarn
-   yarn start
+   make install
    ```
 
+   For a Cookieplone project, start the backend and frontend in separate terminals:
+
+   ```
+   make backend-start
+   make frontend-start
+   ```
+
+   For a legacy Volto 17 project, install the package with `yarn` and restart the frontend as usual.
+
 1. Go to http://localhost:3000
 
 1. Happy editing!

package/docker-compose.yml

@@ -14,7 +14,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-17}
+        VOLTO_VERSION: ${VOLTO_VERSION:-18-yarn}
     ports:
     - "3000:3000"
     - "3001:3001"

package/jest-addon.config.js

@@ -19,6 +19,12 @@ const path = require('path');
 const fs = require('fs');
 const fg = require('fast-glob');
 
+const voltoSlatePath = fs.existsSync(
+  path.join(__dirname, '../../../node_modules/@plone/volto-slate/src'),
+)
+  ? '<rootDir>/node_modules/@plone/volto-slate/src'
+  : '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src';
+
 // Get the addon name from the current file path
 const pathParts = __filename.split(path.sep);
 const addonsIdx = pathParts.lastIndexOf('addons');
@@ -428,10 +434,8 @@ module.exports = {
     // This ensures tests use the local development version instead of node_modules
     [`^@eeacms/${addonName}/(.*)$`]: `<rootDir>/src/addons/${addonName}/src/$1`,
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
-    '@plone/volto-slate$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
-    '@plone/volto-slate/(.*)$':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
+    '@plone/volto-slate$': voltoSlatePath,
+    '@plone/volto-slate/(.*)$': `${voltoSlatePath}/$1`,
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.19.1",
+  "version": "4.0.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/actions/navigation.js

@@ -1,4 +1,4 @@
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { GET_NAVIGATION_SETTINGS } from '../constants/ActionTypes';
 
 export const getNavigationSettings = (url = '') => {

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { EditSchema } from './schema';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import ContextNavigationView from './ContextNavigationView';
 
 import { useSelector, shallowEqual } from 'react-redux';
 
+const EMPTY_TYPES = Object.freeze([]);
+
 function arePropsEqual(oldProps, newProps) {
   return (
     newProps.selected === oldProps.selected &&
@@ -17,7 +19,7 @@ function arePropsEqual(oldProps, newProps) {
 
 const ContextNavigationFillEdit = (props) => {
   const contentTypes = useSelector(
-    (state) => state.types?.types || [],
+    (state) => state.types?.types ?? EMPTY_TYPES,
     shallowEqual,
   );
 

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationEdit.test.jsx

@@ -5,22 +5,16 @@ import { Router } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
-jest.mock('@plone/volto/components', () => ({
-  InlineForm: ({ onChangeField }) => (
+jest.mock('@plone/volto/components/manage/Form/BlockDataForm', () => ({
+  __esModule: true,
+  default: ({ onChangeField }) => (
     <div>
-      <p>InlineForm</p>
+      <p>BlockDataForm</p>
       <input id="test" onChange={onChangeField} />
     </div>
   ),
-  SidebarPortal: ({ children, selected }) =>
-    selected ? (
-      <div>
-        <div>SidebarPortal</div>
-        {children}
-      </div>
-    ) : null,
 }));
 
 jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
@@ -32,11 +26,19 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/components/manage/Sidebar/SidebarPortal', () => ({
+  __esModule: true,
+  default: ({ children, selected }) =>
+    selected ? (
+      <div>
+        <div>SidebarPortal</div>
+        {children}
+      </div>
+    ) : null,
+}));
+
+jest.mock('@plone/volto/helpers/Extensions', () => ({
   withBlockExtensions: jest.fn((Component) => Component),
-  emptyBlocksForm: jest.fn(),
-  getBlocksLayoutFieldname: () => 'blocks_layout',
-  withVariationSchemaEnhancer: jest.fn((Component) => Component),
 }));
 
 const mockStore = configureStore();
@@ -53,14 +55,14 @@ describe('ContextNavigationEdit', () => {
     const { getByText, queryByText } = render(
       <Provider store={store}>
         <Router history={history}>
-          <ContextNavigationEdit selected={false} />
+          <ContextNavigationEdit selected={false} data={{}} />
         </Router>
       </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();
     expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
-    expect(queryByText('InlineForm')).toBeNull();
+    expect(queryByText('BlockDataForm')).toBeNull();
     expect(queryByText('SidebarPortal')).toBeNull();
   });
 
@@ -69,14 +71,18 @@ describe('ContextNavigationEdit', () => {
     const { container, getByText } = render(
       <Provider store={store}>
         <Router history={history}>
-          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
+          <ContextNavigationEdit
+            selected={true}
+            onChangeBlock={() => {}}
+            data={{}}
+          />
         </Router>
       </Provider>,
     );
 
     expect(getByText('Context navigation')).toBeInTheDocument();
     expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
-    expect(getByText('InlineForm')).toBeInTheDocument();
+    expect(getByText('BlockDataForm')).toBeInTheDocument();
     expect(getByText('SidebarPortal')).toBeInTheDocument();
 
     fireEvent.change(container.querySelector('#test'), {

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { flattenToAppURL, withBlockExtensions } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 import DefaultTemplate from './variations/Default';
 
 function arePropsEqual(prevProps, nextProps) {

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationView.test.jsx

@@ -5,7 +5,7 @@ import { Router } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { createMemoryHistory } from 'history';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   return {
@@ -16,10 +16,12 @@ jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
   };
 });
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Extensions', () => ({
   withBlockExtensions: jest.fn((Component) => Component),
-  emptyBlocksForm: jest.fn(),
-  getBlocksLayoutFieldname: () => 'blocks_layout',
+}));
+
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
+  __esModule: true,
   flattenToAppURL: () => '',
 }));
 

package/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -8,10 +8,10 @@ import { Accordion, Icon } from 'semantic-ui-react';
 
 import Slugger from 'github-slugger';
 
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
 import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 const messages = defineMessages({
   navigation: {

package/src/components/manage/Blocks/ContextNavigation/variations/ReportNavigation.jsx

@@ -4,8 +4,10 @@ import cx from 'classnames';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { UniversalLink, MaybeWrap, Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
 
 import downloadSVG from '@plone/volto/icons/download.svg';

package/src/components/manage/Blocks/ContextNavigation/variations/ReportNavigation.test.jsx

@@ -4,7 +4,7 @@ import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import ReportNavigation from './ReportNavigation';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const mockStore = configureStore();
 const store = mockStore({

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Button } from 'semantic-ui-react';
-import { Icon, BlocksForm } from '@plone/volto/components';
-import EditBlockWrapper from '@eeacms/volto-group-block/components/manage/Blocks/Group/EditBlockWrapper';
+import BlocksForm from '@plone/volto/components/manage/Blocks/Block/BlocksForm';
+import cx from 'classnames';
 
-import helpSVG from '@plone/volto/icons/help.svg';
 import RenderBlocks from './RenderBlocks';
 import './editor-flex.less';
 
@@ -17,8 +15,6 @@ const FlexGroup = (props) => {
     selected,
     selectedBlock,
     onSelectBlock,
-    setSelectedBlock,
-    multiSelected,
     manage,
     childBlocksForm,
     formDescription,
@@ -26,7 +22,7 @@ const FlexGroup = (props) => {
   } = props;
   const metadata = props.metadata || props.properties;
   const blockState = {};
-  const { no_of_columns = 2 } = data;
+  const { no_of_columns = 1 } = data;
   const flexClassNames = `ui unstackable items row flex-items-wrapper items-${no_of_columns}-columns`;
 
   React.useEffect(() => {
@@ -43,12 +39,19 @@ const FlexGroup = (props) => {
   }
 
   return (
-    <div className="flex-blocks-form" data-block={block}>
+    <div
+      className={cx('flex-blocks-form', {
+        'disable-inner-buttons': data.disableInnerButtons,
+      })}
+      data-block={block}
+    >
       {isEditMode ? (
         <BlocksForm
           metadata={metadata}
           properties={childBlocksForm}
           manage={manage}
+          isMainForm={false}
+          stopPropagation={selectedBlock}
           selectedBlock={selected ? selectedBlock : null}
           allowedBlocks={data.allowedBlocks}
           title={data.placeholder}
@@ -80,42 +83,7 @@ const FlexGroup = (props) => {
             }
           }}
           pathname={pathname}
-        >
-          {({ draginfo }, editBlock, blockProps) => (
-            <div className="flex-item">
-              <div className="item-wrapper">
-                <EditBlockWrapper
-                  draginfo={draginfo}
-                  blockProps={blockProps}
-                  disabled={data.disableInnerButtons}
-                  extraControls={
-                    <>
-                      {instructions && (
-                        <>
-                          <Button
-                            icon
-                            basic
-                            title="Section help"
-                            onClick={() => {
-                              setSelectedBlock();
-                              const tab = manage ? 0 : 1;
-                              props.setSidebarTab(tab);
-                            }}
-                          >
-                            <Icon name={helpSVG} className="" size="19px" />
-                          </Button>
-                        </>
-                      )}
-                    </>
-                  }
-                  multiSelected={multiSelected.includes(blockProps.block)}
-                >
-                  {editBlock}
-                </EditBlockWrapper>
-              </div>
-            </div>
-          )}
-        </BlocksForm>
+        />
       ) : (
         <div className={flexClassNames}>
           <RenderBlocks metadata={metadata} content={data?.data || {}} />

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/RenderBlocks.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { applyBlockDefaults } from '@plone/volto/helpers/Blocks/Blocks';
 import { defineMessages, injectIntl } from 'react-intl';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   hasBlocksData,
-} from '@plone/volto/helpers';
+} from '@plone/volto/helpers/Blocks/Blocks';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
-import { ViewDefaultBlock } from '@plone/volto/components';
+import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 
 const messages = defineMessages({
   unknownBlock: {

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/editor-flex.less

@@ -3,12 +3,53 @@
 @type: 'extra';
 @element: 'custom';
 
-@baseWidth: 100%;
-
 // on edit ensure add button is next to the block input area
 .flex-blocks-form {
-  .item-wrapper {
+  [data-rbd-draggable-context-id] {
     position: relative;
-    width: 100%;
+    min-width: var(--flex-item-width, 100%);
+  }
+
+  &.disable-inner-buttons {
+    .drag.handle.wrapper,
+    .delete-button,
+    .block-add-button {
+      display: none !important;
+    }
+  }
+}
+
+// Mirror column width rules from item.overrides for edit mode
+// (.flex-item wrapper was removed; DnD wrappers are now the flex children)
+// items-1-columns: override inherited 25% from .group.flex .items-1-columns in item.overrides
+.flex-blocks-form
+  .flex-items-wrapper.items-1-columns
+  [data-rbd-draggable-context-id] {
+  --flex-item-width: 100%;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .flex-blocks-form
+    .flex-items-wrapper.items-2-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 2 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-3-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 3 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-4-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 4 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-5-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 5 - 1%);
   }
 }

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditSchema } from './schema';
-import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import LayoutSettingsView from './LayoutSettingsView';
 
 const LayoutSettingsEdit = (props) => {