(Synchronize redundant block id in listing block on pasting) Fix duplicating listing block

docs/source/blocks/ssr.md

@@ -21,10 +21,10 @@ configuration, pointing to a function that returns a list of promises.
 For example:
 
 ```js
-export default ({ dispatch, data, path }) => {
+export default ({ dispatch, id, data, path }) => {
   return [
     dispatch(
-      getQueryStringResults(path, { ...data, fullobjects: 1 }, data.block),
+      getQueryStringResults(path, { ...data, fullobjects: 1 }, id),
     ),
   ];
 };

news/4234.bugfix

@@ -0,0 +1 @@
+Fix duplicating listing block by removing block uid from blocks data. @ksuess

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

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 }) => {
+const getListingBlockAsyncData = ({
+  dispatch,
+  id,
+  data,
+  path,
+  blocksConfig,
+}) => {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -14,8 +20,10 @@ export default ({ dispatch, data, path, blocksConfig }) => {
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        data.block,
+        id,
       ),
     ),
   ];
 };
+
+export default getListingBlockAsyncData;

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

@@ -14,11 +14,16 @@ 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
@@ -45,32 +50,32 @@ 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]?.loading : true;
 
     const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[block]
-        ? querystringResults?.[block]?.items || []
+      querystring?.query?.length > 0 && querystringResults?.[id]
+        ? 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 +85,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 +103,14 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            block,
+            id,
           ),
         );
       } else {
         dispatch(getContent(initialPath, null, null, currentPage));
       }
     }, [
-      block,
+      id,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -118,7 +123,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}

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}