Empty block as place holder for UI

[digital walrus]

Hi. I have page collection where entire page is dynamic generated using the data and layout from payload. i been using empty block as place holder in the front i loop through and check the blocktype and place the appropriate component.

I'm is there a better way to do this?

[woven zodiac]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• What is Payload? - What does "headless" mean? - Why Payload?
• Blocks Field
• Upload Field
• Blocks Field - Block configs
• Localization - Field by field localization

[digital walrus]

This is my logic for handling this:

export const PlaceHolderForUi = (label: string) => ({
    slug: label.toLocaleLowerCase().replaceAll(' ', '_'),
    labels: {
      singular: label,
      plural: label,
    },
    fields:[
        {
            name: "title",
            label: `This block will added ${label} component in UI`,
            type: "group",
            fields:[],
        }
    ]
})

Let me if there is better way to do it.

[blissful shoal]

iirc blocks are not required to have fields, you can pass an empty array

But I don't see anything wrong with your approach

[digital walrus]

i mean empty block doesn't have anything and looks ugly. with this approach. it has some text and not empty. I'm wondering if there is a better way.

[blissful shoal]

probably not

If you need the flexibility of blocks, this is fine