@eeacms/volto-tabs-block 9.0.3 → 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,24 @@ 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
+
+- Release 9.1.0 [Alin Voinea - [`4396e37`](https://github.com/eea/volto-tabs-block/commit/4396e3740694d99cbb66414783c3fbbef7ed2022)]
 ### [9.0.3](https://github.com/eea/volto-tabs-block/compare/9.0.2...9.0.3) - 7 May 2025
 
 #### :bug: Bug Fixes
@@ -12,8 +30,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`01b5632`](https://github.com/eea/volto-tabs-block/commit/01b563271bd04f4329d9f876278324b970443413)]
-- Add Sonarqube tag using ied-frontend addons list [EEA Jenkins - [`d457e25`](https://github.com/eea/volto-tabs-block/commit/d457e25d8a97b080eb8eb32ae4b85db530049e96)]
 ### [9.0.2](https://github.com/eea/volto-tabs-block/compare/9.0.1...9.0.2) - 27 January 2025
 
 #### :house: Internal changes
@@ -64,8 +80,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`cb58ea7`](https://github.com/eea/volto-tabs-block/commit/cb58ea7417e8dd237b66908fd53f1f3ca8726566)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`4377ffc`](https://github.com/eea/volto-tabs-block/commit/4377ffc350a92f62cbe77b17b67dd331c71cbcd7)]
 ### [7.5.1](https://github.com/eea/volto-tabs-block/compare/7.5.0...7.5.1) - 28 March 2024
 
 #### :nail_care: Enhancements
@@ -108,7 +122,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update react-slick version to 0.30.1 [David Ichim - [`3369176`](https://github.com/eea/volto-tabs-block/commit/33691768899e7f91d2cd15319dbe3ebe66cf1513)]
 - update [Razvan - [`61b19e8`](https://github.com/eea/volto-tabs-block/commit/61b19e8584ff6023320b3671414392ea11449ff0)]
 - use DefaultEdit variation for responsive accordion, refs #266327 [Razvan - [`11acf6c`](https://github.com/eea/volto-tabs-block/commit/11acf6ce5afe022ddd30bff42c9a3321d1284da6)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`5045757`](https://github.com/eea/volto-tabs-block/commit/5045757a275477ba382551b301998d835741b716)]
 ### [7.0.5](https://github.com/eea/volto-tabs-block/compare/7.0.4...7.0.5) - 10 December 2023
 
 #### :rocket: New Features
@@ -140,8 +153,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`3b87d12`](https://github.com/eea/volto-tabs-block/commit/3b87d12df4d01031231b15eb4196f6ff6937706b)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`f5f3430`](https://github.com/eea/volto-tabs-block/commit/f5f343024b45bb0206e0169cce6dd0e8472b6795)]
 ### [7.0.1](https://github.com/eea/volto-tabs-block/compare/7.0.0...7.0.1) - 9 November 2023
 
 #### :bug: Bug Fixes
@@ -151,14 +162,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`bd6ffd4`](https://github.com/eea/volto-tabs-block/commit/bd6ffd42a00a2d77ff59545d9adaab7a45361446)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`d481e25`](https://github.com/eea/volto-tabs-block/commit/d481e25c4d61d7ff6ea11ff75c99fbdd730ecd82)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`6c39efc`](https://github.com/eea/volto-tabs-block/commit/6c39efcc30bddfebb6c61f8a8cd714f61828ec69)]
 ## [7.0.0](https://github.com/eea/volto-tabs-block/compare/6.0.3...7.0.0) - 31 October 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`f2e3d39`](https://github.com/eea/volto-tabs-block/commit/f2e3d3973c026f0331b82e0f691ec9bdc5899672)]
 
 #### :hammer_and_wrench: Others
 
@@ -371,7 +378,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`820aaa9`](https://github.com/eea/volto-tabs-block/commit/820aaa963e978a893a23b77f694bb011f3d768c1)]
 
 #### :hammer_and_wrench: Others
 
@@ -462,7 +468,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`52bc1b0`](https://github.com/eea/volto-tabs-block/commit/52bc1b0fbd4611173b8ca9dc2cf4033b31474420)]
 ## [4.0.0](https://github.com/eea/volto-tabs-block/compare/3.0.1...4.0.0) - 10 March 2023
 
 #### :house: Internal changes
@@ -473,13 +478,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 4.0.0 [Alin Voinea - [`8fc4cc9`](https://github.com/eea/volto-tabs-block/commit/8fc4cc9d8dc71e623e6586b95871cb3b98dc385f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`22d5bdc`](https://github.com/eea/volto-tabs-block/commit/22d5bdc1b3579cc46c73ce855041ca09154eb502)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`fde4324`](https://github.com/eea/volto-tabs-block/commit/fde4324f962cde8e8de0d76a44bee4b67d216bf8)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9175e47`](https://github.com/eea/volto-tabs-block/commit/9175e470d793edc63b62a99940aed25dd45f3713)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`3348950`](https://github.com/eea/volto-tabs-block/commit/334895036f8e367281abb35a20879c32dfbfc292)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`39bfb39`](https://github.com/eea/volto-tabs-block/commit/39bfb39fa6e8483e639491ff998293e758ac6384)]
-- yarn 3 [Alin Voinea - [`7e98df5`](https://github.com/eea/volto-tabs-block/commit/7e98df59669d71945be461e86e282b913538b805)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`079d7a4`](https://github.com/eea/volto-tabs-block/commit/079d7a43480e92fe280a9372399ff2d4d28537ae)]
 ### [3.0.1](https://github.com/eea/volto-tabs-block/compare/3.0.0...3.0.1) - 16 November 2022
 
 #### :hammer_and_wrench: Others
@@ -503,9 +502,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`a00e419`](https://github.com/eea/volto-tabs-block/commit/a00e419aef4c82a25f277f5e25e3d512c7838264)]
 - lint fix [David Ichim - [`c0a898c`](https://github.com/eea/volto-tabs-block/commit/c0a898c54461478baed2ac2f149ae580d4c89aeb)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`3b284e6`](https://github.com/eea/volto-tabs-block/commit/3b284e65e0eafa9b5ad8c92b4cb77628ffcc8103)]
 ### [2.2.0](https://github.com/eea/volto-tabs-block/compare/2.1.0...2.2.0) - 25 August 2022
 
 #### :hammer_and_wrench: Others
@@ -521,7 +518,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 2.1.0 [Alin Voinea - [`3cdfa30`](https://github.com/eea/volto-tabs-block/commit/3cdfa30d4d03d864be8ad63f0648b4717298734a)]
 - Squashed commit of the following: [Alin Voinea - [`ca241f5`](https://github.com/eea/volto-tabs-block/commit/ca241f56a96817679a1948154e2a8cc0e17b96fe)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`68ea5a6`](https://github.com/eea/volto-tabs-block/commit/68ea5a6b971fc36840cf5716a04f68316b229b2b)]
 ### [2.0.2](https://github.com/eea/volto-tabs-block/compare/2.0.1...2.0.2) - 16 June 2022
 
 ### [2.0.1](https://github.com/eea/volto-tabs-block/compare/2.0.0...2.0.1) - 10 June 2022
@@ -565,8 +561,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Let theme addon to set default values for default template schema [Miu Razvan - [`55f148d`](https://github.com/eea/volto-tabs-block/commit/55f148d1a95417f8a0b55681ce250acde8463c1c)]
 - Render pane as container if tabs-block has full-width class [Miu Razvan - [`bbffb96`](https://github.com/eea/volto-tabs-block/commit/bbffb96b908476ddee447af3ce79bafb1a12f9a8)]
 - Refactor default template [Miu Razvan - [`58eff52`](https://github.com/eea/volto-tabs-block/commit/58eff5281adb08a5f8fe6d21fd43330252012277)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a6735`](https://github.com/eea/volto-tabs-block/commit/72a6735cbbc0e7d57b4bb7ea83fea9becc317018)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`e928da1`](https://github.com/eea/volto-tabs-block/commit/e928da1df7e4680bd4be9b5d46406800d721b8c5)]
 ### [1.2.12](https://github.com/eea/volto-tabs-block/compare/1.2.11...1.2.12) - 21 January 2022
 
 ### [1.2.11](https://github.com/eea/volto-tabs-block/compare/1.2.10...1.2.11) - 4 January 2022
@@ -581,17 +575,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`cd2e2ac`](https://github.com/eea/volto-tabs-block/commit/cd2e2ac1d127bfc688ecf16e17734603ab727a34)]
 ### [1.2.8](https://github.com/eea/volto-tabs-block/compare/1.2.7...1.2.8) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d10c0b3`](https://github.com/eea/volto-tabs-block/commit/d10c0b3d35d25c530d19eebde38dfe5da8fda01b)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`1a7187f`](https://github.com/eea/volto-tabs-block/commit/1a7187f10b2bd9e1307dabf51823f63ccd766864)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a7550`](https://github.com/eea/volto-tabs-block/commit/72a755025b38e1d8dd7fe206273a70585e4b9ac8)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`022b277`](https://github.com/eea/volto-tabs-block/commit/022b2779a5d7fd7217c2d8a559eafab0bd86ce23)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`84c9bea`](https://github.com/eea/volto-tabs-block/commit/84c9bea7a0aba2fe9ef9713e7131de6da6e0bcce)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`020aa97`](https://github.com/eea/volto-tabs-block/commit/020aa97bc70a643ea3857566c5a1dc3a5200c2be)]
 ### [1.2.7](https://github.com/eea/volto-tabs-block/compare/1.2.6...1.2.7) - 27 August 2021
 
 #### :hammer_and_wrench: Others
@@ -608,8 +596,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Move less import in View instead of Edit [Tiberiu Ichim - [`84aeff0`](https://github.com/eea/volto-tabs-block/commit/84aeff04a980076f54687c546691d37b6e790478)]
 - gitignore tweaks [Tiberiu Ichim - [`f4c993d`](https://github.com/eea/volto-tabs-block/commit/f4c993d004b126f08f16651ab9460546fa9e9cad)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`865906a`](https://github.com/eea/volto-tabs-block/commit/865906a0deb261d44cc23e26bfd2d1dd0e319640)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`5383861`](https://github.com/eea/volto-tabs-block/commit/538386100adbc868e693c1c2a5ba13461307ffee)]
 - Style update [razvanMiu - [`323aaaf`](https://github.com/eea/volto-tabs-block/commit/323aaafcad01d8fdf0e713a1fc254ae9fe319f43)]
 - Fix 'scroll to' feature on carousel [razvanMiu - [`16c6a08`](https://github.com/eea/volto-tabs-block/commit/16c6a08f6db687542ea38e07a92b265e592f6173)]
 - Better accesibility [razvanMiu - [`3511611`](https://github.com/eea/volto-tabs-block/commit/351161197270a4807f01d85a7055cbaadae72f8e)]

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.0.3",
+  "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 {
@@ -248,9 +247,11 @@ const Edit = (props) => {
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}
+              isMainForm={false}
               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
@@ -289,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);
 
@@ -351,9 +350,11 @@ const Edit = (props) => {
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}
+              isMainForm={false}
               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
@@ -392,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);