Changelog

  • Storyblok V2 Beta: Update 1

    Changes in: app Permalink

    One week ago we released the invitation only beta version of our V2 app and since then we have already made a lot of improvements:

    Content Sidebar

    The button for the content sidebar in visual mode moved to the right of the header. The sidebar is now to the right of the content and not overlaying it. If you prefer the sidebar to be overlaying, you can still choose this option in the options menu.

    Assets

    We added the search functionality to the asset modal, so now you can quickly find the asset you are looking for.

    Block Library

    The last missing schemas for the definition of fields were added to the block library. We completed the schemas for the following fields: Richtext, Single and Muti-Asset, Link, Image (old), Markdown, Single and Multi-Option, File (old), Number, Date / Time, Table, Plugin

    Fixed Bugs

    • Improved interaction with discussion fields

    • Display of content in Richtext field

    • Going back to spaces

    • Display of thumbnails

    • Display of errors

    • Dragging of the content sidebar

    • Navigation between tabs

  • blockId and userId in plugins

    Changes in: app Permalink

    Two new properties got added to our custom field types.

    • blockId : uid of the blok the field type plugin is active in
    • userId : id of the user that is currently using the interface
    pluginCreated() {
      console.log('plugin:created', this.blockId, this.userId)
}

    This will allow you to use the management API to access a list of collaborators and match with other information if needed to show in your custom field type. For that we recommend using a server side function (Lambda at AWS, …) to not have your management API token exposed to your internal users.

    In order for the blockId to be visible, you need to be inside the Visual Editor, since our plugin editor will not have a blockId.

  • Scheduled Maintenance

    Changes in: Permalink

    On Saturday 10.04.2021 from 01:00 until 02:00 UTC write operations of the management api will be disabled due to maintenance work. The delivery api and read operations of the management api will NOT be affected.

  • Resolve relations in nested GraphQL query

    Changes in: gapi Permalink

    It’s now possible to resolve one more level of relations with Storyblok’s GraphQL API. This lets you receive your data with less requests.

    The example below shows a query where you have an author single option field inside the page item. The author content type has also a single option field called “group” which can be resolved with the resolve_relations parameter.

    {
  PageItem(id: "test") {
    id
    content {
      author(resolve_relations: "author.group") {
        content
        name
      }
    }
  }
}

  • Storyblok Bridge V2 Beta

    Changes in: app Permalink

    We are proud to announce that the Storyblok Javascript Bridge Version 2 has been released as beta version.

    You can use it by using the new path app.storyblok.com/f/storyblok-v2-latest.js and by changing the init function to a class instantiation.

    The new bridge has a lot of new features and works best with Javascript frameworks like Nuxt, Gatsby, Gridsome, Next, Vuejs, React and much more.

    Features

    • Breadcrumbs navigation

    • Add block before/after (only if registering input event)

    • Move block (only if registering input event)

    • Duplicate block (only if registering input event)

    • Delete block (only if registering input event)

    How to upgrade?

    If you want to upgrade from the Bridge Version 1 to the Version 2 you need to adapt following parts of your application:

    1. New path to the Javascript Bridge

    Instead of

    <script src="https://app.storyblok.com/f/storyblok-latest.js?t=123"></script>

    use

    <script src="https://app.storyblok.com/f/storyblok-v2-latest.js"></script>

    2. Class instantiation instead of init call

    Instead of

    storyblok.init()

storyblok.on('change', () => {})

    use

    const storyblokInstance = new StoryblokBridge()

storyblokInstance.on('change', () => {})

    3. Resolve relationships and add comments

    Instead of

    storyblok.on('input', (payload) => {
  storyblok.addComments(payload.story)
  storyblok.resolveRelations(['blog-post.author'])
})

    use

    const storyblokInstance = new StoryblokBridge({
  resolveRelations: ['blog-post.author']
})

storyblokInstance.on('input', (payload) => {
  // addComments is not required anymore
})

    Examples:

    Client side rendered pages:

    const storyblokInstance = new StoryblokBridge()

storyblokInstance.on('input', (payload) => {
  console.log('Content changed', payload.story.content)
  // Handle re-rendering
})

storyblokInstance.on('change', (payload) => {
  // Load draft version of story
})

// Call ping editor to see if in editor
storyblokInstance.pingEditor(() => {
  if (storyblokInstance.isInEditor()) {
    // Load draft version of story
  } else {
    // Load published version of story
  }
})

    Server rendered pages:

    storyblokInstance = new StoryblokBridge()
storyblokInstance.on(['change', 'published'], function() {
  window.location.reload()
})

  • Azure AD group roles

    Changes in: app mapi Permalink

    It’s now possible to automatically assign a specific user role and space when using SSO with Microsoft Azure AD. To configure the role mapping define the Azure group id in the “External id” field.

    Azure group id

  • Required asset fields

    Changes in: app Permalink

    It's now possible to force the user to fill out the field "Alt", "Title" and "Copyright". You can configure the fields in the space settings area.

  • Advanced Path App: translated slug on folder

    Changes in: app Permalink

    The Advanced Path app got an update which now allows you to access use {{folder.translated_slug}} in your Real Path configurations.

    This solves: https://github.com/storyblok/storyblok/issues/261.

  • Datasource entry saved webhook

    Changes in: mapi app Permalink

    It’s now possible to define a webhook for changes of datasource entries.

    Datasource entry saved

  • GraphQL speed improvements

    Changes in: gapi Permalink

    Storyblok's GraphQL api just got huge performance improvements and the possibility to use automatic persisted queries which will save you a lot of traffic.

    Improvements:

    Usage example in Next.js of persisted queries:

    To use automatic persisted queries you need to add the library apollo-link-persited-queries like done in the Next.js example https://github.com/storyblok/nextjs-persisted-query-graphql-example.

    import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import withApollo from 'next-with-apollo'
import { createHttpLink } from 'apollo-link-http'
import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
import fetch from 'isomorphic-unfetch'

const GRAPHQL_URL = 'https://gapi.storyblok.com/v1/api'

const link = createPersistedQueryLink({useGETForHashedQueries: true}).concat(createHttpLink({
  fetch, // Switches between unfetch & node-fetch for client & server.
  uri: GRAPHQL_URL,
  headers: {
    'Token': 'YOUR_TOKEN',
    'Version': 'published',
    'Accept': 'application/json'
  }
}))

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      link: link,
      cache: new InMemoryCache()
        //  rehydrate the cache using the initial data passed from the server:
        .restore(initialState || {})
    })
)

  • Rollback migration

    Changes in: open-source Permalink

    With the Storyblok CLI v3.4.0 it's now possible to rollback the latest content migration: https://github.com/storyblok/storyblok#rollback-migration

  • Webhook logs

    Changes in: app mapi Permalink

    It's now possible to show a log of your webhook executions and retry the call if it failed. Check it out by going to the webhooks section on the space settings page and clicking the link "View logs".

  • Resolve relations with Storyblok Bridge

    Changes in: app Permalink

    It’s now possible to resolve relations with the live updates from the input event of the Storyblok Javascript bridge.

    If you call the function resolveRelations the relations provided as second argument will be solved.

    How to use?

    You can use the storyblok bridge function .resolveRelations.

    window.storyblok.resolveRelations(storyObject, relationsToResolve, callbackWhenResolved) 

    in callback of the input event after the addComments function.

    Example

    window.storyblok.on('input', (event) => {
  window.storyblok.addComments(event.story.content, event.story.id)
  window.storyblok.resolveRelations(event.story, ['blog.author', 'blog.categories'], () => {
    // event.story.content has now the resolved relations
    // this.content = event.story.content
  })
})

  • Allow administrators to publish on a workflow stage

    Changes in: mapi app Permalink

    It's now possible to allow set the publishing right of a workflow stage to administrators or all users.

  • New fieldtype Table

    Changes in: app api mapi Permalink

    We are happy to announce the new field type "Table" which gives you an easy to use interface to manage tabular data.

    Following an example of how to render a table from the data of the table field type:

    <table>
  <thead>
    <tr>
      {%- for th in blok.table.thead -%}
        <th>{{ th.value }}</th>
      {%- endfor -%}
    </tr>
  </thead>
  <tbody>
    {%- for tr in blok.table.tbody -%}
      <tr>
        {%- for td in tr.body -%}
          <td>{{ td.value }}</td>
        {%- endfor -%}
      </tr>
    {%- endfor -%}
  </tbody>
</table>

  • Markdown/HTML to Richtext converter

    Changes in: open-source Permalink

    We have published a new npm module that let's you convert Markdown and HTML into Storyblok's Richtext field format.

    Check it out here: https://github.com/storyblok/storyblok-markdown-richtext

    There is also an example of how to use it with our migration CLI to transform fields: https://github.com/storyblok/storyblok#2-transform-a-markdown-field-into-a-richtext-field

  • Content migrations CLI

    Changes in: open-source Permalink

    We added an awesome new feature to the Storyblok CLI 3.0.

    With content migrations you can easily change data of all your content with the commands storyblok generate-migration and storyblok run-migration. The run-migration command has also a dry-run mode to only show changes. In the near future it will also be possible to rollback changes.

    Read more at our Github Repo: https://github.com/storyblok/storyblok#content-migrations

  • Securing webhooks

    Changes in: app mapi Permalink


    It's now possible to secure your webhooks via a signature check.

    More:

    For more information please read the documentation: https://www.storyblok.com/docs/Guides/using-storyblok-webhooks#securing-your-webhooks

  • Asset field added to GraphQL api

    Changes in: gapi Permalink

    • The type definitions of the Multi-Assets field have been extended to include the new attributes id, title, copyright, focus and alt.

    • The type definitions for the new Asset field have been added. You can now define the query with yourfield { id, name, filename, title, copyright, focus and alt }

  • Default full slug

    Changes in: api Permalink

    To generate hreflang alternative tags without needing to do a second api request we added the attribute "default_full_slug" to the delivery api. Read more at https://github.com/storyblok/storyblok/issues/268.

  • Payment receipt via email

    Changes in: app mapi Permalink

    You will now receive a payment receipt with a link to the invoice via email to the email address defined in your billing details.

  • New app released: Content locking

    Changes in: Permalink

    The app "Content Locking" has been released to avoid conflicts when multiple users want to edit a content item.

    Features

    • The first user that starts editing locks the content item for others

    • Only allows saving for the editor

    • Unlocks the item when the editor disconnects or closes the content item

    When installing the app a “Locked” symbol will appear for users if someone is editing the content item.

  • New fieldtype Asset

    Changes in: app Permalink

    We are happy to announce the new field type "Asset". We put a lot of community feedback into the new field that replaces the "Image" and "File" field-types.

    Features

    • Set alt-tag, title and copyright information by clicking on the filename

    • Image preview

    • Possibility to add description

    • Restrict to specific filetypes

    • Select default asset folder for upload

    • Set focus point for images

    • Change filename before upload confirmation

    Following a preview of the schema configuration options of this field.

  • Focus point for images

    Changes in: app Permalink

    It's now possible to set a focus point for images in the asset manager.

  • Pre-upload filename changing

    Changes in: app Permalink

    It's now possible to change the filename and see a preview before starting the asset upload.

Changelogs