Design UX of creating a client block

[natdink]

Client blocks can be created by the users based on an existing block or set of blocks (think nested in a container). This allows them to modify/edit blocks to their liking and then 'save' these blocks for future re-use.

This will be particularly effective for client teams with specific branding or those creating a variety of apps/multi-page apps where they want a consistent look and feel and interaction. It should speed up their development time.

Requirements

• Explore a couple of ways for a user to create a client block (currently the devs have added a "plus" icon button to the hover menu with duplicate and delete - this may conflict with the new options on the container and iterator block)
• Determine how a user would name the client block and associate it with a section (my recommendation is we show them the sections we have on the system block side in a list and then allow them to add their own)
• Determine how a user would add/edit a tooltip for their client block which describes how to use it correctly
• Determine how a user would delete a client block that they created and provide confirmation before deleting
• Explore an option for user to decide whether others can see their block or not
• Allow user to see the image generated by the function/LLM and decide if its good or not? or they just view the image and have no action available

[sayalibhagat-Kanini]

@natdink @bfekadu21 I have designed a flow for the client block section. In this section, we provide an "Add Block" button. Once the user clicks on it, a popup screen opens where I have provided options to select the template, name, section, tooltip, and visibility. In the template dropdown, we show all the blocks that already exist in the system blocks. For the section, I have provided a of dropdown options, so based on the template, users can select the section Name.
After adding all the details, they can check it through the preview. In the preview, I have also added a hover interaction. After previewing, they can save it, and it will be added to the client block section. In the client block, we have provided options for the user to edit or delete a particular block.

[sayalibhagat-Kanini]

@ehynd @bfekadu21 As you mentioned I have updated the designs. I have changed the flow of Community block designs. In Workspace I have added an option to add a block to the community. Also I added the option in right panel from there also we can create a block and add it to the Community block.

[bfekadu21]

@sayalibhagat-Kanini Feedback added in Figma!

[sayalibhagat-Kanini]

@bfekadu21 Added a back button for preview screen.