@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.21

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -4,6 +4,8 @@ import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
+import { getImageBlockSizes } from './utils';
+import config from '@plone/volto/registry';
 import { View } from './View';
 
 const mockStore = configureStore();
@@ -15,6 +17,24 @@ const store = mockStore({
   },
 });
 
+config.blocks.blocksConfig = {
+  image: {
+    id: 'image',
+    title: 'Image',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    getSizes: getImageBlockSizes,
+  },
+};
+
 describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
     const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);

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

@@ -1,10 +1,6 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  Source: {
-    id: 'Source',
-    defaultMessage: 'Source',
-  },
   Image: {
     id: 'Image',
     defaultMessage: 'Image',
@@ -45,7 +41,7 @@ export function ImageSchema({ formData, intl }) {
       {
         id: 'default',
         title: 'Default',
-        fields: [...(formData.url ? ['url', 'alt', 'align', 'size'] : [])],
+        fields: [...(formData.url ? ['alt', 'align', 'size'] : [])],
       },
       ...(formData.url
         ? [
@@ -58,10 +54,6 @@ export function ImageSchema({ formData, intl }) {
         : []),
     ],
     properties: {
-      url: {
-        title: intl.formatMessage(messages.Source),
-        widget: 'url',
-      },
       alt: {
         title: intl.formatMessage(messages.AltText),
         description: (

package/src/components/manage/Blocks/Image/utils.js

@@ -0,0 +1,14 @@
+export function getImageBlockSizes(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;
+}

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

@@ -12,7 +12,7 @@ import { Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
 
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 
@@ -79,11 +79,17 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data, properties } = this.props;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
 
+    const hasImage = !!properties.image;
+    const hasImageData = hasImage && !!properties.image.data;
+    const className = cx('responsive', { 'full-image': data.align === 'full' });
+    const altText = data.image_caption || properties.image_caption || '';
+
     return (
       <div
         className={cx(
@@ -94,7 +100,7 @@ class Edit extends Component {
           data.align,
         )}
       >
-        {!properties.image && (
+        {!hasImage && (
           <Message>
             <center>
               <img src={imageBlockSVG} alt="" />
@@ -102,15 +108,31 @@ class Edit extends Component {
             </center>
           </Message>
         )}
-        {properties.image && (
+        {hasImage && hasImageData && (
           <img
-            className={cx({ 'full-width': data.align === 'full' })}
-            src={
-              properties.image.data
-                ? `data:${properties.image['content-type']};base64,${properties.image.data}`
-                : flattenToAppURL(properties.image.download)
-            }
-            alt={data.image_caption || ''}
+            className={className}
+            src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+            width={properties.image.width}
+            height={properties.image.height}
+            alt={altText}
+            style={{
+              aspectRatio: `${properties.image.width}/${properties.image.height}`,
+            }}
+          />
+        )}
+        {hasImage && !hasImageData && (
+          <Image
+            className={className}
+            item={properties}
+            imageField="image"
+            sizes={(() => {
+              if (data.align === 'full' || data.align === 'center')
+                return '100vw';
+              if (data.align === 'left' || data.align === 'right')
+                return '50vw';
+              return undefined;
+            })()}
+            alt={altText}
           />
         )}
         <SidebarPortal selected={this.props.selected}>

package/src/components/manage/Blocks/LeadImage/Edit.test.jsx

@@ -20,7 +20,17 @@ test('renders an edit Lead Image block component', () => {
         data={{}}
         properties={{
           image: {
-            download: 'image.png',
+            download: 'http://localhost:3000/image.png',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download:
+                  'http://localhost:3000/image.png/@@images/image/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
           },
         }}
         selected={false}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Accordion, Grid, Segment } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { CheckboxWidget, Icon, TextWidget } from '@plone/volto/components';
+import {
+  CheckboxWidget,
+  Icon,
+  Image,
+  TextWidget,
+} from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
 
@@ -90,14 +95,28 @@ const LeadImageSidebar = ({
         <>
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
-            <img
-              src={
-                properties.image.data
-                  ? `data:${properties.image['content-type']};base64,${properties.image.data}`
-                  : flattenToAppURL(properties.image.scales.mini.download)
-              }
-              alt={properties.image_caption || ''}
-            />
+            {properties.image.data && (
+              <img
+                // TODO understand when this actually happens
+                src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+                width={properties.image.width}
+                height={properties.image.height}
+                alt={data.image_caption || properties.image_caption || ''}
+                className="responsive"
+                style={{
+                  aspectRatio: `${properties.image.width} / ${properties.image.height}`,
+                }}
+              />
+            )}
+            {!properties.image.data && (
+              <Image
+                item={properties}
+                imageField="image"
+                alt={data.image_caption || properties.image_caption || ''}
+                responsive={true}
+                sizes="188px"
+              />
+            )}
           </Segment>
           <Segment className="form sidebar-image-data">
             <TextWidget

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -20,9 +20,15 @@ test('renders a Lead Image block Sidebar component', () => {
         data={{}}
         properties={{
           image: {
+            download: 'http://localhost:3000/image.png',
+            width: 400,
+            height: 400,
             scales: {
-              mini: {
-                download: 'image.png',
+              preview: {
+                download:
+                  'http://localhost:3000/image.png/@@images/image/image-400.png',
+                width: 400,
+                height: 400,
               },
             },
           },

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

@@ -7,51 +7,63 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-
-import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-const View = ({ data, properties }) => (
-  <p
-    className={cx(
-      'block image align',
-      {
-        center: !Boolean(data.align),
-      },
-      data.align,
-    )}
-  >
-    {properties.image && (
-      <>
-        {(() => {
-          const image = (
-            <img
-              className={cx({ 'full-width': data.align === 'full' })}
-              src={flattenToAppURL(properties.image.download)}
-              alt={properties.image_caption || ''}
-            />
-          );
-          if (data.href) {
-            return (
-              <UniversalLink
-                href={data.href}
-                openLinkInNewTab={data.openLinkInNewTab}
-              >
-                {image}
-              </UniversalLink>
+const View = ({ data, properties }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  return (
+    <p
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {properties.image && (
+        <>
+          {(() => {
+            const image = (
+              <Image
+                className={cx({ 'full-width': data.align === 'full' })}
+                item={properties}
+                imageField="image"
+                sizes={(() => {
+                  if (data.align === 'full' || data.align === 'center')
+                    return '100vw';
+                  if (data.align === 'left' || data.align === 'right')
+                    return '50vw';
+                  return undefined;
+                })()}
+                alt={properties.image_caption || ''}
+                responsive={true}
+              />
             );
-          } else {
-            return image;
-          }
-        })()}
-      </>
-    )}
-  </p>
-);
+            if (data.href) {
+              return (
+                <UniversalLink
+                  href={data.href}
+                  openLinkInNewTab={data.openLinkInNewTab}
+                >
+                  {image}
+                </UniversalLink>
+              );
+            } else {
+              return image;
+            }
+          })()}
+        </>
+      )}
+    </p>
+  );
+};
 
 /**
  * Property types.

package/src/components/manage/Blocks/LeadImage/View.test.jsx

@@ -8,7 +8,17 @@ test('renders a view image component', () => {
       data={{}}
       properties={{
         image: {
-          download: 'image.png',
+          download: 'http://localhost:3000/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image.png/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
         },
       }}
     />,

package/src/components/manage/Blocks/Listing/SummaryTemplate.jsx

@@ -27,7 +27,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
             <ConditionalLink item={item} condition={!isEditMode}>
               <Component componentName="PreviewImage" item={item} alt="" />
               <div className="listing-body">
-                <h3>{item.title ? item.title : item.id}</h3>
+                <h3>{item.title || item.id}</h3>
                 <p>{item.description}</p>
               </div>
             </ConditionalLink>

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from './utils';
+import { isInternalURL } from '@plone/volto/helpers';
 import { MaybeWrap } from '@plone/volto/components';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -22,28 +21,11 @@ const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
-  const imageOverride = data.preview_image?.[0];
-  const align = data?.styles?.align;
+  const image = data.preview_image?.[0];
 
+  const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
 
-  let renderedImage = null;
-  if (href && (imageOverride || href.hasPreviewImage || href.image_field)) {
-    let Image = config.getComponent('Image').component;
-    if (Image) {
-      // custom image component expects item summary as src
-      renderedImage = (
-        <Image src={imageOverride || href} alt="" loading="lazy" />
-      );
-    } else {
-      // default img expects string src
-      const src = flattenToAppURL(
-        getTeaserImageURL({ href, imageOverride, align }),
-      );
-      renderedImage = <img src={src} alt="" loading="lazy" />;
-    }
-  }
-
   return (
     <div className={cx('block teaser', className)}>
       <>
@@ -68,8 +50,16 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {renderedImage && (
-                <div className="image-wrapper">{renderedImage}</div>
+              {(href.hasPreviewImage || href.image_field || image) && (
+                <div className="image-wrapper">
+                  <Image
+                    item={image || href}
+                    imageField={image ? image.image_field : href.image_field}
+                    alt=""
+                    loading="lazy"
+                    responsive={true}
+                  />
+                </div>
               )}
               <div className="content">
                 {data?.head_title && (

package/src/components/manage/Contents/Contents.jsx

@@ -450,7 +450,7 @@ class Contents extends Component {
       sort_on: this.props.sort?.on || 'getObjPositionInParent',
       sort_order: this.props.sort?.order || 'ascending',
       isClient: false,
-      linkIntegrityBreakages: '',
+      linkIntegrityBreakages: [],
     };
     this.filterTimeout = null;
   }
@@ -1236,7 +1236,10 @@ class Contents extends Component {
                             Show all items
                           </Button>
                         )}
-                        {this.state.linkIntegrityBreakages.length > 0 ? (
+                        {this.state.linkIntegrityBreakages.reduce(
+                          (a, b) => a + b.breaches.length,
+                          0,
+                        ) ? (
                           <div>
                             <h3>
                               {this.props.intl.formatMessage(
@@ -1249,9 +1252,8 @@ class Contents extends Component {
                               )}
                             </p>
                             <ul className="content">
-                              {map(
-                                this.state.linkIntegrityBreakages,
-                                (item) => (
+                              {map(this.state.linkIntegrityBreakages, (item) =>
+                                item.breaches.length ? (
                                   <li key={item['@id']}>
                                     <a href={item['@id']}>{item.title}</a>
                                     <p>
@@ -1269,7 +1271,7 @@ class Contents extends Component {
                                       ))}
                                     </ul>
                                   </li>
-                                ),
+                                ) : null,
                               )}
                             </ul>
                           </div>

package/src/components/manage/Sidebar/AlignBlock.jsx

@@ -57,7 +57,7 @@ const AlignBlock = ({
   return (
     <div className="align-buttons">
       {actions.map((action) => (
-        <Button.Group>
+        <Button.Group key={action}>
           <Button
             icon
             basic

package/src/components/theme/Image/Image.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * Image component
+ * @param {object} item - Context item that has the image field (can also be a catalog brain or summary)
+ * @param {string} imageField - Key of the image field inside the item, or inside the image_scales object of the item if it is a catalog brain or summary
+ * @param {string} src - URL of the image to be used if the item field is not available
+ * @param {string} alt - Alternative text for the image
+ * @param {boolean} loading - (default: eager) set to `lazy` to lazy load the image
+ * @param {boolean} responsive - (default: false) set to `true` to add the `responsive` class to the image
+ * @param {string} className - Additional classes to add to the image
+ */
+export default function Image({
+  item,
+  imageField,
+  src,
+  alt = '',
+  loading = 'eager',
+  responsive = false,
+  className = '',
+  ...imageProps
+}) {
+  if (!item && !src) return null;
+
+  // TypeScript hints for editor autocomplete :)
+  /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
+  const attrs = {};
+
+  if (!item && src) {
+    attrs.src = src;
+    attrs.className = cx(className, { responsive });
+  } else {
+    const isFromRealObject = !item.image_scales;
+    const imageFieldWithDefault = imageField || item.image_field || 'image';
+
+    const image = isFromRealObject
+      ? item[imageFieldWithDefault]
+      : item.image_scales[imageFieldWithDefault]?.[0];
+
+    if (!image) return null;
+
+    const isSvg = image['content-type'] === 'image/svg+xml';
+
+    const baseUrl = isFromRealObject ? '' : flattenToAppURL(item['@id'] + '/');
+
+    attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`;
+    attrs.width = image.width;
+    attrs.height = image.height;
+    attrs.style = {
+      aspectRatio: `${image.width} / ${image.height}`,
+      ...imageProps.style,
+    };
+    attrs.className = cx(className, { responsive });
+
+    if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
+      const sortedScales = Object.values(image.scales).sort((a, b) => {
+        if (a.width > b.width) return 1;
+        else if (a.width < b.width) return -1;
+        else return 0;
+      });
+
+      attrs.srcSet = sortedScales
+        .map(
+          (scale) =>
+            `${baseUrl}${flattenToAppURL(scale.download)} ${scale.width}w`,
+        )
+        .join(', ');
+    }
+  }
+
+  if (loading === 'lazy') {
+    attrs.loading = 'lazy';
+    attrs.decoding = 'async';
+  } else {
+    attrs.fetchpriority = 'high';
+  }
+
+  return <img {...attrs} alt={alt} {...imageProps} />;
+}
+
+Image.propTypes = {
+  item: PropTypes.shape({
+    '@id': PropTypes.string,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    image: PropTypes.object,
+  }),
+  imageField: PropTypes.string,
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  loading: PropTypes.string,
+  responsive: PropTypes.bool,
+  className: PropTypes.string,
+};