Fix the condition deciding on listing pagination format so it takes into account container blocks as well

news/4978.bugfix

@@ -0,0 +1 @@
+Fix the condition deciding on listing pagination format so it takes into account container blocks as well @sneridagh

src/config/index.js

@@ -184,6 +184,7 @@ let config = {
     querystringSearchGet: false,
     blockSettingsTabFieldsetsInitialStateOpen: true,
     excludeLinksAndReferencesMenuItem: false,
+    containerBlockTypes: ['gridBlock'],
   },
   experimental: {
     addBlockButton: {

src/helpers/Blocks/Blocks.js

@@ -550,3 +550,25 @@ export const getPreviousNextBlock = ({ content, block }) => {
 
   return [previousBlock, nextBlock];
 };
+
+/**
+ * Given a `block` object and a list of block types, return a list of block ids matching the types
+ *
+ * @function findBlocks
+ * @param {Object} types A list with the list of types to be matched
+ * @return {Array} An array of block ids
+ */
+export function findBlocks(blocks, types, result = []) {
+  const containerBlockTypes = config.settings.containerBlockTypes;
+
+  Object.keys(blocks).forEach((blockId) => {
+    const block = blocks[blockId];
+    if (types.includes(block['@type'])) {
+      result.push(blockId);
+    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
+      findBlocks(block.blocks, types, result);
+    }
+  });
+
+  return result;
+}

src/helpers/Blocks/Blocks.test.js

@@ -20,6 +20,7 @@ import {
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
   blocksFormGenerator,
+  findBlocks,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1284,7 +1285,7 @@ describe('Blocks', () => {
         blocks_layout: { items: [] },
       });
     });
-    it.only('Returns a filled blocks/blocks_layout pair with type block', () => {
+    it('Returns a filled blocks/blocks_layout pair with type block', () => {
       const result = blocksFormGenerator(2, 'teaser');
       expect(Object.keys(result.blocks).length).toEqual(2);
       expect(result.blocks_layout.items.length).toEqual(2);
@@ -1297,3 +1298,60 @@ describe('Blocks', () => {
     });
   });
 });
+
+describe('findBlocks', () => {
+  it('Get all blocks in the first level (main block container)', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+      '5': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '5']);
+  });
+
+  it('Get all blocks, including containers, given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+      '5': {
+        title: 'a container',
+        '@type': 'gridBlock',
+        blocks: {
+          '6': { title: 'title', '@type': 'title' },
+          '7': { title: 'an image', '@type': 'image' },
+          '8': { title: 'description', '@type': 'description' },
+          '9': { title: 'a text', '@type': 'slate' },
+        },
+      },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '8', '9']);
+  });
+});

src/helpers/Utils/usePagination.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import qs from 'query-string';
 import { useSelector } from 'react-redux';
-import { slugify } from '@plone/volto/helpers/Utils/Utils';
+import { findBlocks, slugify } from '@plone/volto/helpers';
 
 /**
  * @function useCreatePageQueryStringKey
@@ -12,13 +12,8 @@ import { slugify } from '@plone/volto/helpers/Utils/Utils';
 const useCreatePageQueryStringKey = (id) => {
   const blockTypesWithPagination = ['search', 'listing'];
   const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
-  const blocksLayout =
-    useSelector((state) => state?.content?.data?.blocks_layout?.items) || [];
-  const displayedBlocks = blocksLayout?.map((item) => blocks[item]);
   const hasMultiplePaginations =
-    displayedBlocks.filter((item) =>
-      blockTypesWithPagination.includes(item['@type']),
-    ).length > 1 || false;
+    findBlocks(blocks, blockTypesWithPagination).length > 1;
 
   return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
 };

src/helpers/index.js

@@ -58,6 +58,7 @@ export {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
 export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
@@ -93,6 +94,7 @@ export {
   arrayRange,
   reorderArray,
   isInteractiveElement,
+  slugify,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {

test-setup-config.js

@@ -83,6 +83,7 @@ config.set('settings', {
   styleClassNameConverters,
   styleClassNameExtenders,
   blockSettingsTabFieldsetsInitialStateOpen: true,
+  containerBlockTypes: [],
 });
 config.set('blocks', {
   blocksConfig: {