diff --git a/.coverage.babel.config.js b/.coverage.babel.config.js
index e8b54d3..37219fd 100644
--- a/.coverage.babel.config.js
+++ b/.coverage.babel.config.js
@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 
diff --git a/.gitignore b/.gitignore
index eeb1585..53b9801 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,17 @@
 .vscode/
 .history
+.eslintrc.js
+.nyc_output
+project
+coverage
 logs
 *.log
 npm-debug.log*
 .DS_Store
 *.swp
 yarn-error.log
+yarn.lock
+package-lock.json
 
 node_modules
 build
diff --git a/.i18n.babel.config.js b/.i18n.babel.config.js
new file mode 100644
index 0000000..a900a75
--- /dev/null
+++ b/.i18n.babel.config.js
@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..080322a
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,96 @@
+# https://docs.npmjs.com/using-npm/developers.html#keeping-files-out-of-your-package
+
+# Directories
+api/
+bin/
+build/
+lib/
+g-api/
+tests/
+
+# Docs
+docs/
+
+# Cypress
+cypress/
+
+# Tests
+__tests__/
+*.snap
+
+# Files
+.travis.yml
+requirements-docs.txt
+requirements-tests.txt
+yarn.lock
+.dockerignore
+.gitattributes
+.yarnrc
+.nvmrc
+changelogupdater.js
+pip-selfcheck.json
+Dockerfile
+CNAME
+entrypoint.sh
+Jenkinsfile
+Makefile
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+styleguide.config
+.vscode
+packages
diff --git a/.project.eslintrc.js b/.project.eslintrc.js
new file mode 100644
index 0000000..cfefd89
--- /dev/null
+++ b/.project.eslintrc.js
@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = fs.realpathSync('./project');    // __dirname
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
+
+const pathsConfig = jsConfig.paths;
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+
+Object.keys(pathsConfig).forEach(pkg => {
+  if (pkg === '@plone/volto') {
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
+  }
+});
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map(o => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+
+module.exports = {
+  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+};
+
diff --git a/Jenkinsfile b/Jenkinsfile
index 2fddb8a..3611db9 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -6,7 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu,water.europa.eu-marine"
         DEPENDENCIES = ""
-        VOLTO = "16.0.0-alpha.14"
+        VOLTO = "alpha"
     }
 
   stages {
@@ -41,19 +41,19 @@ pipeline {
 
           "ES lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci:alpha eslint'''
             }
           },
 
           "Style lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci:alpha stylelint'''
             }
           },
 
           "Prettier": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci:alpha prettier'''
             }
           }
         )
@@ -77,8 +77,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''docker pull plone/volto-addon-ci:alpha'''
+                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO=$VOLTO plone/volto-addon-ci:alpha'''
                   sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
@@ -126,7 +126,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull eeacms/plone-backend; docker run --rm -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci:alpha; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO=$VOLTO plone/volto-addon-ci:alpha cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
diff --git a/Makefile b/Makefile
index 809b7e0..b873d77 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 SHELL=/bin/bash
 
 DIR=$(shell basename $$(pwd))
-ADDON ?= "@eeacms/volto-columns-block"
+ADDON ?= "@eeacms/volto-addon-template"
 
 # We like colors
 # From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects
@@ -10,144 +10,89 @@ GREEN=`tput setaf 2`
 RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
-# HAS_YO=$(shell command yo)
-# if [[ ${HAS_YO} -ne 0 ]]; then
-# 	echo "Installing yo"
-# 	npm install -g yo
-# fi;
-
-# packages:
-#   - '../'
-# link-workspace-packages: true
-# prefer-workspace-packages: true
-
-make-frontend:		## Builds just the Volto project
+project:
 	npm install -g yo
 	npm install -g @plone/generator-volto
 	npm install -g mrs-developer
-	yo @plone/volto project --addon ${ADDON} --no-interactive
-	cp addon-project/* project/
-	cd project
-	pnpm add "${ADDON}@workspace:*"
-	pnpm i
-	# --workspace "src/addons/${DIR}"
-	# ln -sf $$(pwd) project/src/addons/
-	# cp .project.eslintrc.js .eslintrc.js
-	# cd project && \
-	# 	rm -rf node_modules && \
-	# 	yalc add @plone/volto --no-pure && \
-	# 	pnpm i
+	yo @plone/volto project --addon ${ADDON} --workspace "src/addons/${DIR}" --no-interactive
+	ln -sf $$(pwd) project/src/addons/
+	cp .project.eslintrc.js .eslintrc.js
+	cd project && yarn
 	@echo "-------------------"
-	@echo "Project is ready!"
-	@echo "Now run: cd project && yarn start"
-
-.PHONY: build-backend
-build-backend:  ## Build Plone 5.2
-	(cd api && python3 -m venv .)
-	(cd api && bin/pip install --upgrade pip)
-	(cd api && bin/pip install --upgrade wheel)
-	(cd api && bin/pip install -r requirements.txt)
-	(cd api && bin/buildout)
-
-.PHONY: build
-build:
-	make build-backend
-	make build-frontend
-
-all: build
+	@echo "$(GREEN)Volto project is ready!$(RESET)"
+	@echo "$(RED)Now run: cd project && yarn start$(RESET)"
 
-.PHONY: start-backend
-start-backend: ## Start Plone Backend
-	@echo "$(GREEN)==> Start Plone Backend$(RESET)"
-	(cd api && PYTHONWARNINGS=ignore bin/instance fg)
+all: project
 
 .PHONY: start-test-backend
 start-test-backend: ## Start Test Plone Backend
 	@echo "$(GREEN)==> Start Test Plone Backend$(RESET)"
-	ZSERVER_PORT=55001 CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors,eea.volto.slate APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage,eea.volto.slate:default ./api/bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
+	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
 
+.PHONY: start-backend-docker
+start-backend-docker:		## Starts a Docker-based backend
+	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
+	docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone
+
+.PHONY: test
+test:
+	docker pull plone/volto-addon-ci:alpha
+	docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha
+
+.PHONY: test-update
+test-update:
+	docker pull plone/volto-addon-ci:alpha
+	docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha yarn test src/addons/${DIR}/src --watchAll=false -u
 
 .PHONY: help
-help:		## Show this help.
-	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
-
-
-
-#
-# build-frontend:
-# 	yarn && RAZZLE_API_PATH=http://localhost:55001/plone yarn build
-#
-# .PHONY: Build Plone 5.2
-# build-backend:  ## Build Plone 5.2
-# 	(cd api && python3 -m venv .)
-# 	(cd api && bin/pip install --upgrade pip)
-# 	(cd api && bin/pip install --upgrade wheel)
-# 	(cd api && bin/pip install -r requirements.txt)
-# 	(cd api && bin/buildout)
-#
-# .PHONY: Build Plone 5.2 in specific port
-# build-backend-withport:  ## Build Plone 5.2 with port
-# 	(cd api && python3 -m venv .)
-# 	(cd api && bin/pip install --upgrade pip)
-# 	(cd api && bin/pip install --upgrade wheel)
-# 	(cd api && bin/pip install -r requirements.txt)
-# 	(cd api && bin/buildout instance:http-address=$(INSTANCE_PORT))
-#
-# dist:
-# 	yarn
-# 	yarn build
-#
-# test:
-# 	(cd api && bin/test)
-#
-# docs-serve:
-# 	(cd docs && ../bin/mkdocs serve)
-#
-# docs-build:
-# 	# The build in netlify breaks because they have not installed ensurepip
-# 	# So we should continue using virtualenv
-# 	virtualenv --python=python3 .
-# 	./bin/pip install -r requirements-docs.txt
-# 	(cd docs && ../bin/mkdocs build)
-#
-# start-frontend: dist
-# 	yarn start:prod
-#
-# start-backend-docker:
-# 	docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone
-#
-# start-backend-docker-guillotina:
-# 	docker-compose -f g-api/docker-compose.yml up -d
-#
-# stop-backend-docker-guillotina:
-# 	docker-compose -f g-api/docker-compose.yml down
-#
-# test-acceptance-server:
-# 	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
-#
-# test-acceptance-server-old:
-# 	ZSERVER_PORT=55001 CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage ./api/bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
-#
-# test-acceptance-guillotina:
-# 	docker-compose -f g-api/docker-compose.yml up > /dev/null
-#
-# clean:
-# 	(cd api && rm -rf bin eggs develop-eggs include lib parts .installed.cfg .mr.developer.cfg)
-# 	rm -rf node_modules
-#
-# .PHONY: start-test-frontend
-# start-test-frontend: ## Start Test Volto Frontend
-# 	@echo "$(GREEN)==> Start Test Volto Frontend$(RESET)"
-# 	RAZZLE_API_PATH=http://localhost:55001/plone yarn build && NODE_ENV=production node build/server.js
-#
-# .PHONY: start-test
-# start-test: ## Start Test
-# 	@echo "$(GREEN)==> Start Test$(RESET)"
-# 	yarn cypress:open
-#
-# .PHONY: start-test-all
-# start-test-all: ## Start Test
-# 	@echo "$(GREEN)==> Start Test$(RESET)"
-# 	yarn ci:cypress:run
-#
-# .PHONY: all start test-acceptance
+help:           ## Show this help.
+        @echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
+
+
+ifeq ($(wildcard ./project),)
+  NODE_MODULES = "../../../node_modules"
+else
+  NODE_MODULES = "./project/node_modules"
+endif
+
+.PHONY: stylelint
+stylelint:
+	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+
+.PHONY: stylelint-overrides
+stylelint-overrides:
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'
+
+.PHONY: stylelint-fix
+stylelint-fix:
+	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
+
+.PHONY: prettier
+prettier:
+	$(NODE_MODULES)/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'
+
+.PHONY: prettier-fix
+prettier-fix:
+	$(NODE_MODULES)/.bin/prettier --single-quote  --write 'src/**/*.{js,jsx,json,css,less,md}'
+
+.PHONY: lint
+lint:
+	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+
+.PHONY: lint-fix
+lint-fix:
+	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+
+.PHONY: i18n
+i18n:
+	rm -rf build/messages
+	NODE_ENV=development $(NODE_MODULES)/.bin/i18n --addon
+
+.PHONY: cypress-run
+cypress-run:
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
+
+.PHONY: cypress-open
+cypress-open:
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
diff --git a/README.md b/README.md
index 3efce99..4274d3e 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,6 @@
 [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-columns-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-columns-block-develop)
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-columns-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-columns-block-develop)
 
-
 [Volto](https://github.com/plone/volto) add-on
 
 ## Features
@@ -40,6 +39,7 @@ blocks container.
    ```
 
 1. Start Plone backend
+
    ```
    docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
    ```
@@ -58,25 +58,25 @@ blocks container.
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-columns-block"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-columns-block"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-columns-block": "^4.0.0"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-columns-block": "^4.0.0"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --addon @eeacms/volto-columns-block
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --addon @eeacms/volto-columns-block
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 
@@ -91,78 +91,7 @@ blocks container.
 
 ## Release
 
-### Automatic release using Jenkins
-
-*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
-* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
-* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
-* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
-* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
-* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
-* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
-* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
-
-### Manual release from the develop branch ( beta release )
-
-#### Installation and configuration of release-it
-
-You need to first install the [release-it](https://github.com/release-it/release-it)  client.
-
-   ```
-   npm install -g release-it
-   ```
-
-Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-
-Release-it is a tool that automates 4 important steps in the release process:
-
-1. Version increase in `package.json` ( increased from the current version in `package.json`)
-2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
-3. GitHub release on the commit with the changelog and package.json modification on the develop branch
-4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
-
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
-
-   ```
-   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
-   ```
-
- To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
-
-   ```
-   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
-   ```
-
-#### Using release-it tool
-
-There are 3 yarn scripts that can be run to do the release
-
-##### yarn release-beta
-
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
-
-```
-? Select increment (next version):
-❯ prepatch (0.1.1-beta.0)
-  preminor (0.2.0-beta.0)
-  premajor (1.0.0-beta.0)
-  Other, please specify...
-```
-
-##### yarn release-major-beta
-
-Same as `yarn release-beta`, but with premajor version pre-selected.
-
-##### yarn release
-
-Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
-
-#### Important notes
-
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
-
-> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
-
+See [RELEASE.md](https://github.com/eea/volto-addon-template/blob/master/RELEASE.md).
 
 ## How to contribute
 
diff --git a/RELEASE.md b/RELEASE.md
new file mode 100644
index 0000000..24f98ee
--- /dev/null
+++ b/RELEASE.md
@@ -0,0 +1,74 @@
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+   
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+   
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+ 
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+ 
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+  
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+
+```
+? Select increment (next version): 
+❯ prepatch (0.1.1-beta.0) 
+  preminor (0.2.0-beta.0) 
+  premajor (1.0.0-beta.0) 
+  Other, please specify... 
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+    
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+
diff --git a/babel.config.js b/babel.config.js
index a900a75..51bd52b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1 +1,17 @@
-module.exports = require('@plone/volto/babel');
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};
diff --git a/cypress.config.js b/cypress.config.js
new file mode 100644
index 0000000..30be8ac
--- /dev/null
+++ b/cypress.config.js
@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});
diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 736dedd..0000000
--- a/cypress.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280,
-  "defaultCommandTimeout": 8888,
-  "chromeWebSecurity": false,
-  "reporter": "junit",
-  "video": true,
-  "retries": {
-    "runMode": 8,
-    "openMode": 0
-  },
-  "reporterOptions": {
-    "mochaFile": "cypress/reports/cypress-[hash].xml",
-    "jenkinsMode": true,
-    "toConsole": true
-  }
-}
diff --git a/cypress/integration/block-basics.js b/cypress/e2e/01-block-basics.cy.js
similarity index 59%
rename from cypress/integration/block-basics.js
rename to cypress/e2e/01-block-basics.cy.js
index 3aec6ae..813baef 100644
--- a/cypress/integration/block-basics.js
+++ b/cypress/e2e/01-block-basics.cy.js
@@ -1,45 +1,59 @@
-import { setupBeforeEach, tearDownAfterEach } from '../support';
+import { slateBeforeEach, slateAfterEach } from '../support/e2e';
 
 describe('Blocks Tests', () => {
-  beforeEach(setupBeforeEach);
-  afterEach(tearDownAfterEach);
+  beforeEach(slateBeforeEach);
+  afterEach(slateAfterEach);
 
   it('Add Block: Empty', () => {
-    // without this the clear command below does nothing sometimes
-    cy.wait(500);
-
     // Change page title
-    cy.get('[contenteditable=true]').first().clear();
-
-    cy.get('[contenteditable=true]').first().type('My Add-on Page');
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My Add-on Page');
 
     cy.get('.documentFirstHeading').contains('My Add-on Page');
 
-    cy.get('[contenteditable=true]').first().type('{enter}');
+    cy.getSlate().click();
 
     // Add block
     cy.get('.ui.basic.icon.button.block-add-button').first().click();
     cy.get('.blocks-chooser .title').contains('Common').click();
     cy.get('.content.active.common .button.columnsBlock')
       .contains('Columns')
-      .click();
+      .click({ force: true });
 
     cy.get('.columns-block .ui.card').eq(2).click();
     cy.get('.field-wrapper-title #field-title').last().type('Column test');
     cy.get('.field-wrapper-data .columns-area button').last().click();
 
-    cy.get('.columns-area .drag.handle.wrapper').first().trigger('mousedown', { which: 1 }, { force: true }).trigger('mousemove', 0, 60, {force: true}).trigger('mouseup');
+    cy.get('.columns-area .drag.handle.wrapper')
+      .first()
+      .trigger('mousedown', { which: 1 }, { force: true })
+      .trigger('mousemove', 0, 60, { force: true })
+      .trigger('mouseup');
 
     cy.get('.field-wrapper-gridCols  #field-gridCols').click();
     cy.get('.react-select__menu').contains('25').click();
 
     cy.get('[contenteditable=true]').first().focus().click();
-    cy.get('.columns-block [contenteditable=true]').eq(0).focus().click().type("First");
-    cy.get('.columns-block [contenteditable=true]').eq(1).focus().click().type("Second");
-    cy.get('.columns-block [contenteditable=true]').eq(2).focus().click().type("Third");
+    cy.get('.columns-block [contenteditable=true]')
+      .eq(0)
+      .focus()
+      .click()
+      .type('First');
+    cy.get('.columns-block [contenteditable=true]')
+      .eq(1)
+      .focus()
+      .click()
+      .type('Second');
+    cy.get('.columns-block [contenteditable=true]')
+      .eq(2)
+      .focus()
+      .click()
+      .type('Third');
     cy.get('.block-toolbar button').eq(1).click();
 
-    cy.get('.field-wrapper-grid_vertical_align  #field-grid_vertical_align').click();
+    cy.get(
+      '.field-wrapper-grid_vertical_align  #field-grid_vertical_align',
+    ).click();
     cy.get('.react-select__menu').contains('Middle').click();
     cy.get('.field-wrapper-backgroundColor .ui.huge.button').click();
     cy.get('.github-picker.color-picker span').eq(3).click();
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index ac48461..6f813fd 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -1,5 +1,8 @@
 /* eslint no-console: ["error", { allow: ["log"] }] */
 
+const SLATE_SELECTOR = '.content-area .slate-editor [contenteditable=true]';
+const SLATE_TITLE_SELECTOR = '.block.inner.title [contenteditable="true"]';
+
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', () => {
   let api_url, user, password;
@@ -92,7 +95,7 @@ Cypress.Commands.add(
             title: contentTitle,
             blocks: {
               'd3f1c443-583f-4e8e-a682-3bf25752a300': { '@type': 'title' },
-              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'text' },
+              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'slate' },
             },
             blocks_layout: {
               items: [
@@ -125,6 +128,100 @@ Cypress.Commands.add(
   },
 );
 
+// --- Add DX Content-Type ----------------------------------------------------------
+Cypress.Commands.add('addContentType', (name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@controlpanels/dexterity-types/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        title: name,
+      },
+    })
+    .then(() => console.log(`${name} content-type added.`));
+});
+
+// --- Remove DX behavior ----------------------------------------------------------
+Cypress.Commands.add('removeContentType', (name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/@controlpanels/dexterity-types/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() => console.log(`${name} content-type removed.`));
+});
+
+// --- Add DX field ----------------------------------------------------------
+Cypress.Commands.add('addSlateJSONField', (type, name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@types/${type}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        id: name,
+        title: name,
+        description: 'Slate JSON Field',
+        factory: 'SlateJSONField',
+        required: false,
+      },
+    })
+    .then(() => console.log(`${name} SlateJSONField field added to ${type}`));
+});
+
+// --- Remove DX field ----------------------------------------------------------
+Cypress.Commands.add('removeSlateJSONField', (type, name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/@types/${type}/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() =>
+      console.log(`${name} SlateJSONField field removed from ${type}`),
+    );
+});
+
 // --- REMOVE CONTENT --------------------------------------------------------
 Cypress.Commands.add('removeContent', (path) => {
   let api_url, auth;
@@ -146,6 +243,41 @@ Cypress.Commands.add('removeContent', (path) => {
     .then(() => console.log(`${path} removed`));
 });
 
+Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
+  return (
+    cy
+      .wrap(subject)
+      .then((subject) => {
+        subject[0].dispatchEvent(
+          new InputEvent('beforeinput', {
+            inputType: 'insertText',
+            data: text,
+          }),
+        );
+        return subject;
+      })
+      // TODO: do this only for Electron-based browser which does not understand instantaneously
+      // that the user inserted some text in the block
+      .wait(1000)
+  );
+});
+
+Cypress.Commands.add('lineBreakInSlate', { prevSubject: true }, (subject) => {
+  return (
+    cy
+      .wrap(subject)
+      .then((subject) => {
+        subject[0].dispatchEvent(
+          new InputEvent('beforeinput', { inputType: 'insertLineBreak' }),
+        );
+        return subject;
+      })
+      // TODO: do this only for Electron-based browser which does not understand instantaneously
+      // that the block was split
+      .wait(1000)
+  );
+});
+
 // --- SET WORKFLOW ----------------------------------------------------------
 Cypress.Commands.add(
   'setWorkflow',
@@ -247,6 +379,83 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add('getSlate', ({ createNewSlate = true } = {}) => {
+  let slate;
+  cy.getIfExists(
+    SLATE_SELECTOR,
+    () => {
+      slate = cy.get(SLATE_SELECTOR).last();
+    },
+    () => {
+      if (createNewSlate) {
+        cy.get('.block.inner').last().type('{moveToEnd}{enter}');
+      }
+      slate = cy.get(SLATE_SELECTOR, { timeout: 10000 }).last();
+    },
+  );
+  return slate;
+});
+
+Cypress.Commands.add('clearSlate', (selector) => {
+  return cy
+    .get(selector)
+    .focus()
+    .click()
+    .wait(1000)
+    .type('{selectAll}')
+    .wait(1000)
+    .type('{backspace}');
+});
+
+Cypress.Commands.add('getSlateTitle', () => {
+  return cy.get(SLATE_TITLE_SELECTOR, {
+    timeout: 10000,
+  });
+});
+
+Cypress.Commands.add('clearSlateTitle', () => {
+  return cy.clearSlate(SLATE_TITLE_SELECTOR);
+});
+
+Cypress.Commands.add('setSlateSelection', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setSelection(subject, query, endQuery)
+    .wait(1000); // this wait is needed for the selection change to be detected after
+});
+
+Cypress.Commands.add('getSlateEditorAndType', (type) => {
+  cy.getSlate().focus().click().type(type);
+});
+
+Cypress.Commands.add('setSlateCursor', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setCursor(subject, query, endQuery)
+    .wait(1000);
+});
+
+Cypress.Commands.add('clickSlateButton', (button) => {
+  cy.get(`.slate-inline-toolbar .button-wrapper a[title="${button}"]`, {
+    timeout: 10000,
+  }).click({ force: true }); //force click is needed to ensure the button in visible in view.
+});
+
+Cypress.Commands.add('toolbarSave', () => {
+  cy.wait(1000);
+
+  // Save
+  cy.get('#toolbar-save').click();
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+});
+
 // Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
 Cypress.Commands.add(
   'setCursor',
@@ -313,3 +522,16 @@ Cypress.Commands.add('store', () => {
 Cypress.Commands.add('settings', (key, value) => {
   return cy.window().its('settings');
 });
+
+Cypress.Commands.add(
+  'getIfExists',
+  (selector, successAction = () => {}, failAction = () => {}) => {
+    cy.get('body').then((body) => {
+      if (body.find(selector).length > 0 && successAction) {
+        successAction();
+      } else if (failAction) {
+        failAction();
+      }
+    });
+  },
+);
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
new file mode 100644
index 0000000..f696418
--- /dev/null
+++ b/cypress/support/e2e.js
@@ -0,0 +1,125 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+//Generate code-coverage
+import '@cypress/code-coverage/support';
+
+export const slateBeforeEach = (contentType = 'Document') => {
+  cy.autologin();
+  cy.createContent({
+    contentType: 'Document',
+    contentId: 'cypress',
+    contentTitle: 'Cypress',
+  });
+  cy.createContent({
+    contentType: contentType,
+    contentId: 'my-page',
+    contentTitle: 'My Page',
+    path: 'cypress',
+  });
+  cy.visit('/cypress/my-page');
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.navigate('/cypress/my-page/edit');
+};
+
+export const slateAfterEach = () => {
+  cy.autologin();
+  cy.removeContent('cypress');
+};
+
+export const slateJsonBeforeEach = (contentType = 'slate') => {
+  cy.autologin();
+  cy.addContentType(contentType);
+  cy.addSlateJSONField(contentType, 'slate');
+  slateBeforeEach(contentType);
+};
+
+export const slateJsonAfterEach = (contentType = 'slate') => {
+  cy.autologin();
+  cy.removeContentType(contentType);
+  slateAfterEach();
+};
+
+export const getSelectedSlateEditor = () => {
+  return cy.get('.slate-editor.selected [contenteditable=true]').click();
+};
+
+export const createSlateBlock = () => {
+  cy.get('.ui.basic.icon.button.block-add-button').first().click();
+  cy.get('.blocks-chooser .title').contains('Text').click();
+  cy.get('.ui.basic.icon.button.slate').contains('Text').click();
+  return getSelectedSlateEditor();
+};
+
+export const getSlateBlockValue = (sb) => {
+  return sb.invoke('attr', 'data-slate-value').then((str) => {
+    return typeof str === 'undefined' ? [] : JSON.parse(str);
+  });
+};
+
+export const createSlateBlockWithList = ({
+  numbered,
+  firstItemText,
+  secondItemText,
+}) => {
+  let s1 = createSlateBlock();
+
+  s1.typeInSlate(firstItemText + secondItemText);
+
+  // select all contents of slate block
+  // - this opens hovering toolbar
+  cy.contains(firstItemText + secondItemText).then((el) => {
+    selectSlateNodeOfWord(el);
+  });
+
+  // TODO: do not hardcode these selectors:
+  if (numbered) {
+    // this is the numbered list option in the hovering toolbar
+    cy.get('.slate-inline-toolbar > :nth-child(9)').click();
+  } else {
+    // this is the bulleted list option in the hovering toolbar
+    cy.get('.slate-inline-toolbar > :nth-child(10)').click();
+  }
+
+  // move the text cursor
+  const sse = getSelectedSlateEditor();
+  sse.type('{leftarrow}');
+  for (let i = 0; i < firstItemText.length; ++i) {
+    sse.type('{rightarrow}');
+  }
+
+  // simulate pressing Enter
+  getSelectedSlateEditor().lineBreakInSlate();
+
+  return s1;
+};
+
+export const selectSlateNodeOfWord = (el) => {
+  return cy.window().then((win) => {
+    var event = new CustomEvent('Test_SelectWord', {
+      detail: el[0],
+    });
+    win.document.dispatchEvent(event);
+  });
+};
diff --git a/cypress/support/index.js b/cypress/support/index.js
deleted file mode 100644
index 32395ab..0000000
--- a/cypress/support/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-/* coverage-start
-//Generate code-coverage
-import '@cypress/code-coverage/support';
-coverage-end */
-
-export const setupBeforeEach = () => {
-  cy.autologin();
-  cy.createContent({
-    contentType: 'Document',
-    contentId: 'cypress',
-    contentTitle: 'Cypress',
-  });
-  cy.createContent({
-    contentType: 'Document',
-    contentId: 'my-page',
-    contentTitle: 'My Page',
-    path: 'cypress',
-  });
-  cy.visit('/cypress/my-page');
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
-  cy.waitForResourceToLoad('my-page');
-  cy.navigate('/cypress/my-page/edit');
-  cy.get(`.block.title h1`);
-};
-
-export const tearDownAfterEach = () => {
-  cy.autologin();
-  cy.removeContent('cypress');
-};
diff --git a/jest-addon.config.js b/jest-addon.config.js
index e65c57e..da38318 100644
--- a/jest-addon.config.js
+++ b/jest-addon.config.js
@@ -1,15 +1,9 @@
 module.exports = {
-  // resolver: '<rootDir>/jest-resolver.js',
-  roots: ['.', '..'],
-  testMatch: ['**/src/**/?(*.)+(spec|test).[jt]s?(x)'],
+  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
     'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
     '!src/**/*.d.ts',
   ],
-  globals: {
-    window: {},
-    __DEV__: true,
-  },
   moduleNameMapper: {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
@@ -23,22 +17,20 @@ module.exports = {
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
   },
   coverageThreshold: {
     global: {
-      branches: 4,
-      functions: 4,
-      lines: 4,
-      statements: 4,
+      branches: 5,
+      functions: 5,
+      lines: 5,
+      statements: 5,
     },
   },
 };
diff --git a/package.json b/package.json
index 1a9af9b..e467c61 100644
--- a/package.json
+++ b/package.json
@@ -32,17 +32,19 @@
     "release-major-beta": "release-it major --preRelease=beta",
     "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
+    "test": "make test",
+    "test:fix": "make test-update",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi",
-    "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "lint": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; fi",
-    "lint:fix": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "cypress:run": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress run; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress run; fi",
-    "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi",
-    "i18n": "rm -rf build/messages && NODE_ENV=development i18n --addon"
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
   },
   "jest": {
     "enableSymlinks": true