Nested blocks of the same block type?

[benjamin-p-newton]

As per the title, is it possible to have a block type reference itself?

Using the a modified version of the 'Content' block from on of the payload cms templates, I've demonstrated what I'm trying to achieve below:

export const Content: Block = {
  slug: 'content',
  fields: [
    invertBackground,
    {
      name: 'columns',
      type: 'array',
      fields: columnFields,
    },
    {
        name: 'content',
        type: 'blocks',
        blocks: [
            this
        ]
    }
  ],
}

[Wisdommoore]

I am struggling with the same issue, have you found the solution yet?

[benjamin-p-newton]

@Wisdommoore, I don't think I did. It was so long ago I can't recall.

[ZktSn0w]

Hey there, i have got the same issue.
A very unclean but maybe working solution:

const getSectionBlock = (maxDepth: number = 3): Block => {
    return {
        slug: 'section-block',
        labels: {
            plural: {
                de: 'Inhalte',
            },
            singular: {
                de: 'Inhalt',
            },
        },
        fields: {
            ...(maxDepth > 0
                ? [
                      {
                          name: 'nestedBlocks',
                          type: 'blocks',
                          blocks: [
                              getSectionBlock(maxDepth - 1),
                          ],
                      },
                  ]
                : []),
        },
    }
}

export const SectionBlock = getSectionBlock()

Create a function that returns the needed fields and then iterate over a number, in that case maxDepth to prevent maximum call stack exceeded error, which for each iteration returns a spreaded array of a block that calls itself and lowers the maxdepth variable.

[ZktSn0w]

Sorry the code is faulty, here is the working one:

import { Block, Field } from 'payload'

const getSectionBlock = (maxDepth: number = 3): Block => {
    return {
        slug: 'section-block',
        labels: {
            plural: {
                de: 'Inhlate',
            },
            singular: {
                de: 'Inhalt',
            },
        },
        fields: [
            ...(maxDepth > 0
                ? [
                      {
                          name: `nestedBlocks-${maxDepth}`,
                          type: 'blocks',
                          blocks: [getSectionBlock(maxDepth - 1)],
                      } as Field,
                  ]
                : []),
        ],
    }
}

export const SectionBlock = getSectionBlock()