@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

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',
@@ -37,6 +33,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -45,23 +45,19 @@ export function ImageSchema({ formData, intl }) {
       {
         id: 'default',
         title: 'Default',
-        fields: [...(formData.url ? ['url', 'alt', 'align', 'size'] : [])],
+        fields: [...(formData.url ? ['alt', 'align', 'size'] : [])],
       },
       ...(formData.url
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]
         : []),
     ],
     properties: {
-      url: {
-        title: intl.formatMessage(messages.Source),
-        widget: 'url',
-      },
       alt: {
         title: intl.formatMessage(messages.AltText),
         description: (
@@ -101,3 +97,14 @@ export function ImageSchema({ formData, intl }) {
     required: [],
   };
 }
+
+export const gridImageDisableSizeAndPositionHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => !['align', 'size'].includes(item),
+  );
+  return schema;
+};

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/DefaultTemplate.jsx

@@ -2,10 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink, UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+const DefaultTemplate = ({
+  headlineTag,
+  items,
+  linkTitle,
+  linkHref,
+  isEditMode,
+}) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
 
@@ -19,6 +24,16 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
     link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
   }
 
+  const getTitleTag = (tag) => {
+    const level = tag.slice(-1);
+    if (/\d/.test(level)) {
+      return `h${Number(level) + 1}`;
+    } else {
+      return 'h3';
+    }
+  };
+  const TitleTag = headlineTag ? getTitleTag(headlineTag) : 'h3';
+
   return (
     <>
       <div className="items">
@@ -26,7 +41,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
           <div className="listing-item" key={item['@id']}>
             <ConditionalLink item={item} condition={!isEditMode}>
               <div className="listing-body">
-                <h4>{item.title ? item.title : item.id}</h4>
+                <TitleTag>{item.title ? item.title : item.id}</TitleTag>
                 <p>{item.description}</p>
               </div>
             </ConditionalLink>

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

@@ -26,21 +26,7 @@ const messages = defineMessages({
 const Edit = React.memo(
   (props) => {
     const { data, onChangeBlock, block, selected, pathname } = props;
-
     const intl = useIntl();
-
-    // componentDidMount
-    React.useEffect(() => {
-      if (!data.query) {
-        onChangeBlock(block, {
-          ...data,
-          query: [],
-          block,
-        });
-      }
-      /* eslint-disable react-hooks/exhaustive-deps */
-    }, []);
-
     const placeholder =
       data.placeholder ||
       (data?.querystring?.query?.length

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

@@ -1,14 +1,37 @@
-import React, { createRef } from 'react';
+import React, { createRef, useMemo } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Pagination, Dimmer, Loader } from 'semantic-ui-react';
+import Slugger from 'github-slugger';
 import { Icon } from '@plone/volto/components';
+import { renderLinkElement } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
 import withQuerystringResults from './withQuerystringResults';
+import { normalizeString } from '@plone/volto/helpers';
 
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
+const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
+  let attr = { id };
+  const slug = Slugger.slug(normalizeString(data.headline));
+  attr.id = slug || id;
+  const LinkedHeadline = useMemo(
+    () => renderLinkElement(headlineTag),
+    [headlineTag],
+  );
+  return (
+    <LinkedHeadline
+      mode={!isEditMode && 'view'}
+      children={data.headline}
+      attributes={attr}
+      className={cx('headline', {
+        emptyListing: !listingItems?.length > 0,
+      })}
+    />
+  );
+};
+
 const ListingBody = withQuerystringResults((props) => {
   const {
     data = {},
@@ -22,6 +45,7 @@ const ListingBody = withQuerystringResults((props) => {
     nextBatch,
     isFolderContentsListing,
     hasLoaded,
+    id,
   } = props;
 
   let ListingBodyTemplate;
@@ -50,13 +74,13 @@ const ListingBody = withQuerystringResults((props) => {
   return (
     <>
       {data.headline && (
-        <HeadlineTag
-          className={cx('headline', {
-            emptyListing: !listingItems?.length > 0,
-          })}
-        >
-          {data.headline}
-        </HeadlineTag>
+        <Headline
+          headlineTag={HeadlineTag}
+          id={id}
+          listingItems={listingItems}
+          data={data}
+          isEditMode={isEditMode}
+        />
       )}
       {listingItems?.length > 0 ? (
         <div ref={listingRef}>

package/src/components/manage/Blocks/Listing/ListingBody.test.jsx

@@ -36,6 +36,26 @@ test('renders a ListingBody component', () => {
     content: {
       data: {
         is_folderish: true,
+        blocks: {
+          '839ee00b-013b-4f4a-9b10-8867938fdac3': {
+            '@type': 'listing',
+            block: '839ee00b-013b-4f4a-9b10-8867938fdac3',
+            headlineTag: 'h2',
+            query: [],
+            querystring: {
+              b_size: '2',
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.absolutePath',
+                  v: '/',
+                },
+              ],
+              sort_order: 'ascending',
+            },
+            variation: 'default',
+          },
+        },
       },
     },
     intl: {

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/Listing/getAsyncData.js

@@ -1,7 +1,13 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
 
-export default ({ dispatch, data, path, blocksConfig }) => {
+export default function getListingBlockAsyncData({
+  dispatch,
+  id,
+  data,
+  path,
+  blocksConfig,
+}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -14,8 +20,8 @@ export default ({ dispatch, data, path, blocksConfig }) => {
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        data.block,
+        id,
       ),
     ),
   ];
-};
+}