Skip to content

Prevent rendering recursion when we have blocks but no blocks_layout #6753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Prevent rendering recursion when we have blocks but no blocks_layout #6753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eba61ab
Recreate a valid blocks layout on delete from existing data if possible
JeffersonBledsoe Feb 13, 2025
4ad982a
Wait until rendering has finished in BlocksForm before trying to upda…
JeffersonBledsoe Feb 13, 2025
bc271a3
Fix deps list for useEffect
JeffersonBledsoe Feb 13, 2025
b3d940c
Merge branch 'main' into handle-existing-data-in-delete-block
JeffersonBledsoe Feb 13, 2025
e502bd3
changelog
JeffersonBledsoe Feb 13, 2025
2f21af3
Use full path imports for easier shadowing
JeffersonBledsoe Feb 13, 2025
5ce7466
Another full path import
JeffersonBledsoe Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/volto/news/6753.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fixed rendering recursion error when rendering content in edit mode with blocks but no blocks layout. @JeffersonBledsoe
31 changes: 17 additions & 14 deletions packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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.
Comment on lines 270 to 271
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment also needs to be moved/updated afaict


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(
Expand Down Expand Up @@ -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) {
Expand Down
32 changes: 23 additions & 9 deletions packages/volto/src/helpers/Blocks/Blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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];
Comment on lines +128 to +129
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have never used destructuring to omit things with dynamic keys, it's a little convoluted but I can see why it's beneficial to remove lodash. Isn't there an error here though? Shouldn't this be like this?

Suggested change
const { [formData[blocksFieldname]]: _, ...newBlocks } =
formData[blocksFieldname];
const { [formData[blocksFieldname][blockId]]: _, ...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;
Expand Down