Custom block from own server

[knajjars]

Hi, I would like to know how to implement custom blocks on component initialization. Let's say I want to load a header and footer that I have stored somewhere locally.

 <EmailEditor
          ref={editor => (this.editor = editor)}
          onLoad={this.onLoad}
          onDesignLoad={this.onDesignLoad}
          options={{
            appearance: { theme: "dark" },
            blocks: [
              {
                /* HEADER BLOCK */
              },
              {
                /* FOOTER BLOCK */
              }
            ],
            mergeTags: [
              { name: "Salutation", value: "{{salutation}}" },
              { name: "First Name", value: "{{first_name}}" },
              { name: "Last Name", value: "{{last_name}}" }
            ]
          }}
        />

Is this possible to accomplish? There is not a lot of explanation on official docs regarding this. Thanks

[SchmidtClaudia]

I have the same question. I created two different blocks with the GUI block builder and copied the json to my component trying to load on component creation like shown in the example above. But I always get the default empty blocks listed in the menu not my custom ones. Any hint on this?

[congweibai]

Mock block format like used in Unlayer:

const customBlock = [
  {
    id: 229135,
    // myInsightsDesign is template json you want to use
    data: myInsightsDesign,
    category: "test block",
    tags: [],
    custom: false,
  },
]

<EmailEditor
     ref={emailEditorRef}
     options={{
     blocks: [...customBlock],
      }}
/>