Field Plugin SDK v1 Stable Release

We are happy to announce the stable release of Field Plugin SDK v1. Field Plugin SDK helps you create field plugins for your Storyblok projects in vanilla JavaScript, React, Vue, and any other frameworks.

What's changed since beta

For those following this project, here's a summary of the key changes since the beta version.

Breaking change

The setter function pattern is removed from plugin.actions.setModalOpen and plugin.actions.setContent.

-type SetModalOpen = (newValue: boolean | (prevValue: boolean) => boolean) => void;
+type SetModalOpen = (newValue: boolean) => Promise<FieldPluginData>;

-type SetContent = (content: TContent | (prevContent: TContent) => TContent) => void;
+type SetContent = (content: TContent) => Promise<FieldPluginData>;

validateContent

createFieldPlugin and useFieldPlugin now accepts an option called validateContent, which allows you to

• validate the content
• make changes before sending it to the Storyblok Visual Editor
• provide type-safety

const plugin = useFieldPlugin({
  // For example,
  validateContent: (content: unknown) => {
    if (typeof content === 'string') {
      return {
        content,
      }
    } else {
      return {
        content,
        error: `content is expected to be a string (actual value: ${JSON.stringify(content)})`,
      }
    }
  }
})

Manifest file

The new templates come with a manifest file named field-plugin.config.json

{
  "options": [
    {
      "name": "somePredefinedOption",
      "value": "its value"
    }
  ]
}

which can be accessed like the following:

const { type, data, actions } = useFieldPlugin()
console.log(data.options.somePredefinedOption)

What's inside the SDK

The Field Plugin SDK comprises three essential components:

Library

The library empowers developers to create plugins using their preferred frontend framework. This flexibility allows you to leverage your existing skills and create custom plugins that perfectly align with your needs.

Command Line Interface (CLI)

The CLI is designed to streamline your development experience. It offers multiple templates, making it easy for developers to get started quickly. Moreover, it promotes the adoption of Continuous Integration and Continuous Deployment (CI/CD) processes, enabling you to build robust and efficient workflows.

Sandbox

To ensure a smooth and hassle-free experience, we have also developed a Sandbox environment. This Sandbox provides a dedicated space for testing and sharing your field plugins before they are ready for production. It offers a safe and controlled environment to fine-tune your plugins and gather valuable feedback from stakeholders.

Learn More

You can learn more about the Field Plugin SDK: https://www.storyblok.com/docs/plugins/field-plugins/introduction

Comments

[Kai Eichinger]

Is the "Learn More" section supposed to link to some docs? :D

I'm kinda looking forward to exploring the field plugins, now that they're stable. Is it possible to re-use some existing Storyblok fields (e.g. the components underlying the link field) and modify them? There are some limitations that we've already reported via Service Desk, which we may want to work around using a custom field plugin, if possible.

[Eunjae Lee]

Hi @keichinger I'm sorry for missing your reply. And thanks for the question. Unfortunately it's not possible to re-use built-in Storyblok fields in custom field plugins. Creating custom field plugins with the SDK is much easier. I hope it improves your workflow. Feel free to ask if you have any questions.