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

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment } from 'semantic-ui-react';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { BlockDataForm, Icon } from '@plone/volto/components';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { Segment, Button } from 'semantic-ui-react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import { BlockDataForm, Icon, Image } from '@plone/volto/components';
 import { ImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
   const { blocksConfig, data, block, onChangeBlock } = props;
@@ -17,21 +18,58 @@ const ImageSidebar = (props) => {
         <h2>
           <FormattedMessage id="Image" defaultMessage="Image" />
         </h2>
+        <Button.Group>
+          <Button
+            title={intl.formatMessage(messages.clear)}
+            basic
+            disabled={!data.url}
+            onClick={() => {
+              onChangeBlock(block, {
+                ...data,
+                url: undefined,
+                image_scales: undefined,
+                image_field: undefined,
+                alt: data.url.title === data.alt ? undefined : data.alt,
+              });
+            }}
+          >
+            <Icon name={trashSVG} size="24px" color="red" />
+          </Button>
+        </Button.Group>
       </header>
 
-      <Segment className="sidebar-metadata-container" secondary attached>
+      <Segment
+        className="sidebar-metadata-container image-sidebar"
+        secondary
+        attached
+      >
         {data.url ? (
           <>
-            {data.url.split('/').slice(-1)[0]}
-            {isInternalURL(data.url) && (
-              <img
-                src={`${flattenToAppURL(data.url)}/@@images/image/mini`}
-                alt={data.alt}
-              />
-            )}
-            {!isInternalURL(data.url) && (
-              <img src={data.url} alt={data.alt} style={{ width: '50%' }} />
-            )}
+            <div>{(data.url?.['@id'] ?? data.url).split('/').slice(-1)[0]}</div>
+            <Image
+              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
+                    `${flattenToAppURL(data.url)}/@@images/image/preview`
+                  : data.url
+              }
+              sizes="188px"
+              alt={intl.formatMessage(messages.preview)}
+              loading="lazy"
+              responsive={true}
+              style={{ width: '50%' }}
+            />
           </>
         ) : (
           <>
@@ -68,3 +106,14 @@ ImageSidebar.propTypes = {
 };
 
 export default ImageSidebar;
+
+const messages = defineMessages({
+  preview: {
+    id: 'image_block_preview',
+    defaultMessage: 'Image preview',
+  },
+  clear: {
+    id: 'image_block_clear',
+    defaultMessage: 'Clear image',
+  },
+});

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

@@ -7,16 +7,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 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';
 
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-export const View = ({ data, detached }) => {
+export const View = ({ className, data, detached, properties }) => {
   const href = data?.href?.[0]?.['@id'] || '';
+
+  const Image = config.getComponent({ name: 'Image' }).component;
+
   return (
     <p
       className={cx(
@@ -26,21 +33,33 @@ export const View = ({ data, detached }) => {
           detached,
         },
         data.align,
+        className,
       )}
     >
       {data.url && (
         <>
           {(() => {
             const image = (
-              <img
+              <Image
                 className={cx({
                   'full-width': data.align === 'full',
                   large: data.size === 'l',
                   medium: data.size === 'm',
                   small: data.size === 's',
                 })}
+                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.size === 'l')
@@ -57,8 +76,10 @@ export const View = ({ data, detached }) => {
                       })()
                     : data.url
                 }
+                sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}
                 loading="lazy"
+                responsive={true}
               />
             );
             if (href) {

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>