@eeacms/volto-eea-website-theme 1.34.0 → 2.0.1

package/src/customizations/volto/components/manage/Blocks/Grid/Edit.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useState } from 'react';
+import ContainerEdit from '@plone/volto/components/manage/Blocks/Container/Edit';
+
+const convertTeaserToGridIfNecessary = (data) => {
+  if (data?.['@type'] === 'teaserGrid')
+    return {
+      ...data,
+      '@type': 'gridBlock',
+      blocks_layout: { items: data?.columns.map((c) => c.id) },
+      blocks: data?.columns?.reduce((acc, current) => {
+        return {
+          ...acc,
+          [current?.id]: current,
+        };
+      }, {}),
+    };
+  return data;
+};
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength =
+    data?.blocks_layout?.items?.length || data?.columns?.length || 0;
+
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
+  //convert to gridBlock if necessary
+  if (data?.['@type'] === 'teaserGrid') {
+    props.onChangeBlock(props.block, convertTeaserToGridIfNecessary(data));
+  }
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+      })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => {
+        if (!e.block) setSelectedBlock(null);
+      }}
+      role="presentation"
+    >
+      <ContainerEdit
+        {...props}
+        data={data}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        direction="horizontal"
+      />
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

package/src/customizations/volto/components/manage/Blocks/Grid/View.jsx

@@ -0,0 +1,61 @@
+import { Grid } from 'semantic-ui-react';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const convertTeaserToGridIfNecessary = (data) => {
+  if (data?.['@type'] === 'teaserGrid')
+    return {
+      ...data,
+      '@type': 'gridBlock',
+      blocks_layout: { items: data?.columns.map((c) => c.id) },
+      blocks: data?.columns?.reduce((acc, current) => {
+        return {
+          ...acc,
+          [current?.id]: current,
+        };
+      }, {}),
+    };
+  return data;
+};
+
+const GridBlockView = (props) => {
+  const { data, path, className, style } = props;
+  const metadata = props.metadata || props.properties;
+  const columns = data?.blocks_layout?.items || data?.columns;
+  const blocksConfig =
+    config.blocks.blocksConfig[data['@type']].blocksConfig ||
+    props.blocksConfig;
+  const location = {
+    pathname: path,
+  };
+
+  return (
+    <div
+      className={cx('block', data['@type'], className, {
+        one: columns?.length === 1,
+        two: columns?.length === 2,
+        three: columns?.length === 3,
+        four: columns?.length === 4,
+      })}
+      style={style}
+    >
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Grid stackable stretched columns={columns?.length}>
+        <RenderBlocks
+          {...props}
+          blockWrapperTag={Grid.Column}
+          metadata={metadata}
+          content={convertTeaserToGridIfNecessary(data)}
+          location={location}
+          blocksConfig={blocksConfig}
+          isContainer
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);

package/src/customizations/volto/components/manage/Blocks/Grid/readme.md

@@ -0,0 +1 @@
+These two customizations ensure backward compatibility with the legacy @kitconcept/volto-blocks-grid. For more details, refer to the ticket here: https://taskman.eionet.europa.eu/issues/265726.

package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -16,7 +16,6 @@ import { isEqual } from 'lodash';
 
 import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { Icon as IconSemantic } from 'semantic-ui-react';
-import { withBlockExtensions } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 
@@ -24,13 +23,33 @@ import {
   flattenToAppURL,
   getBaseUrl,
   isInternalURL,
+  withBlockExtensions,
+  validateFileUploadSize,
 } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
+
+// please Volto 16 test
+export const getImageBlockSizes = function (data) {
+  if (data.align === 'full') return '100vw';
+  if (data.align === 'center') {
+    if (data.size === 'l') return '100vw';
+    if (data.size === 'm') return '50vw';
+    if (data.size === 's') return '25vw';
+  }
+  if (data.align === 'left' || data.align === 'right') {
+    if (data.size === 'l') return '50vw';
+    if (data.size === 'm') return '25vw';
+    if (data.size === 's') return '15vw';
+  }
+  return undefined;
+};
+
 const Dropzone = loadable(() => import('react-dropzone'));
 
 const messages = defineMessages({
@@ -38,6 +57,10 @@ const messages = defineMessages({
     id: 'Browse the site, drop an image, or type an URL',
     defaultMessage: 'Browse the site, drop an image, or type an URL',
   },
+  uploadingImage: {
+    id: 'Uploading image',
+    defaultMessage: 'Uploading image',
+  },
 });
 
 /**
@@ -56,7 +79,7 @@ class Edit extends Component {
     block: PropTypes.string.isRequired,
     index: PropTypes.number.isRequired,
     data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
+    content: PropTypes.objectOf(PropTypes.any),
     request: PropTypes.shape({
       loading: PropTypes.bool,
       loaded: PropTypes.bool,
@@ -85,6 +108,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
+    // Update block data after upload finished
     if (
       this.props.request.loading &&
       nextProps.request.loaded &&
@@ -96,6 +120,8 @@ class Edit extends Component {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         url: nextProps.content['@id'],
+        image_field: 'image',
+        image_scales: { image: [nextProps.content.image] },
         alt: '',
       });
     }
@@ -123,6 +149,7 @@ class Edit extends Component {
   onUploadImage = (e) => {
     e.stopPropagation();
     const file = e.target.files[0];
+    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
     this.setState({
       uploading: true,
     });
@@ -167,6 +194,8 @@ class Edit extends Component {
     this.props.onChangeBlock(this.props.block, {
       ...this.props.data,
       url: flattenToAppURL(this.state.url),
+      image_field: undefined,
+      image_scales: undefined,
     });
   };
 
@@ -176,23 +205,25 @@ class Edit extends Component {
    * @param {array} files File objects
    * @returns {undefined}
    */
-  onDrop = (file) => {
-    this.setState({
-      uploading: true,
-    });
+  onDrop = (files) => {
+    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
+      this.setState({ dragging: false });
+      return;
+    }
+    this.setState({ uploading: true });
 
-    readAsDataURL(file[0]).then((data) => {
+    readAsDataURL(files[0]).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       this.props.createContent(
         getBaseUrl(this.props.pathname),
         {
           '@type': 'Image',
-          title: file[0].name,
+          title: files[0].name,
           image: {
             data: fields[3],
             encoding: fields[2],
             'content-type': fields[1],
-            filename: file[0].name,
+            filename: files[0].name,
           },
         },
         this.props.block,
@@ -234,6 +265,7 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data } = this.props;
     const placeholder =
       this.props.data.placeholder ||
@@ -265,7 +297,7 @@ class Edit extends Component {
         >
           {data.url ? (
             <>
-              <img
+              <Image
                 className={cx(
                   {
                     'full-width': data.align === 'full',
@@ -275,18 +307,23 @@ class Edit extends Component {
                   },
                   data?.styles?.objectPosition,
                 )}
+                item={
+                  data.image_scales
+                    ? {
+                        '@id': data.url,
+                        image_field: data.image_field,
+                        image_scales: data.image_scales,
+                      }
+                    : undefined
+                }
                 src={
-                  isInternalURL(data.url)
+                  data.image_scales
+                    ? undefined
+                    : isInternalURL(data.url)
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
-                        if (data.align === 'full')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/huge`;
                         if (data.size === 'l')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/great`;
+                          return `${flattenToAppURL(data.url)}/@@images/image`;
                         if (data.size === 'm')
                           return `${flattenToAppURL(
                             data.url,
@@ -295,13 +332,14 @@ class Edit extends Component {
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/mini`;
-                        return `${flattenToAppURL(
-                          data.url,
-                        )}/@@images/image/great`;
+                        return `${flattenToAppURL(data.url)}/@@images/image`;
                       })()
                     : data.url
                 }
+                sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}
+                loading="lazy"
+                responsive={true}
               />
               <div className={`copyright-wrapper ${copyrightPosition}`}>
                 {copyright && showCopyright ? (
@@ -332,7 +370,11 @@ class Edit extends Component {
                         {this.state.dragging && <Dimmer active></Dimmer>}
                         {this.state.uploading && (
                           <Dimmer active>
-                            <Loader indeterminate>Uploading image</Loader>
+                            <Loader indeterminate>
+                              {this.props.intl.formatMessage(
+                                messages.uploadingImage,
+                              )}
+                            </Loader>
                           </Dimmer>
                         )}
                         <div className="no-image-wrapper">
@@ -345,7 +387,24 @@ class Edit extends Component {
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   e.preventDefault();
-                                  this.props.openObjectBrowser();
+                                  this.props.openObjectBrowser({
+                                    onSelectItem: (
+                                      url,
+                                      { title, image_field, image_scales },
+                                    ) => {
+                                      this.props.onChangeBlock(
+                                        this.props.block,
+                                        {
+                                          ...this.props.data,
+                                          url,
+                                          image_field,
+                                          image_scales,
+                                          alt:
+                                            this.props.data.alt || title || '',
+                                        },
+                                      );
+                                    },
+                                  });
                                 }}
                               >
                                 <Icon name={navTreeSVG} size="24px" />

package/src/customizations/volto/components/manage/Blocks/Image/Edit.test.jsx

@@ -1,10 +1,16 @@
-import React from 'react';
+import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
+import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import Edit from './Edit';
-import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import { Image } from '@plone/volto/components';
+import { getImageBlockSizes } from './Edit';
+
+config.set('components', {
+  Image: { component: Image },
+});
 
 const mockStore = configureMockStore();
 const { settings } = config;
@@ -25,6 +31,7 @@ config.blocks.blocksConfig = {
       addPermission: [],
       view: [],
     },
+    getSizes: getImageBlockSizes,
   },
 };
 const blockId = '1234';

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -9,8 +9,12 @@ import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
-import { withBlockExtensions } from '@plone/volto/helpers';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  withBlockExtensions,
+} from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 
 /**
@@ -19,131 +23,126 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
  * @extends Component
  */
 export const View = (props) => {
-  const { data, detached } = props;
-  const href = data?.href?.[0]?.['@id'] || '';
+  const { className, data, detached, style } = props;
   const { copyright, copyrightIcon, copyrightPosition } = data;
-  // const [hovering, setHovering] = React.useState(false);
-  const [viewLoaded, setViewLoaded] = React.useState(false);
-
+  const href = data?.href?.[0]?.['@id'] || '';
   const showCopyright = data?.size === 'l' || !data.size;
 
-  React.useEffect(() => {
-    setViewLoaded(true);
-  }, []);
+  const Image = config.getComponent({ name: 'Image' }).component;
 
   return (
     <>
-      {viewLoaded && (
+      <div
+        className={cx(
+          'block image align',
+          {
+            center: !Boolean(data.align),
+            detached,
+          },
+          data.align,
+          className,
+        )}
+        style={style}
+      >
         <div
           className={cx(
-            'block image align',
+            'image-block-container',
             {
-              center: !Boolean(data.align),
-              detached,
+              large: data.size === 'l',
+              medium: data.size === 'm',
+              small: data.size === 's',
             },
-            data.align,
+            data?.align ? data?.align : '',
           )}
         >
-          <div
-            className={cx(
-              'image-block-container',
-              {
-                large: data.size === 'l',
-                medium: data.size === 'm',
-                small: data.size === 's',
-              },
-              data?.align ? data?.align : '',
-            )}
-          >
-            {data.url && (
-              <>
-                {(() => {
-                  const image = (
-                    <>
-                      <img
-                        className={cx(
-                          {
-                            'full-width': data.align === 'full',
-                            large: data.size === 'l',
-                            medium: data.size === 'm',
-                            small: data.size === 's',
-                          },
-                          data?.styles?.objectPosition,
-                        )}
-                        src={
-                          isInternalURL(data.url)
-                            ? // Backwards compat in the case that the block is storing the full server URL
-                              (() => {
-                                if (data.align === 'full')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/huge`;
-                                if (data.size === 'l')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/great`;
-                                if (data.size === 'm')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/preview`;
-                                if (data.size === 's')
-                                  return `${flattenToAppURL(
-                                    data.url,
-                                  )}/@@images/image/mini`;
+          {data.url && (
+            <>
+              {(() => {
+                const image = (
+                  <>
+                    <Image
+                      className={cx(
+                        {
+                          'full-width': data.align === 'full',
+                          large: data.size === 'l',
+                          medium: data.size === 'm',
+                          small: data.size === 's',
+                        },
+                        data?.styles?.objectPosition,
+                      )}
+                      item={
+                        data.image_scales
+                          ? {
+                              '@id': data.url,
+                              image_field: data.image_field,
+                              image_scales: data.image_scales,
+                            }
+                          : undefined
+                      }
+                      src={
+                        data.image_scales
+                          ? undefined
+                          : isInternalURL(data.url)
+                          ? // Backwards compat in the case that the block is storing the full server URL
+                            (() => {
+                              if (data.size === 'l')
+                                return `${flattenToAppURL(
+                                  data.url,
+                                )}/@@images/image`;
+                              if (data.size === 'm')
+                                return `${flattenToAppURL(
+                                  data.url,
+                                )}/@@images/image/preview`;
+                              if (data.size === 's')
                                 return `${flattenToAppURL(
                                   data.url,
-                                )}/@@images/image/great`;
-                              })()
-                            : data.url
-                        }
-                        alt={data.alt || ''}
-                        loading="lazy"
-                      />
-                      <div
-                        // onMouseEnter={() => setHovering(true)}
-                        // onMouseLeave={() => setHovering(false)}
-                        className={`copyright-wrapper ${
-                          copyrightPosition ? copyrightPosition : 'left'
-                        }`}
-                      >
-                        {copyright && showCopyright ? (
-                          <Copyright copyrightPosition={copyrightPosition}>
-                            <Copyright.Icon>
-                              <Icon className={copyrightIcon} />
-                            </Copyright.Icon>
-                            {/*<div*/}
-                            {/*  className={cx(*/}
-                            {/*    'copyright-hover-container',*/}
-                            {/*    !hovering ? 'hiddenStructure' : '',*/}
-                            {/*  )}*/}
-                            {/*>*/}
-                            <Copyright.Text>{copyright}</Copyright.Text>
-                            {/*</div>*/}
-                          </Copyright>
-                        ) : (
-                          ''
-                        )}
-                      </div>
-                    </>
+                                )}/@@images/image/mini`;
+                              return `${flattenToAppURL(
+                                data.url,
+                              )}/@@images/image`;
+                            })()
+                          : data.url
+                      }
+                      sizes={config.blocks.blocksConfig.image.getSizes(data)}
+                      alt={data.alt || ''}
+                      loading="lazy"
+                      responsive={true}
+                    />
+                    <div
+                      className={`copyright-wrapper ${
+                        copyrightPosition ? copyrightPosition : 'left'
+                      }`}
+                    >
+                      {copyright && showCopyright ? (
+                        <Copyright copyrightPosition={copyrightPosition}>
+                          <Copyright.Icon>
+                            <Icon className={copyrightIcon} />
+                          </Copyright.Icon>
+                          <Copyright.Text>{copyright}</Copyright.Text>
+                        </Copyright>
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  </>
+                );
+                if (href) {
+                  return (
+                    <UniversalLink
+                      href={href}
+                      openLinkInNewTab={data.openLinkInNewTab}
+                    >
+                      {image}
+                    </UniversalLink>
                   );
-                  if (href) {
-                    return (
-                      <UniversalLink
-                        href={href}
-                        openLinkInNewTab={data.openLinkInNewTab}
-                      >
-                        {image}
-                      </UniversalLink>
-                    );
-                  } else {
-                    return image;
-                  }
-                })()}
-              </>
-            )}
-          </div>
+                } else {
+                  return image;
+                }
+              })()}
+            </>
+          )}
         </div>
-      )}
+      </div>
     </>
   );
 };