@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

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

@@ -1,10 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import { Button } from 'semantic-ui-react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import {
+  addSubpathPrefix,
+  flattenToAppURL,
+} from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import galleryLeftSVG from '@plone/volto/icons/left-key.svg';
@@ -81,10 +83,10 @@ const ImageGalleryTemplate = ({ items }) => {
   );
   const imagesInfo = renderItems.map((item) => {
     return {
-      original: `${flattenToAppURL(item['@id'])}/@@images/${
+      original: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/large`,
-      thumbnail: `${flattenToAppURL(item['@id'])}/@@images/${
+      thumbnail: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/thumb`,
     };

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

@@ -11,6 +11,7 @@ import MapsSidebar from '@plone/volto/components/manage/Blocks/Maps/MapsSidebar'
 import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -121,7 +122,7 @@ const Edit = React.memo((props) => {
       ) : (
         <Message>
           <center>
-            <img src={mapsBlockSVG} alt="" />
+            <Image src={mapsBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx

@@ -5,11 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

@@ -42,7 +42,7 @@ const blockPropsAreChanged = (prevProps, nextProps) => {
   return isEqual(prev, next);
 };
 
-const applyDefaults = (data, root) => {
+const applyDefaults = (data, root, blockQuery) => {
   const defaultQuery = [
     {
       i: 'path',
@@ -51,7 +51,8 @@ const applyDefaults = (data, root) => {
     },
   ];
 
-  const searchBySearchableText = data.query.filter(
+  const dataQuery = data?.query?.length ? data.query : [];
+  const searchBySearchableText = dataQuery.filter(
     (item) => item['i'] === 'SearchableText',
   ).length;
 
@@ -66,11 +67,27 @@ const applyDefaults = (data, root) => {
       ? { sort_order: 'descending' }
       : {};
 
+  // We start with the base query from the block.
+  // We enhance it with the query from the facets (filters).
+  // We fall back to the default query.
+  let query = blockQuery?.length ? blockQuery : [];
+  if (!query.length) {
+    query = dataQuery.length ? dataQuery : defaultQuery;
+  } else if (dataQuery.length) {
+    // We have both a base query and a filter.  Combine them.
+    // Items in the filter win over items in the base query.
+    const filterKeys = new Set(dataQuery.map((obj) => obj.i));
+    query = [
+      ...dataQuery,
+      ...blockQuery.filter((item) => !filterKeys.has(item.i)),
+    ];
+  }
+
   return {
     ...data,
     ...sort_on,
     ...sort_order,
-    query: data?.query?.length ? data.query : defaultQuery,
+    query,
   };
 };
 
@@ -93,7 +110,7 @@ const SearchBlockView = (props) => {
   }, [dataListingBodyVariation, mode]);
 
   const root = useSelector((state) => state.breadcrumbs.root);
-  const listingBodyData = applyDefaults(searchData, root);
+  const listingBodyData = applyDefaults(searchData, root, data.query?.query);
 
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);

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

@@ -6,12 +6,7 @@ import DateRangeFacet from './DateRangeFacet';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Blocks/Search/components/SelectFacet.test.jsx

@@ -6,12 +6,7 @@ import SelectFacet from './SelectFacet';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
   refreshTeaser: {
     id: 'Refresh source content',
-    defaultMessage: 'Refresh source content',
+    defaultMessage: 'Reset to target',
   },
   invalidTeaser: {
     id: 'Invalid teaser source',
@@ -29,6 +29,16 @@ const messages = defineMessages({
   },
 });
 
+function getImageField(resp) {
+  if (!resp) return null;
+
+  if (resp.preview_image_link) return 'preview_image_link';
+  if (resp.preview_image) return 'preview_image';
+  if (resp.image) return 'image';
+
+  return null;
+}
+
 const TeaserData = (props) => {
   const {
     block,
@@ -58,16 +68,20 @@ const TeaserData = (props) => {
       '@type': resp?.['@type'],
       Description: resp?.description,
       Title: resp.title,
-      hasPreviewImage: resp?.preview_image ? true : false,
+      hasPreviewImage: getImageField(resp) ? true : false,
       head_title: resp.head_title ?? null,
-      image_field: resp?.preview_image
-        ? 'preview_image'
-        : resp?.image
-          ? 'image'
-          : null,
+      image_field: getImageField(resp),
       image_scales: {
         preview_image: [resp?.preview_image],
         image: [resp?.image],
+        preview_image_link: resp?.preview_image_link
+          ? [
+              {
+                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
+                base_path: resp?.preview_image_link?.['@id'],
+              },
+            ]
+          : [],
       },
       title: resp.title,
     };

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

@@ -33,7 +33,7 @@ const TeaserDefaultTemplate = (props) => {
         {!href && isEditMode && (
           <Message>
             <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
+              <Image src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>

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

@@ -22,9 +22,13 @@ const messages = defineMessages({
     id: 'Description',
     defaultMessage: 'Description',
   },
-  head_title: {
+  kicker: {
     id: 'head_title',
-    defaultMessage: 'Head title',
+    defaultMessage: 'Kicker',
+  },
+  kicker_description: {
+    id: 'The kicker is a line of text shown above the title.',
+    defaultMessage: 'The kicker is a line of text shown above the title.',
   },
   teaser: {
     id: 'Teaser',
@@ -88,7 +92,8 @@ export const TeaserSchema = ({ data, intl }) => {
         title: intl.formatMessage(messages.title),
       },
       head_title: {
-        title: intl.formatMessage(messages.head_title),
+        title: intl.formatMessage(messages.kicker),
+        description: intl.formatMessage(messages.kicker_description),
       },
       description: {
         title: intl.formatMessage(messages.description),

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

@@ -12,6 +12,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -82,7 +83,7 @@ const Edit = (props) => {
       ) : (
         <Message>
           <center>
-            <img src={videoBlockSVG} alt="" />
+            <Image src={videoBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Blocks/Video/VideoSidebar.test.jsx

@@ -5,11 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();