@eeacms/volto-n2k 1.0.16 → 1.0.18

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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).
 
+### [1.0.18](https://github.com/eea/volto-n2k/compare/1.0.17...1.0.18) - 25 February 2023
+
+#### :rocket: New Features
+
+- feat: conditional rendering for section group [Miu Razvan - [`6afd9a5`](https://github.com/eea/volto-n2k/commit/6afd9a536a520c51ad457127aa02f07fd135010e)]
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`ab24f16`](https://github.com/eea/volto-n2k/commit/ab24f1624eb541d3ab492aa934c923f6cbdd245c)]
+- uopdate label on habitats page [Claudia Ifrim - [`aa708e2`](https://github.com/eea/volto-n2k/commit/aa708e24b8f456407192cf1b889d893fd7b92f0e)]
+### [1.0.17](https://github.com/eea/volto-n2k/compare/1.0.16...1.0.17) - 24 February 2023
+
+#### :hammer_and_wrench: Others
+
+- eslint fix [Miu Razvan - [`417aa35`](https://github.com/eea/volto-n2k/commit/417aa3588b32920a3e378fad8dd72de6d0f02ca3)]
+- species distribution map for birds group [Miu Razvan - [`7712d28`](https://github.com/eea/volto-n2k/commit/7712d28c0c5a79ffd33d4fc8d1d8e73af55937a2)]
 ### [1.0.16](https://github.com/eea/volto-n2k/compare/1.0.15...1.0.16) - 22 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -9,6 +9,7 @@ import { getCddaShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    if (__SERVER__ || !vectorSource || !site_code[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get site shape
     fetch(getCddaShapeURL(site_code[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [site_code?.[0]]);
+  }, [vectorSource, site_code?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

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

@@ -9,6 +9,7 @@ import { getHabitatDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get habitat location on sites
     fetch(getHabitatDistributionURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

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

@@ -9,6 +9,7 @@ import { getHabitatProtectedSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get habitat protected sites
     fetch(getHabitatProtectedSitesURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

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

@@ -7,9 +7,9 @@ const View = (props) => {
   const {
     code_2000 = [],
     // habitat_description = [],
-    habitat_type = [],
+    // habitat_type = [],
     // number_countries = [],
-    number_sites = [],
+    // number_sites = [],
     scientific_name = [],
   } = provider_data;
 
@@ -21,17 +21,17 @@ const View = (props) => {
           <div className="habitat-metadata">
             <h2 className="name">{scientific_name[0]}</h2>
             <p className="info">
-              {habitat_type[0]} habitat code {code_2000[0]}
+              Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
             </p>
             <br />
-            {number_sites[0] && (
+            {/* {number_sites[0] && (
               <>
                 <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
                 <h4 className="radjhan-normal">
                   NATURA 2000 SITES PROTECTING THIS HABITAT
                 </h4>
               </>
-            )}
+            )} */}
           </div>
         </div>
       </Container>

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -12,6 +12,7 @@ div#view .habitat-banner-details .ui.container > * {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    gap: 1rem;
 
     @media only screen and (max-width: 765px) {
       flex-flow: column;
@@ -27,9 +28,15 @@ div#view .habitat-banner-details .ui.container > * {
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 54px;
         line-height: 54px;
         text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
       }
 
       h3 {
@@ -52,7 +59,8 @@ div#view .habitat-banner-details .ui.container > * {
         text-transform: uppercase;
       }
 
-      .info {
+      .info,
+      .info > * {
         font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;
         font-weight: 600;

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -15,7 +15,10 @@ const DefaultView = (props) => {
   const currentLang = props.localStorage.get('N2K_LANGUAGE');
 
   useEffect(() => {
-    if (removeTrailingSlash(props.location.pathname) === '/natura2000') {
+    if (
+      props.location?.pathname &&
+      removeTrailingSlash(props.location.pathname) === '/natura2000'
+    ) {
       props.history.push(`/natura2000/${currentLang || 'en'}`);
     }
     /* eslint-disable-next-line */

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

@@ -9,6 +9,7 @@ import { getSiteShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,14 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    if (__SERVER__ || !vectorSource || !site_code[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get site shape
     fetch(getSiteShapeURL(site_code[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +58,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [site_code?.[0]]);
+  }, [vectorSource, site_code?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

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

@@ -19,7 +19,7 @@ const View = (props) => {
     code_2000 = [],
     id_eunis = [],
     license = [],
-    number_sites = [],
+    // number_sites = [],
     picture_url = [],
     scientific_name = [],
     source = [],
@@ -51,26 +51,30 @@ const View = (props) => {
           <div className="species-metadata">
             <h2 className="name">
               {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
-              <span style={{ fontStyle: 'italic' }}>{scientific_name[0]}</span>
+              <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                {scientific_name[0]}
+              </span>
             </h2>
             {author[0] && (
               <p
                 className="info radjhan-bold"
-                style={{ marginBottom: '0.15rem' }}
+                style={{ marginBottom: '0.5rem' }}
               >
                 {author[0]}
               </p>
             )}
             {code_2000[0] && (
-              <p className="info">Natura 2000 species code {code_2000[0]}</p>
+              <p className="info">
+                Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+              </p>
             )}
-            <br />
+            {/* <br />
             {number_sites[0] && (
-              <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
+              <h3 style={{ marginBottom: '0.5rem' }}>{number_sites[0]}</h3>
             )}
             <h4 className="radjhan-normal">
               NATURA 2000 SITES PROTECTING THIS SPECIES
-            </h4>
+            </h4> */}
           </div>
           <div
             className={cx('species-pictures', {

package/src/components/manage/Blocks/SpeciesBanner/style.less

@@ -14,6 +14,7 @@ div#view .species-banner-details .ui.container > * {
     flex-flow: row;
     align-items: center;
     justify-content: space-between;
+    gap: 2rem;
 
     @media only screen and (max-width: 800px) {
       flex-flow: column;
@@ -25,9 +26,14 @@ div#view .species-banner-details .ui.container > * {
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 54px;
         line-height: 54px;
         text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
       }
 
       h3 {
@@ -114,7 +120,8 @@ div#view .species-banner-details .ui.container > * {
 
       &:not(.with-slider) {
         display: flex;
-        align-items: center;
+        flex-flow: column;
+        justify-content: center;
 
         .picture-wrapper {
           height: fit-content;

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

@@ -9,12 +9,13 @@ import { getSpeciesDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
-  const { code_2000 = [] } = provider_data;
+  const { code_2000 = [], species_group_name = [] } = provider_data;
 
   useEffect(() => {
     if (__SERVER__) return;
@@ -34,12 +35,19 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
     const esrijsonFormat = new format.EsriJSON();
     // Get species location on sites
-    fetch(getSpeciesDistributionURL(code_2000[0])).then(function (response) {
+    fetch(
+      getSpeciesDistributionURL(
+        code_2000[0],
+        species_group_name[0] === 'Birds',
+      ),
+    ).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +63,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/manage/Blocks/SpeciesDistribution/index.js

@@ -1,7 +1,13 @@
 import SpeciesDistributionView from './View';
 import getSchema from './schema';
 
-export function getSpeciesDistributionURL(code_2000) {
+export function getSpeciesDistributionURL(code_2000, isBird) {
+  if (isBird) {
+    return encodeURI(
+      `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article_12/BirdsDirective_ART_12_version_2020_08_public_VM/MapServer/3/query?f=json&where=speciescode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=speciescode&outSR=102100`,
+    );
+  }
+
   return encodeURI(
     `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/3/query?f=json&where=speciescode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=speciescode&outSR=102100`,
   );

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

@@ -9,6 +9,7 @@ import { getSpeciesProtectedSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -34,12 +35,15 @@ const View = (props) => {
   }, []);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+      return;
+
     const esrijsonFormat = new format.EsriJSON();
     // Get species protected sites
     fetch(getSpeciesProtectedSitesURL(code_2000[0])).then(function (response) {
       if (response.status !== 200) return;
       response.json().then(function (data) {
+        dataFetched.current = true;
         if (data.features && data.features.length > 0) {
           const features = esrijsonFormat.readFeatures(data);
           if (features.length > 0) {
@@ -55,7 +59,7 @@ const View = (props) => {
       });
     });
     /* eslint-disable-next-line */
-  }, [code_2000?.[0]]);
+  }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
   return (

package/src/components/theme/Navigation/Navigation.jsx

@@ -417,8 +417,7 @@ class Navigation extends Component {
                       )}
                     </Dropdown>
                   ) : (
-                    <Link
-                      to={flatUrl === '' ? '/' : flatUrl}
+                    <div
                       key={flatUrl}
                       className={
                         this.isActive(flatUrl)
@@ -426,8 +425,10 @@ class Navigation extends Component {
                           : 'item firstLevel'
                       }
                     >
-                      {item.title}
-                    </Link>
+                      <Link to={flatUrl === '' ? '/' : flatUrl}>
+                        {item.title}
+                      </Link>
+                    </div>
                   );
                 })}
             </>

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/Edit.jsx

@@ -0,0 +1,266 @@
+import React, { useState } from 'react';
+import { isEmpty } from 'lodash';
+import {
+  BlocksForm,
+  SidebarPortal,
+  Icon,
+  BlockDataForm,
+} from '@plone/volto/components';
+import { emptyBlocksForm } from '@plone/volto/helpers';
+import delightedSVG from '@plone/volto/icons/delighted.svg';
+import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
+import PropTypes from 'prop-types';
+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) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    onChangeField,
+    pathname,
+    selected,
+    manage,
+    formDescription,
+  } = props;
+
+  const metadata = props.metadata || props.properties;
+  const data_blocks = data?.data?.blocks;
+  const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
+
+  const [selectedBlock, setSelectedBlock] = useState(
+    properties.blocks_layout.items[0],
+  );
+
+  React.useEffect(() => {
+    if (
+      isEmpty(data_blocks) &&
+      properties.blocks_layout.items[0] !== selectedBlock
+    ) {
+      setSelectedBlock(properties.blocks_layout.items[0]);
+      onChangeBlock(block, {
+        ...data,
+        data: properties,
+      });
+    }
+  }, [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;
+    if (!props.data.maxChars) {
+      return groupCharCount;
+    }
+
+    Object.keys(blocksObject).forEach((blockId) => {
+      const foundText = blocksObject[blockId]?.plaintext
+        ? blocksObject[blockId]?.plaintext
+        : blocksObject[blockId]?.text?.blocks[0]?.text
+        ? blocksObject[blockId].text.blocks[0].text
+        : blocksObject[blockId]?.data?.blocks
+        ? countTextInBlocks(blocksObject[blockId]?.data?.blocks)
+        : blocksObject[blockId]?.blocks
+        ? countTextInBlocks(blocksObject[blockId]?.blocks)
+        : '';
+      const resultText =
+        typeof foundText === 'string' || foundText instanceof String
+          ? foundText
+          : '';
+
+      groupCharCount += props.data.ignoreSpaces
+        ? countCharsWithoutSpaces(resultText)
+        : countCharsWithSpaces(resultText);
+    });
+
+    return groupCharCount;
+  };
+
+  const showCharCounter = () => {
+    if (data_blocks) {
+      charCount = countTextInBlocks(data_blocks);
+    }
+  };
+  showCharCounter();
+
+  const counterClass =
+    charCount < Math.ceil(props.data.maxChars / 1.05)
+      ? 'info'
+      : charCount < props.data.maxChars
+      ? 'warning'
+      : 'danger';
+
+  const counterComponent = props.data.maxChars ? (
+    <p
+      className={cx('counter', counterClass)}
+      onClick={() => {
+        setSelectedBlock();
+        props.setSidebarTab(1);
+      }}
+      aria-hidden="true"
+    >
+      {props.data.maxChars - charCount < 0 ? (
+        <>
+          <span>{`${
+            charCount - props.data.maxChars
+          } characters over the limit`}</span>
+          <Icon name={dissatisfiedSVG} size="24px" />
+        </>
+      ) : (
+        <>
+          <span>{`${
+            props.data.maxChars - charCount
+          } characters remaining out of ${props.data.maxChars}`}</span>
+          <Icon name={delightedSVG} size="24px" />
+        </>
+      )}
+    </p>
+  ) : null;
+
+  // Get editing instructions from block settings or props
+  let instructions = data?.instructions?.data || data?.instructions;
+  if (!instructions || instructions === '<p><br/></p>') {
+    instructions = formDescription;
+  }
+
+  return (
+    <fieldset className="section-block">
+      <legend
+        onClick={() => {
+          setSelectedBlock();
+          props.setSidebarTab(1);
+        }}
+        aria-hidden="true"
+      >
+        {data.title || 'Section'}
+      </legend>
+      <BlocksForm
+        metadata={metadata}
+        properties={properties}
+        manage={manage}
+        selectedBlock={selected ? selectedBlock : null}
+        allowedBlocks={data.allowedBlocks}
+        title={data.placeholder}
+        description={instructions}
+        onSelectBlock={(id) => {
+          setSelectedBlock(id);
+        }}
+        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>
+                  </>
+                )}
+              </>
+            }
+          >
+            {editBlock}
+          </EditBlockWrapper>
+        )}
+      </BlocksForm>
+
+      {counterComponent}
+      <SidebarPortal selected={selected && !selectedBlock}>
+        {instructions && (
+          <Segment attached>
+            <div dangerouslySetInnerHTML={{ __html: instructions }} />
+          </Segment>
+        )}
+        {!data?.readOnlySettings && (
+          <BlockDataForm
+            schema={EditSchema}
+            title="Section (Group) settings"
+            formData={data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </fieldset>
+  );
+};
+
+Edit.propTypes = {
+  block: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default Edit;

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/EditBlockWrapper.jsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { Icon, BlockChooser } from '@plone/volto/components';
+import { blockHasValue } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import { Button } from 'semantic-ui-react';
+import includes from 'lodash/includes';
+import isBoolean from 'lodash/isBoolean';
+import { defineMessages, injectIntl } from 'react-intl';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import cx from 'classnames';
+
+import dragSVG from '@plone/volto/icons/drag.svg';
+import addSVG from '@plone/volto/icons/circle-plus.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  delete: {
+    id: 'delete',
+    defaultMessage: 'delete',
+  },
+});
+
+class EditBlockWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addNewBlockOpened: false,
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  handleClickOutside = (e) => {
+    if (
+      this.blockNode.current &&
+      doesNodeContainClick(this.blockNode.current, e)
+    )
+      return;
+
+    if (this.state.addNewBlockOpened) {
+      this.setState({
+        addNewBlockOpened: false,
+      });
+      return true;
+    }
+  };
+
+  blockNode = React.createRef();
+
+  render() {
+    const {
+      intl,
+      blockProps,
+      draginfo,
+      extraControls,
+      disabled,
+      children,
+    } = this.props;
+
+    const {
+      allowedBlocks,
+      block,
+      data,
+      onSelectBlock,
+      onDeleteBlock,
+      onMutateBlock,
+      onInsertBlock,
+      selected,
+    } = blockProps;
+    const type = data['@type'];
+    const { disableNewBlocks } = data;
+    const dragVisible = !data.fixed;
+    const visible = selected;
+
+    const required = isBoolean(data.required)
+      ? 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
+          ref={draginfo?.innerRef}
+          {...(selected ? draginfo?.draggableProps : null)}
+          className={`block-editor-${data['@type']}`}
+        >
+          {(!selected || !visible || disabled) && (
+            <div
+              style={{
+                display: 'none',
+                // keep react-beautiful-dnd happy
+              }}
+              {...draginfo.dragHandleProps}
+            ></div>
+          )}
+          {visible && (
+            <div className="block-toolbar">
+              {instructions ? extraControls : ''}
+
+              {!disabled && (
+                <>
+                  <div
+                    style={{
+                      display: dragVisible ? 'inline-block' : 'none',
+                    }}
+                    {...draginfo.dragHandleProps}
+                    className="drag handle wrapper-group-block"
+                  >
+                    <Button icon basic title="Drag and drop">
+                      <Icon name={dragSVG} size="19px" />
+                    </Button>
+                  </div>
+
+                  {!disableNewBlocks && !blockHasValue(data) && (
+                    <Button
+                      icon
+                      basic
+                      title="Add block"
+                      onClick={() => {
+                        this.setState({
+                          addNewBlockOpened: !this.state.addNewBlockOpened,
+                        });
+                      }}
+                      className="group-block-add-button"
+                    >
+                      <Icon name={addSVG} className="" size="19px" />
+                    </Button>
+                  )}
+                  {!required && (
+                    <Button
+                      icon
+                      basic
+                      title="Remove block"
+                      onClick={() => onDeleteBlock(block)}
+                      className="delete-button-group-block"
+                      aria-label={intl.formatMessage(messages.delete)}
+                    >
+                      <Icon name={trashSVG} size="19px" />
+                    </Button>
+                  )}
+                  {this.state.addNewBlockOpened && (
+                    <BlockChooser
+                      onMutateBlock={(id, value) => {
+                        onMutateBlock(id, value);
+                        this.setState({ addNewBlockOpened: false });
+                      }}
+                      onInsertBlock={(id, value) => {
+                        onSelectBlock(onInsertBlock(id, value));
+                        this.setState({ addNewBlockOpened: false });
+                      }}
+                      currentBlock={block}
+                      allowedBlocks={allowedBlocks}
+                    />
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          <div
+            className={cx('ui drag block wrapper inner', type, {
+              multiSelected: this.props.multiSelected,
+            })}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(EditBlockWrapper);

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/EditSchema.jsx

@@ -0,0 +1,41 @@
+const Schema = {
+  title: 'Section block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'as', 'condition'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Section friendly name',
+      type: 'string',
+    },
+    as: {
+      title: 'HTML5 element',
+      description: 'Select HTML5 element to be used for this block',
+      type: 'string',
+      factory: 'Choice',
+      default: 'div',
+      choices: [
+        ['div', 'div'],
+        ['section', 'section'],
+        ['article', 'article'],
+        ['aside', 'aside'],
+        ['details', 'details'],
+      ],
+    },
+    condition: {
+      title: 'Condition',
+      choices: [
+        ['bird', 'Is bird'],
+        ['species', 'Is not bird'],
+      ],
+    },
+  },
+  required: [],
+};
+
+export default Schema;

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/LayoutSchema.jsx

@@ -0,0 +1,116 @@
+const Schema = {
+  title: 'Section (Group) settings',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'title',
+        'placeholder',
+        'instructions',
+        'allowedBlocks',
+        'as',
+        'maxChars',
+        'ignoreSpaces',
+        'readOnlySettings',
+        'disableInnerButtons',
+        'required',
+        'fixed',
+        'fixedLayout',
+        'disableNewBlocks',
+        'readOnly',
+      ],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Section friendly name',
+      type: 'string',
+    },
+    allowedBlocks: {
+      title: 'Allowed blocks',
+      description: 'Allow only the following blocks types',
+      type: 'array',
+      items: {
+        choices: [],
+      },
+    },
+    placeholder: {
+      title: 'Helper text',
+      description:
+        'A short hint that describes the expected value within this block',
+      type: 'string',
+    },
+    instructions: {
+      title: 'Instructions',
+      description: 'Detailed expected value within this block',
+      type: 'string',
+      widget: 'richtext',
+    },
+    as: {
+      title: 'HTML5 element',
+      description: 'Select HTML5 element to be used for this block',
+      type: 'string',
+      factory: 'Choice',
+      default: 'div',
+      choices: [
+        ['div', 'div'],
+        ['section', 'section'],
+        ['article', 'article'],
+        ['aside', 'aside'],
+        ['details', 'details'],
+      ],
+    },
+    maxChars: {
+      title: 'Maximum Characters',
+      description: 'The maximum number of characters.',
+      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",
+      type: 'boolean',
+    },
+    fixed: {
+      title: 'Fixed position',
+      description: 'Disable drag & drop on this block',
+      type: 'boolean',
+    },
+    fixedLayout: {
+      title: 'Fixed layout',
+      description:
+        'Fixed layout, New blocks created by Editor within this block will be ignored',
+      type: 'boolean',
+    },
+    disableNewBlocks: {
+      title: 'Disable new blocks',
+      description: 'Disable creation of new blocks after this block',
+      type: 'boolean',
+    },
+    readOnly: {
+      title: 'Read-only',
+      description: 'Disable editing on this block',
+      type: 'boolean',
+    },
+    readOnlySettings: {
+      title: 'Read-only settings',
+      description: 'Disable editing on section block settings',
+      type: 'boolean',
+    },
+    disableInnerButtons: {
+      title: 'Disable inner buttons',
+      description: 'Hide all block related buttons within this block',
+      type: 'boolean',
+    },
+  },
+  required: [],
+};
+
+export default Schema;

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/View.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { RenderBlocks } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+
+const View = (props) => {
+  const { data } = props;
+  const condition = data.condition;
+  const metadata = props.metadata || props.properties;
+  const CustomTag = `${data.as || 'div'}`;
+  const customId = data?.title
+    ?.toLowerCase()
+    ?.replace(/[^a-zA-Z-\s]/gi, '')
+    ?.trim()
+    ?.replace(/\s+/gi, '-');
+
+  const ConditionalRendering =
+    config.blocks.blocksConfig.group.conditions?.[condition] || null;
+
+  if (ConditionalRendering) {
+    return (
+      <ConditionalRendering>
+        <CustomTag id={customId}>
+          <RenderBlocks
+            {...props}
+            metadata={metadata}
+            content={data?.data || {}}
+          />
+        </CustomTag>
+      </ConditionalRendering>
+    );
+  }
+
+  return (
+    <CustomTag id={customId}>
+      <RenderBlocks {...props} metadata={metadata} content={data?.data || {}} />
+    </CustomTag>
+  );
+};
+
+export default View;

package/src/customizations/@eeacms/volto-group-block/components/manage/Blocks/Group/editor.less

@@ -0,0 +1,99 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@borderColor: rgba(120, 192, 215, 0.75);
+
+.block-editor-group {
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 1rem;
+  }
+
+  .block-add-button {
+    display: none !important;
+  }
+
+  .block.group.selected::before,
+  .block.group:hover::before {
+    border-style: dashed;
+  }
+
+  fieldset {
+    border: none;
+
+    legend {
+      position: absolute;
+      z-index: 3;
+      top: -1.3em;
+      left: 0;
+      width: fit-content;
+      padding: 0 1rem;
+      margin-right: auto;
+      margin-left: auto;
+      background-color: @pageBackground;
+      color: @borderColor;
+      cursor: pointer;
+      text-align: center;
+    }
+  }
+
+  .section-block {
+    padding-top: 1rem;
+    padding-bottom: 0.1rem;
+    margin: 0;
+  }
+
+  .counter {
+    display: grid;
+    align-items: center;
+    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 {
+    margin-top: 0.5rem;
+  }
+
+  .blocks-chooser {
+    right: 0;
+    left: auto;
+    margin-top: 3rem;
+  }
+
+  .block-toolbar {
+    position: absolute;
+    z-index: 3;
+    right: -9px;
+    display: flex;
+    border: none;
+    border: 1px solid @borderColor;
+    border-bottom: 1px solid @pageBackground;
+    margin-top: -45px;
+    background-color: @pageBackground;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+
+    .ui.basic.button {
+      padding: 8px 5px;
+    }
+
+    .ui.basic.button:hover {
+      background: transparent !important;
+    }
+  }
+}

package/src/index.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-extend-native */
 import React from 'react';
 import loadable from '@loadable/component';
+import { compose } from 'redux';
+import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 
 import { hashlink, localStorage } from './reducers';
 
@@ -125,6 +127,38 @@ const applyConfig = (config) => {
     ],
   };
 
+  config.blocks.blocksConfig.group = {
+    ...(config.blocks.blocksConfig.group || {}),
+    conditions: {
+      bird: compose(
+        connectToProviderData((props) => ({
+          provider_url: '/data/natura-2000-species',
+        })),
+      )(({ children, provider_data }) => {
+        if (
+          provider_data?.species_group_name?.[0] &&
+          provider_data?.species_group_name?.[0] === 'Birds'
+        ) {
+          return children;
+        }
+        return null;
+      }),
+      species: compose(
+        connectToProviderData((props) => ({
+          provider_url: '/data/natura-2000-species',
+        })),
+      )(({ children, provider_data }) => {
+        if (
+          provider_data?.species_group_name?.[0] &&
+          provider_data?.species_group_name?.[0] !== 'Birds'
+        ) {
+          return children;
+        }
+        return null;
+      }),
+    },
+  };
+
   config.settings.slate.elements[LINK] = LinkElement;
 
   config.settings.loadables = {

package/src/less/styles.less

@@ -331,6 +331,16 @@ body.grey-bg {
   .readmore-button {
     color: #00a390;
   }
+
+  .ui.basic.segment .header {
+    .logo-nav-wrapper {
+      .navigation {
+        > .ui.menu a {
+          font-size: 14px;
+        }
+      }
+    }
+  }
 }
 
 .sdf-nav {