Go to Slack

Preparing for the launch of Block Kit

Published: Monday, December 3, 2018
APIs

Starting early 2019 the data structure of messages will contain additional new fields on top of all the existing fields your app may be currently expecting.

These additions are arriving with Block Kit - a new set of components for Slack apps that can be combined to create visually rich and compellingly interactive messages. You can read more about Block Kit below.

Even if you aren't using Block Kit to compose messages, its launch will affect the data structure of messages received via our APIs, so read on to learn how to prepare your apps.

What's changing?

Blocks will start appearing in the data structure of messages retrieved via APIs like conversations.history or sent via the Events API.

What will blocks look like?

Block Kit gives Slack apps more visual flexibility and more control over message layout and structure. Here's an example of the kind of message that developers can compose with blocks:

Screenshot of an app published message composed of multiple blocks

Blocks will also introduce more interactive options for app developers. They will provide visually cleaner ways to incorporate buttons or menus, as well as new interactive elements like date pickers or overflow menus.

If you're interested in seeing more of what's coming when Block Kit launches in early 2019, take a look at our blog post or watch the video where we first introduced it.

How do I prepare?

Although Block Kit isn't launching until early 2019, we are giving you this heads up so that you know the structure of messages retrieved via our APIs will be changing too.

A message that includes any blocks will have a new field included, simply called blocks. Depending on how your app is built, you might need to change it to accommodate this new field.

The blocks field is an array of block objects, and can be included at the 'top-level' of a message structure, or within the existing attachments field.

Here's the JSON that could be used to construct the message with the blocks shown in the screenshot above, showing blocks at the top-level of a message:


{ "channel": "C1H9RESGL", "blocks": [ { "type": "section", "block_id": "section295439417", "text": { "type": "mrkdwn", "text": "Hello, Wally!\n*André* wants to know where you'd like to have dinner tonight. Please select a restaurant:" } }, { "type": "section", "block_id": "section42177494", "text": { "type": "mrkdwn", "text": "*Café des Artistes*\n:star::star::star::star: 1528 reviews\n Excellent location for a long conversation with friends and a few glasses of wine. They have something for everyone here." }, "accessory": { "type": "image", "image_url": "https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3Aruue7A/o.jpg", "alt_text": "alt text for image" } }, { "type": "section", "block_id": "section205112062", "text": { "type": "mrkdwn", "text": "*Kin Khao*\n:star::star::star: 1638 reviews\n The sticky rice goes wonderfully with the caramelized pork belly, which is absolutely melt-in-your-mouth and so soft." }, "accessory": { "type": "image", "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/korel-1YjNtFtJlMTaC26A/o.jpg", "alt_text": "alt text for image" } }, { "type": "section", "block_id": "section573300221", "text": { "type": "mrkdwn", "text": "*Ler Ros*\n:star::star::star: 2082 reviews\n I would really recommend the Yum Koh Moo Yang - Spicy lime dressing and roasted quick marinated pork shoulder, basil leaves, chili & rice powder." }, "accessory": { "type": "image", "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/DawwNigKJ2ckPeDeDM7jAg/o.jpg", "alt_text": "alt text for image" } }, { "type": "actions", "block_id": "actions521633010", "elements": [ { "type": "button", "text": { "type": "plaintext", "text": "Café des Artistes", "emoji": true }, "value": "click_me_123", "action_id": "button47806181" }, { "type": "button", "text": { "type": "plaintext", "text": "Kin Khao", "emoji": true }, "value": "click_me_123", "action_id": "button306887175" }, { "type": "button", "text": { "type": "plaintext", "text": "Ler Ros", "emoji": true }, "value": "click_me_123", "action_id": "button567254933" } ] } ] }

And here's a simple example of blocks being included inside an attachments field:

{
    "text": "I am a test message http://slack.com",
    "attachments": [
      {
        "blocks": [
          {
            "type": "image",
            "title": {
              "type": "plaintext",
              "text": "Hang in there"
            },
            "block_id": "image575160834",
            "image_url": "https://images.pexels.com/photos/257532/pexels-photo-257532.jpeg",
            "alt_text": "hang_in_there"
          }
        ]
      }
    ]
}

These examples show some of the available blocks, but your app only needs to be prepared for the existence of the blocks array. Further details about each of the block objects, and the fields within them, will be shared once Block Kit has launched.

What if I do nothing?

If your app doesn't receive messages, either directly via a Web API like conversations.history or indirectly when it gets pings from the Events API, then nothing is exactly what you should do!

If it does receive messages, then your code might be assuming a specific format or structure of JSON response, and the addition of the blocks field could cause some code comprehension consternation.

If your app only publishes messages, don't worry - Block Kit is an additive change, and will not break any existing message composition options.

When does this happen?

Block Kit is a really exciting addition to our visual and interactive toolset, but it's not quite ready yet. We're planning to launch in late January to early February of 2019. Your apps should be prepared to receive the new blocks field by then.

Alongside this launch, we'll have great documentation so you can learn how to use blocks, and a new visual tool that will let you prototype the look and feel of messages before you start writing code.

Keep an eye on the main changelog for more updates about Block Kit.

Review other recent updates