DEV Community

Cover image for Field Plugin SDK v1 Stable Release
Eunjae Lee for Storyblok

Posted on • Updated on

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>;
Enter fullscreen mode Exit fullscreen mode
-type SetContent = (content: TContent | (prevContent: TContent) => TContent) => void;
+type SetContent = (content: TContent) => Promise<FieldPluginData>;
Enter fullscreen mode Exit fullscreen mode

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)})`,
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Manifest file

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

{
  "options": [
    {
      "name": "somePredefinedOption",
      "value": "its value"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

which can be accessed like the following:

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

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

Top comments (2)

Collapse
 
keichinger profile image
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.

Collapse
 
eunjae_lee profile image
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.