feat(renderer): community block ux update

[KirthikaKumar-K]

Description

Community Block UX for Add/Edit Updated

Changes Made

Changes are made in UI flow.

How to Test

1. Create a Drag and drop app
2. In the left panel you will have the Community Blocks

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

feat(renderer): community block ux update

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Add edit functionality to client blocks

• Refactor block card to show edit/delete on hover

• Enhance AddClientBlockModal: edit, preview, dynamic UI

• Introduce CommunityLayers for block layer reordering

---

Diagram Walkthrough

flowchart LR
  BM["BlocksMenuPanel"] -- "passes edit handler" --> BC["AddBlocksMenuCard"]
  BC -- "edit click" --> CM["AddClientBlockModal"]
  CM -- "uses" --> CL["CommunityLayers"]
  CL -- "update JSON" --> CM

Loading

File Walkthrough

Relevant files

Enhancement

BlocksMenuPanel.tsx Support edit modal in BlocksMenuPanel                                        packages/client/src/components/blocks-workspace/panels/BlocksMenuPanel.tsx Import AddClientBlockModal Add handleOnEditClick to open edit modal Update delete modal title, text and button variants Pass edit handler into AddBlocksMenuCard +21/-5    AddBlocksMenuCard.tsx Add edit/delete buttons on block card                                        packages/client/src/components/designer/AddBlocksMenuCard.tsx Introduce StyledDiv and StyledContainer wrappers Show edit and delete icons on hover for admin Handle edit click via handleOnEditClick prop Remove previous inline delete-only button approach +99/-50  AddClientBlockModal.tsx Extend AddClientBlockModal with edit and preview                  packages/client/src/components/designer/AddClientBlockModal.tsx Support isEdit mode with dynamic modal title Integrate html2canvas preview modal and arrow-back nav Sync form fields with block_json and use CommunityLayers Add preview button, dual modals, and save vs add actions +397/-75 CommunityLayers.tsx New CommunityLayers drag-and-drop component                            packages/client/src/components/designer/CommunityLayers.tsx New drag-and-drop component for block layer reordering Use DndContext, SortableContext, and recursive renderer Styled nodes (SortableLeaf) and collapsible slots Callback onJsonUpdate to propagate JSON changes +334/-0

---

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Undefined callback handleOnEditClick is optional on the card component. Add a guard or default before invoking it to avoid runtime errors when the prop is not provided. <StyledButtonGroupIconButton size="small" onClick={(e) => { e.stopPropagation(); handleOnEditClick(item['id'], item); }} > Missing dependencies The useEffect initializing localBlockItem uses an empty dependency array but references block_json. Include block_json in deps to ensure it runs when the prop changes. useEffect(() => { if (block_json) { setLocalBlockItem(structuredClone(block_json)); } }, []); Query string formatting The GraphQL query embeds raw JSON.stringify output inside a template literal. Unescaped quotes or special characters could break the query—consider proper escaping or encoding. `AddBlock(name=["${data.name}"], section=["${ data.section }"], helperText=["${ data.helperText }"], json=["<encode>${JSON.stringify( newClientBlock, )}</encode>"]);`, );

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Properly initialize block state Initializing localBlockItem as an empty array can cause issues when treating it as an object. Use the incoming block_json or an empty object as the initial state instead. packages/client/src/components/designer/AddClientBlockModal.tsx [96] -const [localBlockItem, setLocalBlockItem] = useState<any>([]); +const [localBlockItem, setLocalBlockItem] = useState<any>(block_json ?? {}); Suggestion importance[1-10]: 7 __ Why: Initializing localBlockItem as [] conflicts with its later use as an object (e.g. accessing .json). Using block_json ?? {} aligns the initial state with the expected shape.	Medium
	Guard optional edit handler Since handleOnEditClick is optional, guard its invocation to avoid runtime errors when the prop is not provided. Use optional chaining to call it only if it exists. packages/client/src/components/designer/AddBlocksMenuCard.tsx [415] -handleOnEditClick(item['id'], item); +handleOnEditClick?.(item['id'], item); Suggestion importance[1-10]: 4 __ Why: Since handleOnEditClick is defined as optional in AddBlocksMenuItemProps, using optional chaining prevents a potential runtime error if the prop is ever omitted. This is a minor but useful defensive improvement.	Low
General	Add missing effect dependency The effect that clones block_json only runs once. Include block_json in its dependency array so it resets whenever the prop changes. packages/client/src/components/designer/AddClientBlockModal.tsx [99-103] useEffect(() => { if (block_json) { setLocalBlockItem(structuredClone(block_json)); } -}, []); +}, [block_json]); Suggestion importance[1-10]: 6 __ Why: The useEffect cloning block_json only runs once, so updates to block_json won’t reset localBlockItem. Adding [block_json] ensures it re-runs when the prop changes.	Low

[johbaxter]

Will approve this, but we do not have the edit functionality in place so no need to show on the UI

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-08-14 *

Added

• Community block add/edit modal with preview and layer reordering

Changed

• Updated community blocks UI flow and card actions for improved UX

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'