@eeacms/volto-group-block 4.2.3 → 4.3.3

package/CHANGELOG.md

@@ -4,15 +4,42 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [4.3.3](https://github.com/eea/volto-group-block/compare/4.3.2...4.3.3)
+
+- Add SonarQube badges [`bd17cc7`](https://github.com/eea/volto-group-block/commit/bd17cc7542d94a1338f4d47e167704cdd082e452)
+
+#### [4.3.2](https://github.com/eea/volto-group-block/compare/4.3.1...4.3.2)
+
+> 10 December 2021
+
+- Develop [`#14`](https://github.com/eea/volto-group-block/pull/14)
+- Correct Cypress tests [`#13`](https://github.com/eea/volto-group-block/pull/13)
+- Refs #142010 - Optimize Volto-addons gitflow pipelines [`bc36cf5`](https://github.com/eea/volto-group-block/commit/bc36cf58c39e2b43c2fbf5189df6ddefc1260857)
+
+#### [4.3.1](https://github.com/eea/volto-group-block/compare/4.3.0...4.3.1)
+
+> 11 October 2021
+
+- Possibility to ignore spaces with maxChars [`#11`](https://github.com/eea/volto-group-block/pull/11)
+- No space count [`#10`](https://github.com/eea/volto-group-block/pull/10)
+
+#### [4.3.0](https://github.com/eea/volto-group-block/compare/4.2.3...4.3.0)
+
+> 24 June 2021
+
+- Refactor counter to use CSS class instead of inline style [`#9`](https://github.com/eea/volto-group-block/pull/9)
+- Show help icon only if block instructions differ from section instructions [`a4ca4e5`](https://github.com/eea/volto-group-block/commit/a4ca4e58968dcfb947072a255c8f797df7977852)
+
 #### [4.2.3](https://github.com/eea/volto-group-block/compare/4.2.2...4.2.3)
 
+> 27 May 2021
+
 - Cypress coverage [`#8`](https://github.com/eea/volto-group-block/pull/8)
 
 #### [4.2.2](https://github.com/eea/volto-group-block/compare/4.2.1...4.2.2)
 
 > 14 May 2021
 
-- [JENKINS] - Auto-release pipeline [`#7`](https://github.com/eea/volto-group-block/pull/7)
 
 #### [4.2.1](https://github.com/eea/volto-group-block/compare/4.2.0...4.2.1)
 
@@ -92,7 +119,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Drop volto-blocks-form dependency [`#6`](https://github.com/eea/volto-group-block/pull/6)
 - Release 3.0.0 [`a83216e`](https://github.com/eea/volto-group-block/commit/a83216ed496b3a14ea49fd9697cd50ac64866092)
-- Cleanup Jenkinsfile DEPENDENCIES [`9d2a5d0`](https://github.com/eea/volto-group-block/commit/9d2a5d04308ecef93ca2682d928d0919b0f861ea)
 - Cosmetics [`03d6ed8`](https://github.com/eea/volto-group-block/commit/03d6ed8cbb796bacef3b3b78a1cee4114874033c)
 - Fix focus management [`35327d7`](https://github.com/eea/volto-group-block/commit/35327d7b457beeed15b7129541bb1665cab4586b)
 - Change imports from volto core [`d1dcc14`](https://github.com/eea/volto-group-block/commit/d1dcc14116fa408731d545d45d01669a06563b46)
@@ -135,19 +161,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0 [`b6ef873`](https://github.com/eea/volto-group-block/commit/b6ef873cb6f61e17db66fdd4de1d9d4902a66fc6)
 - Update package meta info [`143b7d4`](https://github.com/eea/volto-group-block/commit/143b7d44438d7afa5e346a9d21a85352df4e925f)
-- [JENKINS] - Fix SONAR tags [`512b56c`](https://github.com/eea/volto-group-block/commit/512b56ce931aa4c14f353e2a4c5bbbb614fe632f)
-- [JENKINS] - Update [`2204acd`](https://github.com/eea/volto-group-block/commit/2204acdefee84114bd403f9772a1e610348dc3dd)
-- [JENKINS] - Fix code-analysis [`88a5b3d`](https://github.com/eea/volto-group-block/commit/88a5b3d58b951ecfbc6e813accf065ca5e8be990)
-- [JENKINS] - Fix SonarQube report [`7fca879`](https://github.com/eea/volto-group-block/commit/7fca879b526be822cd63312ed51447d6e6a59cf2)
-- [JENKINS] - Fix unit tests pipeline [`5b9b28f`](https://github.com/eea/volto-group-block/commit/5b9b28f1de060635f1c665a80939bfa66918a918)
-- [JENKINS] - Add jest unit tests [`d8af5b7`](https://github.com/eea/volto-group-block/commit/d8af5b7932988b490a079d86079e359b5584fd7f)
-- [JENKINS] - Fix develop badge [`857b4ab`](https://github.com/eea/volto-group-block/commit/857b4ab5bc0aa9947c2ed76f35cec7d409c7fa66)
-- [JENKINS] - Add jenkins builds badges [`6cebd3e`](https://github.com/eea/volto-group-block/commit/6cebd3e970a840c4951c614a5d130dab05ae553f)
-- [JENKINS] - Cleanup console.log [`df38b6f`](https://github.com/eea/volto-group-block/commit/df38b6f7a630176e911ff89263c21e519ab44efa)
-- [JENKINS] - Fix eslint pipeline [`ca7c87a`](https://github.com/eea/volto-group-block/commit/ca7c87a4f74f2b0ea354ea5369f0700b8bee92af)
-- [JENKINS] - Fix style [`0e2c5a3`](https://github.com/eea/volto-group-block/commit/0e2c5a39b2f785ae1d942d39e7f8b2789dafc795)
 - Add Jenkinkins pipeline [`866a4e1`](https://github.com/eea/volto-group-block/commit/866a4e14ea1eb8f5adb01222e576e5ab6dc73a70)
-- yarn prettier [`e3fe0a3`](https://github.com/eea/volto-group-block/commit/e3fe0a36b89878769341b45198d6c9e2f2584d15)
 
 #### [0.1.3](https://github.com/eea/volto-group-block/compare/0.1.2...0.1.3)
 
@@ -192,5 +206,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Render meta block [`0d44560`](https://github.com/eea/volto-group-block/commit/0d4456011ca56454068a54c610250b02df4ccb3b)
 - Implement meta block allowedBlocks settings [`f24feb1`](https://github.com/eea/volto-group-block/commit/f24feb1a1751f04841c21c7cd52a517fb02074ba)
 - Edit meta block [`236d291`](https://github.com/eea/volto-group-block/commit/236d29156fa835a7aa54eecdb4f120de0d64b271)
-- yarn bootstrap [`e009dfb`](https://github.com/eea/volto-group-block/commit/e009dfb6b9b74d101a6722f0982a5359fc522b6b)
 - Initial commit [`6a7b0de`](https://github.com/eea/volto-group-block/commit/6a7b0deb8f873d1462fd6a9c61edfc1562b3aace)

package/Jenkinsfile

@@ -4,13 +4,37 @@ pipeline {
   environment {
         GIT_NAME = "volto-group-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,forest.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater"
         DEPENDENCIES = ""
     }
 
   stages {
 
+    stage('Release') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'master'
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          }
+        }
+      }
+    }
+
     stage('Code') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
+        }
+      }
       steps {
         parallel(
 
@@ -36,6 +60,15 @@ pipeline {
     }
 
     stage('Tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -75,6 +108,15 @@ pipeline {
     }
 
     stage('Integration tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -122,10 +164,16 @@ pipeline {
     }
 
     stage('Report to SonarQube') {
-      // Exclude Pull-Requests
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
+          anyOf {
+            branch 'master'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
+          }
         }
       }
       steps {
@@ -156,8 +204,8 @@ pipeline {
       steps {
         node(label: 'docker') {
           script {
-            if ( env.CHANGE_BRANCH != "develop" &&  !( env.CHANGE_BRANCH.startsWith("hotfix")) ) {
-                error "Pipeline aborted due to PR not made from develop or hotfix branch"
+            if ( env.CHANGE_BRANCH != "develop" ) {
+                error "Pipeline aborted due to PR not made from develop branch"
             }
            withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
             sh '''docker pull eeacms/gitflow'''
@@ -168,23 +216,6 @@ pipeline {
       }
     }
 
-    stage('Release') {
-      when {
-        allOf {
-          environment name: 'CHANGE_ID', value: ''
-          branch 'master'
-        }
-      }
-      steps {
-        node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
-          }
-        }
-      }
-    }
-
   }
 
   post {

package/README.md

@@ -1,7 +1,19 @@
 # volto-group-block
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-group-block)](https://github.com/eea/volto-group-block/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-group-block%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-group-block/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-group-block%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-group-block/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-group-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-group-block-develop)
+
 
 [Volto](https://github.com/plone/volto) add-on to group blocks in sections and filter available blocks per content-type per section
 
@@ -72,6 +84,81 @@
 
 1. Happy editing!
 
+## 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).
+
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-group-block/blob/master/DEVELOP.md).

package/cypress/integration/block-basics.js

@@ -5,16 +5,17 @@ describe('Blocks Tests', () => {
   afterEach(tearDownAfterEach);
 
   it('Add Block: Empty', () => {
+    // without this the clear command below does nothing sometimes
+    cy.wait(500);
+
     // Change page title
-    cy.get('.documentFirstHeading > .public-DraftStyleDefault-block')
-      .clear()
-      .type('My Add-on Page')
-      .get('.documentFirstHeading span[data-text]')
-      .contains('My Add-on Page');
-
-    cy.get('.documentFirstHeading > .public-DraftStyleDefault-block').type(
-      '{enter}',
-    );
+    cy.get('[contenteditable=true]').first().clear();
+
+    cy.get('[contenteditable=true]').first().type('My Add-on Page');
+
+    cy.get('.documentFirstHeading').contains('My Add-on Page');
+
+    cy.get('[contenteditable=true]').first().type('{enter}');
 
     // Add block
     cy.get('.ui.basic.icon.button.block-add-button').first().click();

package/cypress/support/index.js

@@ -44,7 +44,7 @@ export const setupBeforeEach = () => {
   cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.navigate('/cypress/my-page/edit');
-  cy.get(`.block.title [data-contents]`);
+  cy.get(`.block.title h1`);
 };
 
 export const tearDownAfterEach = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "4.2.3",
+  "version": "4.3.3",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -25,6 +25,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",

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

@@ -14,6 +14,7 @@ import { Button, Segment } from 'semantic-ui-react';
 import EditBlockWrapper from './EditBlockWrapper';
 import EditSchema from './EditSchema';
 import helpSVG from '@plone/volto/icons/help.svg';
+import cx from 'classnames';
 import './editor.less';
 
 const Edit = (props) => {
@@ -29,9 +30,8 @@ const Edit = (props) => {
   } = props;
 
   const metadata = props.metadata || props.properties;
-  const properties = isEmpty(data?.data?.blocks)
-    ? emptyBlocksForm()
-    : data.data;
+  const data_blocks = data?.data?.blocks;
+  const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
 
   const [selectedBlock, setSelectedBlock] = useState(
     properties.blocks_layout.items[0],
@@ -39,7 +39,7 @@ const Edit = (props) => {
 
   React.useEffect(() => {
     if (
-      isEmpty(data?.data?.blocks) &&
+      isEmpty(data_blocks) &&
       properties.blocks_layout.items[0] !== selectedBlock
     ) {
       setSelectedBlock(properties.blocks_layout.items[0]);
@@ -48,59 +48,79 @@ const Edit = (props) => {
         data: properties,
       });
     }
-  }, [
-    onChangeBlock,
-    properties,
-    selectedBlock,
-    block,
-    data,
-    data?.data?.blocks,
-  ]);
+  }, [onChangeBlock, properties, selectedBlock, block, data, data_blocks]);
 
   const blockState = {};
   let charCount = 0;
 
+  /**
+   * Count the number of characters that are anything except using Regex
+   * @param {string} paragraph
+   * @returns
+   */
+  const countCharsWithoutSpaces = (paragraph) => {
+    const regex = /[^\s\\]/g;
+
+    return (paragraph.match(regex) || []).length;
+  };
+
+  /**
+   * Count the number of characters
+   * @param {string} paragraph
+   * @returns
+   */
+  const countCharsWithSpaces = (paragraph) => {
+    return paragraph?.length || 0;
+  };
+
+  /**
+   * Recursively look for any block that contains text or plaintext
+   * @param {Object} blocksObject
+   * @returns
+   */
   const countTextInBlocks = (blocksObject) => {
     let groupCharCount = 0;
 
     Object.keys(blocksObject).forEach((blockId) => {
-      const charCountTemp = blocksObject[blockId]?.plaintext
-        ? blocksObject[blockId]?.plaintext.length
+      const foundText = blocksObject[blockId]?.plaintext
+        ? blocksObject[blockId]?.plaintext
         : blocksObject[blockId]?.text?.blocks[0]?.text
-        ? blocksObject[blockId].text.blocks[0].text.length
+        ? blocksObject[blockId].text.blocks[0].text
         : blocksObject[blockId]?.data?.blocks
         ? countTextInBlocks(blocksObject[blockId]?.data?.blocks)
         : blocksObject[blockId]?.blocks
         ? countTextInBlocks(blocksObject[blockId]?.blocks)
-        : 0;
-      groupCharCount = groupCharCount + charCountTemp;
+        : '';
+      const resultText =
+        typeof foundText === 'string' || foundText instanceof String
+          ? foundText
+          : '';
+
+      groupCharCount += props.data.ignoreSpaces
+        ? countCharsWithoutSpaces(resultText)
+        : countCharsWithSpaces(resultText);
     });
 
     return groupCharCount;
   };
 
   const showCharCounter = () => {
-    if (props.data?.data?.blocks) {
-      charCount = countTextInBlocks(props.data?.data?.blocks);
+    if (data_blocks) {
+      charCount = countTextInBlocks(data_blocks);
     }
   };
   showCharCounter();
 
-  const colors = { ok: '#CCC', warning: 'darkorange', danger: 'crimson' };
-  const counterStyle = {
-    color:
-      charCount < Math.ceil(props.data.maxChars / 1.05)
-        ? colors.ok
-        : charCount < props.data.maxChars
-        ? colors.warning
-        : colors.danger,
-    textAlign: 'end',
-  };
+  const counterClass =
+    charCount < Math.ceil(props.data.maxChars / 1.05)
+      ? 'info'
+      : charCount < props.data.maxChars
+      ? 'warning'
+      : 'danger';
 
   const counterComponent = props.data.maxChars ? (
     <p
-      style={counterStyle}
-      className="counter"
+      className={cx('counter', counterClass)}
       onClick={() => {
         setSelectedBlock();
         props.setSidebarTab(1);

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

@@ -86,6 +86,12 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    // Get editing instructions from block settings or props
+    let instructions = data?.instructions?.data || data?.instructions;
+    if (!instructions || instructions === '<p><br/></p>') {
+      instructions = '';
+    }
+
     return (
       <div ref={this.blockNode}>
         <div
@@ -104,7 +110,7 @@ class EditBlockWrapper extends React.Component {
           )}
           {visible && (
             <div className="block-toolbar">
-              {extraControls}
+              {instructions ? extraControls : ''}
 
               {!disabled && (
                 <>

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

@@ -11,6 +11,7 @@ const Schema = {
         'allowedBlocks',
         'as',
         'maxChars',
+        'ignoreSpaces',
         'readOnlySettings',
         'disableInnerButtons',
         'required',
@@ -67,6 +68,11 @@ const Schema = {
       type: 'integer',
       factory: 'Integer',
     },
+    ignoreSpaces: {
+      title: 'Ignore spaces',
+      description: 'Ignore spaces while calculating maximum characters',
+      type: 'boolean',
+    },
     required: {
       title: 'Required',
       description: "Don't allow deletion of this block",

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

@@ -50,6 +50,19 @@
     font-size: 85%;
     grid-gap: 0.5em;
     grid-template-columns: 98% auto;
+    text-align: end;
+
+    &.info {
+      color: #ccc;
+    }
+
+    &.danger {
+      color: crimson;
+    }
+
+    &.warning {
+      color: darkorange;
+    }
   }
 
   .blocks-form {