From eba61ab7bc1f3743e55ff399656dad7bd1ea8dfa Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:29:32 +0000 Subject: [PATCH 1/6] Recreate a valid blocks layout on delete from existing data if possible --- packages/volto/src/helpers/Blocks/Blocks.js | 32 +++++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/volto/src/helpers/Blocks/Blocks.js b/packages/volto/src/helpers/Blocks/Blocks.js index bff936b4ca..5e06e76208 100644 --- a/packages/volto/src/helpers/Blocks/Blocks.js +++ b/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; From 4ad982aa40862410becfc00cd76610633e7435a6 Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:30:53 +0000 Subject: [PATCH 2/6] Wait until rendering has finished in BlocksForm before trying to update block state --- .../manage/Blocks/Block/BlocksForm.jsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index cba2390706..6e9850ec20 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -71,6 +71,17 @@ const BlocksForm = (props) => { const blockList = getBlocks(properties); + useEffect(() => { + for (const [n, v] of blockList) { + if (!v) { + const newFormData = deleteBlock(properties, n, intl); + onChangeFormData(newFormData); + } + } + }, [blockList]); + + const blocksWithData = blockList.filter((block) => !!block[1]); + const dispatch = useDispatch(); const intl = useIntl(); @@ -260,13 +271,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 +307,7 @@ const BlocksForm = (props) => { >
{ const { source, destination } = result; if (!destination) { From bc271a317ed407b31ea05a64c667dbb92717d9d2 Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:39:13 +0000 Subject: [PATCH 3/6] Fix deps list for useEffect --- .../src/components/manage/Blocks/Block/BlocksForm.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index 6e9850ec20..ca5fddb247 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -64,6 +64,8 @@ const BlocksForm = (props) => { } = props; const [isClient, setIsClient] = useState(false); + const intl = useIntl(); + const dispatch = useDispatch(); useEffect(() => { setIsClient(true); @@ -78,13 +80,10 @@ const BlocksForm = (props) => { onChangeFormData(newFormData); } } - }, [blockList]); + }, [blockList, intl, onChangeFormData, properties]); const blocksWithData = blockList.filter((block) => !!block[1]); - const dispatch = useDispatch(); - const intl = useIntl(); - const ClickOutsideListener = () => { onSelectBlock(null); dispatch(setSidebarTab(0)); From e502bd3e8824ab36818f813d626b702c40c423a2 Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:49:59 +0000 Subject: [PATCH 4/6] changelog --- packages/volto/news/6753.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/volto/news/6753.bugfix diff --git a/packages/volto/news/6753.bugfix b/packages/volto/news/6753.bugfix new file mode 100644 index 0000000000..e21d20724b --- /dev/null +++ b/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 From 2f21af3a8d647c9df8eee6ef9f20372475e66a4c Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:55:43 +0000 Subject: [PATCH 5/6] Use full path imports for easier shadowing --- .../volto/src/components/manage/Blocks/Block/BlocksForm.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index ca5fddb247..92973fc72c 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/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, @@ -29,7 +29,7 @@ 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 { From 5ce7466ce8c7ad03b168a9160c96f90cdbe57c49 Mon Sep 17 00:00:00 2001 From: "me@jeffersonbledsoe.com" Date: Thu, 13 Feb 2025 17:58:09 +0000 Subject: [PATCH 6/6] Another full path import --- .../volto/src/components/manage/Blocks/Block/BlocksForm.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index 92973fc72c..06a12d646e 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -22,7 +22,7 @@ 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';