@eeacms/volto-tabs-block 9.1.0 → 10.0.0

package/.eslintrc.js

@@ -16,7 +16,27 @@ if (configFile) {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
 }
 
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const registryDistPath = path.join(
+  projectRootPath,
+  'node_modules/@plone/registry/dist/addon-registry/addon-registry.cjs',
+);
+const registrySrcPath = path.join(
+  projectRootPath,
+  'node_modules/@plone/registry/src/addon-registry',
+);
+
+let AddonConfigurationRegistry;
+if (fs.existsSync(registryDistPath)) {
+  AddonConfigurationRegistry = require(registryDistPath).AddonRegistry;
+} else if (
+  fs.existsSync(registrySrcPath) ||
+  fs.existsSync(`${registrySrcPath}.js`)
+) {
+  AddonConfigurationRegistry = require(registrySrcPath);
+} else {
+  AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+}
+
 const reg = new AddonConfigurationRegistry(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
@@ -26,6 +46,11 @@ const addonAliases = Object.keys(reg.packages).map((o) => [
 ]);
 
 const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+const voltoSlatePath = fs.existsSync(
+  path.join(projectRootPath, 'node_modules/@plone/volto-slate/src'),
+)
+  ? '@plone/volto-slate/src'
+  : '@plone/volto/packages/volto-slate/src';
 
 const defaultConfig = {
   extends: `${voltoPath}/.eslintrc`,
@@ -34,7 +59,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`],

package/CHANGELOG.md

@@ -4,6 +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).
 
+### [10.0.0](https://github.com/eea/volto-tabs-block/compare/9.1.0...10.0.0) - 27 March 2026
+
+#### :rocket: New Features
+
+- feat: Volto 18 support - refs #287700 [Alin Voinea - [`f370bb2`](https://github.com/eea/volto-tabs-block/commit/f370bb24f0a741129c21896338baf19ed4bab030)]
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- test: Fix make test [Alin V. (Claudiu) - [`c29c5bc`](https://github.com/eea/volto-tabs-block/commit/c29c5bcc5f0e24ce636dc12c87a8579eb93bd56d)]
+- tests: Fix Sonar Qube tags - refs #297339 [Alin Voinea - [`89ca2ae`](https://github.com/eea/volto-tabs-block/commit/89ca2ae4bc3821bed8012188e94930ae4457accf)]
 ### [9.1.0](https://github.com/eea/volto-tabs-block/compare/9.0.3...9.1.0) - 24 July 2025
 
 #### :hammer_and_wrench: Others

package/DEVELOP.md

@@ -26,21 +26,20 @@
 
 ### Or add @eeacms/volto-tabs-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/)
+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-tabs-block --skip-install
-        cd my-volto-project
+        uvx cookieplone project
+        cd project-title
 
 1.  Add the following to `mrs.developer.json`:
 
         {
             "volto-tabs-block": {
+                "output": "packages",
                 "url": "https://github.com/eea/volto-tabs-block.git",
                 "package": "@eeacms/volto-tabs-block",
                 "branch": "develop",
@@ -48,28 +47,31 @@ Before starting make sure your development environment is properly set. See [Vol
             }
         }
 
-1.  Install
+1.  Add `@eeacms/volto-tabs-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-tabs-block/
+        cd packages/volto-tabs-block
+
+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-tabs-block` to `mrs.developer.json`
 Go to:
 
   ```BASH
-  cd src/addons/volto-tabs-block/
+  cd packages/volto-tabs-block/
   ```
 
 Start:

package/README.md

@@ -3,16 +3,16 @@
 [![Releases](https://img.shields.io/github/v/release/eea/volto-tabs-block)](https://github.com/eea/volto-tabs-block/releases)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-tabs-block%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tabs-block/job/master/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block)
 
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-tabs-block%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tabs-block/job/develop/display/redirect)
-[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
-[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
-[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
-[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block&branch=develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block&branch=develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block&branch=develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-tabs-block&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block&branch=develop)
 
 [Volto](https://github.com/plone/volto) add-on
 
@@ -35,6 +35,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-tabs-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
@@ -48,35 +53,62 @@ Go to http://localhost:3000
 * If you already have a volto project, just update `package.json`:
 
    ```JSON
-   "addons": [
-       "@eeacms/volto-tabs-block"
-   ],
-
    "dependencies": {
        "@eeacms/volto-tabs-block": "*"
    }
    ```
 
-* If not, create one:
+   and `volto.config.js`:
+
+   ```JavaScript
+   const addons = ['@eeacms/volto-tabs-block'];
+   ```
+
+* 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-tabs-block
-   cd my-volto-project
+   uvx cookieplone project
+   cd project-title
    ```
 
-1. Install new add-ons and restart Volto:
+   Then install the add-on in your frontend project. For Cookieplone-based Volto 18 and 19 projects, Plone documents `pnpm` usage:
+
+   ```
+   pnpm --filter <name-of-your-policy-add-on> add @eeacms/volto-tabs-block
+   ```
+
+   Then add `@eeacms/volto-tabs-block` to the `addons` key in your project's `package.json` or declare it in `volto.config.js`.
+
+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!
 
 ## 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-tabs-block` will break. Use Volto's built-in `EditBlockWrapper` from `@plone/volto/components/manage/Blocks/Block/EditBlockWrapper` if you need a custom wrapper.
+- **Removed custom edit toolbar styles.** The `edit.less` styles that powered the custom inner block toolbar have been removed. Inner blocks now use Volto's default block chrome.
+
 ### Upgrading to 7.0.0
 Version 7 introduces the following breaking changes:
 - The templates are now `variations` of the default template, so if you have custom templates,

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: 10000,
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Edit.jsx

@@ -212,7 +212,7 @@ const Edit = (props) => {
           {props.selected ? (
             <BlocksToolbar
               formData={tabData}
-              selectedBlock={activeTab}
+              selectedBlock={activeBlock}
               selectedBlocks={multiSelected}
               onChangeBlocks={(newBlockData) => {
                 onChangeBlock(block, {

package/src/components/Edit.test.jsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+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 Edit from './Edit';
+import { TABS_BLOCK } from '../constants';
+
+jest.mock('uuid', () => ({
+  v4: () => 'test-uuid-1234',
+}));
+
+jest.mock(
+  '@eeacms/volto-tabs-block/constants',
+  () => ({
+    TABS_BLOCK: 'tabs_block',
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@eeacms/volto-tabs-block/helpers',
+  () => ({
+    empty: jest.fn(),
+    emptyTab: jest.fn(() => ({})),
+    getVariation: jest.fn(() => 'default'),
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@eeacms/volto-tabs-block/components',
+  () => ({
+    AssetTab: ({ tabTitle }) => <span>{tabTitle}</span>,
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@eeacms/volto-tabs-block/components/variations/default/schema',
+  () => ({
+    defaultSchemaEnhancer: jest.fn(({ schema }) => schema),
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@eeacms/volto-tabs-block/utils',
+  () => ({
+    SimpleMarkdown: ({ md, className }) => (
+      <div className={className}>{md}</div>
+    ),
+    getMenuPosition: () => ({}),
+  }),
+  { virtual: true },
+);
+
+jest.mock('@eeacms/volto-tabs-block/less/edit.less', () => ({}), {
+  virtual: true,
+});
+
+jest.mock('@eeacms/volto-tabs-block/less/tabs.less', () => ({}), {
+  virtual: true,
+});
+
+jest.mock('@eeacms/volto-tabs-block/less/menu.less', () => ({}), {
+  virtual: true,
+});
+
+jest.mock('./variations/default', () => ({
+  DefaultEdit: jest.requireActual('./variations/default/Edit').default,
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  BlocksForm: jest.fn(
+    ({ multiSelected, onSelectBlock, properties, selectedBlock }) => {
+      const blockList = properties.blocks
+        ? Object.entries(properties.blocks)
+        : [];
+
+      return (
+        <div
+          data-testid={`blocks-form-${properties.title || 'untitled'}`}
+          data-multi-selected={(multiSelected || []).join(',')}
+          data-selected-block={selectedBlock || ''}
+        >
+          {blockList.map(([blockId]) => (
+            <button
+              key={blockId}
+              type="button"
+              aria-label={`Select ${blockId}`}
+              onClick={(event) => onSelectBlock?.(blockId, null, event)}
+            >
+              Select {blockId}
+            </button>
+          ))}
+        </div>
+      );
+    },
+  ),
+  SidebarPortal: ({ children }) => <div>{children}</div>,
+  BlocksToolbar: ({ selectedBlock, selectedBlocks }) => (
+    <div
+      data-testid="blocks-toolbar"
+      data-selected-block={selectedBlock || ''}
+      data-selected-blocks={(selectedBlocks || []).join(',')}
+    />
+  ),
+  BlockDataForm: () => <div>BlockDataForm</div>,
+}));
+
+jest.mock(
+  '@eeacms/volto-block-style/StyleWrapper',
+  () => ({
+    StyleWrapperView: ({ children }) => <>{children}</>,
+  }),
+  { virtual: true },
+);
+
+jest.mock(
+  '@eeacms/volto-block-style/BlockStyleWrapper',
+  () => ({
+    BlockStyleWrapperEdit: ({ children }) => <>{children}</>,
+  }),
+  { virtual: true },
+);
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  screen: {
+    page: {
+      width: 768,
+    },
+  },
+});
+
+const mockData = {
+  title: 'Tabs',
+  data: {
+    blocks: {
+      tab1: {
+        '@type': 'tab',
+        title: 'Tab 1',
+        blocks: {
+          block1: {
+            '@type': 'text',
+          },
+          block2: {
+            '@type': 'text',
+          },
+        },
+        blocks_layout: {
+          items: ['block1', 'block2'],
+        },
+      },
+    },
+    blocks_layout: {
+      items: ['tab1'],
+    },
+  },
+};
+
+describe('Tabs Edit', () => {
+  beforeEach(() => {
+    config.blocks.blocksConfig[TABS_BLOCK] = {
+      ...config.blocks.blocksConfig[TABS_BLOCK],
+      blockSchema: () => ({
+        title: 'Tabs',
+        properties: {
+          data: {
+            schema: {},
+          },
+        },
+      }),
+      variations: [{ id: 'default' }],
+    };
+    config.settings = {
+      ...config.settings,
+      defaultBlockType: 'text',
+    };
+  });
+
+  it('forwards nested multi selection and tracks the active inner block in the toolbar', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Edit
+            block="tabs-block"
+            data={mockData}
+            onChangeBlock={jest.fn()}
+            onChangeField={jest.fn()}
+            selected={true}
+            setSidebarTab={jest.fn()}
+            blockNode={{ current: document.createElement('div') }}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Select block1' }));
+
+    expect(screen.getByTestId('blocks-toolbar')).toHaveAttribute(
+      'data-selected-block',
+      'block1',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Select block2' }), {
+      shiftKey: true,
+    });
+
+    expect(screen.getByTestId('blocks-form-Tab 1')).toHaveAttribute(
+      'data-multi-selected',
+      'block1,block2',
+    );
+    expect(screen.getByTestId('blocks-toolbar')).toHaveAttribute(
+      'data-selected-blocks',
+      'block1,block2',
+    );
+  });
+});

package/src/components/View.test.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
 import View from './View';
 import config from '@plone/volto/registry';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 config.blocks.blocksConfig = {
   tabs_block: {
@@ -76,9 +75,7 @@ describe('View Component', () => {
 
     const { container, getByText } = render(
       <Provider store={store}>
-        <Router>
-          <View data={{ variation: 'default', data: customTabsData }} />
-        </Router>
+        <View data={{ variation: 'default', data: customTabsData }} />
       </Provider>,
     );
     const tabItemsMenu = container.querySelectorAll(

package/src/components/layoutSchema.js

@@ -1,5 +1,7 @@
+import { TABS_BLOCK } from '../constants';
+
 const blocksArray = (config) => {
-  return Object.keys(config.blocks.blocksConfig)
+  const choices = Object.keys(config.blocks.blocksConfig)
     .map((key) => {
       if (config.blocks.blocksConfig[key]?.restricted) {
         return false;
@@ -9,6 +11,12 @@ const blocksArray = (config) => {
       }
     })
     .filter((val) => !!val);
+
+  if (!choices.some(([id]) => id === TABS_BLOCK)) {
+    choices.push([TABS_BLOCK, 'Tabs']);
+  }
+
+  return choices;
 };
 
 const layoutSchema = (config) => ({
@@ -72,7 +80,7 @@ const layoutSchema = (config) => ({
     },
     readOnlySettings: {
       title: 'Read-only settings',
-      description: 'Disable editing on columns block settings',
+      description: 'Disable editing on tabs block settings',
       type: 'boolean',
     },
   },

package/src/components/variations/default/Edit.jsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import { Menu, Tab, Input, Container } from 'semantic-ui-react';
 import { BlocksForm } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
 import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import {
@@ -252,6 +251,7 @@ const Edit = (props) => {
               metadata={metadata}
               pathname={props.pathname}
               properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}
+              multiSelected={selected && activeTab === tab ? multiSelected : []}
               selected={selected && activeTab === tab && activeBlock}
               selectedBlock={
                 selected && activeTab === tab && activeBlock
@@ -290,19 +290,7 @@ const Edit = (props) => {
                 );
                 setEditingTab(null);
               }}
-            >
-              {({ draginfo }, editBlock, blockProps) => {
-                return (
-                  <EditBlockWrapper
-                    blockProps={blockProps}
-                    draginfo={draginfo}
-                    multiSelected={multiSelected.includes(blockProps.block)}
-                  >
-                    {editBlock}
-                  </EditBlockWrapper>
-                );
-              }}
-            </BlocksForm>
+            />
           </Tab.Pane>
         );
       },

package/src/components/variations/horizontal-responsive/Edit.jsx

@@ -9,7 +9,6 @@ import cx from 'classnames';
 import { Menu, Tab, Container, Dropdown, Input } from 'semantic-ui-react';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import { BlocksForm } from '@plone/volto/components';
-import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
 import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import {
   SimpleMarkdown,
@@ -295,7 +294,6 @@ const Edit = (props) => {
     activeTabIndex = 0,
     block = null,
     activeBlock = null,
-    multiSelected = [],
     screen,
     tabsData = {},
     emptyTab = () => {},
@@ -304,6 +302,7 @@ const Edit = (props) => {
     onSelectBlock = noop,
     setEditingTab = noop,
     schema,
+    multiSelected = [],
   } = props;
   const menuPosition = getMenuPosition(data);
 
@@ -355,6 +354,7 @@ const Edit = (props) => {
               metadata={metadata}
               pathname={props.pathname}
               properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}
+              multiSelected={selected && activeTab === tab ? multiSelected : []}
               selected={selected && activeTab === tab && activeBlock}
               selectedBlock={
                 selected && activeTab === tab && activeBlock
@@ -393,19 +393,7 @@ const Edit = (props) => {
                 );
                 setEditingTab(null);
               }}
-            >
-              {({ draginfo }, editBlock, blockProps) => {
-                return (
-                  <EditBlockWrapper
-                    blockProps={blockProps}
-                    draginfo={draginfo}
-                    multiSelected={multiSelected.includes(blockProps.block)}
-                  >
-                    {editBlock}
-                  </EditBlockWrapper>
-                );
-              }}
-            </BlocksForm>
+            />
           </div>
         </Tab.Pane>
       ),

package/src/index.test.js

@@ -0,0 +1,57 @@
+jest.mock(
+  '@eeacms/volto-tabs-block/components',
+  () => ({
+    DefaultEdit: () => null,
+    DefaultView: () => null,
+    AccordionEdit: () => null,
+    AccordionView: () => null,
+    HorizontalResponsiveEdit: () => null,
+    HorizontalResponsiveView: () => null,
+    HorizontalCarouselView: () => null,
+    VerticalCarouselView: () => null,
+    layoutSchema: require('./components/layoutSchema').default,
+    TabsEdit: () => null,
+    TabsView: () => null,
+    blockSchema: jest.fn(),
+  }),
+  { virtual: true },
+);
+
+jest.mock('@eeacms/volto-tabs-block//icons/tabs.svg', () => 'tabs.svg', {
+  virtual: true,
+});
+
+jest.mock('./widgets', () => ({
+  TabsWidget: () => null,
+}));
+
+const applyConfig = require('./index').default;
+const { TABS_BLOCK } = require('./constants');
+
+describe('applyConfig', () => {
+  it('should include tabs in allowed blocks schema choices', () => {
+    const config = {
+      blocks: {
+        blocksConfig: {
+          text: { title: 'Text', restricted: false },
+          image: { restricted: false },
+          image_test: { title: 'Image', restricted: true },
+        },
+      },
+      widgets: {
+        type: {},
+      },
+    };
+
+    const newConfig = applyConfig(config);
+
+    expect(
+      newConfig.blocks.blocksConfig[TABS_BLOCK].schema.properties.allowedBlocks
+        .items.choices,
+    ).toEqual([
+      ['text', 'Text'],
+      ['image', 'image'],
+      [TABS_BLOCK, 'Tabs'],
+    ]);
+  });
+});

package/src/less/edit.less

@@ -46,18 +46,7 @@
     // padding-bottom: 0.1rem;
   }
 
-  .block-wrapper {
-    &:not(:last-child) {
-      margin-bottom: 2rem;
-    }
-  }
-
   .block {
-    .block-add-button,
-    .delete-button {
-      display: none;
-    }
-
     .block.selected::before {
       border-top-left-radius: 0;
     }
@@ -68,44 +57,9 @@
     pointer-events: none;
   }
 
-  .block.wrapper.multiSelected {
-    .block .block::before {
-      z-index: 1;
-      background-color: rgba(120, 192, 215, 0.375);
-    }
-  }
-
   .blocks-form {
     margin-top: 0.5rem;
   }
-
-  .blocks-chooser {
-    right: 0;
-    left: auto;
-    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;
-    }
-  }
 }
 
 .drag-drop-list-widget {

package/src/utils/SimpleMarkdown.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import SimpleMarkdown from './SimpleMarkdown';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('SimpleMarkdown', () => {
   it('renders empty when no markdown is provided', () => {

package/src/components/EditBlockWrapper.jsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import { Icon, BlockChooser } from '@plone/volto/components';
-import {
-  blockHasValue,
-  buildStyleClassNamesFromData,
-} from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-import { Button } from 'semantic-ui-react';
-import includes from 'lodash/includes';
-import isBoolean from 'lodash/isBoolean';
-import { defineMessages, injectIntl } from 'react-intl';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import cx from 'classnames';
-
-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',
-  },
-});
-
-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, children } = this.props;
-
-    const {
-      allowedBlocks,
-      block,
-      data,
-      onDeleteBlock,
-      onMutateBlock,
-      selected,
-    } = blockProps;
-    const type = data['@type'];
-    const { disableNewBlocks } = data;
-    const visible = !data.fixed;
-
-    const required = isBoolean(data.required)
-      ? data.required
-      : includes(config.blocks.requiredBlocks, type);
-
-    const styles = buildStyleClassNamesFromData(data.styles);
-
-    return (
-      <div ref={this.blockNode} className="block-wrapper">
-        <div
-          ref={draginfo?.innerRef}
-          {...(selected ? draginfo?.draggableProps : null)}
-          className={cx(`block-editor-${data['@type']}`, styles, {
-            [data.align]: data.align,
-          })}
-        >
-          {!selected && (
-            <div
-              style={{
-                display: 'none',
-                // keep react-beautiful-dnd happy
-              }}
-              {...draginfo.dragHandleProps}
-            ></div>
-          )}
-          {selected && (
-            <div className="block-toolbar">
-              <div
-                style={{
-                  display: visible ? 'inline-block' : 'none',
-                }}
-                {...draginfo.dragHandleProps}
-                className="drag handle wrapper-column-block"
-              >
-                <Button icon basic title="Drag and drop">
-                  <Icon name={dragSVG} size="19px" />
-                </Button>
-              </div>
-
-              {extraControls}
-
-              {!disableNewBlocks && !blockHasValue(data) && (
-                <Button
-                  icon
-                  basic
-                  title="Add block"
-                  onClick={() => {
-                    this.setState((prevState) => ({
-                      addNewBlockOpened: !prevState.addNewBlockOpened,
-                    }));
-                  }}
-                  className="column-block-add-button"
-                >
-                  <Icon name={addSVG} className="" size="19px" />
-                </Button>
-              )}
-              {!required && (
-                <Button
-                  icon
-                  basic
-                  title="Remove block"
-                  onClick={() => onDeleteBlock(block)}
-                  className="delete-button-column-block"
-                  aria-label={intl.formatMessage(messages.delete)}
-                >
-                  <Icon name={trashSVG} size="19px" />
-                </Button>
-              )}
-              {this.state.addNewBlockOpened && (
-                <BlockChooser
-                  onMutateBlock={(id, value) => {
-                    this.setState({ addNewBlockOpened: false });
-                    onMutateBlock(id, value);
-                  }}
-                  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);