@plone/volto 19.0.0-alpha.9 → 19.0.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   Option,
@@ -12,15 +13,35 @@ import {
   selectFacetValueToQuery,
 } from './base';
 
+const messages = defineMessages({
+  selectOption: {
+    id: 'Select option',
+    defaultMessage: 'Select option',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+});
+
 const SelectFacet = (props) => {
   const { facet, choices, reactSelect, isMulti, onChange, value, isEditMode } =
     props;
+  const intl = useIntl();
   const Select = reactSelect.default;
   const v = Array.isArray(value) && value.length === 0 ? null : value;
 
   return (
     <Select
-      placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+      placeholder={
+        facet?.title ??
+        (facet?.field?.label || intl.formatMessage(messages.select))
+      }
+      aria-label={
+        facet?.title ??
+        facet?.field?.label ??
+        intl.formatMessage(messages.selectOption)
+      }
       className="react-select-container"
       classNamePrefix="react-select"
       options={choices}

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/Search/components/SortOn.jsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -48,6 +49,10 @@ const SortOn = (props) => {
     querystring = {},
     intl,
   } = props;
+  const uniqueId = useId();
+  const sortOnLabelId = `sort-on-label-${uniqueId}`;
+  const selectId = `select-search-sort-on-${uniqueId}`;
+
   const { sortable_indexes } = querystring;
   const Select = reactSelect.default;
 
@@ -75,11 +80,12 @@ const SortOn = (props) => {
       <div className="search-sort-on">
         {showSelectField ? (
           <>
-            <span className="sort-label">
+            <span id={sortOnLabelId} className="sort-label">
               {intl.formatMessage(messages.sortOn)}
             </span>
             <Select
-              id="select-search-sort-on"
+              aria-labelledby={sortOnLabelId}
+              id={selectId}
               name="select-searchblock-sort-on"
               className="search-react-select-container"
               classNamePrefix="react-select"

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

@@ -1,8 +1,21 @@
 import React from 'react';
 import { Radio, Header } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  toggleOption: {
+    id: 'Toggle option',
+    defaultMessage: 'Toggle option',
+  },
+});
 
 const ToggleFacet = (props) => {
+  const intl = useIntl();
   const { facet, isEditMode, onChange, value } = props; // value, choices, isMulti, onChange,
+  const labelText =
+    facet?.title ??
+    facet?.field?.label ??
+    intl.formatMessage(messages.toggleOption);
 
   return (
     <div className="checkbox-facet">
@@ -10,6 +23,7 @@ const ToggleFacet = (props) => {
       <div className="radio">
         <Radio
           toggle
+          aria-label={labelText}
           checked={value || typeof value === 'string'}
           disabled={isEditMode}
           onChange={(e, { checked }) => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -8,6 +8,7 @@ import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
+import { GridContext } from '@plone/volto/components/manage/Blocks/Grid/context';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -18,7 +19,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode, style } = props;
+  const { className, data, isContainer: inGrid, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -26,6 +27,12 @@ const TeaserDefaultTemplate = (props) => {
 
   const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
+  const columns = useContext(GridContext);
+  const sizes = config.blocks.blocksConfig.teaser.getSizes({
+    data,
+    inGrid,
+    columns,
+  });
 
   return (
     <div className={cx('block teaser', className)} style={style}>
@@ -64,6 +71,7 @@ const TeaserDefaultTemplate = (props) => {
                       alt=""
                       loading="lazy"
                       responsive={true}
+                      sizes={sizes}
                     />
                   </div>
                 )