From e3ee1022d739afd38ebb128365ee3bcfa2f26104 Mon Sep 17 00:00:00 2001 From: Eden Zimbelman Date: Fri, 26 Jun 2026 16:57:00 -0700 Subject: [PATCH] feat(block-kit): add card block example Mirror the official card block docs example in the Bolt for Python Block Kit examples. example01 builds a full card (icon, title, subtitle, hero image, body, action button); example02 shows a minimal card with only a title and an action button. Docs: https://docs.slack.dev/reference/block-kit/blocks/card-block Co-Authored-By: Claude --- block-kit/README.md | 1 + block-kit/src/blocks/card.py | 52 +++++++++++++++++++++ block-kit/tests/blocks/test_card.py | 71 +++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+) create mode 100644 block-kit/src/blocks/card.py create mode 100644 block-kit/tests/blocks/test_card.py diff --git a/block-kit/README.md b/block-kit/README.md index ee77ff0..32e1466 100644 --- a/block-kit/README.md +++ b/block-kit/README.md @@ -9,6 +9,7 @@ Read the [docs](https://docs.slack.dev/block-kit/) to learn concepts behind thes ### Blocks - **[Actions](https://docs.slack.dev/reference/block-kit/blocks/actions-block)**: Holds multiple interactive elements. [Implementation](./src/blocks/actions.py). +- **[Card](https://docs.slack.dev/reference/block-kit/blocks/card-block)**: Displays a container for related content with an optional image, title, body, and actions. [Implementation](./src/blocks/card.py). - **[Context](https://docs.slack.dev/reference/block-kit/blocks/context-block)**: Provides contextual info, which can include both images and text. [Implementation](./src/blocks/context.py). - **[Context actions](https://docs.slack.dev/reference/block-kit/blocks/context-actions-block)**: Displays actions as contextual info, which can include both feedback buttons and icon buttons. [Implementation](./src/blocks/context_actions.py). - **[Divider](https://docs.slack.dev/reference/block-kit/blocks/divider-block)**: Visually separates pieces of info inside of a message. [Implementation](./src/blocks/divider.py). diff --git a/block-kit/src/blocks/card.py b/block-kit/src/blocks/card.py new file mode 100644 index 0000000..f9f748e --- /dev/null +++ b/block-kit/src/blocks/card.py @@ -0,0 +1,52 @@ +from slack_sdk.models.blocks import ButtonElement, CardBlock, ImageElement +from slack_sdk.models.blocks.basic_components import MarkdownTextObject, PlainTextObject + + +def example01() -> CardBlock: + """ + Displays a card, a container for related content with an optional image, + title, body, and actions. + https://docs.slack.dev/reference/block-kit/blocks/card-block/ + + A full card with an icon, title, subtitle, hero image, body, and an action + button. + """ + block = CardBlock( + icon=ImageElement( # type: ignore[arg-type] + image_url="https://picsum.photos/36/36", + alt_text="Icon", + ), + title=MarkdownTextObject(text="Lumon Industries", verbatim=False), + subtitle=MarkdownTextObject( + text="Committed to work-life balance", verbatim=False + ), + hero_image=ImageElement( # type: ignore[arg-type] + image_url="https://picsum.photos/400/300", + alt_text="Sample hero image", + ), + body=MarkdownTextObject(text="Please enjoy each card equally.", verbatim=False), + actions=[ + ButtonElement( + text=PlainTextObject(text="Action Button", emoji=False), + action_id="button_action", + ), + ], + ) + return block + + +def example02() -> CardBlock: + """ + A minimal card with only a title and an action button. At least one of + hero_image, title, actions, or body is required on a card. + """ + block = CardBlock( + title=MarkdownTextObject(text="Pick your refinement number"), + actions=[ + ButtonElement( + text=PlainTextObject(text="Refine"), + action_id="refine_action", + ), + ], + ) + return block diff --git a/block-kit/tests/blocks/test_card.py b/block-kit/tests/blocks/test_card.py new file mode 100644 index 0000000..226365b --- /dev/null +++ b/block-kit/tests/blocks/test_card.py @@ -0,0 +1,71 @@ +import json + +from src.blocks import card + + +def test_example01(): + block = card.example01() + actual = block.to_dict() + expected = { + "type": "card", + "icon": { + "type": "image", + "image_url": "https://picsum.photos/36/36", + "alt_text": "Icon", + }, + "title": { + "type": "mrkdwn", + "text": "Lumon Industries", + "verbatim": False, + }, + "subtitle": { + "type": "mrkdwn", + "text": "Committed to work-life balance", + "verbatim": False, + }, + "hero_image": { + "type": "image", + "image_url": "https://picsum.photos/400/300", + "alt_text": "Sample hero image", + }, + "body": { + "type": "mrkdwn", + "text": "Please enjoy each card equally.", + "verbatim": False, + }, + "actions": [ + { + "type": "button", + "text": { + "type": "plain_text", + "text": "Action Button", + "emoji": False, + }, + "action_id": "button_action", + } + ], + } + assert json.dumps(actual, sort_keys=True) == json.dumps(expected, sort_keys=True) + + +def test_example02(): + block = card.example02() + actual = block.to_dict() + expected = { + "type": "card", + "title": { + "type": "mrkdwn", + "text": "Pick your refinement number", + }, + "actions": [ + { + "type": "button", + "text": { + "type": "plain_text", + "text": "Refine", + }, + "action_id": "refine_action", + } + ], + } + assert json.dumps(actual, sort_keys=True) == json.dumps(expected, sort_keys=True)