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
Top comments (2)
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.
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.