@eeacms/volto-n2k 1.0.23 → 1.0.25

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.25](https://github.com/eea/volto-n2k/compare/1.0.24...1.0.25) - 26 April 2023
+
+#### :rocket: New Features
+
+- feat(Group/EditBlockWrapper.jsx): add support for custom styles in group block editing mode [Miu Razvan - [`97daa39`](https://github.com/eea/volto-n2k/commit/97daa39e8b3bb7a8c04b357706bb79126c2faecf)]
+
+### [1.0.24](https://github.com/eea/volto-n2k/compare/1.0.23...1.0.24) - 26 April 2023
+
+#### :house: Internal changes
+
+- style: fix margin-bottom position in habitat-banner-details and species-banner-details [Miu Razvan - [`4e78d69`](https://github.com/eea/volto-n2k/commit/4e78d6927829f18a91f6b409ee670b01d538dba6)]
+
 ### [1.0.23](https://github.com/eea/volto-n2k/compare/1.0.22...1.0.23) - 12 April 2023
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "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

@@ -107,8 +107,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice shadow-none">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

package/src/components/manage/Blocks/ContactBlock/styles.less

@@ -2,7 +2,7 @@
   margin-left: 1rem;
 
   &.no-data:not(.edit) {
-    margin-top: -1.5rem;
+    margin-top: -1em;
     margin-left: 0;
   }
 

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

@@ -165,8 +165,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -160,8 +160,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -163,8 +163,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -95,8 +95,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -95,8 +95,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -1,16 +1,20 @@
-import React, { useState } from 'react';
-import loadable from '@loadable/component';
+import React, { useRef, useState } from 'react';
 import { compose } from 'redux';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
 import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
-import arrowLeft from './chevron-left-square-fill-svgrepo-com.svg';
-import arrowRight from './chevron-right-square-fill-svgrepo-com.svg';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
 
 const SwiperLoader = loadable.lib(() => import('swiper'));
 const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
 
 const _View = (props) => {
+  const swiperEl = useRef();
+  const previewEl = useRef();
   const [activeSlide, setActiveSlide] = useState(0);
   const { providers = [] } = props.data;
   const habitat = props.providers_data?.[providers[0]?.provider_url] || {};
@@ -27,13 +31,16 @@ const _View = (props) => {
   } = habitat;
 
   const pictures = habitat_pictures?.['WebURL'] || [];
-  const picture_names = habitat_pictures?.['filename'] || [];
-  const copyright = habitat_pictures?.['attribution_copyright'] || [];
+  const pictures_length = pictures?.length;
+  // const picture_names = habitat_pictures?.['filename'] || [];
+  // const copyright = habitat_pictures?.['attribution_copyright'] || [];
 
   if (!code_2000 && props.mode === 'edit') {
     return 'Habitat banner block (code_2000 undefined)';
   }
   if (!code_2000) return null;
+  if (activeSlide) {
+  }
 
   return (
     <div className="habitat-banner-details">
@@ -52,62 +59,124 @@ const _View = (props) => {
               </>
             )} */}
         </div>
-        {pictures?.length > 0 && (
-          <div className="carousel">
+        {pictures_length > 0 && (
+          <div
+            className={cx('carousel', {
+              'one-slide': pictures_length === 1,
+              'two-slides': pictures_length === 2,
+              'three-slides': pictures_length > 2,
+            })}
+          >
             <div className="arrows">
-              <div className="swiper-button image-swiper-button-prev">
-                <img
-                  className="icon  icon-left"
-                  src={arrowLeft}
-                  alt="left arrow"
+              <button
+                className="swiper-button image-swiper-button-prev"
+                onClick={() => {
+                  swiperEl.current.slidePrev();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slidePrev();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slidePrev();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-left"
+                  color="#000"
+                  name={arrowLeft}
+                  size="32px"
                 />
-                {/* <Icon className="icon-left" name={arrowSVG} size="24px" /> */}
-              </div>
-              <div className="swiper-button image-swiper-button-next">
-                <img
-                  className="icon icon-right"
-                  src={arrowRight}
-                  alt="right arrow"
+              </button>
+              <button
+                className="swiper-button image-swiper-button-next"
+                onClick={() => {
+                  swiperEl.current.slideNext();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slideNext();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slideNext();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-right"
+                  color="#000"
+                  name={arrowRight}
+                  size="32px"
                 />
-                {/* <Icon className="icon-right" name={arrowSVG} size="24px" /> */}
-              </div>
-              <p>{copyright[activeSlide]}</p>
+              </button>
+              {/* <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
+                {source[activeSlide]} - {license[activeSlide]}
+              </p> */}
             </div>
             <SwiperLoader>
-              {({ Navigation, Pagination }) => {
+              {() => {
                 return (
                   <SwiperReactLoader>
                     {({ Swiper, SwiperSlide }) => {
                       return (
-                        <Swiper
-                          modules={[Navigation, Pagination]}
-                          navigation={{
-                            prevEl: '.image-swiper-button-prev',
-                            nextEl: '.image-swiper-button-next',
-                          }}
-                          slidesPerView={3}
-                          spaceBetween={0}
-                          loop={true}
-                          breakpoints={{
-                            320: {
-                              slidesPerView: 1,
-                              spaceBetween: 0,
-                            },
-                            1200: {
-                              slidesPerView: 3,
-                              spaceBetween: 0,
-                            },
-                          }}
-                          onSlideChange={(swiper) => {
-                            setActiveSlide(swiper.activeIndex);
-                          }}
-                        >
-                          {pictures.map((source, index) => (
-                            <SwiperSlide>
-                              <img src={source} alt={picture_names[index]} />
-                            </SwiperSlide>
-                          ))}
-                        </Swiper>
+                        <>
+                          <Swiper
+                            loop={true}
+                            initialSlide={0}
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            onBeforeInit={(swiper) => {
+                              swiperEl.current = swiper;
+                            }}
+                          >
+                            {pictures.map((source, index) => (
+                              <SwiperSlide>
+                                <img src={source} alt={pictures[index]} />
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                          {pictures_length > 1 && (
+                            <Swiper
+                              className="preview preview-one"
+                              loop={true}
+                              initialSlide={1}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[0] = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={pictures[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                          {pictures_length > 2 && (
+                            <Swiper
+                              className="preview preview-two"
+                              loop={true}
+                              initialSlide={2}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[1] = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={pictures[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                        </>
                       );
                     }}
                   </SwiperReactLoader>

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

@@ -4,8 +4,6 @@
 @import (multiple, reference, optional) '../../theme.config';
 
 @import 'swiper/swiper.less';
-@import 'swiper/modules/navigation/navigation.less';
-@import 'swiper/modules/pagination/pagination.less';
 
 @{view} {
   .habitat-banner-details {
@@ -44,12 +42,14 @@
 }
 
 div#view .habitat-banner-details .ui.container > * {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
 .habitat-banner-details {
   position: relative;
   padding: 0;
+  margin-bottom: 1rem;
   color: #fff !important;
   font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
@@ -68,10 +68,10 @@ div#view .habitat-banner-details .ui.container > * {
     .habitat-metadata {
       display: flex;
       width: 50%;
+      height: 320px !important;
       flex: 0 0 50%;
       flex-direction: column;
       justify-content: center;
-      margin: 4rem 0;
       word-wrap: break-word;
 
       .name {
@@ -120,10 +120,21 @@ div#view .habitat-banner-details .ui.container > * {
         font-size: 18px;
         font-weight: 600;
         line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
       }
     }
 
     .carousel {
+      display: flex;
+      height: 320px;
+
       p {
         font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
       }
@@ -132,25 +143,72 @@ div#view .habitat-banner-details .ui.container > * {
         width: 100%;
       }
 
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
       .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
         img {
           display: block;
-          // max-height: 300px;
           width: 100%;
-          height: 300px;
+          height: 100%;
           object-fit: cover;
         }
       }
 
       .arrows {
         position: absolute;
-        z-index: 1;
+        z-index: 2;
         bottom: 0;
         left: 0;
         display: flex;
         width: 100%;
         align-items: center;
 
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
         .icon {
           display: block;
           width: 32px;
@@ -170,19 +228,6 @@ div#view .habitat-banner-details .ui.container > * {
       }
     }
 
-    .swiper {
-      z-index: 0;
-      width: 100%;
-
-      .swiper-slide:not(.swiper-slide-active) {
-        filter: grayscale(100%);
-      }
-
-      .swiper-slide {
-        transition: filter 0.5s;
-      }
-    }
-
     @media @mobile {
       flex-flow: column;
 

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

@@ -2,6 +2,14 @@
   margin-top: 0;
 }
 
+.subsite.subsite-natura2000 .content-area {
+  .site-banner {
+    h2 {
+      color: #fff !important;
+    }
+  }
+}
+
 .site-banner {
   padding: 1.5em 0;
   background-color: #00a390;

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

@@ -105,7 +105,7 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Message className="map-info-notice">
+      <Message className="map-info-notice shadow-none">
         <Container>
           <p>
             The designations employed and the presentation of material on this

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

@@ -5,7 +5,7 @@ div#view .site-species-list .species-list .ui.container > * {
 }
 
 .site-species-list {
-  margin-top: -1.5rem;
+  margin-top: -1em;
 
   .species-filters {
     .ui.container {

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

@@ -1,17 +1,19 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React from 'react';
-import { Container } from 'semantic-ui-react';
-import loadable from '@loadable/component';
-import { photoPlaceholders } from '@eeacms/volto-n2k/helpers';
+import React, { useRef, useState } from 'react';
 import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
 
-const Slider = loadable(() => import('react-slick'));
+const SwiperLoader = loadable.lib(() => import('swiper'));
+const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
 
 const View = (props) => {
-  const slider = React.useRef(null);
+  const swiperEl = useRef();
+  const previewEl = useRef();
+  const [activeSlide, setActiveSlide] = useState(0);
   const provider_data = props.provider_data || {};
   const {
     author = [],
@@ -23,112 +25,170 @@ const View = (props) => {
     picture_url = [],
     scientific_name = [],
     source = [],
-    source_url = [],
-    species_group_name = [],
+    // source_url = [],
+    // species_group_name = [],
   } = provider_data;
 
-  const sliderSettings = {
-    adaptiveHeight: true,
-    autoplay: true,
-    autoplaySpeed: 5000,
-    arrows: true,
-    cssEase: 'ease',
-    dots: false,
-    speed: 500,
-    initialSlide: 0,
-    lazyLoad: 'ondemand',
-    swipe: true,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    touchMove: true,
-  };
+  const pictures_length = picture_url?.length;
 
   if (!id_eunis[0]) return '';
   return (
-    <div className="species-banner-details full-width">
-      <Container>
-        <div className="species-details">
-          <div className="species-metadata">
-            <h2 className="name">
-              {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
-              <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
-                {scientific_name[0]}
-              </span>
-            </h2>
-            {author[0] && (
-              <p
-                className="info radjhan-bold"
-                style={{ marginBottom: '0.5rem' }}
+    <div className="species-banner-details">
+      <div className="species-details">
+        <div className="species-metadata">
+          <h2 className="name">
+            {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
+            <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+              {scientific_name[0]}
+            </span>
+          </h2>
+          {author[0] && (
+            <p className="info radjhan-bold" style={{ marginBottom: '0.5rem' }}>
+              {author[0]}
+            </p>
+          )}
+          {code_2000[0] && (
+            <p className="info">
+              Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+              <br />
+              <br />
+              <a
+                href={`http://images.google.com/images?q=${scientific_name[0]}`}
+                target="_blank"
               >
-                {author[0]}
-              </p>
-            )}
-            {code_2000[0] && (
-              <p className="info">
-                Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
-              </p>
-            )}
-            {/* <br />
-            {number_sites[0] && (
-              <h3 style={{ marginBottom: '0.5rem' }}>{number_sites[0]}</h3>
-            )}
-            <h4 className="radjhan-normal">
-              NATURA 2000 SITES PROTECTING THIS SPECIES
-            </h4> */}
-          </div>
+                Find image on the web
+              </a>
+            </p>
+          )}
+        </div>
+
+        {pictures_length > 0 && (
           <div
-            className={cx('species-pictures', {
-              'with-slider': picture_url.length > 0 && picture_url[0],
+            className={cx('carousel', {
+              'one-slide': pictures_length === 1,
+              'two-slides': pictures_length === 2,
+              'three-slides': pictures_length > 2,
             })}
           >
-            {picture_url.length > 0 && picture_url[0] ? (
-              <Slider {...sliderSettings} ref={slider}>
-                {picture_url.map((picture, index) => (
-                  <div key={`${picture}_${index}`} className="picture-wrapper">
-                    <img src={picture} alt={common_name[0]} />
-                    <div className="source">
-                      <a
-                        href={source_url[index]}
-                        title={'Picture source'}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {source[index]}
-                        {license[index] ? (
-                          <>
-                            ,<br />
-                            {license[index]}
-                          </>
-                        ) : (
-                          ''
-                        )}
-                      </a>
-                    </div>
-                  </div>
-                ))}
-              </Slider>
-            ) : (
-              <div className="picture-wrapper">
-                <img
-                  src={
-                    photoPlaceholders[species_group_name[0]] ||
-                    photoPlaceholders.default
+            <div className="arrows">
+              <button
+                className="swiper-button image-swiper-button-prev"
+                onClick={() => {
+                  swiperEl.current.slidePrev();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slidePrev();
                   }
-                  alt={species_group_name[0]}
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slidePrev();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-left"
+                  color="#000"
+                  name={arrowLeft}
+                  size="32px"
                 />
-              </div>
-            )}
-            <div className="find-image">
-              <a
-                href={`http://images.google.com/images?q=${scientific_name[0]}`}
-                target="_blank"
+              </button>
+              <button
+                className="swiper-button image-swiper-button-next"
+                onClick={() => {
+                  swiperEl.current.slideNext();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slideNext();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slideNext();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
               >
-                Find image on the web
-              </a>
+                <Icon
+                  className="icon-right"
+                  color="#000"
+                  name={arrowRight}
+                  size="32px"
+                />
+              </button>
+              <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
+                {source[activeSlide]} - {license[activeSlide]}
+              </p>
             </div>
+            <SwiperLoader>
+              {() => {
+                return (
+                  <SwiperReactLoader>
+                    {({ Swiper, SwiperSlide }) => {
+                      return (
+                        <>
+                          <Swiper
+                            loop={true}
+                            initialSlide={0}
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            onBeforeInit={(swiper) => {
+                              swiperEl.current = swiper;
+                            }}
+                          >
+                            {picture_url.map((source, index) => (
+                              <SwiperSlide>
+                                <img src={source} alt={picture_url[index]} />
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                          {pictures_length > 1 && (
+                            <Swiper
+                              className="preview preview-one"
+                              loop={true}
+                              initialSlide={1}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[0] = swiper;
+                              }}
+                            >
+                              {picture_url.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={picture_url[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                          {pictures_length > 2 && (
+                            <Swiper
+                              className="preview preview-two"
+                              loop={true}
+                              initialSlide={2}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[1] = swiper;
+                              }}
+                            >
+                              {picture_url.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={picture_url[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                        </>
+                      );
+                    }}
+                  </SwiperReactLoader>
+                );
+              }}
+            </SwiperLoader>
           </div>
-        </div>
-      </Container>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -1,31 +1,85 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+
+@{view} {
+  .species-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .species-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
 div#view .species-banner-details .ui.container > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
 .species-banner-details {
-  padding: 1.5em 0;
-  background-color: #00a390;
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
   color: #fff !important;
   font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
   .species-details {
     display: flex;
-    flex-flow: row;
     align-items: center;
     justify-content: space-between;
-    gap: 2rem;
-
-    @media only screen and (max-width: 800px) {
-      flex-flow: column;
-    }
 
     .species-metadata {
+      display: flex;
+      width: 50%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      word-wrap: break-word;
+
       .name {
         margin-top: 0 !important;
         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;
@@ -56,96 +110,131 @@ div#view .species-banner-details .ui.container > * {
         text-transform: uppercase;
       }
 
-      .info {
-        margin-bottom: 1rem;
+      .info,
+      .info > * {
         font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;
         font-weight: 600;
         line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
       }
     }
 
-    .slick-slider {
-      .slick-arrow {
-        display: block !important;
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
       }
-    }
 
-    .species-pictures {
-      width: 400px;
-      height: 400px;
-      margin-bottom: 1rem;
-
-      .picture-wrapper {
-        position: relative;
-        display: flex !important;
-        overflow: hidden;
-        width: 400px;
-        height: 400px;
-        flex-flow: column;
-        align-items: center;
-        justify-content: center;
-        background-color: #000;
-        border-radius: 10px;
+      img {
+        width: 100%;
+      }
 
-        img {
-          width: auto;
-          max-width: 400px;
-          height: auto;
-          max-height: 400px;
-          filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
         }
+      }
 
-        .source {
-          position: absolute;
-          bottom: 0;
-          left: 0;
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
           width: 100%;
-          padding: 0.5rem 1rem;
-          background-color: rgba(0, 0, 0, 0.7);
-          border-bottom-left-radius: 3px;
-          border-bottom-right-radius: 3px;
-
-          a {
-            margin-top: 1rem;
-            color: #fff !important;
-
-            &:hover {
-              color: #fff !important;
-              text-decoration: underline;
-            }
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
           }
         }
       }
 
-      &:not(.with-slider) {
-        display: flex;
-        flex-flow: column;
-        justify-content: center;
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
 
-        .picture-wrapper {
-          height: fit-content;
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
         }
       }
 
-      .find-image {
-        padding: 0.25rem 1rem;
-        text-align: left;
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
 
-        a {
-          color: #fff;
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: calc(100% - 64px);
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
     }
-  }
 
-  .slick-slide:not(.slick-active) {
-    opacity: 0;
-    transition: opacity 0.6s;
-  }
+    @media @mobile {
+      flex-flow: column;
 
-  .slick-slide {
-    opacity: 1;
-    transition: opacity 0.4s;
+      .species-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
+    }
   }
 }

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

@@ -100,8 +100,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -96,8 +96,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Icon, BlockChooser } from '@plone/volto/components';
-import { blockHasValue } from '@plone/volto/helpers';
+import {
+  blockHasValue,
+  buildStyleClassNamesFromData,
+} from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Button } from 'semantic-ui-react';
 import includes from 'lodash/includes';
@@ -86,6 +89,8 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    const styles = buildStyleClassNamesFromData(data.styles);
+
     // Get editing instructions from block settings or props
     let instructions = data?.instructions?.data || data?.instructions;
     if (!instructions || instructions === '<p><br/></p>') {
@@ -97,7 +102,9 @@ class EditBlockWrapper extends React.Component {
         <div
           ref={draginfo?.innerRef}
           {...(selected ? draginfo?.draggableProps : null)}
-          className={`block-editor-${data['@type']}`}
+          className={cx(`block-editor-${data['@type']}`, styles, {
+            [data.align]: data.align,
+          })}
         >
           {(!selected || !visible || disabled) && (
             <div