Warning!

This project is a fork of this, but deviates from the original project.

Introduction

From Slack's Block Kit documentation:

Block Kit is a UI framework for Slack apps that offers a balance of control and flexibility when building experiences in messages and other surfaces.

Customize the order and appearance of information and guide users through your app's capabilities by composing, updating, sequencing, and stacking blocks — reusable components that work almost everywhere in Slack.

This library provides an OOP interface in PHP for composing messages/modals using Slack Block Kit. It also does the reverse, meaning you can "hydrate" message/modal JSON into an object hierarchy.

Block Kit Concepts

This library helps you build Slack messages programmatically and dynamically in your code, but you need to know how they work generally first. The library does try to prevent you from doing things you are not permitted to do in Block Kit, but it does not validate or guard against every single rule.

You may want to review the following concepts in the Slack documentation:

• Surfaces – There are 3 main types: Message, Modal, and App Home
• Blocks – Includes section, context, actions, and more
• Interactive Components – We call these "Inputs" in this library
• Composition Objects – We call these "Partials" ion the library

In general, we refer to all of the different things in Block Kit collectively as "elements".

Installation

Install easily via Composer:

Then include the Composer-generated autoloader in your project's initialization code.

Note: This library is built for PHP 7.3+.

Basic Usage

This library supports an intuitive and fluid syntax for composing Slack surfaces (e.g., messages, modals). The Kit class acts as a façade to the library, and let's you start new messages/modals.

Fluent Interface

When using the fluent interface, every method that sets a property or adds a sub-element returns the original element's object, so you can chain additional method calls.

Methods with a new prefix will return the new element's object, so be careful with how you are using the fluent interface in those cases.

Tapping

Tapping is a way to keep the fluent interface going, but makes sure the whole message is preserved.

Preview in Block Kit Builder

Slack provides an interactive Block Kit Builder for composing/testing messages and other surfaces. This is a great way to play around with and learn the Block Kit format.

The Kit::preview method allows you to render your message/surface as a Block Kit Builder URL, so you can link to a preview or your message/surface in the browser via their interactive tool. This will help you see how it would be rendered in a Slack client.

Output

And here's the actual Block Kit Builder link.

It will show up in the Block Kit Builder looking something like this:

Surface Hydration

Some Slack application integrations (such as with Modals) require receiving the JSON of an existing surface and then modifying or replacing that surface with another. You can "hydrate" the JSON of a surface (or element) into its object representation using its fromArray method (or fromJson).

Message Formatting

The Formatter class exists to provide helpers for formatting "mrkdwn" text. These helpers can be used so that you don't have to have the Slack mrkdwn syntax memorized. Also, these functions will properly escape <, >, and & characters automatically, if it's needed.

Example:

Example Result:

Virtual Elements

In addition to the standard Block Kit elements, the following are virtual/custom elements composed of one or more blocks:

• TwoColumnTable - Uses Sections with Fields to create a two-column table with an optional header.

Class Structure

The Kit façade provides ways to create surfaces. Surfaces contain one or more blocks. Blocks are the primary element of the Block Kit. Blocks contain other elements, including other blocks, inputs (interactive elements), and partials (element parts that are not uniquely identifiable).

[Kit]-creates>[Surface]
[Surface]^[Message]
[Surface]^[Modal]
[Surface]^[AppHome]
[Surface]^[Attachment]
[Element]^[Surface]
[Element]^[Block]
[Element]^[Input]
[Element]^[Partial]
[Surface]<>->[Block]
[Message]<>->[Attachment]
[Block]<>->[Input]
[Block]<>->[Partial]
[Input]-[note:Examples: Button
DatePicker {bg:cornsilk}]
[Partial]-[note: Examples: Text
Fields {bg:cornsilk}]
[Block]-[note: Examples: Section
Actions {bg:cornsilk}]