Type generation: create Block types individually

[AlessioGr]

Update: This feature request is no longer relevant, as it is now possible via the new interfaceName property: https://payloadcms.com/docs/typescript/generating-types#custom-field-interfaces

---

Currently, blocks in the generated types are all defined inline in the field which is of type blocks. E.g.:

My proposal is to save the blocks into their own types:

Then save the blocks union into its own type:

And use that in the collection:

Why?

This allows me to re-use the individual Block types in my frontend, which is very useful when looping through each block and trying to transform it into html for my front-end.

It would also reduce the size of the generated types if 2 components are using the same blocks ;)

[denolfe]

We've definitely talked about this internally. Seems like it would be a great thing to update.

[cloetensbrecht]

Also waiting for this separate block types

[cloetensbrecht]

A current workaround can be:

import type {Page} from './payload-types'

type Blocks = Page['blocks'][number]
// export each available block
// ex:
export type VideoBlock = Extract<Blocks, {blockType: 'video'}>
export type ImageBlock = Extract<Blocks, {blockType: 'image'}>

[AlessioGr]

I'm closing this discussion, as what I requested is now possible with the interfaceName property: https://payloadcms.com/docs/typescript/generating-types#custom-field-interfaces

Giving a Blocks field an interfaceName now generates a re-usable type for that block