Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Nested blocks don't work in Lexical (Payload 2.0)

default discord avatar
dr_mintlast year
2

Very excited about blocks in rich text. However, I quickly found something unexpected.


I'm trying to use a

transcript

block inside Lexical Rich Text field. The

transcript

block has only one

lines

field which is also a block field (which can contain

cue

or

line

blocks).


I can create a

transcript

block without problems, but I can't add blocks to its

lines

field.



I'm tried in a minimal setup using create-payload-app, changing the RTE to Lexical, and adding the following

transcript

block:



export const transcriptBlock: Block = {
  slug: "transcriptBlock",
  labels: { singular: "Transcript", plural: "Transcripts" },
  fields: [
    {
      name: "lines",
      type: "blocks",
      required: true,
      admin: { initCollapsed: true },
      blocks: [
        {
          slug: "lineBlock",
          labels: { singular: "Line", plural: "Lines" },
          fields: [
            {
              name: "content",
              type: "richText",
              required: true,
            },
          ],
        },
        {
          slug: "cueBlock",
          labels: { singular: "Cue", plural: "Cues" },
          fields: [
            {
              name: "content",
              type: "textarea",
              required: true,
            },
          ],
        },
      ],
    },
  ],
};


I also have a collection to test the RTE called

Posts

export const Posts: CollectionConfig = {
  slug: "posts",
  admin: {
    useAsTitle: "title",
  },
  fields: [
    { name: "title", type: "text", required: true },
    { name: "content", type: "richText" },
  ],
};


I'll open a GitHub issue later today, unless someone points out a blatant mistake.

  • discord user avatar
    alessiogr
    last year

    That does look like an issue. Could you open a GitHub issue for that? Just makes it easier to keep track of it!

  • default discord avatar
    dr_mintlast year

    Thanks for the reply Alessio, here:

    https://github.com/payloadcms/payload/issues/3531

    Sorry I didn't have the time to make a fork and have a reproduction ready tonight 🙇‍♂️

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.