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

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,35 @@
-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 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(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 +43,7 @@ const ListingBody = withQuerystringResults((props) => {
     nextBatch,
     isFolderContentsListing,
     hasLoaded,
+    id,
   } = props;
 
   let ListingBodyTemplate;
@@ -50,13 +72,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,
       ),
     ),
   ];
-};
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import useDeepCompareEffect from 'use-deep-compare-effect';
@@ -14,18 +14,23 @@ function getDisplayName(WrappedComponent) {
 
 export default function withQuerystringResults(WrappedComponent) {
   function WithQuerystringResults(props) {
-    const { data = {}, properties: content, path, variation } = props;
+    const {
+      data = {},
+      id = data.block,
+      properties: content,
+      path,
+      variation,
+    } = props;
     const { settings } = config;
     const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
 
-    const { block } = data;
     const { b_size = settings.defaultPageSize } = querystring; // batchsize
 
     // save the path so it won't trigger dispatch on eager router location change
     const [initialPath] = React.useState(getBaseUrl(path));
 
     const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
-
+    const { currentPage, setCurrentPage } = usePagination(id, 1);
     const adaptedQuery = Object.assign(
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
       {
@@ -37,7 +42,9 @@ export default function withQuerystringResults(WrappedComponent) {
           : {},
       ),
     );
-    const { currentPage, setCurrentPage } = usePagination(querystring, 1);
+    const adaptedQueryRef = useRef(adaptedQuery);
+    const currentPageRef = useRef(currentPage);
+
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
@@ -45,32 +52,31 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? !querystringResults?.[block]?.loading : true;
+    const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
-    const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[block]
-        ? querystringResults?.[block]?.items || []
-        : folderItems;
+    const listingItems = hasQuery
+      ? querystringResults?.[id]?.items || []
+      : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[block]?.total > b_size;
+      hasQuery && querystringResults?.[id]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[block].total / b_size)
+      ? Math.ceil(querystringResults[id].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[block].batching?.prev
+      ? querystringResults[id].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[block].batching?.next
+      ? querystringResults[id].batching?.next
       : null;
 
     const isImageGallery =
@@ -80,7 +86,7 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, block, currentPage),
+          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -98,14 +104,16 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            block,
+            id,
           ),
         );
       } else {
         dispatch(getContent(initialPath, null, null, currentPage));
       }
+      adaptedQueryRef.current = adaptedQuery;
+      currentPageRef.current = currentPage;
     }, [
-      block,
+      id,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -118,7 +126,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[block]?.total}
+        total={querystringResults?.[id]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
@@ -60,9 +59,11 @@ const SearchBlockEdit = (props) => {
   };
 
   const { query = {} } = data || {};
-  useDeepCompareEffect(() => {
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
     onTriggerSearch();
-  }, [query, onTriggerSearch]);
+  }, [deepQuery, onTriggerSearch]);
 
   return (
     <>

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -57,7 +57,7 @@ const applyDefaults = (data, root) => {
 };
 
 const SearchBlockView = (props) => {
-  const { data, searchData, mode = 'view', variation } = props;
+  const { id, data, searchData, mode = 'view', variation } = props;
 
   const Layout = variation.view;
 
@@ -89,6 +89,7 @@ const SearchBlockView = (props) => {
         setSelectedView={setSelectedView}
       >
         <ListingBody
+          id={id}
           variation={{ ...data, ...listingBodyVariation }}
           data={listingBodyData}
           path={props.path}

package/src/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -4,6 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 import { Icon } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { connect } from 'react-redux';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -82,7 +83,9 @@ const DateRangeFacet = (props) => {
             noBorder
             showClearDates
             customCloseIcon={<CloseIcon />}
-            displayFormat={moment.localeData(lang).longDateFormat('L')}
+            displayFormat={moment
+              .localeData(toBackendLang(lang))
+              .longDateFormat('L')}
             focusedInput={focused}
             onFocusChange={(focusedInput) => setFocused(focusedInput)}
             onDatesChange={({ startDate, endDate }) => {