@eeacms/volto-group-block 9.0.0 → 10.0.0

package/.eslintrc.js

@@ -3,6 +3,11 @@ const path = require('path');
 const projectRootPath = fs.realpathSync(__dirname + '/../../../');
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+const voltoSlatePath = fs.existsSync(
+  path.join(projectRootPath, 'node_modules/@plone/volto-slate/src'),
+)
+  ? '@plone/volto-slate/src'
+  : '@plone/volto/packages/volto-slate/src';
 let configFile;
 if (fs.existsSync(`${projectRootPath}/tsconfig.json`))
   configFile = `${projectRootPath}/tsconfig.json`;
@@ -34,7 +39,7 @@ const defaultConfig = {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ['@plone/volto-slate', voltoSlatePath],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
           ['@root', `${__dirname}/src`],
@@ -54,7 +59,7 @@ const defaultConfig = {
         allowReferrer: true,
       },
     ],
-  }
+  },
 };
 
 const config = addonExtenders.reduce(

package/CHANGELOG.md

@@ -4,7 +4,19 @@ 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).
 
-### [9.0.0](https://github.com/eea/volto-group-block/compare/8.1.1...9.0.0) - 10 February 2026
+### [10.0.0](https://github.com/eea/volto-group-block/compare/9.0.0...10.0.0) - 27 March 2026
+
+#### :rocket: New Features
+
+- feat: Volto 18 support - refs #287700 [Nilesh - [`eab0346`](https://github.com/eea/volto-group-block/commit/eab0346ec36eedc552958b744ae82927b88058cf)]
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- tests: Fix Sonar Qube tags - refs #297339 [Alin Voinea - [`75babfe`](https://github.com/eea/volto-group-block/commit/75babfeaa1ee5f707803a24a532a28c969d94a19)]
+## [9.0.0](https://github.com/eea/volto-group-block/compare/8.1.1...9.0.0) - 10 February 2026
 
 #### :rocket: New Features
 

package/DEVELOP.md

@@ -12,6 +12,8 @@
     make start
     ```
 
+   `make start` defaults to Volto 18. Use `make VOLTO_VERSION=17 start` to test the Volto 17 dev environment.
+
 1. Wait for `Volto started at 0.0.0.0:3000` meesage
 
 1. Go to http://localhost:3000
@@ -26,21 +28,20 @@
 
 ### Or add @eeacms/volto-group-block 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/)
-
-1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
+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).
 
-        npm install -g yo @plone/generator-volto mrs-developer
+For new Volto 18+ projects, use Cookieplone. It includes `mrs-developer` by default.
 
-1.  Create new volto app
+1.  Create a new Volto project with Cookieplone
 
-        yo @plone/volto my-volto-project --addon @eeacms/volto-group-block --skip-install
-        cd my-volto-project
+        uvx cookieplone project
+        cd project-title
 
 1.  Add the following to `mrs.developer.json`:
 
         {
             "volto-group-block": {
+                "output": "packages",
                 "url": "https://github.com/eea/volto-group-block.git",
                 "package": "@eeacms/volto-group-block",
                 "branch": "develop",
@@ -48,28 +49,31 @@ Before starting make sure your development environment is properly set. See [Vol
             }
         }
 
-1.  Install
+1.  Add `@eeacms/volto-group-block` to the `addons` key in your project `volto.config.js`
+
+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-group-block/
+        cd packages/volto-group-block
+
+For legacy Volto 17 projects, keep using the yarn-based workflow from the Volto 17 documentation.
 
 ## Cypress
 
@@ -81,7 +85,7 @@ project where you added `volto-group-block` to `mrs.developer.json`
 Go to:
 
   ```BASH
-  cd src/addons/volto-group-block/
+  cd packages/volto-group-block/
   ```
 
 Start:
@@ -93,6 +97,8 @@ Start:
 
 This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-group-block` block installed.
 
+Use `make VOLTO_VERSION=17 start` if you need to reproduce the Volto 17 setup locally.
+
 Open Cypress Interface:
 
   ```Bash

package/README.md

@@ -3,16 +3,16 @@
 [![Releases](https://img.shields.io/github/v/release/eea/volto-group-block)](https://github.com/eea/volto-group-block/releases)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-group-block%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-group-block/job/master/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-group-block%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-group-block/job/develop/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block&branch=develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block&branch=develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block&branch=develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block&branch=develop)
 
 [Volto](https://github.com/plone/volto) add-on to group blocks in sections and filter available blocks per content-type per section
 
@@ -20,6 +20,18 @@
 
 ![Group blocks and restrict available blocks](https://raw.githubusercontent.com/eea/volto-group-block/master/docs/volto-group-block.gif)
 
+## Upgrade
+
+### Upgrading to 10.x
+
+> This version requires `Volto >= 17.18` or `Volto 18+`. It removes the custom `EditBlockWrapper` and uses Volto's built-in block chrome provided by `BlocksForm`.
+
+#### Breaking changes
+
+- **Removed `EditBlockWrapper.jsx`.** Any code importing `EditBlockWrapper` from `@eeacms/volto-group-block` will break. Use Volto's built-in `EditBlockWrapper` from `@plone/volto/components/manage/Blocks/Block/EditBlockWrapper` if you need a custom wrapper.
+- **Removed the "Section help" button.** The `?` icon that appeared in the inner block toolbar and opened the sidebar to display editing instructions has been removed. The `instructions` field is still available in the group block schema and still rendered in the sidebar panel, but there is no longer a per-block shortcut button to reveal it.
+- **`disableInnerButtons`** is now implemented via a CSS class (`.disable-inner-buttons`) instead of a JS-level `disabled` prop on the removed wrapper.
+
 ## Getting started
 
 ### Try volto-group-block with Docker
@@ -31,6 +43,11 @@
 
 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-group-block to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -44,30 +61,39 @@ Go to http://localhost:3000
 * If you already have a volto project, just update `package.json`:
 
    ```JSON
-   "addons": [
-       "@eeacms/volto-group-block"
-   ],
-
    "dependencies": {
        "@eeacms/volto-group-block": "*"
    }
    ```
 
-* If not, create one:
+   and `volto.config.js`:
 
+   ```JavaScript
+   const addons = ['@eeacms/volto-group-block'];
    ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-group-block
-   cd my-volto-project
+
+* If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:
+
+   ```
+   uvx cookieplone project
+   cd project-title
+   ```
+
+1. Install or update dependencies, then start the project:
+
+   ```
+   make install
    ```
 
-1. Install new add-ons and restart Volto:
+   For a Cookieplone project, start the backend and frontend in separate terminals:
 
    ```
-   yarn
-   yarn start
+   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/cypress.config.js

@@ -1,9 +1,18 @@
 const { defineConfig } = require('cypress');
 
+const apiPath =
+  process.env.CYPRESS_API_PATH ||
+  process.env.RAZZLE_DEV_PROXY_API_PATH ||
+  process.env.RAZZLE_INTERNAL_API_PATH ||
+  'http://localhost:8080/Plone';
+
 module.exports = defineConfig({
   viewportWidth: 1280,
   defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
+  env: {
+    API_PATH: apiPath,
+  },
   reporter: 'junit',
   video: false,
   retries: {

package/docker-compose.yml

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

package/jest-addon.config.js

@@ -1,4 +1,12 @@
 require('dotenv').config({ path: __dirname + '/.env' })
+const fs = require('fs')
+const path = require('path')
+
+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'
 
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
@@ -17,10 +25,8 @@ module.exports = {
     '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
     '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
     '@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/locales/de/LC_MESSAGES/volto.po

@@ -21,16 +21,6 @@ msgstr "Abschnitt (Gruppe)"
 msgid "SectionGroupSettings"
 msgstr "Abschnitt (Gruppe) Einstellungen"
 
-#. Default: "Unknown Block {block}"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "Unknown Block"
-msgstr "Unbekannter Block {block}"
-
-#. Default: "Add block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "addBlock"
-msgstr "Block hinzufügen"
-
 #. Default: "Select HTML5 element to be used for this block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "asPropertyDescription"
@@ -41,21 +31,11 @@ msgstr "Wählen Sie das HTML5-Element, das für diesen Block verwendet werden so
 msgid "asPropertyTitle"
 msgstr ""
 
-#. Default: "delete"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "delete"
-msgstr "Löschen"
-
 #. Default: "Default"
 #: components/manage/Blocks/Group/EditSchema
 msgid "fieldsetDefaultTitle"
 msgstr "Standard"
 
-#. Default: "Remove block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "removeBlock"
-msgstr "Block entfernen"
-
 #. Default: "Section block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "sectionBlock"

package/locales/en/LC_MESSAGES/volto.po

@@ -21,16 +21,6 @@ msgstr ""
 msgid "SectionGroupSettings"
 msgstr ""
 
-#. Default: "Unknown Block {block}"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "Unknown Block"
-msgstr ""
-
-#. Default: "Add block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "addBlock"
-msgstr ""
-
 #. Default: "Select HTML5 element to be used for this block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "asPropertyDescription"
@@ -41,21 +31,11 @@ msgstr ""
 msgid "asPropertyTitle"
 msgstr ""
 
-#. Default: "delete"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "delete"
-msgstr ""
-
 #. Default: "Default"
 #: components/manage/Blocks/Group/EditSchema
 msgid "fieldsetDefaultTitle"
 msgstr ""
 
-#. Default: "Remove block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "removeBlock"
-msgstr ""
-
 #. Default: "Section block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "sectionBlock"

package/locales/it/LC_MESSAGES/volto.po

@@ -21,16 +21,6 @@ msgstr ""
 msgid "SectionGroupSettings"
 msgstr ""
 
-#. Default: "Unknown Block {block}"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "Unknown Block"
-msgstr ""
-
-#. Default: "Add block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "addBlock"
-msgstr ""
-
 #. Default: "Select HTML5 element to be used for this block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "asPropertyDescription"
@@ -41,21 +31,11 @@ msgstr ""
 msgid "asPropertyTitle"
 msgstr ""
 
-#. Default: "delete"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "delete"
-msgstr ""
-
 #. Default: "Default"
 #: components/manage/Blocks/Group/EditSchema
 msgid "fieldsetDefaultTitle"
 msgstr ""
 
-#. Default: "Remove block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "removeBlock"
-msgstr ""
-
 #. Default: "Section block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "sectionBlock"

package/locales/ro/LC_MESSAGES/volto.po

@@ -21,16 +21,6 @@ msgstr ""
 msgid "SectionGroupSettings"
 msgstr ""
 
-#. Default: "Unknown Block {block}"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "Unknown Block"
-msgstr ""
-
-#. Default: "Add block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "addBlock"
-msgstr ""
-
 #. Default: "Select HTML5 element to be used for this block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "asPropertyDescription"
@@ -41,21 +31,11 @@ msgstr ""
 msgid "asPropertyTitle"
 msgstr ""
 
-#. Default: "delete"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "delete"
-msgstr ""
-
 #. Default: "Default"
 #: components/manage/Blocks/Group/EditSchema
 msgid "fieldsetDefaultTitle"
 msgstr ""
 
-#. Default: "Remove block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "removeBlock"
-msgstr ""
-
 #. Default: "Section block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "sectionBlock"

package/locales/volto.pot

@@ -23,16 +23,6 @@ msgstr ""
 msgid "SectionGroupSettings"
 msgstr ""
 
-#. Default: "Unknown Block {block}"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "Unknown Block"
-msgstr ""
-
-#. Default: "Add block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "addBlock"
-msgstr ""
-
 #. Default: "Select HTML5 element to be used for this block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "asPropertyDescription"
@@ -43,21 +33,11 @@ msgstr ""
 msgid "asPropertyTitle"
 msgstr ""
 
-#. Default: "delete"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "delete"
-msgstr ""
-
 #. Default: "Default"
 #: components/manage/Blocks/Group/EditSchema
 msgid "fieldsetDefaultTitle"
 msgstr ""
 
-#. Default: "Remove block"
-#: components/manage/Blocks/Group/EditBlockWrapper
-msgid "removeBlock"
-msgstr ""
-
 #. Default: "Section block"
 #: components/manage/Blocks/Group/EditSchema
 msgid "sectionBlock"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/Group/CounterComponent.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import CounterComponent from './CounterComponent';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@plone/volto/registry', () => ({
   blocks: {

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

@@ -1,11 +1,7 @@
-import { Button } from 'semantic-ui-react';
-import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components';
-import EditBlockWrapper from './EditBlockWrapper';
+import { BlocksForm, RenderBlocks } from '@plone/volto/components';
 import { countTextInBlocks } from './CounterComponent';
 import { useLocation } from 'react-router-dom';
 
-import helpSVG from '@plone/volto/icons/help.svg';
-
 const GroupBlockDefaultBody = (props) => {
   const location = useLocation();
   const {
@@ -17,10 +13,8 @@ const GroupBlockDefaultBody = (props) => {
     selected,
     selectedBlock,
     onSelectBlock,
-    setSelectedBlock,
     manage,
     childBlocksForm,
-    multiSelected,
     formDescription,
     isEditMode,
   } = props;
@@ -42,6 +36,8 @@ const GroupBlockDefaultBody = (props) => {
       allowedBlocks={data.allowedBlocks}
       title={data.placeholder}
       description={instructions}
+      isMainForm={false}
+      stopPropagation={selectedBlock}
       onSelectBlock={(id, l, e) => {
         const isMultipleSelection = e
           ? e.shiftKey || e.ctrlKey || e.metaKey
@@ -86,38 +82,7 @@ const GroupBlockDefaultBody = (props) => {
         }
       }}
       pathname={pathname}
-    >
-      {({ draginfo }, editBlock, blockProps) => (
-        <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>
-      )}
-    </BlocksForm>
+    />
   ) : (
     <RenderBlocks
       location={location}

package/src/components/manage/Blocks/Group/DefaultBody.test.jsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import DefaultBody from './DefaultBody';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+
+const mockBlocksForm = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -15,7 +17,10 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('@plone/volto/components', () => ({
-  BlocksForm: jest.fn(() => <div className="blocks-form">RenderBlocks</div>),
+  BlocksForm: jest.fn((props) => {
+    mockBlocksForm(props);
+    return <div className="blocks-form">RenderBlocks</div>;
+  }),
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
 }));
 
@@ -28,6 +33,10 @@ const store = mockStore({
 });
 
 describe('DefaultBody', () => {
+  beforeEach(() => {
+    mockBlocksForm.mockClear();
+  });
+
   it('renders children', () => {
     const props = {
       data: {
@@ -55,14 +64,26 @@ describe('DefaultBody Edit', () => {
         variation: {},
         allowedBlocks: ['listing'],
       },
+      childBlocksForm: {
+        blocks: {
+          a: {
+            '@type': 'slate',
+          },
+        },
+        blocks_layout: {
+          items: ['a'],
+        },
+      },
       metadata: {},
       properties: {},
       variation: {},
       onSelectBlock: jest.fn(),
-      onDeleteBlock: jest.fn(),
-      onMutateBlock: jest.fn(),
-      onInsertBlock: jest.fn(),
+      onChangeBlock: jest.fn(),
+      onChangeField: jest.fn(),
+      selectedBlock: 'a',
       selected: true,
+      manage: true,
+      pathname: '/',
     };
 
     const { getByText } = render(
@@ -71,5 +92,7 @@ describe('DefaultBody Edit', () => {
       </Provider>,
     );
     expect(getByText('RenderBlocks')).toBeInTheDocument();
+    expect(mockBlocksForm).toHaveBeenCalledTimes(1);
+    expect(mockBlocksForm.mock.calls[0][0].children).toBeUndefined();
   });
 });

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

@@ -167,7 +167,9 @@ const Edit = (props) => {
     <fieldset
       role="presentation"
       id={props.data.id}
-      className={cx('section-block', props.data.className)}
+      className={cx('section-block', props.data.className, {
+        'disable-inner-buttons': data.disableInnerButtons,
+      })}
       onKeyDown={(e) => {
         handleKeyDown(e, props.index, props.block, props.blockNode.current);
       }}

package/src/components/manage/Blocks/Group/Edit.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({
@@ -90,6 +90,22 @@ describe('Edit', () => {
     expect(getByRole('presentation')).toBeInTheDocument();
   });
 
+  it('adds a root modifier when inner buttons are disabled', () => {
+    const { getByRole } = render(
+      <Provider store={store}>
+        <Edit
+          {...props}
+          data={{
+            ...props.data,
+            disableInnerButtons: true,
+          }}
+        />
+      </Provider>,
+    );
+
+    expect(getByRole('presentation')).toHaveClass('disable-inner-buttons');
+  });
+
   it('should call ArrowUp keydown', () => {
     const mockOnFocusPreviousBlock = jest.fn();
     const { getByRole } = render(

package/src/components/manage/Blocks/Group/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import View from './View';
 import { render, screen } from '@testing-library/react';
 import { RenderBlocks } from '@plone/volto/components';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@plone/volto/components', () => ({
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),

package/src/components/manage/Blocks/Group/editor.less

@@ -10,10 +10,6 @@
     margin-bottom: 1rem;
   }
 
-  .block-add-button {
-    display: none !important;
-  }
-
   .block.group.selected::before,
   .block.group:hover::before {
     border-style: dashed;
@@ -70,32 +66,11 @@
     margin-top: 0.5rem;
   }
 
-  .blocks-chooser {
-    position: absolute;
-    right: 0 !important;
-    left: auto !important;
-    margin-top: 3rem;
-  }
-
-  .block-toolbar {
-    position: absolute;
-    z-index: 3;
-    right: -9px;
-    display: flex;
-    border: none;
-    border: 1px solid @borderColor;
-    border-bottom: 1px solid @pageBackground;
-    margin-top: -45px;
-    background-color: @pageBackground;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-
-    .ui.basic.button {
-      padding: 8px 5px;
-    }
-
-    .ui.basic.button:hover {
-      background: transparent !important;
+  .section-block.disable-inner-buttons {
+    .drag.handle.wrapper,
+    .delete-button,
+    .block-add-button {
+      display: none !important;
     }
   }
 }

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

@@ -1,197 +0,0 @@
-import React from 'react';
-import { Icon, BlockChooser } from '@plone/volto/components';
-import {
-  blockHasValue,
-  buildStyleClassNamesFromData,
-} from '@plone/volto/helpers';
-import { Button } from 'semantic-ui-react';
-import includes from 'lodash/includes';
-import isBoolean from 'lodash/isBoolean';
-import { defineMessages, injectIntl } from 'react-intl';
-import cx from 'classnames';
-import config from '@plone/volto/registry';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-
-import dragSVG from '@plone/volto/icons/drag.svg';
-import addSVG from '@plone/volto/icons/circle-plus.svg';
-import trashSVG from '@plone/volto/icons/delete.svg';
-
-const messages = defineMessages({
-  unknownBlock: {
-    id: 'Unknown Block',
-    defaultMessage: 'Unknown Block {block}',
-  },
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
-  },
-  addBlock: {
-    id: 'addBlock',
-    defaultMessage: 'Add block',
-  },
-  removeBlock: {
-    id: 'removeBlock',
-    defaultMessage: 'Remove block',
-  },
-});
-
-class EditBlockWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      addNewBlockOpened: false,
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-
-  handleClickOutside = (e) => {
-    if (
-      this.blockNode.current &&
-      doesNodeContainClick(this.blockNode.current, e)
-    )
-      return;
-
-    if (this.state.addNewBlockOpened) {
-      this.setState({
-        addNewBlockOpened: false,
-      });
-      return true;
-    }
-  };
-
-  blockNode = React.createRef();
-
-  render() {
-    const { intl, blockProps, draginfo, extraControls, disabled, children } =
-      this.props;
-
-    const {
-      allowedBlocks,
-      block,
-      data,
-      onSelectBlock,
-      onDeleteBlock,
-      onMutateBlock,
-      onInsertBlock,
-      selected,
-    } = blockProps;
-    const type = data['@type'];
-    const { disableNewBlocks } = data;
-    const dragVisible = !data.fixed;
-    const visible = selected;
-
-    const required = isBoolean(data.required)
-      ? data.required
-      : includes(config.blocks.requiredBlocks, type);
-
-    const styles = buildStyleClassNamesFromData(data.styles);
-
-    // Get editing instructions from block settings or props
-    let instructions = data?.instructions?.data || data?.instructions;
-    if (!instructions || instructions === '<p><br/></p>') {
-      instructions = '';
-    }
-
-    return (
-      <div ref={this.blockNode}>
-        <div
-          ref={draginfo?.innerRef}
-          {...(selected ? draginfo?.draggableProps : null)}
-          className={cx(`block-editor-${data['@type']}`, styles, {
-            [data.align]: data.align,
-          })}
-        >
-          {(!selected || !visible || disabled) && (
-            <div
-              style={{
-                display: 'none',
-                // keep react-beautiful-dnd happy
-              }}
-              {...draginfo.dragHandleProps}
-            ></div>
-          )}
-          {visible && (
-            <div className="block-toolbar">
-              {instructions ? extraControls : ''}
-
-              {!disabled && (
-                <>
-                  <div
-                    style={{
-                      display: dragVisible ? 'inline-block' : 'none',
-                    }}
-                    {...draginfo.dragHandleProps}
-                    className="drag handle wrapper-group-block"
-                  >
-                    <Button icon basic title="Drag and drop">
-                      <Icon name={dragSVG} size="19px" />
-                    </Button>
-                  </div>
-
-                  {!disableNewBlocks && !blockHasValue(data) && (
-                    <Button
-                      icon
-                      basic
-                      title={intl.formatMessage(messages.addBlock)}
-                      onClick={() => {
-                        this.setState((prevState) => ({
-                          addNewBlockOpened: !prevState.addNewBlockOpened,
-                        }));
-                      }}
-                      className="group-block-add-button"
-                    >
-                      <Icon name={addSVG} className="" size="19px" />
-                    </Button>
-                  )}
-                  {!required && (
-                    <Button
-                      icon
-                      basic
-                      title={intl.formatMessage(messages.removeBlock)}
-                      onClick={() => onDeleteBlock(block)}
-                      className="delete-button-group-block"
-                      aria-label={intl.formatMessage(messages.delete)}
-                    >
-                      <Icon name={trashSVG} size="19px" />
-                    </Button>
-                  )}
-                  {this.state.addNewBlockOpened && (
-                    <BlockChooser
-                      onMutateBlock={(id, value) => {
-                        onMutateBlock(id, value);
-                        this.setState({ addNewBlockOpened: false });
-                      }}
-                      onInsertBlock={(id, value) => {
-                        onSelectBlock(onInsertBlock(id, value));
-                        this.setState({ addNewBlockOpened: false });
-                      }}
-                      currentBlock={block}
-                      allowedBlocks={allowedBlocks}
-                    />
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          <div
-            className={cx('ui drag block wrapper inner', type, {
-              multiSelected: this.props.multiSelected,
-            })}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectIntl(EditBlockWrapper);

package/src/components/manage/Blocks/Group/EditBlockWrapper.test.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import EditBlockWrapper from './EditBlockWrapper';
-import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockDragInfo = {
-  innerRef: {
-    current: {
-      childMethod: jest.fn(),
-    },
-  },
-  draggableProps: {},
-  dragHandleProps: {},
-};
-
-const mockStore = configureStore();
-const store = mockStore({
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-});
-
-describe('EditBlockWrapper', () => {
-  const mockBlockProps = {
-    allowedBlocks: [],
-    block: 'mockBlock',
-    data: {},
-    onSelectBlock: jest.fn(),
-    onDeleteBlock: jest.fn(),
-    onMutateBlock: jest.fn(),
-    onInsertBlock: jest.fn(),
-    selected: true,
-  };
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo}>
-          <div>Test child</div>
-        </EditBlockWrapper>
-      </Provider>,
-    );
-    expect(getByText('Test child')).toBeInTheDocument();
-  });
-
-  it('calls onDeleteBlock when delete button is clicked', () => {
-    const { getByTitle } = render(
-      <Provider store={store}>
-        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo} />
-      </Provider>,
-    );
-    fireEvent.click(getByTitle('Remove block'));
-    expect(mockBlockProps.onDeleteBlock).toHaveBeenCalledWith('mockBlock');
-  });
-});