Prevent rendering recursion when we have blocks but no blocks_layout

packages/volto/news/6753.bugfix

@@ -0,0 +1 @@
+Fixed rendering recursion error when rendering content in edit mode with blocks but no blocks layout. @JeffersonBledsoe

packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import cloneDeep from 'lodash/cloneDeep';
 import map from 'lodash/map';
-import EditBlock from './Edit';
+import EditBlock from '@plone/volto/components/manage/Blocks/Block/Edit';
 import DragDropList from '@plone/volto/components/manage/DragDropList/DragDropList';
 import {
   getBlocks,
@@ -22,14 +22,14 @@ import {
 } from '@plone/volto/helpers/Blocks/Blocks';
 import { useDetectClickOutside } from '@plone/volto/helpers/Utils/useDetectClickOutside';
 import { useEvent } from '@plone/volto/helpers/Utils/useEvent';
-import EditBlockWrapper from './EditBlockWrapper';
+import EditBlockWrapper from '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper';
 import { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
 import { setUIState } from '@plone/volto/actions/form/form';
 import { useDispatch } from 'react-redux';
 import config from '@plone/volto/registry';
 import { createPortal } from 'react-dom';
 
-import Order from './Order/Order';
+import Order from '@plone/volto/components/manage/Blocks/Block/Order/Order';
 
 const BlocksForm = (props) => {
   const {
@@ -64,15 +64,25 @@ const BlocksForm = (props) => {
   } = props;
 
   const [isClient, setIsClient] = useState(false);
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
   const blockList = getBlocks(properties);
 
-  const dispatch = useDispatch();
-  const intl = useIntl();
+  useEffect(() => {
+    for (const [n, v] of blockList) {
+      if (!v) {
+        const newFormData = deleteBlock(properties, n, intl);
+        onChangeFormData(newFormData);
+      }
+    }
+  }, [blockList, intl, onChangeFormData, properties]);
+
+  const blocksWithData = blockList.filter((block) => !!block[1]);
 
   const ClickOutsideListener = () => {
     onSelectBlock(null);
@@ -260,13 +270,6 @@ const BlocksForm = (props) => {
   // to be removed when the user saves the page next. Otherwise the invalid
   // blocks would linger for ever.
 
-  for (const [n, v] of blockList) {
-    if (!v) {
-      const newFormData = deleteBlock(properties, n, intl);
-      onChangeFormData(newFormData);
-    }
-  }
-
   useEvent('voltoClickBelowContent', () => {
     if (!config.experimental.addBlockButton.enabled || !isMainForm) return;
     onSelectBlock(
@@ -303,7 +306,7 @@ const BlocksForm = (props) => {
       >
         <fieldset className="invisible" disabled={!editable}>
           <DragDropList
-            childList={blockList}
+            childList={blocksWithData}
             onMoveItem={(result) => {
               const { source, destination } = result;
               if (!destination) {

packages/volto/src/helpers/Blocks/Blocks.js

@@ -3,7 +3,6 @@
  * @module helpers/Blocks
  */
 
-import omit from 'lodash/omit';
 import without from 'lodash/without';
 import endsWith from 'lodash/endsWith';
 import find from 'lodash/find';
@@ -126,23 +125,38 @@ export function moveBlock(formData, source, destination) {
 export function deleteBlock(formData, blockId, intl) {
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const { [formData[blocksFieldname]]: _, ...newBlocks } =
+    formData[blocksFieldname];
 
   let newFormData = {
     ...formData,
     [blocksLayoutFieldname]: {
       items: without(formData[blocksLayoutFieldname].items, blockId),
     },
-    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
+    [blocksFieldname]: newBlocks ?? {},
   };
 
   if (newFormData[blocksLayoutFieldname].items.length === 0) {
-    newFormData = addBlock(
-      newFormData,
-      config.settings.defaultBlockType,
-      0,
-      {},
-      intl,
-    );
+    if (Object.keys(newFormData.blocks).length > 0) {
+      const existingTitleBlock = Object.entries(formData.blocks).find(
+        ([blockId, blockValue]) => blockValue['@type'] === 'title',
+      )?.[0];
+      // Some messy syntax to get every block other than the already found title block
+      const { [existingTitleBlock]: _, ...existingOtherBlocks } =
+        newFormData.blocks;
+      newFormData[blocksLayoutFieldname].items = [
+        existingTitleBlock,
+        ...Object.keys(existingOtherBlocks ?? {}),
+      ];
+    } else {
+      newFormData = addBlock(
+        newFormData,
+        config.settings.defaultBlockType,
+        0,
+        {},
+        intl,
+      );
+    }
   }
 
   return newFormData;