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

package/src/components/manage/Blocks/Block/Order/Order.jsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
+import { toast } from 'react-toastify';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 import find from 'lodash/find';
-import min from 'lodash/min';
+import { messages as defaultMessages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 
 import { flattenTree, getProjection, removeChildrenOf } from './utilities';
 import SortableItem from './SortableItem';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
+const messages = defineMessages({
+  invalidBlockType: {
+    id: 'You can not move this type of block to the new location',
+    defaultMessage: 'You can not move this type of block to the new location',
+  },
+});
+
 export function Order({
   items = [],
   onMoveBlock,
@@ -24,6 +34,7 @@ export function Order({
   const [overId, setOverId] = useState(null);
   const [offsetLeft, setOffsetLeft] = useState(0);
   const [currentPosition, setCurrentPosition] = useState(null);
+  const intl = useIntl();
 
   const {
     DndContext,
@@ -72,6 +83,7 @@ export function Order({
     () => removeChildrenOf(flattenTree(items), activeId ? [activeId] : []),
     [activeId, items],
   );
+
   const projected =
     activeId && overId
       ? getProjection(
@@ -135,16 +147,14 @@ export function Order({
       onDragCancel={handleDragCancel}
     >
       <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
-        {flattenedItems.map(({ id, parentId, depth, data }) => (
+        {flattenedItems.map(({ id, parentId, parentType, depth, data }) => (
           <SortableItem
             key={id}
             id={id}
             parentId={parentId}
+            parentType={parentType}
             data={data}
-            depth={min([
-              id === activeId && projected ? projected.depth : depth,
-              1,
-            ])}
+            depth={id === activeId && projected ? projected.depth : depth}
             indentationWidth={indentationWidth}
             onRemove={removable ? () => handleRemove(id) : undefined}
             onSelectBlock={onSelectBlock}
@@ -178,6 +188,7 @@ export function Order({
     if (activeItem) {
       setCurrentPosition({
         parentId: activeItem.parentId,
+        parentType: activeItem.parentType,
         overId: activeId,
       });
     }
@@ -195,18 +206,24 @@ export function Order({
 
   function handleDragEnd({ active, over }) {
     if (projected && over) {
-      const { depth, parentId } = projected;
+      const { depth, parentId, parentType } = projected;
       const clonedItems = JSON.parse(JSON.stringify(flattenedItems));
       const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
       const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
       const activeTreeItem = clonedItems[activeIndex];
       const oldParentId = activeTreeItem.parentId;
+      const oldParentType = activeTreeItem.parentType;
 
-      clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+      clonedItems[activeIndex] = {
+        ...activeTreeItem,
+        depth,
+        parentId,
+        parentType,
+      };
 
       // Translate position depending on parent
       if (parentId === oldParentId) {
-        // Move from and to toplevel or move within the same grid block
+        // Move from and to toplevel or move within the same sub block
 
         let destIndex = clonedItems[overIndex].index;
         if (clonedItems[overIndex].depth > clonedItems[activeIndex].depth) {
@@ -226,66 +243,97 @@ export function Order({
           },
         });
       } else if (parentId && oldParentId) {
-        // Move from one gridblock to another
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex < activeIndex
-                ? clonedItems[overIndex - 1].parentId
-                  ? clonedItems[overIndex - 1].index + 1
-                  : clonedItems[overIndex].index
-                : overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1,
-            parent: parentId,
-          },
-        });
+        // Move from one subblock to another
+
+        if (parentType === oldParentType) {
+          // Moving within the same type of subblock
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex < activeIndex
+                  ? clonedItems[overIndex - 1].parentId
+                    ? clonedItems[overIndex - 1].index + 1
+                    : clonedItems[overIndex].index
+                  : overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       } else if (oldParentId) {
-        // Moving to the main container from a gridblock
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex > activeIndex
-                ? overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1
-                : clonedItems[overIndex].index,
-            parent: parentId,
-          },
-        });
+        // Moving to the main container from a subblock
+
+        if (oldParentType === 'gridBlock') {
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex > activeIndex
+                  ? overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1
+                  : clonedItems[overIndex].index,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       } else {
-        // Moving from the main container to a gridblock
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex < activeIndex
-                ? clonedItems[overIndex - 1].parentId
-                  ? clonedItems[overIndex - 1].index + 1
-                  : clonedItems[overIndex].index
-                : overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1,
-            parent: parentId,
-          },
-        });
+        // Moving from the main container to a subblock
+
+        if (parentType === 'gridBlock') {
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex < activeIndex
+                  ? clonedItems[overIndex - 1].parentId
+                    ? clonedItems[overIndex - 1].index + 1
+                    : clonedItems[overIndex].index
+                  : overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       }
     }
 
@@ -321,6 +369,7 @@ export function Order({
         } else {
           setCurrentPosition({
             parentId: projected.parentId,
+            parentType: projected.parentType,
             overId,
           });
         }

package/src/components/manage/Blocks/Block/Order/utilities.js

@@ -34,27 +34,44 @@ export function getProjection(
     depth = minDepth;
   }
 
-  return { depth, maxDepth, minDepth, parentId: getParentId() };
+  return { depth, maxDepth, minDepth, ...getParent() };
 
-  function getParentId() {
+  function getParent() {
     if (depth === 0 || !previousItem) {
-      return null;
+      return {
+        parentId: null,
+        parentType: null,
+      };
     }
 
     if (depth <= previousItem.depth) {
-      return previousItem.parentId;
+      return {
+        parentId: previousItem.parentId,
+        parentType: previousItem.parentType,
+      };
     }
 
     if (depth > previousItem.depth) {
-      return previousItem.id;
+      return {
+        parentId: previousItem.id,
+        parentType: previousItem.data?.['@type'] || null,
+      };
     }
 
     const newParent = newItems
       .slice(0, overItemIndex)
       .reverse()
-      .find((item) => item.depth === depth)?.parentId;
-
-    return newParent ?? null;
+      .find((item) => item.depth === depth);
+
+    return newParent
+      ? {
+          parentId: newParent.parentId,
+          parentType: newParent.parentType,
+        }
+      : {
+          parentId: null,
+          parentType: null,
+        };
   }
 }
 
@@ -79,12 +96,12 @@ function getMinDepth({ nextItem }) {
   return 0;
 }
 
-function flatten(items = [], parentId = null, depth = 0) {
+function flatten(items = [], parentId = null, parentType = null, depth = 0) {
   return items.reduce((acc, item, index) => {
     return [
       ...acc,
-      { ...item, parentId, depth, index },
-      ...flatten(item.children, item.id, depth + 1),
+      { ...item, parentId, parentType, depth, index },
+      ...flatten(item.children, item.id, item.data?.['@type'], depth + 1),
     ];
   }, []);
 }

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -5,11 +5,7 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-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/Grid/View.jsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 import config from '@plone/volto/registry';
+import { GridContext } from '@plone/volto/components/manage/Blocks/Grid/context';
 
 const GridBlockView = (props) => {
   const { data, path, className, style } = props;
@@ -29,17 +30,19 @@ const GridBlockView = (props) => {
     >
       {data.headline && <h2 className="headline">{data.headline}</h2>}
 
-      <Grid stackable stretched columns={columns.length}>
-        <RenderBlocks
-          {...props}
-          blockWrapperTag={Grid.Column}
-          metadata={metadata}
-          content={data}
-          location={location}
-          blocksConfig={blocksConfig}
-          isContainer
-        />
-      </Grid>
+      <GridContext.Provider value={columns.length}>
+        <Grid stackable stretched columns={columns.length}>
+          <RenderBlocks
+            {...props}
+            blockWrapperTag={Grid.Column}
+            metadata={metadata}
+            content={data}
+            location={location}
+            blocksConfig={blocksConfig}
+            isContainer
+          />
+        </Grid>
+      </GridContext.Provider>
     </div>
   );
 };

package/src/components/manage/Blocks/Grid/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const GridContext = createContext(1);

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

@@ -7,11 +7,7 @@ import Edit from './Edit';
 
 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(

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

@@ -20,7 +20,11 @@ function Edit(props) {
 
   const handleChange = React.useCallback(
     async (id, image, { title, image_field, image_scales } = {}) => {
-      const url = image ? image['@id'] || image : '';
+      const url = Array.isArray(image)
+        ? image?.[0]?.['@id']
+        : image
+          ? image['@id'] || image
+          : '';
 
       props.onChangeBlock(props.block, {
         ...props.data,

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

@@ -5,11 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-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();
 
@@ -19,6 +15,7 @@ it('renders an Image Block Sidebar component', () => {
       create: {},
       data: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
     intl: {
       locale: 'en',
       messages: {},

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

@@ -43,13 +43,13 @@ const Edit = (props) => {
       {!hasImage && (
         <Message>
           <center>
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <div className="message-text">{placeholder}</div>
           </center>
         </Message>
       )}
       {hasImage && hasImageData && (
-        <img
+        <Image
           className={className}
           src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
           width={properties.image.width}

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

@@ -96,7 +96,7 @@ const LeadImageSidebar = ({
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
             {properties.image.data && (
-              <img
+              <Image
                 // TODO understand when this actually happens
                 src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
                 width={properties.image.width}

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

@@ -6,11 +6,7 @@ import { Provider } from 'react-intl-redux';
 import LeadImageSidebar from './LeadImageSidebar';
 
 vi.mock('@plone/volto/components/manage/Widgets');
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Widgets');
 
 const mockStore = configureStore();
 
@@ -20,6 +16,7 @@ test('renders a Lead Image block Sidebar component', () => {
       locale: 'en',
       messages: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
   const component = renderer.create(

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

@@ -50,6 +50,7 @@ const Edit = React.memo(
   function areEquals(prevProps, nextProps) {
     return !(
       nextProps.selected !== prevProps.selected ||
+      nextProps.index !== prevProps.index ||
       !isEqual(prevProps.data, nextProps.data)
     );
   },

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/Listing/ListingBody.jsx

@@ -12,6 +12,8 @@ import { normalizeString } from '@plone/volto/helpers/Utils/Utils';
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
+
 const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
   let attr = { id };
   const slug = Slugger.slug(normalizeString(data.headline));
@@ -46,6 +48,7 @@ const ListingBody = withQuerystringResults((props) => {
     isFolderContentsListing,
     hasLoaded,
     id,
+    content,
   } = props;
 
   let ListingBodyTemplate;
@@ -82,6 +85,7 @@ const ListingBody = withQuerystringResults((props) => {
           isEditMode={isEditMode}
         />
       )}
+      <SlotRenderer name="aboveListingItems" content={content} data={data} />
       {listingItems?.length > 0 ? (
         <div ref={listingRef}>
           <ListingBodyTemplate

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'