Changelog

  • Storyblok V2 Beta: Update 7

    Changes in: app Permalink

    In this update of the Storyblok Version 2 Beta we implemented the following improvements:

    Visual Editor

    Visual mode preview on form-only mode

    In the editor, when you switch to form-only mode, the visual editor is minimized and you can still have a visual preview while editing on form-only mode.



  • Storyblok V2 Beta: Update 6

    Changes in: app Permalink

    In this update of the Storyblok Version 2 Beta we implemented the following improvements:

    Switch between V1 and V2

    It's possible to switch between Storyblok V1 and V2 dynamically.

    Visual Editor

    Import / Export Translatable Fields Tools

    The import and export tools are great tools that can be installed in your space to import and export your content to translate it. With the import tool, we added the feature to export content from different languages. The apps were renamed to Import Translatable Fields and Export Translatable to make the name more closely connected to the functionality.

    Discussions mentions

    We added the possibility to mention other team members in discussions. If you mention them in a discussion, they will receive an email with a link to the discussion.

    Edit fields

    As a developer, it's now possible to edit specific fields directly by clicking the edit fields icon.


    App

    My account

    You can now edit all your account details on the new my account page in version 2.

    Signup & Demo Spaces

    When creating a new account, you can now also create a demo space in version 2.


    Create folder

    It's possible to create new stories and folders with the "Create new" button in the content overview, but also inside the editor with the "+" icon on the content browser.

    Coming soon

    Some parts outside the editor are currently still in development, but you can switch to version 1 to use all old functionalities.

    UI Improvements

    • Editor: The sidebar is open now by default in the visual mode

    • Editor: The design of the address bar was updated

    • Editor: The page history moved to the "Publish" button dropdown

    Fixed Bugs

    • Editor: The positioning of the active tab was improved

    • Editor: The preview images of the blocks are visible again

    • Partner Signup: The form fields indication where improved

  • Storyblok V2 Beta: Update 5

    Changes in: app Permalink

    In this update of the Storyblok Version 2 Beta we implemented the following improvements:

    Dimensions

    With the dimensions app, it's easy to handle different variations of content, for example on folder level translations. You will find all the features from version 1, now also in version 2 of the app.

    Storyblok Bridge: Prevent Clicks

    We added an option preventClicks to the Storyblok Bridge, you can find the documentation here. If this option is enabled, your Iframe will prevent default event behaviors, like clicking on a link.

    Signup and 2FA

    This part of the app is not visible on the beta yet, but we already implemented the signup and 2 factor authentication.


    UI Improvements

    • Smaller padding on the visual editor frame

    • Showing the name of your space on the browser tab

    • Multi-asset fields can now be reordered via drag controls

    Fixed Bugs

    • Various Bugs in the asset detail selection were solved

    • Richtext and Markdown fields were reduced in height

    • The animation on the content sidebar was improved when you navigate between blocks

    • Various problems on the workflow comments were solved

    • The scrolling on the open discussion was improved

    • We had to disable Undo / Redo for now because of performance issues

  • Easier to use image service and auto WebP

    Changes in: app Permalink

    In the past, the image service only could have been used by replacing the domain a.storyblok.com with img2.storyblok.com.

    We are thrilled to announce that this is not required anymore. You can now just apply the modifications you want by putting them at the end of the url.

    Original image: https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg

    Resized image: https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x200

    Another big improvement of this method: By appending /m/, the image automatically gets optimized in the WebP format if the browser supports it, leading to a faster loading website.

    To learn more, visit the documentation for the image service here.

  • Scheduled maintenance

    Changes in: mapi Permalink

    On Saturday 30.10.2021 at 23:00 UTC write operations of the management api will be disabled for 2-4 hours due to maintenance work. The delivery api and read operations of the management api will NOT be affected.

  • Renamed filter query operator in_array

    Changes in: Permalink

    The filter query operator in_array has been renamed to any_in_array and we recommend to change the parameter in your api calls.

    The new any_in_array parameter resolves a bug where filters where not applied correctly when using in_array filters with multiple fields. The in_array parameter still will stay active to not break existing implementations.

    See the documentation

  • Storyblok V2 Beta: Update 4

    Changes in: app Permalink

    In this major update of the Storyblok Version 2 Beta we implemented the following features:

    Online Presence

    With the online presence feature, you are now able to see who is currently editing the same content item.

    Workflows

    The workflows feature is a central feature for the Storyblok app and finally made its comeback to the V2 Beta. With workflows, you can set different workflow stages, add comments, notify the users via email about the workflow changes and assign users or roles to specific stages. 

    Page History

    Content is changed over time. With the versions feature, you can see all changes of a content item and roll back to older versions. It allows you to see who made changes and what was changed. 

    Tools

    It's possible to extend the visual editor with custom tools. With this release, the tools will be displayed in their own sidebar.

    Cloudinary Support

    If you handle your assets via Cloudinary, you can use our Cloudinary app to select assets directly inside of Storyblok. We extended the JSON output of the app with some more data from Cloudinary: public_id, width, height, and aspect_ratio

    Block Library Categories

    Inside the block library, you will now be able to filter your blocks by your defined categories.

    Block Browser in Visual Mode

    Our block browser is great to quickly navigate and search the current content item. We now included the block browser in the visual mode, so you can use it wherever you prefer to use it. 

    UI Improvements

    • Story status in the content browser

    • Assets can be tagged now

    • The set width of the content sidebar is stored for the whole session

    • Active language selection is stored per space

    • Scrolling of discussions

    • Scrolling of tabs 

    Fixed Bugs

    • Export for the link component improved

    • Fieldtype boolean inside the Richtext field

    • Custom field type data and asset selection 

    • Full-screen mode for custom field-types

    • Image uploading for partner apps

  • TLS 1.1 Deprecation Warning

    Changes in: api mapi Permalink

    Storyblok’s APIs with the endpoints api.storyblok.com and mapi.storyblok.com will no longer accept connections with TLS 1.1 after 01.12.2021.

    Please test your servers if they have installed the latest ciphers by trying out a connection with the following command:

    curl https://api.storyblok.com --verbose --tlsv1.2 --tls-max 1.2
    
  • Storyblok V2 Beta: Update 3

    Changes in: app Permalink

    In this week's major update of the Storyblok Version 2 Beta we implemented the following improvements:

    Icons for Blocks

    With this feature, it's now possible to use predefined icons and colors for blocks to make them easier to find. You can find this feature in the Block Library in the Config tab of a block.

    Block List Improvements

    If you defined screenshots for your blocks in the block or a preset, they should be visible when adding a new block. It's also possible to filter the list of blocks now.

    UI Improvements

    • Schema for old image and old file were implemented

    • The content browser includes a breadcrumb navigation

    • Permissions: a lock icon is shown if a user does not have permission to access certain content

    Fixed Bugs

    • Content tabs update when a discussion is active in visual mode

    • Richtext and Markdown allow repositioning the cursor in lists

    • Jumping of fields and buttons in Safari were fixed

    • Drag controls for resizing the visual mode were improved

  • Storyblok V2 Beta: Update 2

    Changes in: app Permalink

    In this week's second update of the Storyblok Version 2 Beta, the following improvements were made:

    Fieldtype Group

    The field-type group is now supported. If you have a field-type group, it will get its own tab and not be shown inside that tab where it is defined. If the group shares a field with a tab, the field will be shown inside the tab it's defined in instead of the group tab. The field type group has been available before we released the tabs feature and we recommend you to migrate all your fields to tabs instead of using the groups field.

    Tour

    It's now possible to restart the onboarding tour inside the editor.

    UX Improvements

    • When opening the “Insert block” modal the search input is now focused

    • If a root block doesn't have any fields defined, there will be an empty placeholder

    Fixed Bugs

    • A bug inside the fieldtypes Single-Option and Multi-Options was fixed, where it didn't show the defined options when it was just created

    • A bug inside the Schema of Image(old) was fixes

    • A bug on the content sidebar in visual mode was fixed so it doesn't close when interaction with the visual editor happens. It also stays open, when the block library is opened.

    • A bug inside the fieldtype Markdown was fixed, when toggling between Richtext Preview. Now there are no empty lines between items in unordered and ordered lists.

  • 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>