User editable label for Block templates

Hi there! Curious if anyone has any tips on how to give the user the ability to edit the label property of each block they add?

Here’s how I have my CopyBlock template set up. Can a prop be passed into the config?

export const CopyBlock = {
  label: "Copy",
  name: "copy",
  key: "copy-block",
  defaultItem: {
    copy:
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
  },
  fields: [
    {
      label: "Title",
      name: "title",
      description:
        "Give this block a unique name. What you write here will show up as the label for this section in the UI",
      component: "text",
    },
    {
      label: "Copy",
      name: "copy",
      description: "Enter and edit copy here.",
      component: "html",
    },
  ],
}

Hope this makes sense and thanks so much for your help!

Hey @Alex you can set itemProps on the template:

 export const CopyBlock = {
  label: "Copy",
  name: "copy",
  // key: "copy-block", // remove the key
  defaultItem: {
    copy:
      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
  },
  itemProps(copyBlockItem) {
    return {
      label: copyBlockItem.title,
    }
  }

As an aside, the key is no longer on the block template (it was never supposed to be there actually) so you can remove that.

Very cool! TYSM @ncphi! Also thanks for the heads up about the key as well.

1 Like