@eeacms/volto-n2k 1.0.24 → 1.0.26

package/CHANGELOG.md

@@ -4,16 +4,24 @@ 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.26](https://github.com/eea/volto-n2k/compare/1.0.25...1.0.26) - 29 May 2023
+
+#### :bug: Bug Fixes
+
+- fix: make carousel work [Miu Razvan - [`d46cb68`](https://github.com/eea/volto-n2k/commit/d46cb68c8416d9dac1c1248b6b5647983e1c9fa1)]
+
+### [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)]
 
-#### :hammer_and_wrench: Others
-
-- update [Miu Razvan - [`4347ffc`](https://github.com/eea/volto-n2k/commit/4347ffc93743dbc9d5514fe1f7d6e39b73abd0c8)]
-- update [Miu Razvan - [`4e8317f`](https://github.com/eea/volto-n2k/commit/4e8317ffbe459d5bc15092fa9f43255707a77e37)]
 ### [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.24",
+  "version": "1.0.26",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CarouselHorizontal/HorizontalView.jsx

@@ -17,7 +17,8 @@ const Slider = loadable(() => import('react-slick'));
 
 const Dots = (props) => {
   const { activeTab = null, tabsList = [], slider = {} } = props;
-  return slider.current && tabsList.length > 1 ? (
+
+  return slider && tabsList.length > 1 ? (
     <div className="slick-dots-wrapper">
       <div className="slick-line" />
       <ul className={cx('slick-dots ui container', props.uiContainer)}>
@@ -30,8 +31,8 @@ const Dots = (props) => {
               aria-label={`Select slide ${index + 1}`}
               tabIndex={0}
               onClick={() => {
-                if (slider.current) {
-                  slider.current.slickGoTo(index);
+                if (slider) {
+                  slider.slickGoTo(index);
                 }
               }}
             />
@@ -49,7 +50,7 @@ const ArrowsGroup = (props) => {
   const currentSlide = tabsList.indexOf(activeTab);
   const slideCount = tabsList.length;
 
-  return slider.current ? (
+  return slider ? (
     <div
       className={cx({
         'slick-arrows': true,
@@ -61,8 +62,8 @@ const ArrowsGroup = (props) => {
           aria-label="Previous slide"
           className="slick-arrow slick-prev"
           onClick={() => {
-            if (slider.current) {
-              slider.current.slickPrev();
+            if (slider) {
+              slider.slickPrev();
             }
           }}
           tabIndex={0}
@@ -77,8 +78,8 @@ const ArrowsGroup = (props) => {
           aria-label="Next slide"
           className="slick-arrow slick-next"
           onClick={() => {
-            if (slider.current) {
-              slider.current.slickNext();
+            if (slider) {
+              slider.slickNext();
             }
           }}
           tabIndex={0}
@@ -100,9 +101,9 @@ const ArrowsGroup = (props) => {
 };
 
 const View = (props) => {
-  const slider = React.useRef(null);
   const img = React.useRef(null);
-  // const [imgHeight, setImgHeight] = React.useState(0);
+  const sliderUp = React.useRef(null);
+  const [slider, setSlider] = React.useState(null);
   const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const blockId = props.id;
   const {
@@ -134,28 +135,12 @@ const View = (props) => {
     },
   };
 
-  // const panes = tabsList.map((tab, index) => {
-  //   return {
-  //     id: tab,
-  //     renderItem: (
-  //       <React.Fragment key={`slide-${tab}`}>
-  //         <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
-  //         {index === 0 ? (
-  //           <div
-  //             className="divider"
-  //             style={{ height: `${imgHeight - 80}px` }}
-  //           />
-  //         ) : (
-  //           ''
-  //         )}
-  //       </React.Fragment>
-  //     ),
-  //   };
-  // });
-
-  // const updateImageHeight = () => {
-  //   setImgHeight(img.current?.height || 0);
-  // };
+  React.useEffect(() => {
+    return () => {
+      setSlider(null);
+      sliderUp.current = false;
+    };
+  }, []);
 
   React.useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
@@ -178,7 +163,7 @@ const View = (props) => {
         parent
       ) {
         if (activeTabIndex !== index) {
-          slider.current.slickGoTo(index);
+          slider.slickGoTo(index);
         }
         props.scrollToTarget(parent, offsetHeight);
       } else if (id === parentId && parent) {
@@ -205,25 +190,16 @@ const View = (props) => {
     };
   });
 
-  // React.useEffect(() => {
-  //   updateImageHeight();
-  //   img.current.onload = () => {
-  //     updateImageHeight();
-  //   };
-  //   window.addEventListener('resize', updateImageHeight);
-  //   return () => {
-  //     window.removeEventListener('resize', updateImageHeight);
-  //   };
-  //   /* eslint-disable-next-line */
-  // }, []);
-
-  // console.log('HERE RERENDER');
-
   return (
     <>
       <Slider
         {...settings}
-        ref={slider}
+        ref={(sliderRef) => {
+          if (!slider && !sliderUp.current) {
+            setSlider(sliderRef);
+            sliderUp.current = true;
+          }
+        }}
         className={cx(uiContainer, 'tabs-accessibility')}
         accessibility={true}
         afterChange={() => {

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

@@ -1,9 +1,6 @@
 import React, { useMemo } from 'react';
-import { compose } from 'redux';
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
-import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 import getSchema from './schema';
 import View from './View';
 import './style.less';
@@ -34,16 +31,4 @@ const Edit = (props) => {
   );
 };
 
-const EditWrapper = compose(
-  connectToProviderData((props) => ({
-    provider_url: props.data?.provider_url,
-  })),
-)(Edit);
-
-export default (props) => {
-  return (
-    <VisibilitySensor>
-      <EditWrapper {...props} />
-    </VisibilitySensor>
-  );
-};
+export default Edit;

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

@@ -1,10 +1,12 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
 import { compose } from 'redux';
 import cx from 'classnames';
 import loadable from '@loadable/component';
 import { Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import { replaceQueryParam } from '@eeacms/volto-n2k/helpers';
 import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
 import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
@@ -12,34 +14,39 @@ import './style.less';
 const SwiperLoader = loadable.lib(() => import('swiper'));
 const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
 
+const getSource = (source) => {
+  let parsedSource = replaceQueryParam(source, 'x', 300);
+  parsedSource = replaceQueryParam(parsedSource, 'y', 300);
+
+  return parsedSource;
+};
+
 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] || {};
+  const habitat_provider = flattenToAppURL(props.data.habitat_provider);
+  const habitat_pictures_provider = flattenToAppURL(
+    props.data.habitat_pictures_provider,
+  );
+  const habitat = props.providers_data?.[habitat_provider] || {};
   const habitat_pictures =
-    props.providers_data?.[providers[1]?.provider_url] || {};
+    props.providers_data?.[habitat_pictures_provider] || {};
 
-  const {
-    code_2000,
-    // habitat_description = [],
-    // habitat_type = [],
-    // number_countries = [],
-    // number_sites = [],
-    scientific_name,
-  } = habitat;
+  const { code_2000 = [], scientific_name = [] } = habitat;
+  const { attribution_copyright = [] } = habitat_pictures;
 
   const pictures = habitat_pictures?.['WebURL'] || [];
-  const pictures_length = pictures?.length;
-  // const picture_names = habitat_pictures?.['filename'] || [];
-  // const copyright = habitat_pictures?.['attribution_copyright'] || [];
+  const pictures_length = useMemo(
+    () => pictures.filter((picture) => !!picture)?.length,
+    [pictures],
+  );
 
-  if (!code_2000 && props.mode === 'edit') {
-    return 'Habitat banner block (code_2000 undefined)';
+  if (!habitat_provider && props.mode === 'edit') {
+    return 'Habitat banner block, habitat provider undefined';
   }
-  if (!code_2000) return null;
-  if (activeSlide) {
+  if (!habitat_pictures_provider && props.mode === 'edit') {
+    return 'Habitat banner block, habitat pictures provider undefined';
   }
 
   return (
@@ -50,14 +57,6 @@ const _View = (props) => {
           <p className="info">
             Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
           </p>
-          {/* {number_sites[0] && (
-              <>
-                <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
-                <h4 className="radjhan-normal">
-                  NATURA 2000 SITES PROTECTING THIS HABITAT
-                </h4>
-              </>
-            )} */}
         </div>
         {pictures_length > 0 && (
           <div
@@ -108,9 +107,9 @@ const _View = (props) => {
                   size="32px"
                 />
               </button>
-              {/* <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
-                {source[activeSlide]} - {license[activeSlide]}
-              </p> */}
+              {!!attribution_copyright[activeSlide] && (
+                <p>{attribution_copyright[activeSlide]}</p>
+              )}
             </div>
             <SwiperLoader>
               {() => {
@@ -130,7 +129,10 @@ const _View = (props) => {
                           >
                             {pictures.map((source, index) => (
                               <SwiperSlide>
-                                <img src={source} alt={pictures[index]} />
+                                <img
+                                  src={getSource(source)}
+                                  alt={pictures[index]}
+                                />
                               </SwiperSlide>
                             ))}
                           </Swiper>
@@ -150,7 +152,10 @@ const _View = (props) => {
                             >
                               {pictures.map((source, index) => (
                                 <SwiperSlide>
-                                  <img src={source} alt={pictures[index]} />
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
                                 </SwiperSlide>
                               ))}
                             </Swiper>
@@ -171,7 +176,10 @@ const _View = (props) => {
                             >
                               {pictures.map((source, index) => (
                                 <SwiperSlide>
-                                  <img src={source} alt={pictures[index]} />
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
                                 </SwiperSlide>
                               ))}
                             </Swiper>
@@ -192,7 +200,12 @@ const _View = (props) => {
 
 const View = compose(
   connectToMultipleProviders((props) => ({
-    providers: props.data?.providers,
+    providers: [
+      {
+        provider_url: props.data?.habitat_provider,
+      },
+      { provider_url: props.data?.habitat_pictures_provider },
+    ],
   })),
 )(_View);
 

package/src/components/manage/Blocks/HabitatsBanner/schema.js

@@ -1,60 +1,26 @@
-const SourceSchema = {
-  title: 'Source',
-
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['source', 'source_link'],
-    },
-  ],
-
-  properties: {
-    source: {
-      type: 'string',
-      title: 'Source',
-    },
-    source_link: {
-      type: 'string',
-      title: 'Link',
-    },
-  },
-
-  required: ['source'],
-};
-
-const DataProvidersSchema = {
-  title: 'Data provider',
-  fieldsets: [{ id: 'default', title: 'Default', fields: ['provider_url'] }],
-  properties: {
-    provider_url: {
-      title: 'Provider url',
-      widget: 'object_by_path',
-    },
-  },
-};
-
-const getSchema = (props) => {
+const getSchema = () => {
   return {
     title: 'Habitats Banner',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['providers', 'allowedParams'],
-      },
-      {
-        id: 'sources',
-        title: 'Sources',
-        fields: ['sources'],
+        fields: [
+          'habitat_provider',
+          'habitat_pictures_provider',
+          'allowedParams',
+        ],
       },
     ],
 
     properties: {
-      providers: {
-        title: 'Data provider',
-        schema: DataProvidersSchema,
-        widget: 'object_list',
+      habitat_provider: {
+        title: 'Habitat provider',
+        widget: 'url',
+      },
+      habitat_pictures_provider: {
+        title: 'Habitat pictures provider',
+        widget: 'url',
       },
       allowedParams: {
         title: 'Allowed params',
@@ -64,11 +30,6 @@ const getSchema = (props) => {
           choices: [],
         },
       },
-      sources: {
-        title: 'Sources',
-        schema: SourceSchema,
-        widget: 'object_list',
-      },
     },
 
     required: ['url'],

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

@@ -15,8 +15,6 @@ div#view .ui.container > .sticky-navigation-anchors {
 }
 
 .sticky-navigation-anchors {
-  z-index: 5 !important;
-
   &.is-sticky {
     .navigation-anchors {
       background-color: #fff !important;

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

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import getSchema from './schema';
+import View from './View';
+import './style.less';
+
+const Edit = (props) => {
+  const schema = useMemo(() => getSchema(props), [props]);
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

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

@@ -1,8 +1,13 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React, { useRef, useState } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
+import { compose } from 'redux';
 import cx from 'classnames';
 import loadable from '@loadable/component';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import { replaceQueryParam } from '@eeacms/volto-n2k/helpers';
 import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
 import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
@@ -10,26 +15,56 @@ import './style.less';
 const SwiperLoader = loadable.lib(() => import('swiper'));
 const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
 
-const View = (props) => {
+const getSource = (source) => {
+  let parsedSource = replaceQueryParam(source, 'x', 300);
+  parsedSource = replaceQueryParam(parsedSource, 'y', 300);
+
+  return parsedSource;
+};
+
+const _View = (props) => {
   const swiperEl = useRef();
   const previewEl = useRef();
   const [activeSlide, setActiveSlide] = useState(0);
-  const provider_data = props.provider_data || {};
+  const species_provider = flattenToAppURL(props.data.species_provider);
+  const species_pictures_provider = flattenToAppURL(
+    props.data.species_pictures_provider,
+  );
+  const species = props.providers_data?.[species_provider] || {};
+  const species_pictures =
+    props.providers_data?.[species_pictures_provider] || {};
+
   const {
     author = [],
     common_name = [],
     code_2000 = [],
     id_eunis = [],
-    license = [],
-    // number_sites = [],
     picture_url = [],
     scientific_name = [],
     source = [],
-    // source_url = [],
-    // species_group_name = [],
-  } = provider_data;
+    license = [],
+  } = species;
+  const { attribution_copyright = [] } = species_pictures;
 
-  const pictures_length = picture_url?.length;
+  const pictures = useMemo(() => {
+    const weburls = species_pictures?.['WebURL'] || [];
+    if (weburls.filter((url) => !!url).length > 0) {
+      return weburls;
+    }
+    return picture_url;
+  }, [species_pictures, picture_url]);
+
+  const pictures_length = useMemo(
+    () => pictures.filter((picture) => !!picture)?.length,
+    [pictures],
+  );
+
+  if (!species_provider && props.mode === 'edit') {
+    return 'species banner block, species provider undefined';
+  }
+  if (!species_pictures_provider && props.mode === 'edit') {
+    return 'Species banner block, species pictures provider undefined';
+  }
 
   if (!id_eunis[0]) return '';
   return (
@@ -111,9 +146,13 @@ const View = (props) => {
                   size="32px"
                 />
               </button>
-              <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
-                {source[activeSlide]} - {license[activeSlide]}
-              </p>
+              {!!attribution_copyright[activeSlide] ? (
+                <p>{attribution_copyright[activeSlide]}</p>
+              ) : !!source[activeSlide] && !!license[activeSlide] ? (
+                <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
+                  {source[activeSlide]} - {license[activeSlide]}
+                </p>
+              ) : null}
             </div>
             <SwiperLoader>
               {() => {
@@ -131,9 +170,12 @@ const View = (props) => {
                               swiperEl.current = swiper;
                             }}
                           >
-                            {picture_url.map((source, index) => (
+                            {pictures.map((source, index) => (
                               <SwiperSlide>
-                                <img src={source} alt={picture_url[index]} />
+                                <img
+                                  src={getSource(source)}
+                                  alt={pictures[index]}
+                                />
                               </SwiperSlide>
                             ))}
                           </Swiper>
@@ -151,9 +193,12 @@ const View = (props) => {
                                 previewEl.current[0] = swiper;
                               }}
                             >
-                              {picture_url.map((source, index) => (
+                              {pictures.map((source, index) => (
                                 <SwiperSlide>
-                                  <img src={source} alt={picture_url[index]} />
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
                                 </SwiperSlide>
                               ))}
                             </Swiper>
@@ -172,9 +217,12 @@ const View = (props) => {
                                 previewEl.current[1] = swiper;
                               }}
                             >
-                              {picture_url.map((source, index) => (
+                              {pictures.map((source, index) => (
                                 <SwiperSlide>
-                                  <img src={source} alt={picture_url[index]} />
+                                  <img
+                                    src={getSource(source)}
+                                    alt={pictures[index]}
+                                  />
                                 </SwiperSlide>
                               ))}
                             </Swiper>
@@ -193,4 +241,21 @@ const View = (props) => {
   );
 };
 
-export default View;
+const View = compose(
+  connectToMultipleProviders((props) => ({
+    providers: [
+      {
+        provider_url: props.data?.species_provider,
+      },
+      { provider_url: props.data?.species_pictures_provider },
+    ],
+  })),
+)(_View);
+
+export default (props) => {
+  return (
+    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
+      <View {...props} />
+    </VisibilitySensor>
+  );
+};

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

@@ -1,17 +1,24 @@
-import SpeciesBannerView from './View';
-import getSchema from './schema';
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
 
 export default (config) => {
-  config.blocks.blocksConfig.custom_connected_block = {
-    ...config.blocks.blocksConfig.custom_connected_block,
-    blocks: {
-      ...config.blocks.blocksConfig.custom_connected_block.blocks,
-      species_banner: {
-        view: SpeciesBannerView,
-        getSchema: getSchema,
-        title: 'Species banner',
-      },
+  config.blocks.blocksConfig.species_banner = {
+    id: 'species_banner',
+    title: 'Species banner',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
     },
+    blockHasOwnFocusManagement: false,
   };
   return config;
 };

package/src/components/manage/Blocks/SpeciesBanner/schema.js

@@ -1,4 +1,4 @@
-const getSchema = (props) => {
+const getSchema = () => {
   return {
     title: 'Species banner',
 
@@ -6,11 +6,32 @@ const getSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: [],
+        fields: [
+          'species_provider',
+          'species_pictures_provider',
+          'allowedParams',
+        ],
       },
     ],
 
-    properties: {},
+    properties: {
+      species_provider: {
+        title: 'Species provider',
+        widget: 'url',
+      },
+      species_pictures_provider: {
+        title: 'Species pictures provider',
+        widget: 'url',
+      },
+      allowedParams: {
+        title: 'Allowed params',
+        type: 'array',
+        creatable: true,
+        items: {
+          choices: [],
+        },
+      },
+    },
 
     required: [],
   };

package/src/components/theme/AppExtras/index.js

@@ -1,13 +1,8 @@
-import CopyPaste from './CopyPaste';
 import HashLink from './HashLink';
 
 export default (config) => {
   config.settings.appExtras = [
     ...(config.settings.appExtras || []),
-    {
-      match: '/**/edit',
-      component: CopyPaste,
-    },
     {
       match: '',
       component: HashLink,

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

package/src/helpers.js

@@ -146,3 +146,8 @@ export const pathExists = (path, items) => {
   }
   return ok;
 };
+
+export const replaceQueryParam = (url, param, newValue) => {
+  const regex = new RegExp(`(${encodeURIComponent(param)}=)([^&]+)`, 'i');
+  return url.replace(regex, `$1${encodeURIComponent(newValue)}`);
+};

package/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Portal } from 'react-portal';
-import { toast } from 'react-toastify';
-import { Button } from 'semantic-ui-react';
-import { getBaseUrl } from '@plone/volto/helpers';
-import { updateContent } from '@plone/volto/actions';
-import { Icon, Toast } from '@plone/volto/components';
-import copySVG from '@plone/volto/icons/copy.svg';
-import pasteSVG from '@plone/volto/icons/paste.svg';
-
-import './style.less';
-
-const TIMEOUT = 2000;
-
-const CopyPaste = (props) => {
-  const [readyToRender, setReadyToRender] = React.useState(false);
-  const clock = React.useRef(null);
-  const time = React.useRef(0);
-  const toolbar = React.useRef(null);
-  const { content } = props;
-
-  const copyData = () => {
-    navigator.clipboard.writeText(
-      JSON.stringify({
-        blocks: content.blocks,
-        blocks_layout: content.blocks_layout,
-      }),
-    );
-    toast.success(
-      <Toast success title={'Success'} content={`Copied blocks`} />,
-    );
-  };
-
-  const pasteData = () => {
-    const message = [
-      '============= BRAKING CHANGE =============',
-      '\nAre you sure you want to paste from clipboard?',
-      '\nThis action will replace all the blocks with those from clipboard and will trigger SUBMIT !!!',
-    ];
-    navigator.clipboard.readText().then((text) => {
-      if (
-        // eslint-disable-next-line no-alert
-        window.confirm(message.join(''))
-      ) {
-        try {
-          const data = JSON.parse(text) || {};
-          const { blocks = {}, blocks_layout = {} } = data;
-          const blocksIds = Object.keys(blocks);
-          let valid = true;
-          if (
-            blocks_layout &&
-            blocks_layout.items &&
-            blocks_layout.items.length === blocksIds.length
-          ) {
-            blocks_layout.items.forEach((block) => {
-              if (valid && !blocksIds.includes(block)) {
-                valid = false;
-              }
-            });
-          }
-          if (valid) {
-            props.updateContent(getBaseUrl(props.pathname), data);
-            toast.success(
-              <Toast
-                success
-                title={'Success'}
-                content={'Blocks replaced successfully'}
-              />,
-            );
-          } else {
-            toast.error(
-              <Toast
-                error
-                title={'Error'}
-                content={'Your clipboard contains incompatible data'}
-              />,
-            );
-          }
-        } catch {
-          toast.error(
-            <Toast
-              error
-              title={'Error'}
-              content={'Your clipboard contains incompatible data'}
-            />,
-          );
-        }
-      }
-    });
-  };
-
-  React.useEffect(() => {
-    clock.current = setInterval(() => {
-      const element = document.querySelector('#toolbar .toolbar-actions');
-      if (element) {
-        setReadyToRender(true);
-        clearInterval(clock.current);
-        time.current = 0;
-        return;
-      }
-      if (time.current >= TIMEOUT) {
-        clearInterval(clock.current);
-        time.current = 0;
-        return;
-      }
-      time.current += 100;
-    }, 100);
-    return () => {
-      clearInterval(clock.current);
-      time.current = 0;
-    };
-  }, []);
-
-  if (!__CLIENT__ || !readyToRender) return '';
-
-  return (
-    <Portal node={document.querySelector('#toolbar .toolbar-actions')}>
-      <div
-        ref={toolbar}
-        id="__developer_tools"
-        onMouseEnter={(e) => {
-          if (
-            e.altKey &&
-            e.shiftKey &&
-            toolbar.current &&
-            !toolbar.current.classList.contains('__dev_on')
-          ) {
-            toolbar.current.classList.add('__dev_on');
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (
-            toolbar.current &&
-            toolbar.current.classList.contains('__dev_on')
-          ) {
-            toolbar.current.classList.remove('__dev_on');
-          }
-        }}
-        onFocus={() => {}}
-      >
-        <Button
-          className="copy"
-          aria-label="Copy blocks data"
-          title="Copy blocks data"
-          onClick={copyData}
-        >
-          <Icon name={copySVG} className="circled" size="30px" />
-        </Button>
-        <Button
-          className="paste"
-          aria-label="Paste blocks data"
-          title="Paste blocks data"
-          onClick={pasteData}
-          disabled={props.updateRequest.loading}
-        >
-          <Icon name={pasteSVG} className="circled" size="30px" />
-        </Button>
-      </div>
-    </Portal>
-  );
-};
-
-export default compose(
-  connect(
-    (state, props) => ({
-      content: state.content.data,
-      updateRequest: state.content.update,
-      pathname: props.location.pathname,
-    }),
-    {
-      updateContent,
-    },
-  ),
-)(CopyPaste);

package/src/components/theme/AppExtras/CopyPaste/index.js

@@ -1,3 +0,0 @@
-import CopyPaste from './CopyPaste';
-
-export default CopyPaste;

package/src/components/theme/AppExtras/CopyPaste/style.less

@@ -1,18 +0,0 @@
-#__developer_tools {
-  .ui.button {
-    color: #007eb1;
-    opacity: 0;
-    pointer-events: none;
-
-    &.disabled {
-      opacity: 0 !important;
-    }
-  }
-
-  &.__dev_on {
-    .ui.button {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-}