@eeacms/volto-group-block 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -4,6 +4,36 @@ 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).
 
+### [6.3.0](https://github.com/eea/volto-group-block/compare/6.2.1...6.3.0) - 5 September 2023
+
+#### :rocket: New Features
+
+- feat(group): Variations support refs #157040 #26 from eea/variationsSupport [ichim-david - [`8342ae8`](https://github.com/eea/volto-group-block/commit/8342ae8d843bd672339f9472e1e806cbfeac8d1b)]
+
+#### :bug: Bug Fixes
+
+- fix: update and fix jest tests [nileshgulia1 - [`97df2cc`](https://github.com/eea/volto-group-block/commit/97df2cc6ac5c3283707ff72bb3d4cd762d5a3b2f)]
+
+#### :hammer_and_wrench: Others
+
+- Release 6.3.0 [Alin Voinea - [`3d74bb5`](https://github.com/eea/volto-group-block/commit/3d74bb5342e3882e0ddee1aa8edab7e90949def6)]
+- i18n: Add en [Alin Voinea - [`f3385cd`](https://github.com/eea/volto-group-block/commit/f3385cd33bfbe3efe514fd82fd140d17e33051e1)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`3aa996b`](https://github.com/eea/volto-group-block/commit/3aa996b4c115da6f37ca771f07f10d58fbfa33e8)]
+- fix eslint warnings [nileshgulia1 - [`cfdf2e9`](https://github.com/eea/volto-group-block/commit/cfdf2e900bcc456fa5a24ce7b03859170ad024ba)]
+- feature: add variations support [nileshgulia1 - [`d981c6b`](https://github.com/eea/volto-group-block/commit/d981c6b59c669712d60feb9cfb04022e228ac001)]
+### [6.2.1](https://github.com/eea/volto-group-block/compare/6.2.0...6.2.1) - 18 August 2023
+
+#### :bug: Bug Fixes
+
+- fix: ignoreSpaces on char counter - refs #256525 [rexalex - [`8d1ad2c`](https://github.com/eea/volto-group-block/commit/8d1ad2cfdf972b88f02f9efc4b7ef55b1e4b3592)]
+
+#### :house: Documentation changes
+
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`94b58f7`](https://github.com/eea/volto-group-block/commit/94b58f7c0390bfcac24adbfbea61577137c91e2b)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase test coverage - refs #254313 [ana-oprea - [`5facade`](https://github.com/eea/volto-group-block/commit/5facadec2f866a066ca836f8247a5e58ea44d176)]
 ### [6.2.0](https://github.com/eea/volto-group-block/compare/6.1.2...6.2.0) - 20 July 2023
 
 #### :nail_care: Enhancements

package/DEVELOP.md

@@ -2,6 +2,28 @@
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-group-block.git
+    cd volto-group-block
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1.  Happy hacking!
+
+    ```Bash
+    cd src/addons/volto-group-block/
+    ```
+
+### Or add @eeacms/volto-group-block to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -48,3 +70,37 @@ Before starting make sure your development environment is properly set. See [Vol
 1.  Happy hacking!
 
         cd src/addons/volto-group-block/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-group-block` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-group-block/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-group-block` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -51,6 +51,10 @@
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 - If you already have a volto project, just update `package.json`:

package/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3"
+services:
+  backend:
+    image: eeacms/plone-backend
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/volto.pot

@@ -0,0 +1,24 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-08-29T17:38:01.779Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/package.json

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

package/src/components/index.js

@@ -1,3 +1,4 @@
-export GroupBlockEdit from './manage/Blocks/Group/Edit';
-export GroupBlockView from './manage/Blocks/Group/View';
-export GroupBlockLayout from './manage/Blocks/Group/LayoutSchema';
+export { default as GroupBlockDefaultBody } from './manage/Blocks/Group/DefaultBody';
+export { default as GroupBlockEdit } from './manage/Blocks/Group/Edit';
+export { default as GroupBlockView } from './manage/Blocks/Group/View';
+export { default as GroupBlockLayout } from './manage/Blocks/Group/LayoutSchema';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GroupBlockDefaultBody } from '@eeacms/volto-group-block/components';
+
+const Body = (props) => {
+  const { variation } = props;
+
+  const BodyComponent = variation?.template || GroupBlockDefaultBody;
+
+  return <BodyComponent {...props} />;
+};
+
+Body.propTypes = {
+  variation: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default Body;

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

@@ -8,46 +8,53 @@ import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import delightedSVG from '@plone/volto/icons/delighted.svg';
 import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
 
-const CounterComponent = ({ data, setSidebarTab, setSelectedBlock }) => {
-  const { maxChars } = data;
-  let charCount = 0;
-
-  const countCharsWithoutSpaces = (paragraph) => {
-    const regex = /[^\s\\]/g;
+const countCharsWithoutSpaces = (paragraph) => {
+  const regex = /[^\s\\]/g;
+  return (paragraph.match(regex) || []).length;
+};
 
-    return (paragraph.match(regex) || []).length;
-  };
+const countCharsWithSpaces = (paragraph) => {
+  return paragraph?.length || 0;
+};
 
-  const countCharsWithSpaces = (paragraph) => {
-    return paragraph?.length || 0;
-  };
+const countTextInEachBlock = (countTextIn, ignoreSpaces, groupCharCount) => ([
+  id,
+  blockData,
+]) => {
+  const foundText =
+    blockData && countTextIn?.includes(blockData?.['@type'])
+      ? isString(blockData?.plaintext)
+        ? blockData?.plaintext
+        : isArray(blockData?.value) && blockData?.value !== null
+        ? serializeNodesToText(blockData?.value)
+        : ''
+      : '';
 
-  const countTextInBlocks = (blocksObject) => {
-    const { countTextIn } = config.blocks?.blocksConfig?.group;
-    let groupCharCount = 0;
-    if (!maxChars) {
-      return groupCharCount;
-    }
-    if (!blocksObject) return groupCharCount;
+  groupCharCount.value += ignoreSpaces
+    ? countCharsWithoutSpaces(foundText)
+    : countCharsWithSpaces(foundText);
+};
 
-    visitBlocks(blocksObject, ([id, data]) => {
-      let foundText;
-      if (data && countTextIn?.includes(data?.['@type'])) {
-        if (isString(data?.plaintext)) foundText = data?.plaintext;
-        else if (isArray(data?.value) && data?.value !== null)
-          foundText = serializeNodesToText(data?.value);
-      } else foundText = '';
+const countTextInBlocks = (blocksObject, ignoreSpaces, maxChars) => {
+  const { countTextIn } = config.blocks?.blocksConfig?.group;
+  // use obj ref to update value - if you send number it will not be updated
+  const groupCharCount = { value: 0 };
 
-      groupCharCount += data?.ignoreSpaces
-        ? countCharsWithoutSpaces(foundText)
-        : countCharsWithSpaces(foundText);
-    });
+  if (!maxChars || !blocksObject) {
+    return groupCharCount.value;
+  }
 
-    return groupCharCount;
-  };
+  visitBlocks(
+    blocksObject,
+    countTextInEachBlock(countTextIn, ignoreSpaces, groupCharCount),
+  );
 
-  charCount = countTextInBlocks(data?.data);
+  return groupCharCount.value;
+};
 
+const CounterComponent = ({ data, setSidebarTab, setSelectedBlock }) => {
+  const { maxChars, ignoreSpaces } = data;
+  const charCount = countTextInBlocks(data?.data, ignoreSpaces, maxChars);
   const counterClass =
     charCount < Math.ceil(maxChars / 1.05)
       ? 'info'

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

@@ -0,0 +1,234 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CounterComponent from './CounterComponent';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('@plone/volto/registry', () => ({
+  blocks: {
+    blocksConfig: {
+      group: {
+        countTextIn: ['text'],
+      },
+    },
+  },
+}));
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  serializeNodesToText: jest.fn((nodes) =>
+    nodes.map((node) => node.text).join(' '),
+  ),
+}));
+
+describe('CounterComponent', () => {
+  const setSidebarTab = jest.fn();
+  const setSelectedBlock = jest.fn();
+
+  it('should render info class when character count is less than 95% of maxChars', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'test' },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('96 characters remaining out of 100')).toBeInTheDocument();
+    expect(container.querySelector('.counter.info')).toBeInTheDocument();
+  });
+
+  it('should render warning class when character count is between 95% and 100% of maxChars', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'test'.repeat(24) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('4 characters remaining out of 100')).toBeInTheDocument();
+    expect(container.querySelector('.counter.warning')).toBeInTheDocument();
+  });
+
+  it('should render warning class when character count is over the maxChars', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'test'.repeat(26) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('4 characters over the limit')).toBeInTheDocument();
+    expect(container.querySelector('.counter.danger')).toBeInTheDocument();
+  });
+
+  it('should handle click event', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: {
+                '@type': 'text',
+                plaintext: 'test'.repeat(24),
+                ignoreSpaces: true,
+              },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+
+  it('should handle click event with maxChar undefined', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: undefined,
+          data: undefined,
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+
+  it('should handle click event with data undefined', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: undefined,
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+
+  it('should handle click event with plaintext undefined, but values present', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: {
+                '@type': 'text',
+                plaintext: undefined,
+                value: [
+                  { text: 'test' },
+                  { children: [{ text: 'more text' }] },
+                ],
+              },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+
+  it('should handle click event with plaintext undefined and values is not an array and the type is in countTextIn', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: {
+                '@type': 'text',
+                plaintext: undefined,
+                value: {},
+              },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+
+  it('should handle click event with plaintext undefined and values is not an array and the type is not in countTextIn', () => {
+    const { container } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: {
+                '@type': 'test',
+                plaintext: undefined,
+                value: {},
+              },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    container.querySelector('.counter').click();
+    expect(setSidebarTab).toHaveBeenCalledWith(1);
+    expect(setSelectedBlock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,105 @@
+import { Button } from 'semantic-ui-react';
+import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components';
+import EditBlockWrapper from './EditBlockWrapper';
+
+import helpSVG from '@plone/volto/icons/help.svg';
+
+const GroupBlockDefaultBody = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    onChangeField,
+    pathname,
+    selected,
+    selectedBlock,
+    onSelectBlock,
+    setSelectedBlock,
+    manage,
+    childBlocksForm,
+    multiSelected,
+    formDescription,
+    isEditMode,
+  } = props;
+  const metadata = props.metadata || props.properties;
+  const blockState = {};
+
+  // Get editing instructions from block settings or props
+  let instructions = data?.instructions?.data || data?.instructions;
+  if (!instructions || instructions === '<p><br/></p>') {
+    instructions = formDescription;
+  }
+  return isEditMode ? (
+    <BlocksForm
+      metadata={metadata}
+      properties={childBlocksForm}
+      manage={manage}
+      selectedBlock={selected ? selectedBlock : null}
+      allowedBlocks={data.allowedBlocks}
+      title={data.placeholder}
+      description={instructions}
+      onSelectBlock={(id, l, e) => {
+        const isMultipleSelection = e
+          ? e.shiftKey || e.ctrlKey || e.metaKey
+          : false;
+        onSelectBlock(id, isMultipleSelection, e, selectedBlock);
+      }}
+      onChangeFormData={(newFormData) => {
+        onChangeBlock(block, {
+          ...data,
+          data: newFormData,
+        });
+      }}
+      onChangeField={(id, value) => {
+        if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+          blockState[id] = value;
+          onChangeBlock(block, {
+            ...data,
+            data: {
+              ...data.data,
+              ...blockState,
+            },
+          });
+        } else {
+          onChangeField(id, value);
+        }
+      }}
+      pathname={pathname}
+    >
+      {({ draginfo }, editBlock, blockProps) => (
+        <EditBlockWrapper
+          draginfo={draginfo}
+          blockProps={blockProps}
+          disabled={data.disableInnerButtons}
+          extraControls={
+            <>
+              {instructions && (
+                <>
+                  <Button
+                    icon
+                    basic
+                    title="Section help"
+                    onClick={() => {
+                      setSelectedBlock();
+                      const tab = manage ? 0 : 1;
+                      props.setSidebarTab(tab);
+                    }}
+                  >
+                    <Icon name={helpSVG} className="" size="19px" />
+                  </Button>
+                </>
+              )}
+            </>
+          }
+          multiSelected={multiSelected.includes(blockProps.block)}
+        >
+          {editBlock}
+        </EditBlockWrapper>
+      )}
+    </BlocksForm>
+  ) : (
+    <RenderBlocks {...props} metadata={metadata} content={data?.data || {}} />
+  );
+};
+
+export default GroupBlockDefaultBody;

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

@@ -1,46 +1,35 @@
 import React, { useState, useCallback } from 'react';
 import { isEmpty, without } from 'lodash';
+import {
+  emptyBlocksForm,
+  withBlockExtensions,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
+import BodyComponent from './Body';
+
 import config from '@plone/volto/registry';
 import {
-  BlocksForm,
   SidebarPortal,
-  Icon,
   BlockDataForm,
   BlocksToolbar,
 } from '@plone/volto/components';
-import {
-  emptyBlocksForm,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
-import { Button, Segment } from 'semantic-ui-react';
-import EditBlockWrapper from './EditBlockWrapper';
+import { Segment } from 'semantic-ui-react';
 import EditSchema from './EditSchema';
+
 import CounterComponent from './CounterComponent';
-import helpSVG from '@plone/volto/icons/help.svg';
 import './editor.less';
 
 const Edit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    onChangeField,
-    pathname,
-    selected,
-    manage,
-    formDescription,
-  } = props;
-  const metadata = props.metadata || props.properties;
+  const { block, data, onChangeBlock, selected, formDescription } = props;
   const [multiSelected, setMultiSelected] = useState([]);
   const data_blocks = data?.data?.blocks;
-  const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
+  const childBlocksForm = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
 
   const [selectedBlock, setSelectedBlock] = useState(
-    properties.blocks_layout.items[0],
+    childBlocksForm.blocks_layout.items[0],
   );
 
-  const blockState = {};
   const handleKeyDown = (
     e,
     index,
@@ -131,15 +120,15 @@ const Edit = (props) => {
   React.useEffect(() => {
     if (
       isEmpty(data_blocks) &&
-      properties.blocks_layout.items[0] !== selectedBlock
+      childBlocksForm.blocks_layout.items[0] !== selectedBlock
     ) {
-      setSelectedBlock(properties.blocks_layout.items[0]);
+      setSelectedBlock(childBlocksForm.blocks_layout.items[0]);
       onChangeBlock(block, {
         ...data,
-        data: properties,
+        data: childBlocksForm,
       });
     }
-  }, [onChangeBlock, properties, selectedBlock, block, data, data_blocks]);
+  }, [onChangeBlock, childBlocksForm, selectedBlock, block, data, data_blocks]);
 
   // Get editing instructions from block settings or props
   let instructions = data?.instructions?.data || data?.instructions;
@@ -167,6 +156,16 @@ const Edit = (props) => {
       >
         {data.title || 'Section'}
       </legend>
+      <BodyComponent
+        {...props}
+        isEditMode={true}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        multiSelected={multiSelected}
+        setMultiSelected={setMultiSelected}
+        onSelectBlock={onSelectBlock}
+        childBlocksForm={childBlocksForm}
+      />
       {selected ? (
         <BlocksToolbar
           selectedBlock={Object.keys(selectedBlock || {})[0]}
@@ -189,74 +188,6 @@ const Edit = (props) => {
       ) : (
         ''
       )}
-      <BlocksForm
-        metadata={metadata}
-        properties={properties}
-        manage={manage}
-        selectedBlock={selected ? selectedBlock : null}
-        allowedBlocks={data.allowedBlocks}
-        title={data.placeholder}
-        description={instructions}
-        onSelectBlock={(id, l, e) => {
-          const isMultipleSelection = e
-            ? e.shiftKey || e.ctrlKey || e.metaKey
-            : false;
-          onSelectBlock(id, isMultipleSelection, e, selectedBlock);
-        }}
-        onChangeFormData={(newFormData) => {
-          onChangeBlock(block, {
-            ...data,
-            data: newFormData,
-          });
-        }}
-        onChangeField={(id, value) => {
-          if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-            blockState[id] = value;
-            onChangeBlock(block, {
-              ...data,
-              data: {
-                ...data.data,
-                ...blockState,
-              },
-            });
-          } else {
-            onChangeField(id, value);
-          }
-        }}
-        pathname={pathname}
-      >
-        {({ draginfo }, editBlock, blockProps) => (
-          <EditBlockWrapper
-            draginfo={draginfo}
-            blockProps={blockProps}
-            disabled={data.disableInnerButtons}
-            extraControls={
-              <>
-                {instructions && (
-                  <>
-                    <Button
-                      icon
-                      basic
-                      title="Section help"
-                      onClick={() => {
-                        setSelectedBlock();
-                        const tab = manage ? 0 : 1;
-                        props.setSidebarTab(tab);
-                      }}
-                    >
-                      <Icon name={helpSVG} className="" size="19px" />
-                    </Button>
-                  </>
-                )}
-              </>
-            }
-            multiSelected={multiSelected.includes(blockProps.block)}
-          >
-            {editBlock}
-          </EditBlockWrapper>
-        )}
-      </BlocksForm>
-
       {props.data.maxChars && (
         <CounterComponent {...props} setSelectedBlock={setSelectedBlock} />
       )}
@@ -293,4 +224,4 @@ Edit.propTypes = {
   manage: PropTypes.bool.isRequired,
 };
 
-export default Edit;
+export default withBlockExtensions(Edit);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Edit from './Edit';
+import { default as Edit } from './Edit';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
@@ -15,6 +15,21 @@ const store = mockStore({
   },
 });
 
+jest.mock('@plone/volto/components', () => ({
+  BlocksForm: jest.fn(() => <div className="blocks-form">RenderBlocks</div>),
+  Icon: () => <div>Icon</div>,
+  SidebarPortal: () => <div>SidebarPortal</div>,
+  BlocksToolbar: () => <div>BlocksToolbar</div>,
+  BlockDataForm: () => <div>BlockDataForm</div>,
+  RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: jest.fn(),
+}));
+
 describe('Edit', () => {
   const onChangeBlock = jest.fn();
   const onChangeField = jest.fn();
@@ -41,6 +56,7 @@ describe('Edit', () => {
     pathname: '/',
     selected: true,
     manage: true,
+    variation: {},
   };
 
   it('should render without crashing', () => {
@@ -76,4 +92,113 @@ describe('Edit', () => {
     );
     fireEvent.keyDown(getByRole('presentation'), { key: 'ArrowUp', code: 38 });
   });
+
+  it('should call ArrowUp keydown', () => {
+    const props = {
+      block: 'testBlock',
+      data: {
+        instructions: 'test',
+        data: {
+          blocks: {
+            block1: {
+              type: 'test',
+              data: {
+                value: 'Test',
+              },
+            },
+          },
+          blocks_layout: {
+            items: [undefined],
+          },
+        },
+      },
+      onChangeBlock,
+      onChangeField,
+      pathname: '/',
+      selected: true,
+      manage: true,
+      variation: {},
+    };
+    const mockOnFocusPreviousBlock = jest.fn();
+    const mockOnFocusNextBlock = jest.fn();
+    const mockOnAddBlock = jest.fn();
+    const mockSidebarTab = jest.fn();
+
+    const { container } = render(
+      <Provider store={store}>
+        <Edit
+          {...props}
+          onFocusPreviousBlock={mockOnFocusPreviousBlock}
+          onFocusNextBlock={mockOnFocusNextBlock}
+          onAddBlock={mockOnAddBlock}
+          blockNode={mockBlockNode}
+          setSidebarTab={mockSidebarTab}
+        />
+      </Provider>,
+    );
+
+    fireEvent.keyDown(container.querySelector('.section-block'), {
+      key: 'ArrowUp',
+      code: 38,
+    });
+    fireEvent.keyDown(container.querySelector('.section-block'), {
+      key: 'ArrowDown',
+      code: 40,
+    });
+    fireEvent.keyDown(container.querySelector('.section-block'), {
+      key: 'Enter',
+      code: 13,
+    });
+
+    fireEvent.click(container.querySelector('.blocks-form'), {
+      shiftKey: true,
+    });
+    fireEvent.click(container.querySelector('.section-block legend'));
+  });
+
+  it('should call ArrowUp keydown', () => {
+    const props = {
+      block: 'testBlock',
+      data: {
+        instructions: 'test',
+        data: {
+          blocks: {
+            block1: {
+              type: 'test',
+              data: {
+                value: 'Test',
+              },
+            },
+          },
+          blocks_layout: {
+            items: [undefined],
+          },
+        },
+      },
+      onChangeBlock,
+      onChangeField,
+      pathname: '/',
+      selected: true,
+      manage: true,
+      variation: {},
+    };
+    const mockOnFocusPreviousBlock = jest.fn();
+    const mockOnFocusNextBlock = jest.fn();
+    const mockOnAddBlock = jest.fn();
+    const mockSidebarTab = jest.fn();
+    const { container } = render(
+      <Provider store={store}>
+        <Edit
+          {...props}
+          onFocusPreviousBlock={mockOnFocusPreviousBlock}
+          onFocusNextBlock={mockOnFocusNextBlock}
+          onAddBlock={mockOnAddBlock}
+          setSidebarTab={mockSidebarTab}
+          blockNode={mockBlockNode}
+        />
+      </Provider>,
+    );
+
+    fireEvent.click(container.querySelector('.section-block legend'));
+  });
 });

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import BodyComponent from './Body';
 
 const View = (props) => {
   const { data } = props;
-  const metadata = props.metadata || props.properties;
   const CustomTag = `${data.as || 'div'}`;
   const customId = data?.title
     ?.toLowerCase()
@@ -12,9 +12,9 @@ const View = (props) => {
     ?.replace(/\s+/gi, '-');
   return (
     <CustomTag id={customId}>
-      <RenderBlocks {...props} metadata={metadata} content={data?.data || {}} />
+      <BodyComponent {...props} />
     </CustomTag>
   );
 };
 
-export default View;
+export default withBlockExtensions(View);

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

@@ -7,6 +7,11 @@ import '@testing-library/jest-dom/extend-expect';
 
 jest.mock('@plone/volto/components', () => ({
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
+  BodyComponent: () => <div>BodyComponent</div>,
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
 }));
 
 describe('View', () => {
@@ -15,6 +20,7 @@ describe('View', () => {
       data: {},
       metadata: {},
       properties: {},
+      variation: {},
     };
     const component = renderer.create(<View {...props} />);
 
@@ -24,9 +30,12 @@ describe('View', () => {
 
   it('renders with default tag and without crashing', () => {
     const props = {
-      data: {},
+      data: {
+        variation: {},
+      },
       metadata: {},
       properties: {},
+      variation: {},
     };
     const { container } = render(<View {...props} />);
     expect(container.querySelector('div')).toBeInTheDocument();
@@ -40,6 +49,7 @@ describe('View', () => {
         data: { key: 'value' },
       },
       properties: {},
+      variation: {},
     };
     const { container } = render(<View {...props} />);
     expect(container.querySelector('section')).toBeInTheDocument();
@@ -55,6 +65,7 @@ describe('View', () => {
       },
       metadata: { meta: 'data' },
       properties: { prop: 'erty' },
+      variation: {},
     };
     render(<View {...props} />);
     expect(RenderBlocks).toHaveBeenCalledWith(

package/src/index.js

@@ -1,6 +1,10 @@
 import { getBlocks } from '@plone/volto/helpers';
-import { GroupBlockEdit, GroupBlockView, GroupBlockLayout } from './components';
-
+import {
+  GroupBlockEdit,
+  GroupBlockView,
+  GroupBlockLayout,
+  GroupBlockDefaultBody,
+} from './components';
 import codeSVG from '@plone/volto/icons/row.svg';
 
 const applyConfig = (config) => {
@@ -45,6 +49,14 @@ const applyConfig = (config) => {
       addPermission: [],
       view: [],
     },
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        template: GroupBlockDefaultBody,
+      },
+    ],
     tocEntries: (block = {}, tocData) => {
       // integration with volto-block-toc
       const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

package/src/index.test.js

@@ -0,0 +1,101 @@
+import applyConfig from './index';
+
+describe('applyConfig', () => {
+  it('should add group block configuration', () => {
+    const config = {
+      blocks: {
+        blocksConfig: {
+          text: { title: 'Text', restricted: false },
+          image: { title: 'Image', restricted: true },
+        },
+      },
+    };
+
+    const newConfig = applyConfig(config);
+
+    expect(newConfig.blocks.blocksConfig.group).toBeDefined();
+    expect(newConfig.blocks.blocksConfig.group.id).toEqual('group');
+    expect(newConfig.blocks.blocksConfig.group.title).toEqual(
+      'Section (Group)',
+    );
+    expect(newConfig.blocks.blocksConfig.group.icon).toBeDefined();
+    expect(newConfig.blocks.blocksConfig.group.view).toBeDefined();
+    expect(newConfig.blocks.blocksConfig.group.edit).toBeDefined();
+    expect(newConfig.blocks.blocksConfig.group.schema).toBeDefined();
+    expect(newConfig.blocks.blocksConfig.group.restricted).toEqual(false);
+  });
+
+  it('should include allowed blocks in schema', () => {
+    const config = {
+      blocks: {
+        blocksConfig: {
+          text: { title: 'Text', restricted: false },
+          image: { restricted: false },
+          image_test: { title: 'Image', restricted: true },
+        },
+      },
+    };
+
+    const newConfig = applyConfig(config);
+
+    expect(
+      newConfig.blocks.blocksConfig.group.schema.properties.allowedBlocks.items
+        .choices,
+    ).toEqual([
+      ['text', 'Text'],
+      ['image', 'image'],
+      ['group', 'Group'],
+    ]);
+  });
+
+  it('should generate tocEntries correctly', () => {
+    const config = {
+      blocks: {
+        blocksConfig: {},
+      },
+    };
+
+    const block = {
+      data: {
+        blocks: {
+          block1: { value: [{ type: 'h1' }], plaintext: 'Heading 1' },
+          block2: { value: [{ type: 'h2' }], plaintext: 'Heading 2' },
+          block3: { value: [{ type: 'h3' }], plaintext: 'Heading 3' }, // This should be ignored
+        },
+        blocks_layout: {
+          items: ['block1', 'block2', 'block3'],
+        },
+      },
+    };
+    const tocData = {
+      levels: ['h1', 'h2'],
+    };
+    const newConfig = applyConfig(config);
+    const entries = newConfig.blocks.blocksConfig.group.tocEntries(
+      block,
+      tocData,
+    );
+    expect(entries).toEqual([
+      [1, 'Heading 1', 'block1'],
+      [2, 'Heading 2', 'block2'],
+    ]);
+  });
+
+  it('should generate no entries', () => {
+    const config = {
+      blocks: {
+        blocksConfig: {},
+      },
+    };
+    const block = undefined;
+    const tocData = {
+      levels: undefined,
+    };
+    const newConfig = applyConfig(config);
+    const entries = newConfig.blocks.blocksConfig.group.tocEntries(
+      block,
+      tocData,
+    );
+    expect(entries).toEqual([]);
+  });
+});

package/.i18n.babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@plone/volto/babel');