@eeacms/volto-group-block 6.2.1 → 6.3.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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
@@ -30,7 +47,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`ad30e83`](https://github.com/eea/volto-group-block/commit/ad30e832bb869b67dc4e64ed99590b51cb80ab75)]
 
 #### :hammer_and_wrench: Others
 
@@ -47,19 +63,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`37ffae5`](https://github.com/eea/volto-group-block/commit/37ffae512967b36af22cbed208a3ec9e1ddc392b)]
 ## [6.0.0](https://github.com/eea/volto-group-block/compare/5.0.1...6.0.0) - 24 March 2023
 
 #### :hammer_and_wrench: Others
 
 - (feat): Possibility to copy/cut/paste blocks within section group block - refs #157469 [dobri1408 - [`e9fc098`](https://github.com/eea/volto-group-block/commit/e9fc09825ba2ae258feb77864491d97d94c585b4)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`db4b09a`](https://github.com/eea/volto-group-block/commit/db4b09a6c14a8b271dec0c766886ffbcc3fe205e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`b8c2bf4`](https://github.com/eea/volto-group-block/commit/b8c2bf471868bb0394b2dbbf75ccb7917a9ef0bf)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`b343119`](https://github.com/eea/volto-group-block/commit/b3431196931fd568476fa8bf6fbc508e086229ae)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2f42e7c`](https://github.com/eea/volto-group-block/commit/2f42e7c19a1da5a9c6a883cb4f101e8fa224ff94)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`73afcc2`](https://github.com/eea/volto-group-block/commit/73afcc2f417797cedaa78cceefb007001d6c2406)]
-- yarn 3 [Alin Voinea - [`3c00ccc`](https://github.com/eea/volto-group-block/commit/3c00ccc7110bbf12a4d268182313418fb46b1a5d)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`9b9662b`](https://github.com/eea/volto-group-block/commit/9b9662bda1da70ba0c3a7b4b05cebf130ed89e9e)]
 ### [5.0.1](https://github.com/eea/volto-group-block/compare/5.0.0...5.0.1) - 16 November 2022
 
 #### :nail_care: Enhancements
@@ -76,8 +85,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Prepare 5.0.0 release [Miu Razvan - [`88c0ddd`](https://github.com/eea/volto-group-block/commit/88c0ddd569aeda7ee34d1eadea6a087f4e7dc257)]
 - Update dependencies [Alin Voinea - [`c8405af`](https://github.com/eea/volto-group-block/commit/c8405afb830cdf62e7877bf30b619933519e1d71)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`18e26c6`](https://github.com/eea/volto-group-block/commit/18e26c6939706d572ab8574e9b1826b9abc76314)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`8ed6d21`](https://github.com/eea/volto-group-block/commit/8ed6d21d8489911cc4cb471e3f8823c35f4adc50)]
 ### [4.3.8](https://github.com/eea/volto-group-block/compare/4.3.7...4.3.8) - 26 August 2022
 
 ### [4.3.7](https://github.com/eea/volto-group-block/compare/4.3.6...4.3.7) - 22 August 2022
@@ -90,9 +97,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`4e73f8b`](https://github.com/eea/volto-group-block/commit/4e73f8be3c73559557efadc410cb56abc055d82d)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`3040335`](https://github.com/eea/volto-group-block/commit/3040335002c63b50208c95918413bc958150e7a9)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`386f730`](https://github.com/eea/volto-group-block/commit/386f730ed65f73fe1468b9b77351c97fb70edcc5)]
 ### [4.3.5](https://github.com/eea/volto-group-block/compare/4.3.4...4.3.5) - 4 January 2022
 
 ### [4.3.4](https://github.com/eea/volto-group-block/compare/4.3.3...4.3.4) - 3 January 2022
@@ -101,23 +105,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`3e62d79`](https://github.com/eea/volto-group-block/commit/3e62d79a7ed37d10d623bc845d43e1144f8080f7)]
 ### [4.3.2](https://github.com/eea/volto-group-block/compare/4.3.1...4.3.2) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`bc36cf5`](https://github.com/eea/volto-group-block/commit/bc36cf58c39e2b43c2fbf5189df6ddefc1260857)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`8038e78`](https://github.com/eea/volto-group-block/commit/8038e783c1e8ddd71e21f72070fdfa8e7e098993)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`daccdbc`](https://github.com/eea/volto-group-block/commit/daccdbc733e47be7d6536eb67f8f2eea038dc94b)]
 ### [4.3.1](https://github.com/eea/volto-group-block/compare/4.3.0...4.3.1) - 11 October 2021
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`b0092e4`](https://github.com/eea/volto-group-block/commit/b0092e4f78a1a0184e22e32bb9806cd57417dfb2)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`ff8889c`](https://github.com/eea/volto-group-block/commit/ff8889cb7b0761b1df43b201984ce40b14e1561b)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`0375c28`](https://github.com/eea/volto-group-block/commit/0375c28ed1ffe9186a4790b454795c0ca8039f72)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`c392190`](https://github.com/eea/volto-group-block/commit/c392190f044f5d9397bd2fb8c3d6a357f84960d0)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`9694501`](https://github.com/eea/volto-group-block/commit/9694501141e6780eba89464d36406e3c93629fd8)]
 ### [4.3.0](https://github.com/eea/volto-group-block/compare/4.2.3...4.3.0) - 24 June 2021
 
 #### :hammer_and_wrench: Others
@@ -233,7 +229,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Release 1.0.0 [Alin Voinea - [`b6ef873`](https://github.com/eea/volto-group-block/commit/b6ef873cb6f61e17db66fdd4de1d9d4902a66fc6)]
 - Update package meta info [Alin Voinea - [`143b7d4`](https://github.com/eea/volto-group-block/commit/143b7d44438d7afa5e346a9d21a85352df4e925f)]
 - Add Jenkinkins pipeline [Alin Voinea - [`866a4e1`](https://github.com/eea/volto-group-block/commit/866a4e14ea1eb8f5adb01222e576e5ab6dc73a70)]
-- yarn prettier [Alin Voinea - [`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) - 9 November 2020
 
 #### :hammer_and_wrench: Others
@@ -273,5 +268,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Render meta block [Alin Voinea - [`0d44560`](https://github.com/eea/volto-group-block/commit/0d4456011ca56454068a54c610250b02df4ccb3b)]
 - Implement meta block allowedBlocks settings [Alin Voinea - [`f24feb1`](https://github.com/eea/volto-group-block/commit/f24feb1a1751f04841c21c7cd52a517fb02074ba)]
 - Edit meta block [Alin Voinea - [`236d291`](https://github.com/eea/volto-group-block/commit/236d29156fa835a7aa54eecdb4f120de0d64b271)]
-- yarn bootstrap [Alin Voinea - [`e009dfb`](https://github.com/eea/volto-group-block/commit/e009dfb6b9b74d101a6722f0982a5359fc522b6b)]
 - Initial commit [Alin Voinea - [`6a7b0de`](https://github.com/eea/volto-group-block/commit/6a7b0deb8f873d1462fd6a9c61edfc1562b3aace)]

package/docker-compose.yml

@@ -1,11 +1,12 @@
 version: "3"
 services:
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: eeacms/plone-backend
     ports:
       - "8080:8080"
     environment:
       SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
 
   frontend: 
     build:
@@ -23,6 +24,9 @@ services:
     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

@@ -11,4 +11,12 @@ msgstr ""
 "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

@@ -11,4 +11,12 @@ msgstr ""
 "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

@@ -11,4 +11,12 @@ msgstr ""
 "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

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\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"
@@ -13,4 +13,12 @@ msgstr ""
 "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.1",
+  "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/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', () => {
@@ -101,6 +117,7 @@ describe('Edit', () => {
       pathname: '/',
       selected: true,
       manage: true,
+      variation: {},
     };
     const mockOnFocusPreviousBlock = jest.fn();
     const mockOnFocusNextBlock = jest.fn();
@@ -163,6 +180,7 @@ describe('Edit', () => {
       pathname: '/',
       selected: true,
       manage: true,
+      variation: {},
     };
     const mockOnFocusPreviousBlock = jest.fn();
     const mockOnFocusNextBlock = jest.fn();

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'];